/* Home-page intro: finger outline fades in heavenward, name tracks in, then panels open.
   Only runs when assets/js/intro.js adds html.intro-on. Without JS, with reduced motion, or for crawlers it never shows. */
.intro{display:none}
html.intro-on{overflow:hidden}
html.intro-on .intro{display:block;position:fixed;inset:0;z-index:1000;overflow:hidden;color:var(--ink);animation:intro-failsafe 0s linear 5.6s forwards}
.intro-panel{position:absolute;top:0;bottom:0;width:50.2%;background:var(--bg);will-change:transform}
.intro-panel.l{left:0}
.intro-panel.r{right:0}
.intro-panel.l::after,.intro-panel.r::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,var(--sky),#7db8ee,transparent);opacity:0}
.intro-panel.l::after{right:0}
.intro-panel.r::after{left:0}
.intro-glow{position:absolute;inset:0;background:radial-gradient(ellipse 55% 45% at 50% 42%,rgba(74,144,217,.28),rgba(125,184,238,.1) 42%,transparent 70%);opacity:0}
.intro-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.55rem,2.2vh,1.1rem);padding:1rem}
.intro-art{width:min(42vw,220px);height:auto;overflow:visible;filter:drop-shadow(0 0 14px rgba(74,144,217,.45));opacity:0;transform:translateY(18px) scale(.92)}
.intro-art .finger{opacity:1}
.intro-name{margin:0;font:700 clamp(1.2rem,5vw,1.85rem)/1.15 var(--serif);letter-spacing:.12em;text-indent:.12em;white-space:nowrap;opacity:0;color:var(--navy-2);text-align:center}
.intro-line{width:min(48vw,200px);height:2px;background:linear-gradient(90deg,transparent,var(--sky),#7db8ee,transparent);transform:scaleX(0);opacity:0}
.intro-tag{margin:0;font:600 clamp(.78rem,2.4vw,.92rem)/1.2 var(--font);letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;color:var(--muted);opacity:0;text-align:center}
.intro-skip{position:absolute;right:1rem;bottom:1rem;z-index:2;min-height:44px;min-width:44px;padding:.5rem 1rem;border:1px solid var(--line);border-radius:999px;background:rgba(251,247,239,.88);color:var(--muted);font:600 .85rem var(--font);cursor:pointer;opacity:0;animation:intro-fade .4s ease 1s forwards}
.intro-skip:hover,.intro-skip:focus-visible{color:var(--navy-2);border-color:var(--sky);outline:2px solid var(--sky);outline-offset:2px}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .intro-name{background-image:linear-gradient(100deg,var(--navy-2) 36%,var(--sky) 48%,#7db8ee 54%,var(--navy-2) 66%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}

/* timeline (~4.4s; ~1s hold after tag before panels open) */
html.intro-on .intro-glow{animation:intro-glow 2.5s ease-out .1s forwards,intro-fadeout .4s ease 3.7s forwards}
html.intro-on .intro-art{animation:intro-finger 1.05s cubic-bezier(.2,.85,.3,1) .2s forwards}
html.intro-on .intro-line{animation:intro-line .7s ease-out 1.25s forwards}
html.intro-on .intro-name{animation:intro-name .95s cubic-bezier(.2,.8,.2,1) 1.2s forwards,intro-sweep .95s ease-in-out 1.55s forwards}
html.intro-on .intro-tag{animation:intro-fade .65s ease 1.75s forwards}
html.intro-on .intro-stage{animation:intro-stage-out .45s ease-in 3.65s forwards}
html.intro-on .intro-panel.l{animation:intro-open-l .7s cubic-bezier(.7,0,.2,1) 3.8s forwards}
html.intro-on .intro-panel.r{animation:intro-open-r .7s cubic-bezier(.7,0,.2,1) 3.8s forwards}
html.intro-on .intro-panel::after{animation:intro-edge .7s ease 3.8s forwards}

/* skipping: jump straight to the split-open */
html.intro-on .intro.skip .intro-stage{animation:intro-stage-out .25s ease-in 0s forwards}
html.intro-on .intro.skip .intro-glow{animation:intro-fadeout .25s ease 0s forwards}
html.intro-on .intro.skip .intro-panel.l{animation:intro-open-l .55s cubic-bezier(.7,0,.2,1) .15s forwards}
html.intro-on .intro.skip .intro-panel.r{animation:intro-open-r .55s cubic-bezier(.7,0,.2,1) .15s forwards}
html.intro-on .intro.skip .intro-panel::after{animation:intro-edge .55s ease .15s forwards}
html.intro-on .intro.skip .intro-skip{animation:none;opacity:0}

@keyframes intro-finger{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes intro-line{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes intro-name{from{opacity:0;letter-spacing:.32em;text-indent:.32em}to{opacity:1;letter-spacing:.08em;text-indent:.08em}}
@keyframes intro-sweep{from{background-position:100% 0}to{background-position:0 0}}
@keyframes intro-fade{from{opacity:0}to{opacity:1}}
@keyframes intro-fadeout{to{opacity:0}}
@keyframes intro-glow{0%{opacity:0}40%{opacity:1}100%{opacity:.7}}
@keyframes intro-stage-out{to{opacity:0;transform:scale(1.06)}}
@keyframes intro-open-l{to{transform:translateX(-102%)}}
@keyframes intro-open-r{to{transform:translateX(102%)}}
@keyframes intro-edge{0%{opacity:.85}100%{opacity:0}}
@keyframes intro-failsafe{to{visibility:hidden;pointer-events:none}}

@media (prefers-reduced-motion:reduce){html.intro-on .intro,.intro{display:none!important}html.intro-on{overflow:auto}}
@media (forced-colors:active){.intro{display:none!important}}