/* INFI8 app intro (about 1.9s). Every delay is offset by --io so a redirect can continue the same timeline. */
#intro{display:none}
html.intro-on body{overflow:hidden}
html.intro-on #intro{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;overflow:hidden;pointer-events:auto;
  background:linear-gradient(180deg,#000000 0%,#000001 10%,#000102 20%,#000203 30%,#000305 40%,#000508 50%,#00080c 60%,#000a10 70%,#010e13 80%,#011117 90%,#01141b 100%);
  animation:io-exit .42s cubic-bezier(.7,0,.84,0) calc(var(--io,0ms) + 1480ms) both}
html.intro-on.intro-skip #intro{animation:io-exit .22s ease-in 0ms both}
.intro-glow{position:absolute;left:calc(50% - min(35vw,260px));top:calc(50% - min(35vw,260px));width:min(70vw,520px);height:min(70vw,520px);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(227,245,49,.2),rgba(227,245,49,.06) 46%,rgba(227,245,49,0) 72%);
  animation:io-glow .95s ease-out calc(var(--io,0ms) + 560ms) both}
.intro-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px;width:min(39vw,280px);
  animation:io-stage 1.48s cubic-bezier(.2,.7,.2,1) calc(var(--io,0ms) + 0ms) both,io-zoomout .42s cubic-bezier(.7,0,.84,0) calc(var(--io,0ms) + 1480ms) forwards}
.intro-logo{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 7px rgba(227,245,49,.26));
  animation:io-logoglow .75s ease-out calc(var(--io,0ms) + 760ms) both}
.intro-logo path{transform-box:fill-box;transform-origin:center}
.io-s{animation:io-seg .3s linear both,io-flash .36s ease-out calc(var(--io,0ms) + 800ms) both}
.io-s1{animation-delay:calc(var(--io,0ms) + 120ms),calc(var(--io,0ms) + 800ms)}
.io-s2{animation-delay:calc(var(--io,0ms) + 180ms),calc(var(--io,0ms) + 800ms)}
.io-s3{animation-delay:calc(var(--io,0ms) + 240ms),calc(var(--io,0ms) + 800ms)}
.io-s4{animation-delay:calc(var(--io,0ms) + 300ms),calc(var(--io,0ms) + 800ms)}
.io-s5{animation-delay:calc(var(--io,0ms) + 360ms),calc(var(--io,0ms) + 800ms)}
.io-s6{animation-delay:calc(var(--io,0ms) + 420ms),calc(var(--io,0ms) + 800ms)}
.io-s7{animation-delay:calc(var(--io,0ms) + 480ms),calc(var(--io,0ms) + 800ms)}
.io-l{animation:io-slash .46s cubic-bezier(.16,1,.3,1) both}
.io-l1{animation-delay:calc(var(--io,0ms) + 360ms)}.io-l2{animation-delay:calc(var(--io,0ms) + 420ms)}
.io-l3{animation-delay:calc(var(--io,0ms) + 480ms)}.io-l4{animation-delay:calc(var(--io,0ms) + 540ms)}
.io-dot{animation:io-pop .32s cubic-bezier(.3,1.6,.5,1) calc(var(--io,0ms) + 700ms) both}
.io-q{animation:io-stamp .3s cubic-bezier(.2,1.5,.4,1) both}
.io-q1{animation-delay:calc(var(--io,0ms) + 900ms)}.io-q2{animation-delay:calc(var(--io,0ms) + 960ms)}
.io-shine{animation:io-sweep .56s cubic-bezier(.45,0,.2,1) calc(var(--io,0ms) + 1020ms) both}
.intro-bar{width:100%;height:2px;border-radius:2px;overflow:hidden;background:rgba(227,245,49,.16);
  animation:io-fade .26s ease-in calc(var(--io,0ms) + 1280ms) forwards}
.intro-bar i{display:block;height:100%;background:#e3f531;box-shadow:0 0 8px rgba(227,245,49,.8);transform-origin:left center;
  animation:io-bar 1.15s cubic-bezier(.65,0,.35,1) calc(var(--io,0ms) + 120ms) both}
.intro-tag{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%);margin:0;color:#e3f531;font:600 11px/1 "Noto Sans KR","Malgun Gothic",system-ui,sans-serif;text-transform:uppercase;white-space:nowrap;
  animation:io-tag .6s cubic-bezier(.2,.7,.2,1) calc(var(--io,0ms) + 950ms) both}
.intro-slogan{position:absolute;left:50%;top:calc(100% + 42px);margin:0;transform:translateX(-50%);color:#f4f5f0;font:500 15px/1.4 "Noto Sans KR","Malgun Gothic",system-ui,sans-serif;letter-spacing:.04em;white-space:nowrap;
  animation:io-slogan .85s cubic-bezier(.4,0,.2,1) calc(var(--io,0ms) + 650ms) both}
@keyframes io-slogan{0%{opacity:0;transform:translate(-50%,8px);filter:blur(6px)}100%{opacity:.94;transform:translate(-50%,0);filter:blur(0)}}
@keyframes io-seg{0%{opacity:0}18%{opacity:1}32%{opacity:.22}48%{opacity:1}62%{opacity:.55}100%{opacity:1}}
@keyframes io-flash{0%{fill:#e3f531}38%{fill:#fbffd6}100%{fill:#e3f531}}
@keyframes io-slash{0%{opacity:0;transform:translateX(-130px) skewX(-16deg)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes io-pop{0%{opacity:0;transform:translateY(-70px) scale(.4)}100%{opacity:1;transform:none}}
@keyframes io-stamp{0%{opacity:0;transform:scale(2.6)}100%{opacity:1;transform:scale(1)}}
@keyframes io-sweep{0%{transform:translateX(0) skewX(-20deg)}100%{transform:translateX(2300px) skewX(-20deg)}}
@keyframes io-bar{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes io-fade{to{opacity:0}}
@keyframes io-tag{0%{opacity:0;letter-spacing:.8em}100%{opacity:.85;letter-spacing:.34em}}
@keyframes io-glow{0%{opacity:0;transform:scale(.6)}45%{opacity:1;transform:scale(1)}100%{opacity:.4;transform:scale(1.15)}}
@keyframes io-logoglow{0%{filter:drop-shadow(0 0 7px rgba(227,245,49,.26))}35%{filter:drop-shadow(0 0 17px rgba(227,245,49,.7))}100%{filter:drop-shadow(0 0 8px rgba(227,245,49,.3))}}
@keyframes io-stage{0%{transform:scale(.965)}100%{transform:scale(1)}}
@keyframes io-zoomout{0%{transform:scale(1)}100%{transform:scale(1.14)}}
@keyframes io-exit{0%{opacity:1}100%{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){html.intro-on #intro{display:none}}
/* Owner 2026-10-06: centre the whole group. The tag and slogan hang about 63px under the stage, so the stage is lifted by half
   of that plus a small optical lift (phones show the app below the status bar, which makes the middle look low). */
.intro-stage{top:calc(-32px - 3vh)}
.intro-glow{top:calc(50% - min(35vw,260px) - 32px - 3vh)}