/* ============ Soofi wordmark + infinity loader ============ */

/* The wordmark: S + two rings (the "oo") + fi.
   Everything is em-based so one font-size scales the whole mark. */
.sd-logo{display:inline-flex;align-items:center;font-family:var(--h);font-weight:800;
  letter-spacing:-.045em;line-height:1;color:var(--ink);white-space:nowrap;
  font-size:22px;text-decoration:none}
/* The two rings ARE the o's, so they have to hold the same visual weight as the
   800-weight letters beside them: stroke matched to the stem, diameter slightly
   over x-height (round shapes need overshoot to look the same size as flat ones),
   and nudged down because the x-height band sits below the line box centre. */
/* Ring geometry is measured from the real Plus Jakarta Sans 800 "o":
   bowl 0.585 x 0.570em (wider than tall), stroke 0.160em, and the bowl centre
   sits 0.047em below the line-box centre. Matching those makes the rings read
   as letters rather than as icons dropped into a word. */
.sd-logo__oo{display:inline-flex;align-items:center;margin:0 .03em;
  transform:translateY(.047em)}
.sd-logo__o{width:.585em;height:.57em;border-radius:50%;box-sizing:border-box;
  border:.16em solid currentColor;display:block;
  transition:border-color .35s ease,margin .45s cubic-bezier(.16,1,.3,1)}
.sd-logo__o--a{margin-right:.045em}   /* the sidebearing between two real o's */
.sd-logo__o--b{border-color:var(--accent)}
/* hover opens the pair, a quiet nod to the loader */
.sd-logo-wrap:hover .sd-logo__o--a{margin-right:.11em}
.sd-logo__sub{display:block;font:500 10.5px/1 var(--b);color:var(--muted);
  letter-spacing:.11em;text-transform:uppercase;margin-top:6px}
.sd-logo-wrap{display:inline-flex;flex-direction:column;align-items:flex-start}

/* ---- loader ---- */
.sd-load{position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:grid;place-items:center;transition:opacity .55s ease,visibility .55s ease}
.sd-load.is-done{opacity:0;visibility:hidden;pointer-events:none}
.sd-load__in{display:inline-flex;align-items:center;font-family:var(--h);font-weight:800;
  letter-spacing:-.045em;line-height:1;color:var(--ink);font-size:clamp(44px,8vw,76px)}
.sd-load__s,.sd-load__fi{opacity:0;transition:opacity .5s ease .05s}
.sd-load.is-set .sd-load__s,.sd-load.is-set .sd-load__fi{opacity:1}
.sd-load__oo{display:inline-flex;align-items:center;margin:0 .03em;transform:translateY(.047em)}
.sd-load__o{width:.585em;height:.57em;border-radius:50%;box-sizing:border-box;
  border:.16em solid currentColor;display:block;margin-right:.045em;
  animation:sd-inf .85s cubic-bezier(.45,.05,.55,.95) 2 both}
.sd-load__o--2{border-color:var(--accent);animation-delay:-.2125s}
.sd-load__glow{position:absolute;width:min(60vw,420px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(242,107,58,.17),transparent 70%);
  pointer-events:none;animation:sd-pulse 1.7s ease-in-out infinite}

@keyframes sd-pulse{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.06);opacity:1}}

/* Bernoulli lemniscate: a true figure-8 that closes exactly at the ring's home slot. */
@keyframes sd-inf{
  0%{transform:translate(0.000em,0.000em)}
  4.167%{transform:translate(0.134em,-0.129em)}
  8.333%{transform:translate(0.286em,-0.247em)}
  12.5%{transform:translate(0.471em,-0.333em)}
  16.67%{transform:translate(0.693em,-0.346em)}
  20.83%{transform:translate(0.905em,-0.234em)}
  25%{transform:translate(1.000em,0.000em)}
  29.17%{transform:translate(0.905em,0.234em)}
  33.33%{transform:translate(0.693em,0.346em)}
  37.5%{transform:translate(0.471em,0.333em)}
  41.67%{transform:translate(0.286em,0.247em)}
  45.83%{transform:translate(0.134em,0.129em)}
  50%{transform:translate(0.000em,0.000em)}
  54.17%{transform:translate(-0.134em,-0.129em)}
  58.33%{transform:translate(-0.286em,-0.247em)}
  62.5%{transform:translate(-0.471em,-0.333em)}
  66.67%{transform:translate(-0.693em,-0.346em)}
  70.83%{transform:translate(-0.905em,-0.234em)}
  75%{transform:translate(-1.000em,0.000em)}
  79.17%{transform:translate(-0.905em,0.234em)}
  83.33%{transform:translate(-0.693em,0.346em)}
  87.5%{transform:translate(-0.471em,0.333em)}
  91.67%{transform:translate(-0.286em,0.247em)}
  95.83%{transform:translate(-0.134em,0.129em)}
  100%{transform:translate(0.000em,0.000em)}
}

/* Anyone who prefers less motion gets the finished mark, no loop. */
@media(prefers-reduced-motion:reduce){
  .sd-load__o{animation:none}
  .sd-load__glow{animation:none}
  .sd-load__s,.sd-load__fi{opacity:1}
}