.intro[hidden]{display:none}
.intro{position:fixed;inset:0;z-index:10000;isolation:isolate;overflow:hidden;contain:strict;color:oklch(82% .12 76)}
.intro-plate{position:absolute;inset:-1px;background:oklch(15% .006 70);will-change:transform}
.intro-plate-top{clip-path:polygon(0 0,100% 0,100% calc(50% - 7.027vw),0 calc(50% + 7.027vw));background:linear-gradient(165deg,oklch(20% .008 70),oklch(13% .005 70) 72%)}
.intro-plate-bottom{clip-path:polygon(0 calc(50% + 7.027vw),100% calc(50% - 7.027vw),100% 100%,0 100%);background:linear-gradient(165deg,oklch(13% .005 70),oklch(17% .006 70))}
.intro-signature{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding-bottom:26px;will-change:transform,opacity}
.intro-signature svg{width:90px;height:72px}
.intro-signature span{font-size:30px;font-weight:700;letter-spacing:-.04em;color:oklch(94% .009 75)}
.intro-cut{position:absolute;left:-25%;top:50%;width:150%;height:1px;transform-origin:center;background:oklch(89% .10 75);opacity:0;box-shadow:0 0 8px oklch(74% .14 60 / .45);will-change:transform,opacity}
.intro-cut-one{top:calc(50% - 7px)}
.intro-cut-two{height:2px}
.intro-cut-three{top:calc(50% + 7px)}
.intro-skip{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid oklch(43% .008 70);border-radius:8px;font-size:12px;font-weight:500;color:oklch(78% .009 70);background:oklch(19% .006 70)}
.intro-skip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.intro-skip:focus-visible{outline:2px solid oklch(82% .12 76);outline-offset:4px}
.intro-running .intro-signature{animation:intro-mark 980ms cubic-bezier(.22,1,.36,1) both}
.intro-running .intro-cut-one{animation:intro-slice 390ms 340ms cubic-bezier(.16,1,.3,1) both}
.intro-running .intro-cut-two{animation:intro-slice 390ms 460ms cubic-bezier(.16,1,.3,1) both}
.intro-running .intro-cut-three{animation:intro-slice 390ms 560ms cubic-bezier(.16,1,.3,1) both}
.intro-running .intro-plate-top{animation:intro-open-top 540ms 740ms cubic-bezier(.76,0,.24,1) both}
.intro-running .intro-plate-bottom{animation:intro-open-bottom 540ms 740ms cubic-bezier(.76,0,.24,1) both}
.intro-running .intro-skip{animation:intro-skip-out 160ms 900ms ease-out forwards}
@keyframes intro-mark{0%{opacity:0;transform:translateY(8px) scale(.97)}25%,65%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-10px) scale(1.025)}}
@keyframes intro-slice{0%{opacity:0;transform:rotate(-8deg) translateX(-85%) scaleX(.2)}12%{opacity:1}55%{opacity:1;transform:rotate(-8deg) translateX(0) scaleX(1)}100%{opacity:0;transform:rotate(-8deg) translateX(80%) scaleX(.5)}}
@keyframes intro-open-top{to{transform:translateY(-103%)}}
@keyframes intro-open-bottom{to{transform:translateY(103%)}}
@keyframes intro-skip-out{to{opacity:0}}
@media(max-width:600px){.intro-signature svg{width:72px;height:58px}.intro-signature span{font-size:26px}.intro-skip{right:16px;bottom:20px}}
@media(prefers-reduced-motion:reduce){.intro{display:none}}