/*
 * Flight GT406 — page styles.
 * Visual language, title logo and hero photo after gtavicentre.com (Rockstar Games assets, used as a fan
 * project). Urbanist 500 stands in for Rockstar's GTA Art Deco, which is not redistributable.
 * The ticket faces below are only fetched when a
 * ticket renders (GT406 Sans is a renamed subset of Carlito, see fonts/README.md).
 * The .js class gates every hidden state, so without JavaScript the page is static and fully readable.
 */

@font-face{font-family:"Urbanist";src:url("fonts/urbanist-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Onest";src:url("fonts/onest-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"GT406 Sans";src:url("fonts/carlito-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"GT406 Sans";src:url("fonts/carlito-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"GT406 Sans";src:url("fonts/carlito-700i.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Archivo Expanded";src:url("fonts/archivo-expanded-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Arimo";src:url("fonts/arimo-700i.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}

/* Registered so the livery switch can fade the stage glow instead of snapping it. */
@property --stage-glow{syntax:"<color>";inherits:true;initial-value:#b28fce}

/* ---------- tokens ---------- */
:root{
  color-scheme:dark;
  --bg:#111016; --bg-hero:#151219; --bg-splash:#131019; --surface:#201a27; --surface-card:#221c29; --surface-deep:#08070b;
  --surface-field:linear-gradient(130deg,#342338,#17121e);
  --fg:#f6eff7; --fg-soft:#e2d7e5; --muted:#bdb0c8; --muted-2:#9f93a4; --label:#bcb0c3;
  --dock-fg:#cfc0d7; --dock-fg-hover:#f5bbd2;
  --accent:#efb0d0; --accent-strong:#f4b5cb; --accent-hover:#ffd2b4; --accent-end:#ffd0ae; --on-accent:#241a23;
  --focus:#f3a6bf; --selection:#ef9abc;
  --ok:#8ef0c0; --warn:#ffd0ae; --bad:#ff8fa8; --fly:#b59aff;
  --line:#ffffff25; --line-mid:#ffffff20; --line-soft:#ffffff12; --line-link:#ffffff60;
  --line-accent:color-mix(in srgb,var(--accent) 20%,transparent);
  --line-accent-strong:color-mix(in srgb,var(--accent) 45%,transparent);
  --tint-accent:color-mix(in srgb,var(--accent) 15%,transparent);
  --grad-ink:linear-gradient(110deg,#b59aff 0%,#e896d7 24%,#ff7eb3 48%,#ffbd92 74%,#fff0d4 100%);
  --grad-digits:linear-gradient(180deg,#fff2ee,#d6a2bf);
  --grad-days:linear-gradient(180deg,#fff 0%,#f6c6dc 50%,#efb0d0 100%);
  --grad-comet:linear-gradient(270deg,#efb0d047,#ffd0ae2e 48%,#efb0d014 78%,#0000);
  --grad-sheen:linear-gradient(110deg,#fff0 40%,#e8c4dc33 46%,#fffb 50%,#e8c4dc33 54%,#fff0 60%);
  --grad-tile:linear-gradient(135deg,#302336,#121019);
  --scrim-hero:linear-gradient(180deg,#100d1638 0%,transparent 35%,#100d1650 70%,var(--bg) 100%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --stage-glow:#b28fce;
  --shadow-dock:0 10px 35px #0006; --shadow-media:0 40px 90px -50px #000; --shadow-pop:0 24px 70px #0009;
  --font:"Onest","Plus Jakarta Sans",Arial,sans-serif; --font-deco:"Urbanist","Onest",Arial,sans-serif;
  --fw-body:440; --fw-ui:560; --fw-display:620;
  --fs-body:18px; --lh-body:1.55; --ls-body:.015em;
  --fs-lead:20px; --fs-small:13px; --fs-micro:10px; --ls-micro:.2em; --fs-kicker:13px; --ls-kicker:.32em;
  --fs-h2:clamp(52px,5.5vw,88px); --lh-h2:1.08; --ls-h2:-.02em;
  --fs-hero-line:clamp(24px,2.7vw,40px); --fs-digits:clamp(46px,min(7.4vw,12svh),120px); --fs-input:30px;
  --gutter:7%; --section-y:clamp(120px,10vw,170px); --heading-gap:48px;
  --r-btn:5px; --r-card:7px; --r-media:10px; --r-input:12px; --r-chip:14px; --r-panel:16px; --r-dock:18px; --r-pop:24px; --r-pill:999px;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-wipe:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.42,0,.58,1);
  --ease-head:cubic-bezier(.215,.61,.355,1); --ease-settle:cubic-bezier(.34,1.56,.64,1); --ease-retract:cubic-bezier(.55,0,.75,.2);
  --dock-bottom:22px;
}
@media (max-width:760px){:root{--gutter:20px;--section-y:80px;--heading-gap:32px;--fs-h2:clamp(38px,10vw,48px);
  --dock-bottom:calc(10px + env(safe-area-inset-bottom))}}

/* ---------- base ---------- */
*,::before,::after{box-sizing:border-box}
html{background:var(--bg);color:var(--fg);font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--font);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:40px;transition:--stage-glow .55s}
body{margin:0;overflow-x:clip}
main{overflow-x:clip}
::selection{background:var(--selection);color:#111}
:where(a,button,summary,input,label,textarea):focus-visible{outline:2px solid var(--focus);outline-offset:6px}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd{margin:0}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:10px 16px;border-radius:var(--r-btn);background:#f3b2c9;color:#17111c;font:600 14px var(--font);text-decoration:none;transition:top .2s var(--ease-out)}
.skip:focus{top:16px}
.ink{background:var(--grad-ink) var(--ink-pos,0%) 50%/420% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-block:.08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.kicker{font:600 var(--fs-kicker)/1.2 var(--font);letter-spacing:var(--ls-kicker);text-transform:uppercase;color:#f6eff7cc}
.micro{font:600 var(--fs-micro)/1.2 var(--font);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--label)}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--muted);max-width:44ch}
html:not(.js) .needs-js{display:none!important}
.js .nojs-note{display:none}
.nojs-note{margin-top:28px;padding:16px 20px;border:1px dashed #ffffff30;border-radius:var(--r-input);color:var(--fg-soft);max-width:52ch}

/* Grain sits on the page backdrop only (behind every section), never over the ticket. */
@media (hover:hover) and (min-width:761px){body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--grain);opacity:.09;mix-blend-mode:overlay;pointer-events:none}}

/* ---------- progress ---------- */
#progress{position:fixed;inset:0 0 auto;height:3px;z-index:80;transform-origin:0 50%;transform:scaleX(0);background:var(--grad-ink);background-size:100vw 100%;pointer-events:none}

/* ---------- hero ---------- */
.hero{height:150svh;position:relative}
html:not(.js) .hero{height:100svh}
.hero-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:var(--bg-hero)}
.hero-photo{position:absolute;inset:0;z-index:-3}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(var(--zoom,1.02));will-change:transform}
.hero-shade{position:absolute;inset:0;z-index:-2;opacity:.9;background:radial-gradient(ellipse 50% 42% at 50% 48%,#100d1680,transparent 72%),var(--scrim-hero)}
.hero-stage::after{content:"";position:absolute;inset:auto 0 0;height:28%;background:linear-gradient(transparent,var(--bg));z-index:-1;pointer-events:none}
.hero-title{position:absolute;inset:11% 5% 16%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.6svh,26px);text-align:center;transform-origin:50% 40%}
.gta-logo{display:block;width:min(440px,38vw);max-height:30svh;height:auto;object-fit:contain;filter:drop-shadow(0 5px 25px #17101870)}
.hero-line{font:500 var(--fs-hero-line)/1.15 var(--font-deco);letter-spacing:.02em;color:#f4eee9;text-wrap:balance;text-shadow:0 2px 16px #0008}
.hero-arrive{display:flex;flex-direction:column;align-items:center;gap:8px;color:#f5eff3;filter:drop-shadow(0 1px 10px #100d16e0)}
.arrive-main{font:560 clamp(14px,1.3vw,18px)/1.2 var(--font);letter-spacing:.24em;text-transform:uppercase}
.arrive-local{font:500 15px/1.3 var(--font);color:var(--muted);letter-spacing:.02em}
.cd{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(760px,100%)}
.cd-cells{display:grid;grid-template-columns:repeat(4,1fr);width:100%;padding:14px 0;border-block:1px solid #ffffff25;background:radial-gradient(ellipse 60% 70% at 50% 50%,#100d1680,transparent)}
.cd-cells>div{display:flex;flex-direction:column;align-items:center;border-right:1px solid #ffffff20}
.cd-cells>div:last-child{border-right:0}
.cd .num{display:flex;min-height:1.05em;font:500 var(--fs-digits)/1.05 var(--font-deco);letter-spacing:-.03em;filter:drop-shadow(0 2px 18px #100d16)}
.cd .micro{margin-top:6px;font-size:11px;letter-spacing:2.5px;color:#bcb0c3}
.cd-cap{color:var(--fly)}
.digit{position:relative;display:inline-block;width:.64em;height:1.05em;overflow:hidden;perspective:600px}
.digit>span{position:absolute;inset:0;display:grid;place-items:center;background:var(--grad-digits);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Once the countdown latches in, the title steps back to make room for it. */
.gta-logo{transition:max-height .9s cubic-bezier(.2,0,0,1)}
.hero-title:has(.cd.on) .gta-logo{max-height:14svh}
.digit>.in{animation:dg-in .36s var(--ease-out) both}
.digit>.out{animation:dg-out .36s var(--ease-out) both}
@keyframes dg-in{from{transform:translateY(65%) rotateX(-45deg);opacity:0}}
@keyframes dg-out{to{transform:translateY(-65%) rotateX(45deg);opacity:0}}
.js .latch{opacity:0;translate:0 14px;transition:opacity .65s var(--ease-out),translate .65s var(--ease-out)}
.js .latch.on{opacity:1;translate:none}
.after-arrival .cd{display:none}
.after-arrival .arrive-main{font:500 clamp(16px,1.5vw,21px)/1.3 var(--font);letter-spacing:.01em;text-transform:none;color:var(--fg-soft);filter:drop-shadow(0 2px 14px #100d16c0)}

.chip{position:absolute;top:26px;z-index:1;display:flex;align-items:center;gap:10px;height:48px;padding:0 16px 0 14px;border-radius:var(--r-chip);background:#12101880;border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden}
.chip-r{right:4%}
.chip b{font:600 12px var(--font);letter-spacing:.18em}
@keyframes blink{50%{opacity:.25}}
.chip-r::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-comet)}
.days-n{font:800 30px/1 var(--font)!important;letter-spacing:0!important;font-variant-numeric:tabular-nums;transform:skewX(-9deg);background:var(--grad-days);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:2px}
.days-l{display:flex;flex-direction:column;font:800 9px/1.15 var(--font);letter-spacing:.12em;color:#f7dbe8;transform:skewX(-9deg)}

.hero-bottom{position:absolute;left:5%;right:5%;bottom:52px;display:flex;justify-content:space-between;pointer-events:none}
.hero-bottom a{pointer-events:auto;display:inline-flex;gap:35px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-link);text-decoration:none;font:500 20px var(--font-deco);letter-spacing:.03em;transition:color .2s,border-color .2s}
.hero-bottom a:hover{color:#edbad9;border-color:#edbad9}
.hero-bottom .ic{width:18px;height:18px;transition:translate .3s var(--ease-out)}
.hero .kicker{text-shadow:0 1px 12px #100d16}
/* Below 1100 px the dock is wide enough to reach the corner links: lift them above it. */
@media (max-width:1100px){.hero-bottom{bottom:calc(var(--dock-bottom) + 76px)}}
.hero-bottom a:hover .ic{translate:0 3px}

/* ---------- splash: the VI draws itself, then flies onto the logo's own VI and the title fills in around it ---------- */
/* app.js sets --mx/--my/--ms from the live layout: the logo's VI and this mark share the 1200x910 box. */
.intro{display:none}
.js .intro{display:block;position:absolute;inset:0;z-index:-1;pointer-events:none}
.intro::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,#22182a,var(--bg-splash) 70%)}
.js[data-intro=none] .intro{display:none}
.intro-mark{--w:clamp(170px,20vw,260px);position:absolute;inset:0;margin:auto;width:var(--w);height:calc(var(--w) * 910 / 1200);overflow:visible;transform-origin:0 0;filter:drop-shadow(0 5px 25px #17101870)}
.intro-mark path{fill:none;stroke:#fff;stroke-width:14.4;stroke-dasharray:1 2;stroke-dashoffset:1}
[data-intro=full] .intro{animation:intro-end 3.9s step-end both}
@keyframes intro-end{to{visibility:hidden}}
[data-intro=full] .intro::before{animation:veil 1.2s var(--ease-io) 2.05s both}
@keyframes veil{to{opacity:0}}
[data-intro=full] .intro-mark path{animation:draw calc(1.5s - var(--n)*.2s) cubic-bezier(.65,0,.35,1) calc(.3s + var(--n)*.2s) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
[data-intro=full] .intro-mark{animation:vi-move 1.15s cubic-bezier(.65,0,.35,1) 2.05s forwards,vi-out .45s var(--ease-out) 3.4s forwards}
@keyframes vi-move{to{transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--ms,1))}}
@keyframes vi-out{to{opacity:0}}
[data-intro=full] .hero-photo img{animation:photo-in 3.6s var(--ease-out) 2.05s both}
@keyframes photo-in{from{transform:scale(1.14)}}
/* Opacity only: the logo has to sit exactly where the mark lands. Its VI covers the mark's, then the mark
   fades and the knockouts around "grand theft auto" open up. */
[data-intro=full] .gta-logo{animation:logo-fade .35s linear 3.2s both}
@keyframes logo-fade{from{opacity:0}}
@keyframes logo-in{from{opacity:0;transform:translateY(18px) scale(.94);filter:blur(10px)}}
[data-intro=full] .after-intro{animation:fade-up .9s var(--ease-out) calc(3.35s + var(--i,0)*100ms) both}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}}
[data-intro=short] .intro{animation:intro-end 1.2s step-end both}
[data-intro=short] .intro::before{animation:curtain-s 1.2s var(--ease-io) both}
@keyframes curtain-s{0%,25%{opacity:1}100%{opacity:0}}
[data-intro=short] .intro-mark{display:none}
[data-intro=short] .gta-logo{animation:logo-in 1s var(--ease-out) .3s both}
[data-intro=short] .after-intro{animation:fade-up .8s var(--ease-out) calc(.6s + var(--i,0)*80ms) both}

/* ---------- sections ---------- */
.section{padding:var(--section-y) var(--gutter);position:relative}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 56px;margin-bottom:var(--heading-gap);flex-wrap:wrap}
h2{font:var(--fw-display) var(--fs-h2)/var(--lh-h2) var(--font);letter-spacing:var(--ls-h2);text-wrap:balance}
.head .lead{max-width:46ch}
@media (prefers-reduced-motion:no-preference){
  .js .rv-head{opacity:0;transform:translateY(35px);transition:opacity .8s var(--ease-head),transform .8s var(--ease-head)}
  .js .rv-block{opacity:.35;translate:0 24px;transition:opacity .95s var(--ease-out) .12s,translate .95s var(--ease-out) .12s}
  .js .rv-item{opacity:0;transform:translateY(30px);transition:opacity .65s var(--ease-out) calc(var(--i,0)*60ms),transform .65s var(--ease-out) calc(var(--i,0)*60ms)}
  .js .in{opacity:1;transform:none;translate:none}
}

/* ---------- check-in ---------- */
.checkin{padding-top:clamp(90px,7vw,120px)}
.ci-head{display:grid;grid-template-columns:1fr minmax(0,600px);column-gap:56px;align-items:center;margin-bottom:40px}
/* The form's parts join the head grid, so the name field shares the heading's row. */
.ci-form{display:contents}
.ci-form>*{grid-column:2}
.ci-intro{grid-row:1;grid-column:1}
.field{display:block;position:relative;padding:14px 18px 12px;border-radius:var(--r-input);background:var(--surface-field);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);transition:border-color .25s,box-shadow .25s;cursor:text}
.field:focus-within{border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.field .micro{display:block;margin-bottom:4px}
.field input{all:unset;display:block;width:100%;font:var(--fw-ui) var(--fs-input)/1.25 var(--font);letter-spacing:-.01em;color:var(--fg);caret-color:var(--accent)}
.field input::placeholder{color:#7a6d83}
.field input:focus-visible{outline:none}
.field:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.count{position:absolute;right:16px;top:14px;font:500 11px var(--font);color:var(--muted-2);font-variant-numeric:tabular-nums}
.count.full{color:var(--warn)}
.try{margin-top:18px}
.try>.micro{display:block;margin-bottom:10px}
.cast{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cast-btn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:9px 12px 10px;border:1px solid var(--line);border-radius:10px;background:#12101880;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,transform .16s var(--ease-out)}
.cast-btn b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 13.5px/1.2 var(--font);letter-spacing:0;color:var(--fg-soft);transition:color .15s}
.cast-btn small{font:500 11px/1.2 var(--font-deco);letter-spacing:.06em;color:var(--muted-2)}
.cast-btn:hover{border-color:var(--line-accent-strong)}
.cast-btn:hover b{color:var(--fg)}
.cast-btn:active{transform:scale(.96)}
.cast-btn[aria-pressed=true]{border-color:var(--line-accent-strong);background:var(--tint-accent)}
.cast-btn[aria-pressed=true] b{color:var(--accent)}
.msg{font-size:14px;color:var(--warn);margin-top:12px}
.msg:empty{display:none}
/* .shared (head script, deep link) shows the banner from first paint so the stage does not jump when checkin.js runs. */
.shared .banner[hidden]{display:flex!important}
.banner{display:flex;align-items:center;gap:12px;width:fit-content;max-width:100%;margin:0 auto 22px;padding:10px 16px;border-radius:var(--r-pill);background:var(--tint-accent);border:1px solid var(--line-accent-strong);color:var(--accent);font:500 15px var(--font)}

/* Stage: a slot bar (the printer mouth), a throat that only clips above the slot, the moving paper. */
.stage{--ar:2000/813;--pr:1.4%/3.44%;position:relative;width:100%;max-width:1180px;margin:0 auto}
.stage[data-format=story],[data-fmt=story] .stage:not([data-format]){--ar:1080/1920;--pr:3.7%/2.08%;width:min(100%,calc(72svh * 1080 / 1920))}
.stage[data-format=post],[data-fmt=post] .stage:not([data-format]){--ar:1600/900;--pr:0;max-width:1040px}
.slot{position:relative;z-index:2;height:16px;border-radius:8px;background:var(--surface-deep);box-shadow:inset 0 1px 0 #ffffff14,0 10px 30px #0008;margin:0 -14px}
.slot::after{content:"";position:absolute;left:14px;right:14px;top:7px;height:2px;border-radius:1px;background:#000}
.throat{position:relative;margin-top:-8px;aspect-ratio:var(--ar);clip-path:inset(0 -200px -240px)}
.throat::before{content:"";position:absolute;inset:8px 0 0;border:1px dashed #ffffff18;border-radius:4px;transition:opacity .4s}
.stage-empty{position:absolute;inset:22% 0 0;display:grid;place-items:center;text-align:center;padding:0 16px;color:var(--muted-2);transition:opacity .4s}
.stage:not([data-state=empty]) .throat::before,.stage:not([data-state=empty]) .stage-empty{opacity:0}
.paper{position:relative;height:100%;transform-origin:50% 0;transition:transform .6s var(--ease-retract)}
.paper::before{content:"";position:absolute;inset:0;border-radius:var(--pr);box-shadow:0 30px 60px #0009,0 0 80px color-mix(in srgb,var(--stage-glow) 22%,transparent);opacity:.5;transition:opacity .5s var(--ease-out)}
.stage[data-state=ready] .paper::before{opacity:1}
.stage[data-state=empty] .paper{transform:translateY(-78%)}
.stage[data-state=printing] .paper{animation:feed 1.3s linear both,settle .5s var(--ease-settle) 1.3s both}
.stage[data-state=printing] .paper::before{opacity:1;transition-delay:1.3s}
@keyframes feed{0%{transform:translateY(-78%)}
  30%{transform:translateY(-52%);animation-timing-function:steps(1)} 34%{transform:translateY(-52%)}
  70%{transform:translateY(-14%);animation-timing-function:steps(1)} 74%{transform:translateY(-14%);animation-timing-function:var(--ease-out)}
  100%{transform:none}}
@keyframes settle{from{rotate:-.6deg}to{rotate:0deg}}
.buf{position:absolute;inset:0;opacity:0;transition:opacity .28s var(--ease-out)}
.buf.on{opacity:1}
.buf svg{display:block;width:100%;height:100%}
.sheen{position:absolute;inset:0;overflow:hidden;border-radius:var(--pr);pointer-events:none}
.sheen::before{content:"";position:absolute;inset:0;background:var(--grad-sheen);mix-blend-mode:soft-light;opacity:0;transform:translateX(-60%)}
.stage.sheening .sheen::before{animation:sheen .9s var(--ease-out) 1.8s both}
@keyframes sheen{0%{opacity:1;transform:translateX(-60%)}100%{opacity:1;transform:translateX(60%)}}
/* Tilt and glare follow a fine pointer (P2); First Class adds a holo sheen. Preview only: exports keep the static foil. */
.tilt{position:absolute;inset:0;transform:perspective(2400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease-out)}
.tilt.live{transition:transform .12s linear}
.glare,.holo{position:absolute;inset:0;border-radius:var(--pr);pointer-events:none;opacity:0;transition:opacity .4s}
.glare{background:radial-gradient(600px circle at var(--gx,50%) var(--gy,50%),#ffffff2e,transparent 40%);mix-blend-mode:soft-light}
.tilt.live .glare{opacity:1}
.stage.first[data-state=ready] .holo{background:linear-gradient(115deg,transparent 20%,#ff9de2 35%,#9de7ff 50%,#fff3a0 65%,transparent 80%) var(--hx,50%) var(--hy,50%)/300% 300%;mix-blend-mode:color-dodge}
/* Only while the pointer plays with it (or looping on touch): parked at 50 % the band covers the whole pass and washes out the ink. */
.stage.first[data-state=ready] .tilt.live .holo{opacity:.22}
@media (hover:none){.stage.first[data-state=ready] .holo{opacity:.22;animation:holo 6s ease-in-out infinite alternate}}
@keyframes holo{from{background-position:0% 0%}to{background-position:100% 100%}}
.view-btn{display:flex;align-items:center;gap:8px;margin:18px auto 0;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:#12101880;color:var(--fg-soft);font:500 14px var(--font);cursor:pointer}
.view-btn .ic{width:16px;height:16px}
.view-btn{transition:opacity .3s var(--ease-out),visibility .3s}
/* Space is always reserved, so the controls never jump when the pass is ready. */
.stage:not([data-state=ready]) .view-btn{visibility:hidden;opacity:0}

.controls{display:flex;flex-wrap:wrap;gap:28px 40px;align-items:flex-start;max-width:1180px;margin:48px auto 0}
fieldset{border:0;margin:0;padding:0;min-width:0}
.group legend,.group .legend{display:block;margin-bottom:12px;padding:0}
.chips{display:flex;gap:18px;padding:5px}
.lv{position:relative;display:flex;flex-direction:column;gap:9px;width:104px;cursor:pointer;color:var(--muted);font:500 13px var(--font);letter-spacing:0;transition:color .15s}
.lv-sw{position:relative;display:block;aspect-ratio:2000/813;border-radius:6px;opacity:.62;transition:opacity .15s,transform .16s var(--ease-out)}
.lv-sw::after{content:"";position:absolute;inset:-5px;border-radius:9px;border:1.5px solid transparent;transition:border-color .15s}
.lv-sw img{display:block;width:100%;height:100%;border-radius:6px}
.lv:hover{color:var(--fg-soft)}.lv:hover .lv-sw{opacity:.9}
.lv:active .lv-sw{transform:scale(.96)}
.lv:has(input:checked){color:var(--fg)}
.lv:has(input:checked) .lv-sw{opacity:1}
.lv:has(input:checked) .lv-sw::after{border-color:var(--accent)}
.lv-name{padding-left:2px}
.seg label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.lv:has(input:focus-visible) .lv-sw::after{border-color:var(--focus);border-width:2px}
.lv input,.seg input{position:absolute;opacity:0;pointer-events:none}
.seg{display:inline-flex;padding:4px;border-radius:12px;background:#12101880;border:1px solid var(--line)}
.seg label{position:relative;cursor:pointer;padding:9px 14px;border-radius:8px;font:500 14px var(--font);letter-spacing:0;color:var(--muted);display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;white-space:nowrap;transition:color .2s,background .2s}
.seg label:hover{color:var(--fg-soft)}
.seg label small{font-size:10.5px;color:var(--muted-2);margin-top:3px;font-variant-numeric:tabular-nums}
.seg label:has(input:checked){background:var(--tint-accent);color:var(--accent);box-shadow:inset 0 0 0 1px var(--line-accent-strong)}
.seg label:has(input:disabled){opacity:.4;cursor:not-allowed}
.seg-sm{padding:3px;border-radius:10px}
.seg-sm label{padding:10px 11px;border-radius:7px;font-weight:600;font-size:13px}
.export{margin-left:auto}
.export-row{display:flex;gap:10px;align-items:center}
.actions{flex-basis:100%;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end;padding-top:26px;border-top:1px solid var(--line-soft)}
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:var(--r-btn);padding:15px 20px;font:600 14px var(--font);letter-spacing:0;border:1px solid var(--line);background:#12101880;color:var(--fg);cursor:pointer;white-space:nowrap;transition:transform .3s var(--ease-out),background .3s,border-color .3s,opacity .3s}
.btn .ic{width:17px;height:17px}
.btn:hover{transform:translateY(-3px);border-color:var(--line-accent-strong)}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--accent-strong);color:var(--on-accent);border-color:transparent;padding:17px 24px}
.btn.primary:hover{background:var(--accent-hover)}
.btn.sm{padding:9px 14px;font-size:13px}
.btn[aria-disabled=true],.dock [aria-disabled=true]{opacity:.4;cursor:not-allowed}
.btn[aria-disabled=true]:hover{transform:none;border-color:var(--line)}
.btn.primary[aria-disabled=true]:hover{background:var(--accent-strong);border-color:transparent}
.btn.pulse{animation:pulse-btn .4s var(--ease-out)}
@keyframes pulse-btn{50%{transform:scale(1.04)}}

.embed{max-width:1180px;margin:40px auto 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.embed summary{display:flex;align-items:center;gap:12px;padding:20px 0;cursor:pointer;list-style:none;font:var(--fw-ui) 18px var(--font)}
.embed summary::-webkit-details-marker{display:none}
.embed summary span{color:var(--muted-2);font:440 14px var(--font)}
.embed summary::after{content:"+";margin-left:auto;font-weight:300;font-size:26px;line-height:.9;color:var(--accent);transition:rotate .3s var(--ease-out)}
.embed[open] summary::after{rotate:45deg}
.embed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.snip{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.snip textarea{width:100%;resize:vertical;min-height:110px;padding:12px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface-deep);color:var(--fg-soft);font:400 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.embed-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:18px 0 24px;font-size:14px;color:var(--muted-2)}

/* ---------- liveries strip ---------- */
.lv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 36px}
/* An odd last card sits centred under the pairs instead of hanging left. */
.lv-grid>.lv-card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc((100% - 36px) / 2)}
.lv-card{all:unset;display:flex;flex-direction:column;gap:16px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lv-card:focus-visible{outline:2px solid var(--focus);outline-offset:6px;border-radius:var(--r-media)}
.lv-img{position:relative;display:block;aspect-ratio:2000/813;border-radius:var(--r-media);background:var(--grad-tile);transition:transform .5s var(--ease-wipe),box-shadow .5s var(--ease-wipe)}
.lv-img img{display:block;width:100%;height:100%;opacity:0;transition:opacity .45s var(--ease-out)}
.lv-img img.on{opacity:1}
.lv-img:has(img.on){background:none;filter:drop-shadow(0 22px 40px #0008)}
.lv-card:hover .lv-img{transform:translateY(-5px)}
.lv-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.lv-cap b{font:var(--fw-ui) 20px var(--font);letter-spacing:-.01em;transition:color .2s}
.lv-cap span{font-size:15px;color:var(--muted)}
.lv-card[aria-pressed=true] .lv-cap b{color:var(--accent)}
.lv-card[aria-pressed=true] .lv-cap b::before{content:"";display:inline-block;width:7px;height:7px;margin:0 10px 3px 0;border-radius:50%;background:var(--accent)}

/* ---------- flight ---------- */
.facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-block:1px solid var(--line)}
.facts>div{padding:20px 18px;border-right:1px solid var(--line-mid)}
.facts>div:last-child{border-right:0}
.facts dd{display:flex;flex-direction:column;margin-top:8px;font:var(--fw-ui) 24px/1.25 var(--font);letter-spacing:-.01em}
.facts small{margin-top:6px;font:440 13px var(--font);letter-spacing:0;color:var(--muted-2)}
.local-time{margin-top:26px;color:var(--muted);font-size:16px}
.local-time b{color:var(--fg-soft);font-weight:560}

/* ---------- departures board (split flaps) ---------- */
.board{margin-bottom:36px;border-radius:var(--r-panel);background:#0b0a10;border:1px solid var(--line-soft);padding:22px 26px 24px;box-shadow:var(--shadow-media)}
.board-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.board-h{font:600 13px var(--font);letter-spacing:.3em;text-transform:uppercase;color:var(--accent-end)}
.board table{width:100%;border-collapse:separate;border-spacing:0 6px;font:600 clamp(13px,1.45vw,22px)/1 var(--font);letter-spacing:0}
.board th{font:600 10px var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);text-align:left;padding:0 0 4px}
.board td{padding:0 clamp(8px,1.4vw,22px) 0 0;white-space:nowrap;color:var(--fg)}
.board td:last-child{padding-right:0}
.board .gt406 td{color:#fff}
.flaps{display:inline-flex;gap:2px}
.flaps i{position:relative;display:inline-grid;place-items:center;width:1.05em;height:1.45em;border-radius:3px;font-style:normal;background:linear-gradient(#1d1a24 50%,#17141d 50%);box-shadow:inset 0 -1px 0 #0006,inset 0 1px 0 #ffffff0a}
.flaps i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#0009}
.gt406 .flaps i{background:linear-gradient(#2a1f30 50%,#221a28 50%)}
.board .st.ok{color:var(--ok)}.board .st.warn{color:var(--warn)}.board .st.bad{color:var(--bad)}.board .st.fly{color:var(--fly)}


/* ---------- footer ---------- */

/* ---------- dock ---------- */
.dock a[aria-current]{color:#f4b6d0}
/* ---------- dock: a flight strip, brand left, sections in the middle, the pass on the right ---------- */
.dock{position:fixed;left:50%;bottom:var(--dock-bottom);translate:-50% 0;z-index:40;display:flex;align-items:center;gap:6px;padding:6px;border-radius:var(--r-pill);background:color-mix(in srgb,#14111a 82%,transparent);box-shadow:0 0 0 1px #ffffff14,0 12px 40px #0008;backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3)}
.js .dock{opacity:0;transform:translateY(25px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js .dock.on{opacity:1;transform:none}
[data-intro=full] .dock.on{transition-delay:3.5s}[data-intro=short] .dock.on{transition-delay:.7s}
.dock a,.dock button{border:0;background:none;color:var(--dock-fg);cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}
.dock-brand{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 12px;font:500 15px var(--font-deco);letter-spacing:.04em;color:var(--fg)!important;border-right:1px solid #ffffff14;border-radius:var(--r-pill) 0 0 var(--r-pill)}
.dock-brand .ic{width:18px;height:18px;color:var(--accent)}
.dock nav{position:relative;display:flex;align-items:center}
.dock nav a{position:relative;z-index:1;display:grid;place-items:center;height:40px;padding:0 15px;border-radius:var(--r-pill);font:500 15px var(--font-deco);letter-spacing:.03em;white-space:nowrap;transition:color .15s}
.dock nav a:hover{color:var(--fg)}
.dock nav a[aria-current]{color:var(--fg)}
.dock-ind{position:absolute;left:0;top:0;height:40px;width:0;border-radius:var(--r-pill);background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff10;opacity:0;transition:translate .4s cubic-bezier(.2,0,0,1),width .4s cubic-bezier(.2,0,0,1),opacity .2s}
.dock-ind.on{opacity:1}
.dock-actions{display:flex;align-items:center;gap:6px;padding-left:6px;border-left:1px solid #ffffff14}
.dock-ic{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;transition:color .15s,background .15s,transform .16s var(--ease-out)}
.dock-ic:hover{color:var(--fg);background:#ffffff12}
.dock-cta{white-space:nowrap;display:flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 14px;border-radius:var(--r-pill);background:var(--accent-strong)!important;color:var(--on-accent)!important;font:600 14px var(--font);transition:background .15s,transform .16s var(--ease-out)}
.dock-cta:hover{background:var(--accent-hover)!important}
.dock-ic:active,.dock-cta:active,.dock nav a:active{transform:scale(.96)}
.dock-cta .ic{width:18px;height:18px}

/* ---------- footer ---------- */
.foot{position:relative;isolation:isolate;padding:clamp(90px,9vw,140px) var(--gutter) 120px;overflow:hidden}
.foot::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--bg),#111016cc 40%,var(--bg)),url("img/hero-1600.jpg") 50% 30%/cover;opacity:.55}
.foot-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.foot-logo{display:block;width:clamp(150px,16vw,210px);height:auto;margin-bottom:12px;filter:drop-shadow(0 5px 25px #17101870)}
.foot-line{font:500 clamp(26px,3vw,40px)/1.15 var(--font-deco);color:#f4eee9}
.foot-sub{color:var(--muted)}
.foot-cta{margin-top:18px}
.foot-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(64px,7vw,96px);padding-top:22px;border-top:1px solid var(--line-soft)}
.foot-links{display:flex;gap:10px;font:500 15px var(--font);color:var(--fg-soft)}
.foot-links span{color:var(--muted-2)}
.foot-links a{text-decoration:none;transition:color .15s}
.foot-links a:hover{color:var(--accent)}
.to-top{display:flex;align-items:center;gap:8px;font:500 14px var(--font);color:var(--muted);text-decoration:none;transition:color .15s}
.to-top:hover{color:var(--accent)}
.to-top .ic{width:16px;height:16px;transition:translate .2s var(--ease-out)}
.to-top:hover .ic{translate:0 -2px}
.colophon{margin-top:16px;font-size:12px;line-height:1.65;color:var(--muted-2);max-width:110ch}

/* Format switch: the stage morphs between ticket, story and post (checkin.js starts the transition). */
.stage{view-transition-name:stage}
::view-transition-group(stage){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,0,0,1)}
::view-transition-old(stage),::view-transition-new(stage){height:100%;object-fit:contain;animation-duration:.3s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}

[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);translate:-50% 0;padding:6px 10px;border-radius:6px;background:#111016;color:#f6eff7;font:500 12px/1.2 var(--font);letter-spacing:0;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(4px) scale(.95);transition:opacity .15s,transform .15s;box-shadow:0 6px 18px #0007}
@media (hover:hover){[data-tip]:hover::after{opacity:1;transform:none;transition-delay:.1s}}
[data-tip]:focus-visible::after{opacity:1;transform:none;transition-delay:.1s}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:96px;z-index:60;translate:-50% 0;max-width:calc(100vw - 32px);display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:var(--r-pill);background:#f6eff7;color:#111016;font:500 14px/1.4 var(--font);letter-spacing:0;box-shadow:var(--shadow-pop);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
#toast.on{opacity:1;transform:none;pointer-events:auto}
#toast:empty{display:none}
#toast a{font-weight:600;color:#7a2c5a;white-space:nowrap}

/* ---------- viewer ---------- */
#viewer{width:100vw;height:100svh;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:transparent;color:var(--fg);overflow:hidden}
#viewer[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;animation:pop .25s var(--ease-out)}
#viewer::backdrop{background:#08070bea;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
@keyframes pop{from{opacity:0;transform:scale(.96)}}
.viewer-art{position:relative;display:grid;place-items:center;width:100%;flex:1;min-height:0;container-type:size}
.viewer-art svg{display:block;max-width:100%;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 30px 60px #0009)}
/* Story and Post are full-bleed rectangles: a drop shadow there only framed the picture in a dark band. */
.viewer-art:not([data-format=ticket]) svg{filter:none}
/* Turned on its side: the ticket's length runs along the box height, its height may use the full width. */
.viewer-art.rot svg{position:absolute;left:50%;top:50%;width:min(100cqh,246cqw,1600px);max-width:none;max-height:none;translate:-50% -50%;rotate:90deg}
#viewer:has(.rot){padding-top:76px}
.viewer-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#12101880;display:grid;place-items:center;cursor:pointer}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ci-head{grid-template-columns:minmax(0,1fr)}
  .ci-form>*,.ci-intro{grid-column:1}
  .ci-intro{margin-bottom:24px}
  .export{margin-left:0}
  /* Groups wrap as they fit (livery, format and export differ in width once Post is in the format switch). */
  .actions{flex-basis:100%;justify-content:flex-start}
  .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts>div:nth-child(3){border-right:0}
  .facts>div:nth-child(-n+3){border-bottom:1px solid var(--line-mid)}
  .embed-grid{grid-template-columns:minmax(0,1fr)}
  .lv-grid{gap:28px 22px}
}
@media (max-width:760px){
  html{font-size:16px}
  .lead{font-size:17px}
  .chip{top:16px;height:40px;padding:0 12px;gap:8px}.chip-r{right:16px}
  .days-n{font-size:24px!important}
  .hero-title{inset:9% 20px 18%}
  /* Portrait: the lit sign letters sit behind the line and the countdown; a pool of shade keeps them legible. */
  .hero-shade{background:radial-gradient(ellipse 90% 34% at 50% 58%,#100d16b0,transparent 80%),var(--scrim-hero)}
  .hero-photo img{object-position:50% 50%}
  .gta-logo{width:min(68vw,290px)}
  .cd-cells>div{padding:10px 10px 8px}
  .hero-bottom{bottom:calc(92px + env(safe-area-inset-bottom));left:20px;right:20px}
  .hero-bottom a{font-size:16px;gap:18px}
  .head{flex-direction:column;align-items:flex-start}
  .field input{font-size:24px}
  .scroller{overflow-x:auto;scrollbar-width:none;margin:-4px -20px;padding:4px 20px}
  .scroller::-webkit-scrollbar{display:none}
  .cast{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slot{margin:0 -8px}
  .stage[data-format=story],[data-fmt=story] .stage:not([data-format]){width:min(100%,calc(66svh * 1080 / 1920))}
  .controls{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:36px}
  .export{margin-left:0}
  .seg{display:flex;width:max-content}
  .export-row .seg-sm:first-child{flex:1}
  .export-row .seg label,.group:not(.export) .seg label{flex:1;align-items:center}
  .group:not(.export) .seg{width:100%}
  .actions{display:grid;grid-template-columns:1fr 1fr;padding-top:22px}
  .actions .btn.primary{grid-column:1/-1}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts>div{border-bottom:1px solid var(--line-mid)}
  .facts>div:nth-child(3){border-right:1px solid var(--line-mid)}
  .facts>div:nth-child(2n){border-right:0}
  .facts>div:nth-last-child(-n+2){border-bottom:0}
  .facts dd{font-size:20px}
  .lv-grid{grid-template-columns:minmax(0,1fr)}
  .lv-grid>.lv-card:last-child:nth-child(odd){width:auto;justify-self:stretch}
  .board{padding:16px 14px}
  .board-top{flex-wrap:wrap;gap:6px 16px}
  .board-h{letter-spacing:.2em}
  .board thead{display:none}
  .board table,.board tbody{display:block;font-size:min(3.1vw,15px)}
  .board tr{display:grid;grid-template-columns:auto auto 1fr;gap:6px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--line-soft)}
  .board tr:first-child{border-top:0}
  .board td{padding:0}
  .board td:nth-child(3){grid-column:1/-1;order:3}
  .board td:nth-child(4){display:none}
  .board td:nth-child(5){justify-self:end}
  .dock{gap:4px;padding:5px}
  .dock-brand{padding:0 10px 0 12px}.dock-brand span{display:none}
  .dock nav a{padding:0 11px;font-size:14px}
  .dock-ic{display:none}
  .dock-actions{padding-left:4px}
  .dock-cta{width:40px;padding:0;justify-content:center}.dock-cta span{display:none}
  .foot{padding-bottom:110px}
  .foot-bar{flex-direction:column;align-items:flex-start}
  .lv{width:auto;flex:1 1 0;min-width:0}
  .chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px}
  #progress{display:none}
  #toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (max-width:380px){
  .arrive-main{letter-spacing:.16em}
  .chip{padding:0 10px}
  .cd-cells>div{padding:10px 7px 8px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero{height:100svh}
  .js .intro{display:none}
  .js .latch{opacity:1;translate:none}
  .stage[data-state=empty] .paper{transform:none}
  .stage[data-state=empty] .throat::before,.stage[data-state=empty] .stage-empty{opacity:0}
  .stage[data-state=empty] .paper::before{opacity:1}
  .sheen,.glare,.holo{display:none}
  *,::before,::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .buf{transition-duration:.2s!important}
  .js .dock{opacity:1;transform:none}
}