/* Home-page intro: "<" and ">" slide together into a diamond, R and G appear inside it, the name tracks in, then the screen splits 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 4.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(--accent),var(--ring),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% 48%,rgba(255,107,94,.22),rgba(255,209,102,.06) 45%,transparent 70%);opacity:0}
.intro-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.6rem,2.5vh,1.2rem);padding:1rem}
.intro-art{width:min(72vw,340px);height:auto;overflow:visible;filter:drop-shadow(0 0 10px rgba(255,107,94,.45))}
.intro-art .chev{fill:none;stroke:url(#intro-grad);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.intro-art .ring{fill:none;stroke:var(--ring);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.intro-art .ltr{font:800 66px/1 var(--font);letter-spacing:-.02em;fill:var(--ink);opacity:0}
.intro-art .ltr.g{fill:var(--accent)}
.intro-name{margin:0;font:800 clamp(1.25rem,5.2vw,2rem)/1 var(--font);text-transform:uppercase;letter-spacing:.7em;text-indent:.7em;white-space:nowrap;opacity:0;color:var(--ink)}
.intro-line{width:min(52vw,220px);height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--ring),transparent);transform:scaleX(0);opacity:0}
.intro-tag{margin:0;font:500 clamp(.8rem,2.6vw,.95rem)/1.2 var(--font);letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;color:var(--muted);opacity:0}
.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(18,20,26,.7);color:var(--muted);font:600 .85rem var(--font);cursor:pointer;opacity:0;animation:intro-fade .4s ease 1s forwards}
.intro-skip:hover{color:var(--ink);border-color:var(--muted)}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .intro-name{background-image:linear-gradient(100deg,var(--ink) 38%,var(--ring) 48%,var(--accent) 52%,var(--ink) 62%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}

/* timeline (about 3.2s) */
html.intro-on .intro-glow{animation:intro-glow 2.4s ease-out .1s forwards}
html.intro-on .chev.l{animation:intro-slide-l .95s cubic-bezier(.16,.84,.3,1) .15s forwards,intro-draw .8s ease-out .15s forwards}
html.intro-on .chev.r{animation:intro-slide-r .95s cubic-bezier(.16,.84,.3,1) .15s forwards,intro-draw .8s ease-out .15s forwards}
html.intro-on .ring{animation:intro-ring .8s ease-out 1.05s forwards}
html.intro-on .ltr.r{animation:intro-ltr-l .6s cubic-bezier(.2,.9,.3,1) 1.0s forwards}
html.intro-on .ltr.g{animation:intro-ltr-r .6s cubic-bezier(.2,.9,.3,1) 1.1s forwards}
html.intro-on .intro-line{animation:intro-line .7s ease-out 1.45s forwards}
html.intro-on .intro-name{animation:intro-name .9s cubic-bezier(.2,.8,.2,1) 1.4s forwards,intro-sweep .9s ease-in-out 1.7s forwards}
html.intro-on .intro-tag{animation:intro-fade .6s ease 1.9s forwards}
html.intro-on .intro-stage{animation:intro-stage-out .45s ease-in 2.55s forwards}
html.intro-on .intro-panel.l{animation:intro-open-l .7s cubic-bezier(.7,0,.2,1) 2.7s forwards}
html.intro-on .intro-panel.r{animation:intro-open-r .7s cubic-bezier(.7,0,.2,1) 2.7s forwards}
html.intro-on .intro-panel::after{animation:intro-edge .7s ease 2.7s forwards}
html.intro-on .intro-glow{animation:intro-glow 2.4s ease-out .1s forwards,intro-fadeout .4s ease 2.6s 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-slide-l{from{transform:translateX(-170px);opacity:0}15%{opacity:1}to{transform:translateX(0);opacity:1}}
@keyframes intro-slide-r{from{transform:translateX(170px);opacity:0}15%{opacity:1}to{transform:translateX(0);opacity:1}}
@keyframes intro-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes intro-ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
@keyframes intro-ltr-l{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:translateX(0)}}
@keyframes intro-ltr-r{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:translateX(0)}}
@keyframes intro-line{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes intro-name{from{opacity:0;letter-spacing:.9em;text-indent:.9em}to{opacity:1;letter-spacing:.34em;text-indent:.34em}}
@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:.75}}
@keyframes intro-stage-out{to{opacity:0;transform:scale(1.08)}}
@keyframes intro-open-l{to{transform:translateX(-102%)}}
@keyframes intro-open-r{to{transform:translateX(102%)}}
@keyframes intro-edge{0%{opacity:.9}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}}