/* The overlay never hides, pauses or moves the hero underneath it. */
.fonday-intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:var(--hero-bg);color:var(--ink);animation:intro-away 2.4s linear both,intro-release 2.4s steps(1,end) both}
.intro-content{display:grid;justify-items:center;gap:18px;text-align:center;padding:24px;width:100%}
.intro-ring{position:relative;width:clamp(240px,46vh,440px);aspect-ratio:1;animation:intro-open .45s var(--ease) 1.95s both}
.intro-dial{width:100%;height:100%;fill:none;stroke:var(--ink);transform:rotate(-90deg)}
.intro-dial .ticks{stroke-width:3;stroke-dasharray:.4 4.2;opacity:.8}
.intro-dial .hair{stroke-width:.6;opacity:.3}
/* Requested dial draw is the sole stroke animation; all other intro motion is transform/opacity. */
.intro-reveal{vector-effect:none;stroke:var(--surface);stroke-width:12;stroke-dasharray:1;stroke-dashoffset:1;animation:intro-draw .7s var(--ease) both}
.intro-orbit{position:absolute;inset:4.5%;animation:intro-orbit .8s var(--ease) .2s both;transform:rotate(var(--stop))}
.intro-orbit i{position:absolute;left:50%;top:0;width:18px;height:18px;margin:-9px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 4px var(--surface)}
.intro-orbit.brand{--stop:0deg;--dot:var(--p-brand)}
.intro-orbit.pro{--stop:120deg;--dot:var(--p-pro)}
.intro-orbit.me{--stop:240deg;--dot:var(--p-me)}
.intro-word{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(34px,4.6vw,60px);line-height:1;font-weight:850;letter-spacing:-.075em;animation:intro-in .5s var(--ease) .6s both,intro-out .22s ease-in 1.9s forwards}
.intro-tag{font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--muted);animation:intro-in .5s var(--ease) .9s both}
.intro-line{font-size:clamp(20px,2.4vw,30px);font-weight:700;letter-spacing:-.04em;animation:intro-in .5s var(--ease) 1.1s both}
.fonday-intro.leaving{animation:intro-skip .2s ease-out both;pointer-events:none}
@keyframes intro-draw{to{stroke-dashoffset:0}}
@keyframes intro-orbit{from{transform:rotate(calc(var(--stop) - 150deg));opacity:0}20%{opacity:1}to{transform:rotate(var(--stop));opacity:1}}
@keyframes intro-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes intro-open{from{transform:scale(1);opacity:1}to{transform:scale(1.8);opacity:0}}
@keyframes intro-away{0%,81.25%{opacity:1}100%{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes intro-release{from{pointer-events:auto}to{pointer-events:none}}
@keyframes intro-skip{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.fonday-intro{display:none;pointer-events:none}}
html[data-pal="c"] .fonday-intro::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 65%,color-mix(in srgb,var(--bg) 92%,transparent),transparent)}
html[data-pal="c"] .intro-content{position:relative}
html[data-pal="c"] .intro-tag{color:var(--ink)}
/* Exit in two beats so the intro line never overlaps the hero h1: content leaves first, then the veil. */
.intro-content>:not(.intro-ring){animation-name:intro-in,intro-out;animation-duration:.5s,.22s;animation-delay:var(--in),1.9s;animation-fill-mode:both,forwards;animation-timing-function:var(--ease),ease-in}
.intro-tag{--in:.9s}.intro-line{--in:1.1s}
@keyframes intro-out{to{opacity:0;transform:translateY(-8px)}}
.intro-orbit em{position:absolute;left:50%;top:-34px;transform:translateX(-50%) rotate(calc(-1 * var(--stop)));font-style:normal;font-size:13px;font-weight:750;white-space:nowrap;color:var(--ink);opacity:0;animation:intro-fade .4s ease 1.05s forwards}
@keyframes intro-fade{to{opacity:1}}
.intro-orbit.pro em,.intro-orbit.me em{top:22px}