.intro{--exit:.7s;z-index:50;background:var(--color-paper);transition:opacity var(--exit) ease;flex-direction:column;justify-content:center;align-items:center;gap:clamp(1rem,4svh,2.25rem);padding:1.5rem 1rem;display:none;position:fixed;inset:0;overflow:hidden}html[data-intro=show] .intro,html[data-intro=leaving] .intro{display:flex}.intro[data-exit=fast]{--exit:.25s}.intro[data-phase=expanding]{opacity:0;pointer-events:none}.intro[data-phase=expanding]:not([data-exit=fast]){transition-delay:.5s}.intro-copy,.intro-actions{transition:opacity .45s,transform .45s}.intro:not([data-phase=sealed]) .intro-actions{opacity:0;pointer-events:none;transform:translateY(10px)}.intro:not([data-phase=sealed]) .intro-copy{opacity:0;transform:translateY(-10px)}.intro-stage{--w:min(78vw, 22rem, 52svh);width:var(--w);margin-top:calc(var(--w) * .42);position:relative}.intro-copy{bottom:calc(100% + var(--w) * .1);width:max-content;max-width:calc(100vw - 2rem);position:absolute;left:50%;translate:-50%}.env{aspect-ratio:3/2;cursor:pointer;width:100%;position:relative}.env-body{position:absolute;inset:0}.env:after{content:"";z-index:-1;background:radial-gradient(closest-side,#231f2024,#0000);border-radius:50%;height:10%;transition:opacity .5s .1s;position:absolute;bottom:-8%;left:10%;right:10%}.env-back,.env-card,.env-pocket,.env-flap,.env-flap-face,.env-card-content{position:absolute}.env-shape{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.env-shape path{stroke:var(--color-ink);stroke-width:2.5px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.env-shape .env-seam{fill:none;stroke-width:1.5px;opacity:.35}.env-shape .env-sketch{fill:none;stroke-width:1.5px;opacity:.6}.env-back{z-index:0;inset:0}.env-card{z-index:2;height:88%;top:6%;left:8%;right:8%}.env-card-content{inset:0}.env-pocket{z-index:3;inset:0}.env-flap{z-index:4;transform-origin:50% 0;height:56%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.34,1.25,.5,1) .12s;top:3%;left:0;right:0;transform:translateY(84%)perspective(1400px)translateY(-84%)rotateX(0)}.env-flap-face{backface-visibility:hidden;inset:0}.env-flap-in{transform:rotateY(180deg)}.env-seal{z-index:5;width:15%;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .25s .1s;position:absolute;top:57%;left:50%;translate:-50% -55%}.intro:not([data-phase=sealed]) .env-seal{opacity:0;transform:scale(1.3)rotate(-12deg)}.intro:not([data-phase=sealed]) .env-flap{transform:translateY(84%)perspective(1400px)translateY(-84%)rotateX(180deg)}.intro:is([data-phase=cardOut],[data-phase=expanding]) .env-flap{z-index:1}.intro:is([data-phase=cardOut],[data-phase=expanding]) .env-card{translate:0 -110%;rotate:-1deg}.env-card-content,.env-card .env-shape path{transition:opacity .45s,stroke-opacity .45s}.intro[data-phase=expanding]:not([data-exit=fast]) :is(.env-card-content,.env-card .env-shape path){opacity:0;stroke-opacity:0;transition-delay:.5s}.intro[data-phase=expanding] .env-body{opacity:0;transition:translate .75s cubic-bezier(.4,0,.5,1),opacity .6s .1s;translate:0 18%}.intro[data-phase=expanding] .env:after{opacity:0}@keyframes card-pull{0%{translate:0}to{translate:0 -110%}}@keyframes card-tilt{0%{rotate:0deg}50%{rotate:-2deg}to{rotate:-1deg}}@keyframes card-settle{0%{translate:0 -110%;rotate:-1deg;scale:1}to{translate:0 -116%;rotate:0deg;scale:1.05}}@keyframes env-idle{0%,to{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)translateY(-3px)}}@media (prefers-reduced-motion:no-preference){.intro .env{animation:.8s cubic-bezier(.22,1,.36,1) both rise,4.5s ease-in-out .8s infinite env-idle}.intro:not([data-phase=sealed]) .env{animation-play-state:paused}.intro[data-phase=cardOut] .env-card{animation:1.3s cubic-bezier(.42,0,.22,1) both card-pull,1.3s ease-in-out both card-tilt}.intro[data-phase=expanding] .env-card{animation:.9s cubic-bezier(.3,0,.2,1) .25s both card-settle}.intro[data-phase=sealed] .env:hover .env-seal{transform:rotate(-8deg)scale(1.08)}.intro-deco{animation:5s ease-in-out infinite float;animation-delay:var(--delay,0s)}}@media (prefers-reduced-motion:reduce){.intro *{transition:none!important}.intro{transition:opacity .25s}}