:root{
  --sky-top:#dfeefb;--sky-mid:#eef5fb;--sky-low:#fbf7f0;
  --paper:#fffdf9;--paper-2:#f6f1e7;--ink:#2b2724;--muted:#7a716a;--line:#e3dcd0;
  --gold:#c9a86a;--gold-deep:#a8894f;--sage:#6f7d6a;--sage-deep:#4f5c4b;--blush:#e7b9ad;--coral:#d3776a;
  --serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html,body{margin:0}
button{font:inherit;color:inherit}

/* ---------- sky ---------- */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 48%,var(--sky-low) 100%)}
.sun{position:absolute;top:-22vmin;left:-14vmin;width:70vmin;height:70vmin;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,214,.95) 0%,rgba(255,236,190,.45) 30%,rgba(255,236,190,0) 70%)}
.rays{position:absolute;top:-45vmin;left:-45vmin;width:120vmin;height:120vmin;border-radius:50%;opacity:.35;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,0) 0deg 9deg,rgba(255,250,235,.9) 9deg 12deg);
  -webkit-mask:radial-gradient(circle,#000 0%,transparent 62%);mask:radial-gradient(circle,#000 0%,transparent 62%);
  animation:spin 140s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cloud{position:absolute;width:38vmin;height:12vmin;border-radius:100px;background:#fff;filter:blur(1.5px);opacity:.92;
  animation:drift var(--d,80s) linear infinite;animation-delay:var(--dl,0s)}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:44%;height:180%;left:16%;top:-90%}
.cloud::after{width:36%;height:140%;left:48%;top:-60%}
.c1{top:18%;left:-40vmin;--d:95s;transform:scale(1.1)}
.c2{top:36%;left:-40vmin;--d:130s;--dl:-60s;transform:scale(.7);opacity:.75}
.c3{top:8%;left:-40vmin;--d:110s;--dl:-30s;transform:scale(.55);opacity:.6}
.c4{top:62%;left:-40vmin;--d:150s;--dl:-95s;transform:scale(.9);opacity:.5}
.c5{top:78%;left:-40vmin;--d:120s;--dl:-20s;transform:scale(1.3);opacity:.85}
@keyframes drift{from{translate:0 0}to{translate:calc(100vw + 60vmin) 0}}
.opened .sky{animation:brighten 2.4s var(--ease-out) forwards}
@keyframes brighten{to{filter:saturate(1.08) brightness(1.03)}}

/* butterflies */
.butterflies{position:absolute;inset:0;pointer-events:none;z-index:1}
.sky-butterfly{position:absolute;width:var(--size,64px);left:var(--left);top:var(--top);will-change:translate,rotate;--trail-color:#b88bc9;
  filter:drop-shadow(0 0 2px #fff7e9) drop-shadow(0 0 4px var(--trail-color));
  animation:butterfly-glow 3.2s ease-in-out var(--delay,0s) infinite}
.butterflies.wander .sky-butterfly{left:0;top:0}
.sky-butterfly svg{display:block;width:100%;overflow:visible;transform:rotate(var(--angle,-18deg));transform-origin:50% 52%}
.butterflies.wander .sky-butterfly svg{transform:perspective(420px) rotateX(var(--pitch,18deg)) rotateY(var(--bank,0deg)) scale(var(--depth,1))}
.butterfly-wing{transform-origin:100px 91px;--fold:1;
  animation:butterfly-flutter var(--flutter,.14s) ease-in-out var(--delay,0s) infinite}
.butterfly-wing.right{--fold:-1}
.bf-spark{position:absolute;width:var(--spark-size,4px);height:var(--spark-size,4px);margin:-2px;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,#fff9ef 0 16%,var(--spark-color,#b88bc9) 34%,transparent 72%);
  animation:bf-spark 1.2s ease-out forwards}
.bf-spark.star{border-radius:0;background:var(--spark-color,#b88bc9);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.b2,.b5{--wing-tip:#5f8bd3;--wing-cool:#31bfc1;--wing-warm:#bb8bdb;--wing-root:#4b8ab4;--wing-gold:#aee3cf;--trail-color:#71b6ca}
.b3,.b6{--wing-tip:#b879b9;--wing-cool:#77bfa8;--wing-warm:#e6b05e;--wing-root:#a86a9d;--wing-gold:#edcb87;--trail-color:#c59b59}
.b4{--wing-tip:#8f6fc0;--wing-cool:#88b1d9;--wing-warm:#e28cbb;--wing-root:#a96da8;--wing-gold:#f4bfab;--trail-color:#cf8db5}
.b1{--left:9%;--top:20%;--size:76px;--delay:-4s;--angle:-24deg}
.b2{--left:83%;--top:14%;--size:58px;--delay:-11s;--float:21s;--wing:#b8b5dc;--angle:22deg}
.b3{--left:5%;--top:64%;--size:52px;--delay:-8s;--float:23s;--wing:#b8b5dc;--angle:14deg}
.b4{--left:88%;--top:59%;--size:72px;--delay:-16s;--float:20s;--angle:-16deg}
.b5{--left:28%;--top:9%;--size:38px;--delay:-6s;--float:25s;--angle:32deg}
.b6{--left:74%;--top:83%;--size:44px;--delay:-13s;--float:24s;--angle:-30deg}
.b7{--left:19%;--top:43%;--size:66px;--delay:-2s;--angle:18deg;--dust-main:#f4b8d1;--dust-light:#ffe4ee;--dust-accent:#eaa3c0;--trail-color:#efbad0}
.b8{--left:66%;--top:12%;--size:62px;--delay:-7s;--angle:-22deg;--dust-main:#fffdf5;--dust-light:#ffffff;--dust-accent:#e8ddc8;--trail-color:#eee3d0}
.b9{--left:23%;--top:81%;--size:70px;--delay:-14s;--angle:26deg;--dust-main:#f7d77f;--dust-light:#fff4ce;--dust-accent:#e5bf69;--trail-color:#efd18a}
@keyframes butterfly-flutter{0%,100%{transform:perspective(300px) rotateY(calc(var(--fold)*-12deg))}45%{transform:perspective(300px) rotateY(calc(var(--fold)*78deg))}72%{transform:perspective(300px) rotateY(calc(var(--fold)*28deg))}}
@keyframes butterfly-glow{0%,100%{filter:drop-shadow(0 0 2px #fff7e9) drop-shadow(0 0 4px var(--trail-color)) brightness(1)}50%{filter:drop-shadow(0 0 4px #fff7e9) drop-shadow(0 0 12px var(--trail-color)) brightness(1.12)}}
@keyframes bf-spark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.2)}}
@media (max-width:640px){
  .b1{--left:2%;--top:7%;--size:46px}
  .b2{--left:83%;--top:8%;--size:38px}
  .b3{--left:1%;--top:78%;--size:34px}
  .b4{--left:86%;--top:86%;--size:40px}
  .b5,.b6{display:none}
  .b7{--left:1%;--top:17%;--size:42px}
  .b8{--left:60%;--top:4%;--size:38px}
  .b9{--left:86%;--top:93%;--size:40px}
}
@media (prefers-reduced-motion:reduce){
  .sky-butterfly,.butterfly-wing{animation:none!important;will-change:auto}
  .bf-spark{display:none}
}

/* flight path + plane */
.flight{position:absolute;left:0;top:0;width:100%;height:46vh;overflow:visible}
.flight .trail{fill:none;stroke:#fff;stroke-width:2.5;stroke-dasharray:6 10;stroke-linecap:round;opacity:.9;
  animation:trail 2.2s linear infinite}
@keyframes trail{to{stroke-dashoffset:-32}}
.flight .plane{fill:#fff;stroke:rgba(43,39,36,.35);stroke-width:.6}

/* ---------- stage ---------- */
.stage{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(1.2rem,4vh,3rem) 4vw;gap:1.6rem;perspective:1600px}
.intro{text-align:center;opacity:0;animation:rise 1s var(--ease-out) .2s forwards}
.intro .eyebrow{font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--sage-deep);margin:0 0 .5rem;display:inline-flex;gap:.6rem;align-items:center}
.intro .eyebrow::before,.intro .eyebrow::after{content:"";width:28px;height:1px;background:var(--gold)}
.intro h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,5.4vw,3.6rem);line-height:1.05;margin:0}
.intro h1 em{font-style:italic;color:var(--sage-deep)}
.intro p{color:var(--muted);font-size:.92rem;margin:.6rem 0 0}
@keyframes rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.opened .intro{animation:fadeaway .6s var(--ease-out) forwards}
@keyframes fadeaway{to{opacity:0;translate:0 -10px;max-height:0;margin:0;overflow:hidden}}

/* ---------- ticket ---------- */
.ticket-wrap{position:relative;width:min(760px,92vw);transform-style:preserve-3d;
  opacity:0;animation:flyin 1.5s var(--ease-out) .55s forwards}
@keyframes flyin{
  0%{opacity:0;transform:translate(55vw,55vh) rotate(-22deg) scale(.6)}
  70%{opacity:1;transform:translate(-1.5vw,-2vh) rotate(3deg) scale(1.03)}
  85%{transform:translate(.6vw,.8vh) rotate(-1.2deg) scale(.995)}
  100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
}
.ticket-wrap.landed{animation:none;opacity:1}
.tilt{transform-style:preserve-3d;transition:transform .35s var(--ease-out);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.ticket{position:relative;display:grid;grid-template-columns:1fr 218px;transition:grid-template-columns 1s var(--ease-out) .45s;filter:drop-shadow(0 30px 40px rgba(60,70,90,.18)) drop-shadow(0 4px 8px rgba(60,70,90,.08));
  transform-style:preserve-3d;border-radius:18px;cursor:pointer;text-align:left;border:0;padding:0;background:none;width:100%}
.ticket:focus-visible{outline:2px solid var(--sage-deep);outline-offset:8px}
.ticket .shadow{position:absolute;inset:0}
.pass{position:relative;transform-style:preserve-3d;transition:transform 1.1s var(--ease-out);min-height:290px}
.opened .pass{transform:rotateY(180deg);min-height:370px}
.opened .ticket{grid-template-columns:1fr 0px}
.opened .face{border-radius:18px}
.opened .back::before{border-radius:12px}
.opened .pass::before,.opened .pass::after,.opened .perf{opacity:0;transition:opacity .4s}
.opened .stub{overflow:visible;min-width:218px}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px 0 0 18px;overflow:hidden;
  background:linear-gradient(160deg,var(--paper) 0%,#fffefb 60%,var(--paper-2) 100%)}
.face.back{transform:rotateY(180deg)}
/* perforation notch */
.pass::before,.pass::after{content:"";position:absolute;right:-13px;width:26px;height:26px;border-radius:50%;background:var(--sky-mid);z-index:3}
.pass::before{top:-13px}.pass::after{bottom:-13px}
.perf{position:absolute;right:0;top:14px;bottom:14px;border-right:2px dashed rgba(43,39,36,.28);z-index:2}

/* front face */
.front{display:flex;flex-direction:column}
.strip{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.4rem;
  background:linear-gradient(90deg,#f0f6fb,#f9f5ee);border-bottom:1px solid var(--line)}
.airline{font-family:var(--serif);font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase}
.airline em{font-style:italic;color:var(--sage-deep);text-transform:none;letter-spacing:0}
.tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.tag b{color:var(--ink);font-weight:500}
.route{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.2rem;padding:1.3rem 1.4rem .6rem}
.city{font-family:var(--serif);font-size:clamp(2.4rem,6vw,3.6rem);line-height:1;letter-spacing:.02em}
.city small{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}
.city.to{text-align:right}
.line{position:relative;height:1px;background:repeating-linear-gradient(90deg,var(--gold) 0 5px,transparent 5px 11px);opacity:.9}
.line svg{position:absolute;top:50%;left:0;width:22px;height:22px;translate:-4px -50%;rotate:90deg;animation:hop 4.5s var(--ease-out) infinite}
@keyframes hop{0%{left:0}45%{left:calc(100% - 18px)}55%{left:calc(100% - 18px);opacity:1}62%{opacity:0}63%{left:0;opacity:0}70%{opacity:1}100%{left:0}}
.fields{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem 1rem;padding:.7rem 1.4rem 1.2rem;margin-top:auto}
.f label{display:block;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:.22rem}
.f span{font-family:var(--mono);font-size:.86rem;font-weight:500;letter-spacing:.04em;white-space:nowrap}
.f.wide{grid-column:span 2}
.hint{position:absolute;left:50%;bottom:-2.4rem;translate:-50% 0;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
  opacity:0;animation:hintin .8s var(--ease-out) 2.1s forwards}
.hint::after{content:"";display:block;width:1px;height:16px;background:var(--gold);margin:.5rem auto 0;animation:pulse 1.6s ease-in-out infinite}
@keyframes hintin{to{opacity:1}}
@keyframes pulse{0%,100%{scale:1 1;opacity:1}50%{scale:1 .3;opacity:.4}}
.opened .hint{animation:none;opacity:0;transition:opacity .3s}

/* back face */
.back{display:grid;place-items:center;text-align:center;padding:2rem 1.6rem}
.back::before{content:"";position:absolute;inset:10px;border:1px solid rgba(201,168,106,.55);border-radius:12px 0 0 12px;pointer-events:none}
.back .inner{position:relative;max-width:36ch;padding:0 1rem}
@media (min-width:641px){.opened .back .inner{margin-right:120px}}
.back .k{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sage-deep);margin:0 0 .8rem}
.back h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5vw,3rem);line-height:1;margin:0}
.back h2 i{font-style:italic;color:var(--sage-deep);font-size:.6em;vertical-align:.15em;padding:0 .1em}
.back .r{width:44px;height:1px;background:var(--gold);margin:1rem auto}
.back .d{font-family:var(--serif);font-size:1.25rem;letter-spacing:.06em;margin:0}
.back .p{color:var(--muted);font-size:.82rem;letter-spacing:.06em;margin:.25rem 0 0}
.back .q{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1.02rem;margin:.9rem 0 0}
.back .item{opacity:0;translate:0 10px}
.opened .back .item{animation:rise .8s var(--ease-out) forwards;animation-delay:calc(.75s + var(--i)*.14s)}
.stamp{position:absolute;right:1.6rem;top:50%;margin-top:-56px;width:112px;height:112px;border-radius:50%;border:2.5px solid var(--coral);color:var(--coral);
  display:grid;place-items:center;text-align:center;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.35;
  rotate:-14deg;opacity:0;mix-blend-mode:multiply;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 .45'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' fill='%23000'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 .45'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' fill='%23000'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  -webkit-mask-composite:source-over;mask-composite:add}
.stamp::before{content:"";position:absolute;inset:5px;border:1px solid var(--coral);border-radius:50%}
.stamp b{display:block;font-size:.92rem;font-weight:500;letter-spacing:.06em;margin:.15rem 0}
.opened .stamp{animation:slam .55s cubic-bezier(.2,1.4,.4,1) 1.55s forwards}
@keyframes slam{0%{opacity:0;scale:2.6;rotate:-30deg}60%{opacity:1;scale:.94;rotate:-12deg}80%{scale:1.03}100%{opacity:.92;scale:1;rotate:-14deg}}

/* stub */
.stub{position:relative;background:linear-gradient(200deg,#f9f5ee,#f2ebdd);border-radius:0 18px 18px 0;padding:1rem 1.15rem;display:flex;flex-direction:column;gap:.55rem;
  transform-origin:0 0;transform-style:preserve-3d}
.stub .airline{font-size:.95rem;display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.airline{white-space:nowrap}
.stub.gone{display:none}
.stub .f span{font-size:.8rem}
.stub .tear{font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.4rem;margin-top:auto}
.stub .tear::before{content:"";width:12px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a716a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.1 15.9M14.5 14.5 20 20M8.1 8.1 12 12'/%3E%3C/svg%3E") center/contain no-repeat}
.barcode{height:44px;margin-top:.2rem;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 14px,var(--ink) 14px 15px,transparent 15px 19px);opacity:.8}
.barcode+small{font-family:var(--mono);font-size:.58rem;letter-spacing:.3em;color:var(--muted);text-align:center;display:block}
.opened .stub{animation:tear 1.35s cubic-bezier(.4,0,.9,.6) forwards;pointer-events:none}
@keyframes tear{
  0%{transform:rotateZ(0) translate(0,0)}
  18%{transform:rotateZ(-3deg) translate(6px,-6px) rotateY(-12deg)}
  40%{transform:rotateZ(9deg) translate(26px,40px) rotateY(20deg);opacity:1}
  100%{transform:rotateZ(28deg) translate(120px,120vh) rotateY(60deg);opacity:0}
}
.shake{animation:shake .45s ease-in-out}
@keyframes shake{0%,100%{translate:0 0}20%{translate:-3px 1px;rotate:-.4deg}40%{translate:3px -1px;rotate:.4deg}60%{translate:-2px 0}80%{translate:2px 0}}

/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.confetti i{position:absolute;left:50%;top:50%;width:10px;height:14px;border-radius:2px;opacity:0;
  background:var(--c);animation:burst var(--t,2.4s) cubic-bezier(.2,.7,.3,1) var(--dl,0s) forwards}
.confetti i.heart{width:12px;height:12px;background:none}
.confetti i.heart::before,.confetti i.heart::after{content:"";position:absolute;top:0;left:6px;width:6px;height:10px;background:var(--c);border-radius:6px 6px 0 0;transform:rotate(-45deg);transform-origin:0 100%}
.confetti i.heart::after{left:0;transform:rotate(45deg);transform-origin:100% 100%}
@keyframes burst{
  0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}
  8%{opacity:1}
  100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}
}

/* ---------- departures board ---------- */
.board{width:min(760px,92vw);max-height:0;opacity:0;overflow:hidden;transition:max-height 1.2s var(--ease-out),opacity .8s var(--ease-out) .2s,margin .8s}
.opened .board{max-height:520px;opacity:1;margin-top:.4rem}
.board-in{background:rgba(255,253,249,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.9);border-radius:16px;padding:1.1rem 1.3rem;
  box-shadow:0 20px 40px rgba(60,70,90,.10)}
.board-head{display:flex;justify-content:space-between;align-items:center;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:.7rem}
.board-head .dot{width:7px;height:7px;border-radius:50%;background:var(--sage);display:inline-block;margin-right:.45rem;animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.row{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:1rem;padding:.42rem 0;border-top:1px solid rgba(43,39,36,.08)}
.row label{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.flaps{display:flex;gap:2px;flex-wrap:wrap}
.cell{width:20px;height:28px;border-radius:3px;background:linear-gradient(#f3eee4 0 49%,#e6dfd2 49% 51%,#efe9dd 51%);border:1px solid rgba(43,39,36,.12);
  font-family:var(--mono);font-size:.9rem;font-weight:500;display:grid;place-items:center;color:var(--ink);transform-style:preserve-3d}
.cell.sp{background:none;border-color:transparent}
.cell.tick{animation:flip .12s linear}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(-70deg)}100%{transform:rotateX(0)}}

/* ---------- actions ---------- */
.actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;max-height:0;opacity:0;overflow:hidden;transition:max-height .8s var(--ease-out) .9s,opacity .6s var(--ease-out) 1s}
.opened .actions{max-height:120px;opacity:1}
.skip{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);padding:.4rem 0;
  opacity:0;animation:hintin .8s var(--ease-out) 2.6s forwards}
.opened .skip{display:none}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .ticket{grid-template-columns:1fr;grid-template-rows:auto auto;transition:grid-template-rows 1s var(--ease-out) .45s}
  .opened .ticket{grid-template-columns:1fr;grid-template-rows:auto 0fr}
  .opened .stub{min-width:0;min-height:0}
  .pass{min-height:370px}
  .face{border-radius:18px 18px 0 0}
  .back::before{border-radius:12px 12px 0 0}
  .pass::before,.pass::after{right:auto;top:auto;bottom:-13px;left:-13px}
  .pass::after{left:auto;right:-13px}
  .perf{right:14px;left:14px;top:auto;bottom:0;border-right:0;border-bottom:2px dashed rgba(43,39,36,.28)}
  .stub{border-radius:0 0 18px 18px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;transform-origin:0 0}
  .stub .airline{width:100%}
  .strip .xs{display:none}
  .stub .barcode{width:100%;height:36px}
  .stub .barcode+small{width:100%}
  .stub .tear{margin-left:auto}
  .fields{grid-template-columns:repeat(2,1fr);gap:.6rem .8rem}
  .f.wide{grid-column:span 2}
  .city{font-size:2.2rem}
  .route{gap:.8rem;padding:1.1rem 1.1rem .4rem}
  .strip,.fields{padding-left:1.1rem;padding-right:1.1rem}
  .stamp{width:84px;height:84px;right:.5rem;top:auto;bottom:.5rem;margin-top:0;font-size:.48rem}
  .opened .pass{min-height:380px}
  .back{padding-bottom:4.5rem}
  .stamp b{font-size:.8rem}
  .row{grid-template-columns:1fr;gap:.25rem}
  .cell{width:15px;height:24px;font-size:.72rem}
  .cell.sp{width:7px}
  .hint{bottom:-2.2rem}
  .stage{gap:1.2rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .rays,.cloud,.line svg,.hint::after,.board-head .dot{animation:none!important}
  .intro,.ticket-wrap,.hint,.skip{animation:none;opacity:1}
  .pass{transition:none}
  .opened .stub{animation:none;opacity:0;transition:opacity .4s}
  .opened .back .item{animation:none;opacity:1;translate:0 0}
  .opened .stamp{animation:none;opacity:.92}
  .board,.actions{transition:none}
  .tilt{transition:none;transform:none!important}
  .flight *{animation:none!important}
}

/* ---------- wired into the site ---------- */
.instant .intro,.instant .ticket-wrap,.instant .ticket-wrap *,.instant .ticket-wrap *::before,.instant .ticket-wrap *::after,.instant .board,.instant .actions{
  animation-duration:.001s!important;animation-delay:0s!important;transition-duration:0s!important;transition-delay:0s!important}
.stage{padding-top:calc(62px + 1rem)}
.stage .scroll-cue{display:none}
.opened .stage .scroll-cue{display:flex;flex-direction:column;align-items:center;gap:.4rem;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);text-decoration:none;margin-top:.4rem}
.opened .stage .scroll-cue::after{content:"";width:1px;height:22px;background:var(--gold);animation:pulse 1.6s ease-in-out infinite}
@media (max-width:640px){.opened .pass{min-height:430px}.back{padding-bottom:6rem}}
.ticket-wrap{cursor:pointer;margin-bottom:2.2rem}
.ticket{cursor:inherit}
.opened .ticket-wrap{cursor:default;margin-bottom:0}
.hint{bottom:-4.8rem}
@media (max-width:640px){.hint{bottom:-3.8rem}}