/* ========= Grand Trump Auto — $GTA =========
   Desktop canvas. Poster-style illustration, thick black outlines.
   Scenes paint themselves in CSS and upgrade in place when the
   art-pipeline PNGs named in ASSETS.md are dropped into /assets.
   =========================================== */

:root{
  --pink:#ff3fa4;
  --magenta:#e8208e;
  --coral:#ff7a2f;
  --gold:#ffc83d;
  --turq:#1fc8c8;
  --purple:#2b0b4a;
  --night:#180633;
  --sand:#f0c98a;
  --ink:#07050c;
  --paper:#fff6ea;

  --line:5px solid var(--ink);
  --pop: 10px 10px 0 var(--ink);
  --pop-sm: 6px 6px 0 var(--ink);

  --disp:'Archivo Black',system-ui,sans-serif;
  --cond:'Barlow Condensed',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-width:1240px;
  background:var(--night);color:var(--paper);
  font-family:var(--body);font-size:16px;line-height:1.6;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--disp);line-height:.98;margin:0;letter-spacing:-.01em}
code{font-family:ui-monospace,Menlo,Consolas,monospace}

.eyebrow{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.22em;
  font-size:14px;font-weight:700;color:var(--gold);margin:0 0 10px;
}
.lede{font-size:17px;opacity:.86;margin:12px 0 0}

/* ───────── buttons ───────── */
.btn{
  display:inline-block;cursor:pointer;text-decoration:none;
  font-family:var(--disp);font-size:17px;letter-spacing:.01em;
  padding:15px 30px;border:var(--line);border-radius:4px;
  box-shadow:var(--pop-sm);transition:transform .12s,box-shadow .12s;
  background:var(--paper);color:var(--ink);
}
.btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn-buy{background:var(--pink);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.btn-ghost{background:var(--gold);color:var(--ink)}
.btn-big{font-size:22px;padding:19px 44px}
.btn-mini{
  font-family:var(--cond);font-size:15px;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;padding:11px 20px;background:var(--paper);
}

/* ───────── nav ───────── */
.nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;
  width:1240px;display:flex;align-items:center;gap:18px;
  padding:9px 14px 9px 18px;
  background:rgba(14,4,32,.9);backdrop-filter:blur(9px);
  border:4px solid var(--ink);border-radius:999px;
  box-shadow:0 8px 0 rgba(0,0,0,.45);
}
.nav-logo img{height:38px;width:auto}
.nav-route{display:flex;align-items:center;gap:14px;margin-left:auto}
.route-icon{
  width:40px;height:30px;flex:none;display:block;
  background:no-repeat center/contain;
  transition:transform .3s;
}
.nav-links{display:flex;gap:4px}
.nav-links a{
  font-family:var(--cond);font-weight:700;font-size:17px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--paper);text-decoration:none;
  padding:9px 13px;border-radius:999px;transition:background .15s,color .15s;
}
.nav-links a:hover{background:rgba(255,255,255,.12)}
.nav-links a.is-here{background:var(--gold);color:var(--ink)}
.nav-buy{padding:11px 22px;font-size:15px;box-shadow:4px 4px 0 var(--ink)}

/* CITY POPULATION — live visitor readout, HUD style */
.pop{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 16px;margin-left:4px;flex:none;
  border:3px solid var(--ink);border-radius:8px;
  background:rgba(8,3,20,.72);
}
.pop[hidden]{display:none}
.pop-label{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:10px;color:var(--gold);line-height:1;
}
.pop-count{
  font-family:var(--disp);font-size:17px;line-height:1.05;color:#fff;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 12px rgba(31,200,200,.75);
}
.pop-count.tick{animation:popTick .42s cubic-bezier(.2,.9,.3,1)}
@keyframes popTick{
  0%{transform:translateY(5px) scale(.9);opacity:.35}
  60%{transform:translateY(-2px) scale(1.07)}
  100%{transform:none;opacity:1}
}

/* ───────── hero ───────── */
.hero{
  position:relative;min-height:1070px;padding:146px 0 120px;
  display:flex;flex-direction:column;align-items:center;
  overflow:hidden;background:var(--night);
}
.hero-plate{
  position:absolute;inset:0;
  background:url('assets/skyline-plate.jpg') center/cover no-repeat;
  opacity:.9;
}
.hero-plate::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(0,0,0,0) 20%,rgba(10,3,24,.72) 72%),
    linear-gradient(180deg,rgba(10,3,24,.68),rgba(10,3,24,.1) 35%,rgba(10,3,24,.92));
}

/* poster panels, scattered around the lockup */
.poster{position:absolute;inset:0;pointer-events:none}
.pnl{
  position:absolute;margin:0;border:var(--line);border-radius:3px;
  box-shadow:var(--pop);overflow:hidden;background:var(--purple);
  opacity:0;transform:translateY(42px) scale(.93);
}
.pnl img{width:100%;height:100%;object-fit:cover}
.poster.is-in .pnl{
  opacity:1;transform:translateY(0) scale(1);
  transition:opacity .62s cubic-bezier(.2,.8,.25,1),transform .62s cubic-bezier(.2,.8,.25,1);
}
.pnl-heli {left:24px;  top:132px; width:272px;height:292px;transform-origin:left top}
.pnl-trump{left:62px;  top:452px; width:288px;height:340px}
.pnl-car  {right:28px; top:132px; width:272px;height:300px}
.pnl-girl {right:62px; top:452px; width:262px;height:344px}
.pnl-cash {left:-26px; top:826px; width:250px;height:214px}
.pnl-yacht{right:-26px;top:828px; width:276px;height:196px}
.pnl-golf {left:292px; top:866px; width:224px;height:206px}
.poster.is-in .pnl-trump{transition-delay:.06s}
.poster.is-in .pnl-car  {transition-delay:.12s}
.poster.is-in .pnl-girl {transition-delay:.18s}
.poster.is-in .pnl-heli {transition-delay:.24s}
.poster.is-in .pnl-cash {transition-delay:.30s}
.poster.is-in .pnl-yacht{transition-delay:.36s}
.poster.is-in .pnl-golf {transition-delay:.42s}

/* helicopter crossing the upper-left sky */
.heli-fly{
  position:absolute;top:92px;left:-180px;width:150px;height:60px;
  background:url('assets/helicopter.png') no-repeat center/contain;
  opacity:.92;animation:heliCross 26s linear 1.6s infinite;
}
.heli-fly::before{ /* CSS stand-in until the PNG lands */
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,transparent 8%,#0d0a16 8% 62%,transparent 62%) center 56%/100% 15% no-repeat,
    linear-gradient(90deg,transparent 18%,#0d0a16 18% 46%,transparent 46%) center 34%/100% 30% no-repeat,
    linear-gradient(90deg,#0d0a16 0 100%) center 24%/92% 5% no-repeat;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.4));
}
.heli-fly.has-img::before{display:none}
@keyframes heliCross{
  0%{transform:translateX(0) translateY(0)}
  100%{transform:translateX(1700px) translateY(-26px)}
}

.hero-mid{position:relative;z-index:5;text-align:center;width:660px;margin-top:0}
.hero-logo{
  width:500px;margin:0 auto 26px;
  filter:drop-shadow(0 14px 0 rgba(0,0,0,.42));
  opacity:0;transform:translateY(26px) scale(.95);
}
.hero.is-in .hero-logo{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.8,.25,1) .1s,transform .7s cubic-bezier(.2,.8,.25,1) .1s;
}
.hero-tag{
  font-size:33px;text-transform:uppercase;color:#fff;
  text-shadow:0 4px 0 var(--ink),0 0 30px rgba(255,63,164,.5);
  margin-bottom:14px;
}
.hero-sub{font-size:18px;opacity:.92;margin:0 auto 30px;max-width:530px;font-style:italic}
.hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* CA strip */
.ca-strip{
  display:flex;align-items:center;gap:12px;margin:28px auto 0;width:fit-content;
  max-width:640px;padding:11px 12px 11px 18px;
  background:rgba(8,3,20,.82);border:4px solid var(--ink);border-radius:999px;
  box-shadow:var(--pop-sm);
}
.ca-label{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:13px;color:var(--gold);flex:none;
}
.ca-strip code{font-size:14px;word-break:break-all;text-align:left;color:#fff}
.ca-copy{
  flex:none;cursor:pointer;font-family:var(--cond);font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:.12em;
  padding:9px 18px;border:3px solid var(--ink);border-radius:999px;
  background:var(--gold);color:var(--ink);transition:background .15s;
}
.ca-copy:hover{background:#fff}
.ca-copy.done{background:var(--turq)}

.scroll-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.24em;font-size:13px;
  color:var(--gold);display:flex;align-items:center;gap:12px;
}
.scroll-cue span{
  width:2px;height:36px;background:linear-gradient(var(--gold),transparent);
  animation:cue 2.1s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ───────── generic section ───────── */
.sec{position:relative;padding:112px 0}
.sec-head{width:1120px;margin:0 auto 46px;text-align:center}
.sec-head h2{font-size:58px;text-transform:uppercase;color:#fff;text-shadow:0 5px 0 var(--ink)}

/* scene shell: CSS painting now, image later */
.scene{
  position:relative;width:100%;overflow:hidden;
  border-top:var(--line);border-bottom:var(--line);
  background-size:cover;background-position:center;
}
.scene.has-bg{background-image:var(--bg)}

/* ───────── city / boulevard ───────── */
.city{padding-bottom:0}
.scene-boulevard{
  height:560px;
  background:
    linear-gradient(180deg,#2b0b4a 0%,#7a1668 30%,#e8208e 52%,#ff7a2f 62%,#2a1038 63%,#140720 100%);
}
.scene-boulevard.has-bg::before{display:none}
.scene-boulevard::before{ /* hotel strip + lit windows */
  content:'';position:absolute;left:0;right:0;top:30%;height:33%;
  background:
    repeating-linear-gradient(90deg,
      rgba(9,3,22,.95) 0 86px,rgba(9,3,22,.6) 86px 104px,
      rgba(9,3,22,.95) 104px 178px,rgba(9,3,22,.55) 178px 196px),
    repeating-linear-gradient(0deg,
      transparent 0 14px,rgba(255,200,61,.5) 14px 20px,transparent 20px 34px);
  background-blend-mode:normal,screen;
  mask-image:linear-gradient(180deg,transparent,#000 36%,#000);
}
.scene-boulevard.has-bg .road-lights,
.scene-boulevard.has-bg .palm-shadows{display:none}
.road-lights{
  position:absolute;left:0;right:0;bottom:0;height:37%;
  background:
    repeating-linear-gradient(90deg,transparent 0 120px,rgba(255,200,61,.5) 120px 190px,transparent 190px 300px)
      center bottom/100% 4px no-repeat,
    linear-gradient(180deg,rgba(255,122,47,.22),transparent 60%);
}
.palm-shadows{
  position:absolute;left:0;right:0;bottom:0;height:37%;
  background:repeating-linear-gradient(74deg,
    rgba(6,2,16,.46) 0 26px,transparent 26px 118px);
  animation:swayShadow 9s ease-in-out infinite alternate;
}
@keyframes swayShadow{from{transform:skewX(-2.5deg)}to{transform:skewX(2.5deg)}}

.car-rig{
  position:absolute;left:52%;bottom:52px;width:560px;
  transform:translateX(-50%) translateX(-120px);
  opacity:0;transition:transform .9s cubic-bezier(.2,.8,.25,1),opacity .6s;
}
.city.is-in .car-rig{transform:translateX(-50%);opacity:1}
.car-img{width:100%;filter:drop-shadow(0 16px 18px rgba(0,0,0,.6))}
.car-img:not(.has-img){
  width:420px;margin:0 auto;border:var(--line);border-radius:4px;box-shadow:var(--pop);
  aspect-ratio:4/3;object-fit:cover;object-position:60% 40%;
}
.car-beam,.car-puff{position:absolute;pointer-events:none}
.car-beam{inset:0;width:100%;opacity:0;mix-blend-mode:screen}
.car-rig.rev .car-beam{animation:beamFlash .9s ease-out}
@keyframes beamFlash{0%,100%{opacity:0}18%{opacity:1}42%{opacity:.25}62%{opacity:.95}}
.car-puff{right:-30px;bottom:34px;width:130px;opacity:0}
.car-rig.rev .car-puff{animation:puff 1.1s ease-out}
@keyframes puff{
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  25%{opacity:.95}
  100%{opacity:0;transform:translate(90px,-46px) scale(1.5)}
}
.car-rig.rev .car-img{animation:shake .5s ease-in-out 2}
@keyframes shake{
  0%,100%{transform:translate(0,0) rotate(0)}
  22%{transform:translate(-2px,1px) rotate(-.25deg)}
  55%{transform:translate(2px,-1px) rotate(.25deg)}
  78%{transform:translate(-1px,0) rotate(-.12deg)}
}
/* headlight wash on the road during a rev */
.scene-boulevard::after{
  content:'';position:absolute;left:12%;right:12%;bottom:0;height:44%;opacity:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,236,190,.55),transparent 64%);
  transition:opacity .2s;pointer-events:none;
}
.scene-boulevard.lit::after{opacity:1}

/* billboard */
.billboard{width:1080px;margin:-58px auto 0;position:relative;z-index:4}
.billboard-panel{
  position:relative;
  background:var(--paper);color:#1b1120;border:var(--line);border-radius:6px;
  box-shadow:var(--pop);padding:42px 48px 36px;
}
.billboard-panel::before{     /* lamp bar lifted from the painted billboard */
  content:'';position:absolute;left:5%;right:5%;top:-26px;height:26px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 44px,var(--gold) 44px 72px,transparent 72px 128px);
  border-top:5px solid var(--ink);
  filter:drop-shadow(0 6px 14px rgba(255,200,61,.45));
}
.billboard-panel h2{
  font-size:40px;text-transform:uppercase;color:#1b1120;margin-bottom:18px;line-height:1.02;
}
.billboard-panel p{font-size:16.5px;margin:0 0 14px;max-width:860px}
.billboard-actions{display:flex;gap:14px;align-items:center;margin-top:24px}
.rev-caption{
  font-family:var(--cond);font-size:21px;font-weight:600;font-style:italic;
  color:var(--magenta);margin-top:18px!important;opacity:0;transition:opacity .35s;
}
.rev-caption.show{opacity:1}
.billboard-legs{display:flex;justify-content:space-between;width:60%;margin:0 auto;height:72px}
.billboard-legs i{width:20px;background:var(--ink);border-radius:0 0 3px 3px}

/* ───────── beach ───────── */
.beach{padding-bottom:0}
.scene-beach{
  height:860px;
  background:linear-gradient(180deg,
    #43b9e8 0%,#8fd7ef 26%,#1fc8c8 44%,#17a7ad 56%,#f0c98a 62%,#e0b172 100%);
  transition:background 1.1s ease;
}
.scene-beach.sunset{
  background:linear-gradient(180deg,
    #4a1055 0%,#b32a7e 22%,#ff5f8f 38%,#ff9a4d 48%,#c2567f 56%,#e4a06c 62%,#9c6a4e 100%);
}
.scene-beach.has-bg .sky-grad,
.scene-beach.has-bg .sun-disc{display:none}
.sky-grad{position:absolute;inset:0 0 38% 0;pointer-events:none}
.sun-disc{
  position:absolute;right:20%;top:12%;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,#fff6d0,#ffd86b 55%,rgba(255,200,61,0) 72%);
  opacity:.55;transition:all 1.1s ease;
}
.scene-beach.sunset .sun-disc{top:30%;width:230px;height:230px;opacity:.95;
  background:radial-gradient(circle,#fff0c0,#ff8a4d 52%,rgba(255,80,120,0) 74%)}

.sea{position:absolute;left:0;right:0;top:44%;height:22%;overflow:hidden;pointer-events:none}
.sea-sparkle{
  position:absolute;inset:0;
  background:url('assets/water-sparkle.png') repeat-x center/1200px 100%;
  opacity:.6;animation:sparkleDrift 14s linear infinite;
}
.sea-sparkle::before{ /* CSS glints until the PNG lands */
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(97deg,rgba(255,255,255,.34) 0 3px,transparent 3px 62px),
    repeating-linear-gradient(83deg,rgba(255,255,255,.18) 0 2px,transparent 2px 96px);
  filter:blur(1.1px);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 72%,transparent);
  animation:glint 3.4s ease-in-out infinite alternate;
}
.sea-sparkle.has-img::before{display:none}
@keyframes sparkleDrift{to{background-position-x:-1200px}}
@keyframes glint{from{opacity:.45}to{opacity:.95}}
.foam{
  position:absolute;left:0;right:0;bottom:-6px;height:34px;
  background:url('assets/foam-line.png') repeat-x center/1200px 100%;
  animation:tide 7.5s ease-in-out infinite alternate;
}
.foam::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.35) 60%,transparent);
  border-radius:50% 50% 0 0/22px 22px;
}
.foam.has-img::before{display:none}
@keyframes tide{from{transform:translateY(10px);opacity:.75}to{transform:translateY(-14px);opacity:1}}

.boat-lane{position:absolute;left:0;right:0;top:45%;height:60px;pointer-events:none}
.boat{
  position:absolute;left:-200px;width:150px;
  animation:boatCross 34s linear 5s infinite;
}
.boat:not(.has-img){
  height:26px;background:#fff;border:3px solid var(--ink);
  border-radius:40% 8% 40% 8%/60% 60% 40% 40%;
}
@keyframes boatCross{to{transform:translateX(1700px)}}

.gull-lane{position:absolute;left:0;right:0;top:14%;height:50px;pointer-events:none}
.gull{
  position:absolute;left:-120px;width:52px;opacity:.85;
  animation:gullCross 23s linear 9s infinite;
}
.gull:not(.has-img){
  height:14px;
  background:
    radial-gradient(ellipse at 100% 100%,transparent 70%,var(--ink) 71% 78%,transparent 79%) left/50% 100% no-repeat,
    radial-gradient(ellipse at 0 100%,transparent 70%,var(--ink) 71% 78%,transparent 79%) right/50% 100% no-repeat;
}
@keyframes gullCross{
  0%{transform:translate(0,0)}
  50%{transform:translate(850px,-22px)}
  100%{transform:translate(1700px,6px)}
}

.layer{position:absolute;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.4))}
.palm-l{left:-40px;bottom:46%;width:260px;transform-origin:left top;animation:frond 7s ease-in-out infinite alternate}
.palm-r{right:-40px;bottom:44%;width:260px;transform-origin:right top;animation:frond 8.4s ease-in-out .8s infinite alternate-reverse}
@keyframes frond{from{transform:rotate(-2deg)}to{transform:rotate(2.4deg)}}
.palm-l:not(.has-img),.palm-r:not(.has-img){display:none}

/* SVG stand-ins — hidden as soon as the painted art arrives */
.svg-tower,.svg-umb,.svg-lounge,.svg-towel{position:absolute;pointer-events:none;display:block}
.svg-tower svg,.svg-umb svg,.svg-lounge svg,.svg-towel svg{width:100%;height:auto;display:block;overflow:hidden;filter:drop-shadow(0 8px 7px rgba(0,0,0,.3))}
.svg-tower{right:15.5%;bottom:27%;width:150px}
.scene-beach.art-tower .svg-tower{display:none}
.svg-umb{width:184px;bottom:19%;transform-origin:50% 92%;
  animation:umbSway 6s ease-in-out infinite alternate}
.svg-umb-a{left:17.5%}
.svg-umb-b{left:31%;width:164px;animation-delay:1.4s}
.scene-beach.art-umb .svg-umb{display:none}

.tower{right:22%;bottom:16%;width:104px}
.tower:not(.has-img){display:none}
.umb{width:124px;bottom:17%;transform-origin:50% 100%;animation:umbSway 6s ease-in-out infinite alternate}
.umb-a{left:22%}
.umb-b{left:32%;animation-delay:1.4s;width:112px}
@keyframes umbSway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.umb:not(.has-img){
  height:120px;background:
    conic-gradient(from 180deg at 50% 100%,
      var(--coral) 0 18deg,#fff 18deg 36deg,var(--coral) 36deg 54deg,#fff 54deg 72deg,
      var(--coral) 72deg 90deg,#fff 90deg 108deg,var(--coral) 108deg 126deg,#fff 126deg 144deg,
      var(--coral) 144deg 162deg,#fff 162deg 180deg,transparent 180deg);
  border-radius:50% 50% 0 0;border-bottom:none;
  box-shadow:inset 0 -3px 0 var(--ink);
}
.umb-b:not(.has-img){
  background:conic-gradient(from 180deg at 50% 100%,
    var(--turq) 0 18deg,#fff 18deg 36deg,var(--turq) 36deg 54deg,#fff 54deg 72deg,
    var(--turq) 72deg 90deg,#fff 90deg 108deg,var(--turq) 108deg 126deg,#fff 126deg 144deg,
    var(--turq) 144deg 162deg,#fff 162deg 180deg,transparent 180deg);
}

.girl{left:7%;bottom:6%;width:208px;border:var(--line);border-radius:4px;box-shadow:var(--pop-sm)}
.girl.has-img{border:none;box-shadow:none;width:188px;left:6%;bottom:3%}
.trump{right:7%;bottom:6%;width:208px;border:var(--line);border-radius:4px;box-shadow:var(--pop-sm)}
.trump.has-img{border:none;box-shadow:none;width:176px;right:6%;bottom:3%}

.club-sign{
  position:absolute;left:50%;top:9%;transform:translateX(-50%);
  width:270px;aspect-ratio:900/420;
  background:url('assets/club-sign.jpg') center/contain no-repeat;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));
}
.club-sign::after{            /* lit state cross-fades in at sunset */
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .9s ease;
  background:url('assets/club-sign-lit.jpg') center/contain no-repeat;
}
.scene-beach.sunset .club-sign::after{opacity:1}
.club-sign span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.loungers{position:absolute;left:47%;bottom:6%;display:flex;gap:22px}
.lounger{
  position:relative;cursor:pointer;background:none;border:none;padding:0;
  width:104px;height:72px;transition:transform .15s;
}
.lounger:hover{transform:translateY(-5px)}
.lounge-art{width:100%}
.lounge-art:not(.has-img){display:none}
.svg-lounge{position:absolute;inset:0;width:100%}
.lounger.art-chair .svg-lounge{display:none}
.towel{
  position:absolute;left:12%;top:-6px;width:74%;opacity:0;
  transform:translateY(-22px) rotate(-6deg);transition:opacity .3s,transform .3s;
}
.towel:not(.has-img){display:none}
.svg-towel{
  left:14%;top:-10px;width:72%;opacity:0;
  transform:translateY(-22px) rotate(-6deg);transition:opacity .3s,transform .3s;
}
.lounger.taken .svg-towel{opacity:1;transform:translateY(0) rotate(-4deg)}
.lounger.art-towel .svg-towel{display:none}
.lounger.taken .towel{opacity:1;transform:translateY(0) rotate(-4deg)}
.seat-flag{
  position:absolute;left:50%;bottom:-34px;transform:translateX(-50%) scaleY(0);
  transform-origin:bottom;white-space:nowrap;
  font-family:var(--cond);font-weight:700;font-size:14px;text-transform:uppercase;
  letter-spacing:.08em;padding:5px 12px;background:var(--gold);color:var(--ink);
  border:3px solid var(--ink);border-radius:4px;transition:transform .25s .1s;
}
.lounger.taken .seat-flag{transform:translateX(-50%) scaleY(1)}

.beach-sign{
  position:absolute;left:50%;top:24%;transform:translateX(-50%);
  width:720px;aspect-ratio:1600/700;
  background:url('assets/beach-sign.png') center/100% 100% no-repeat;
  color:#1b1120;filter:drop-shadow(0 12px 14px rgba(0,0,0,.4));
}
/* headline on the middle board, subtitle on the bottom board */
.beach-sign h2{position:absolute;left:12%;right:12%;top:38%}
.beach-sign p {position:absolute;left:12%;right:12%;top:62%}
.beach-sign h2{font-size:33px;text-transform:uppercase;color:#2a1a16;white-space:nowrap}
.beach-sign p{margin:0;font-style:italic;font-size:15px;color:#5b4038;white-space:nowrap}

.beach-deck{
  width:1180px;margin:46px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.deck-card{
  background:rgba(255,246,234,.07);border:4px solid var(--ink);border-radius:8px;
  box-shadow:var(--pop-sm);padding:26px 26px 28px;
}
.deck-card h3{font-size:24px;text-transform:uppercase;margin-bottom:12px;color:var(--gold)}
.deck-card p{font-size:15.5px;margin:0 0 16px;opacity:.9}
.deck-status,.forecast{color:var(--turq);font-weight:600;font-style:italic}
.forecast{font-family:var(--cond);font-size:21px;min-height:62px}

/* ───────── marina ───────── */
.marina{padding-bottom:0}
.scene-marina{
  height:540px;
  background:linear-gradient(180deg,
    #1b0738 0%,#53176b 26%,#a2307f 40%,#2d1346 50%,#140a24 58%,#0b0518 100%);
}
.scene-marina.has-bg::before{display:none}
.scene-marina::before{ /* tower lights */
  content:'';position:absolute;left:0;right:0;top:18%;height:32%;
  background:
    repeating-linear-gradient(90deg,
      rgba(8,3,20,.9) 0 74px,transparent 74px 96px,
      rgba(8,3,20,.78) 96px 156px,transparent 156px 182px),
    repeating-linear-gradient(90deg,
      transparent 0 40px,rgba(255,200,61,.7) 40px 45px,transparent 45px 58px,
      rgba(255,122,47,.45) 58px 62px,transparent 62px 104px);
  mask-image:linear-gradient(180deg,transparent,#000 48%,#000);
}
.scene-marina.has-bg .marina-reflect{opacity:.35}
.marina-reflect{
  position:absolute;left:0;right:0;top:50%;bottom:0;
  background:repeating-linear-gradient(90deg,
    transparent 0 40px,rgba(255,200,61,.3) 40px 46px,transparent 46px 104px);
  filter:blur(3px);animation:shimmer 5s ease-in-out infinite alternate;
}
@keyframes shimmer{from{transform:scaleY(1) translateY(0);opacity:.55}to{transform:scaleY(1.12) translateY(5px);opacity:.95}}

.yacht-rig{
  position:absolute;left:14%;bottom:22%;width:480px;
  animation:rock 6s ease-in-out infinite alternate;
  transition:transform 2.6s cubic-bezier(.4,0,.2,1);
}
@keyframes rock{from{transform:rotate(-1deg) translateY(0)}to{transform:rotate(1deg) translateY(-8px)}}
.yacht-rig.sail{transform:translateX(420px);animation:none}
.yacht-img{width:100%;filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))}
.yacht-img:not(.has-img){
  width:420px;border:var(--line);border-radius:4px;box-shadow:var(--pop);
  aspect-ratio:16/10;object-fit:cover;
}
.wake{
  position:absolute;left:-40px;bottom:6%;width:0;height:22px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75));
  border-radius:999px;filter:blur(2px);
}
.yacht-rig.sail .wake{animation:wakeTrail 2.8s ease-out}
@keyframes wakeTrail{
  0%{width:0;opacity:0}
  30%{width:300px;opacity:.9}
  100%{width:460px;opacity:0}
}

.board-sign{
  position:absolute;right:8%;top:16%;width:460px;text-align:center;
  padding:26px 28px;background:var(--paper);color:#1b1120;
  border:var(--line);border-radius:6px;box-shadow:var(--pop);
}
.board-sign h2{font-size:34px;text-transform:uppercase;color:#1b1120}
.board-sign p{margin:10px 0 0;font-style:italic;color:#4a3a52}

.passes{width:1080px;margin:52px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pass{
  position:relative;display:block;text-decoration:none;cursor:pointer;
  background:url('assets/boarding-pass.png') center/100% 100% no-repeat;
  color:#1b1120;text-align:left;
  border:none;padding:0;font:inherit;aspect-ratio:900/420;
  filter:drop-shadow(7px 7px 0 var(--ink));
  transition:transform .16s,filter .16s;
}
.pass:hover,.pass:focus-visible{transform:translateY(-8px) rotate(-.6deg);filter:drop-shadow(10px 14px 0 var(--ink))}
.pass-stub{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pass-body{
  position:absolute;left:11%;right:26%;top:50%;transform:translateY(-50%);
  display:block;text-align:center;
}
.pass-body b{display:block;font-family:var(--disp);font-size:18px;text-transform:uppercase;line-height:1.08}
.pass-body em{
  display:block;margin-top:7px;font-family:var(--cond);font-size:16px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#7a3f6a;
  opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s;
}
.pass:hover em,.pass:focus-visible em{opacity:1;transform:none}
.entrance-caption{
  width:1080px;margin:22px auto 0;text-align:center;
  font-family:var(--cond);font-size:22px;font-style:italic;font-weight:600;
  color:var(--gold);opacity:0;transition:opacity .35s;
}
.entrance-caption.show{opacity:1}

/* banner poster strip — the delivered 4-panel artwork, full bleed */
.banner-strip{
  margin:0 0 70px;width:100%;overflow:hidden;
  border-top:var(--line);border-bottom:var(--line);
  background:var(--night);line-height:0;
}
.banner-strip img{
  width:100%;height:auto;display:block;
  transform:scale(1.001);              /* hide subpixel edge seams */
}

/* finale cover art — the delivered square poster */
.cover-art{
  margin:0 auto 34px;width:300px;position:relative;line-height:0;
}
.cover-art img{
  width:100%;height:auto;display:block;
  border:var(--line);border-radius:6px;box-shadow:var(--pop);
}
.cover-art figcaption{
  margin-top:14px;line-height:1.3;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:12px;color:var(--gold);
}

/* ───────── memes ───────── */
.memes{background:
  linear-gradient(180deg,#140720,#2b0b4a 42%,#140720);}
.counter{
  width:1180px;margin:0 auto;display:grid;
  grid-template-columns:repeat(4,1fr);gap:26px;align-items:start;
}
.card{
  position:relative;cursor:pointer;padding:0;background:var(--paper);
  border:var(--line);border-radius:4px;box-shadow:var(--pop-sm);
  overflow:hidden;line-height:0;transition:transform .18s,box-shadow .18s;
}
.card:nth-child(3n){transform:rotate(-1.4deg)}
.card:nth-child(4n){transform:rotate(1.1deg)}
.card:hover,.card:focus-visible{transform:translateY(-10px) rotate(0);box-shadow:12px 14px 0 var(--ink);z-index:2}
.card-img{display:block;width:100%;height:auto;aspect-ratio:7/5;object-fit:cover;background:var(--purple)}
.card.tall .card-img{aspect-ratio:5/7}
.card-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.card-stamp{
  position:absolute;right:8px;top:8px;width:44px;height:44px;border-radius:50%;
  border:3px solid rgba(232,32,142,.85);color:rgba(232,32,142,.95);
  display:grid;place-items:center;transform:rotate(-14deg);
  font-family:var(--cond);font-weight:700;font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;text-align:center;background:rgba(255,246,234,.82);
  font-size:9.5px;opacity:.9;
}

/* postcard maker */
.maker{
  width:1180px;margin:70px auto 0;background:rgba(255,246,234,.07);
  border:4px solid var(--ink);border-radius:10px;box-shadow:var(--pop-sm);
  padding:36px 38px 40px;
}
.maker-head{text-align:center;margin-bottom:28px}
.maker-head h3{font-size:36px;text-transform:uppercase;color:#fff;text-shadow:0 4px 0 var(--ink)}
.maker-body{display:grid;grid-template-columns:360px 1fr;gap:34px;align-items:start}
.bg-picks{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.bg-pick{
  cursor:pointer;text-align:left;font-family:var(--cond);font-weight:700;font-size:17px;
  text-transform:uppercase;letter-spacing:.08em;
  padding:13px 18px;border:4px solid var(--ink);border-radius:6px;
  background:rgba(255,246,234,.1);color:var(--paper);transition:background .15s,color .15s;
}
.bg-pick:hover{background:rgba(255,246,234,.2)}
.bg-pick.is-on{background:var(--gold);color:var(--ink)}
.maker-label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:13px;color:var(--gold);margin-bottom:8px;
}
.maker-label span{opacity:.7;letter-spacing:.06em}
.maker-input{
  width:100%;font-family:var(--disp);font-size:18px;
  padding:14px 16px;border:4px solid var(--ink);border-radius:6px;
  background:var(--paper);color:#1b1120;margin-bottom:18px;
}
.maker-input:focus{outline:4px solid var(--pink);outline-offset:2px}
#cardCanvas{
  width:100%;height:auto;border:var(--line);border-radius:6px;box-shadow:var(--pop-sm);
  background:var(--purple);
}

/* ───────── buy kiosk ───────── */
.buy{background:linear-gradient(180deg,#140720,#1f0c3a)}
.kiosk{
  width:1080px;margin:0 auto;position:relative;
  background:var(--paper);color:#1b1120;
  border:var(--line);border-radius:10px;box-shadow:var(--pop);
  padding:0 46px 44px;
}
.kiosk-awning{
  height:62px;margin:0 -46px 34px;border-bottom:var(--line);border-radius:6px 6px 0 0;
  background:repeating-linear-gradient(90deg,
    var(--coral) 0 46px,var(--paper) 46px 92px);
}
.kiosk-awning::after{
  content:'';position:absolute;left:0;right:0;top:62px;height:16px;
  background:repeating-linear-gradient(90deg,
    var(--coral) 0 46px,var(--paper) 46px 92px);
  clip-path:polygon(0 0,100% 0,100% 0,0 0);
  -webkit-mask-image:radial-gradient(circle at 23px 0,#000 22px,transparent 23px);
  mask-image:radial-gradient(circle at 23px 0,#000 22px,transparent 23px);
  -webkit-mask-size:46px 100%;mask-size:46px 100%;
  mask-repeat:repeat-x;-webkit-mask-repeat:repeat-x;
}
.kiosk-head{
  display:flex;align-items:center;justify-content:center;gap:26px;margin-bottom:30px;
  text-align:left;
}
.kiosk-art{width:210px;height:auto;flex:none;filter:drop-shadow(0 8px 10px rgba(0,0,0,.28))}
.kiosk-head h2{font-size:52px;text-transform:uppercase;color:#1b1120}
.kiosk-head .eyebrow{color:var(--magenta)}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:30px}
.fact{
  background:#fffdf8;border:4px solid var(--ink);border-radius:6px;padding:16px 18px;
}
.fact span{
  display:block;font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:12px;color:#8a5a7c;margin-bottom:6px;
}
.fact b{font-family:var(--disp);font-size:24px}
.fact-ca{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fact-ca span{flex:none;margin:0}
.fact-ca code{flex:1;font-size:16px;word-break:break-all;min-width:340px}

.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 32px;display:grid;gap:14px}
.steps li{
  position:relative;padding:18px 22px 18px 76px;
  background:#fffdf8;border:4px solid var(--ink);border-radius:6px;font-size:16px;
  opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s;
}
.steps.is-in li{opacity:1;transform:none}
.steps.is-in li:nth-child(2){transition-delay:.1s}
.steps.is-in li:nth-child(3){transition-delay:.2s}
.steps.is-in li:nth-child(4){transition-delay:.3s}
.steps li::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:14px;top:50%;
  transform:translateY(-50%) rotate(-10deg) scale(.4);
  width:52px;height:52px;
  display:grid;place-items:center;
  font-family:var(--disp);font-size:21px;color:var(--magenta);
  background:url('assets/stamp.png') center/contain no-repeat;
  opacity:0;transition:transform .45s cubic-bezier(.2,1.4,.4,1),opacity .3s;
}
.steps.is-in li::before{opacity:1;transform:translateY(-50%) rotate(-10deg) scale(1)}
.kiosk-actions{display:flex;gap:16px;align-items:center;justify-content:center}
.chart-slot{margin-top:26px;border:4px solid var(--ink);border-radius:8px;overflow:hidden;background:#0d0618}
.chart-slot iframe{display:block;width:100%;height:420px;border:0}

/* ───────── finale ───────── */
.finale{padding:0 0 0}
.scene-panorama{
  height:700px;
  background:linear-gradient(180deg,
    #0a0418 0%,#1d0840 24%,#58175f 42%,#b02d72 52%,#2a1038 58%,#0d0520 100%);
}
.scene-panorama.has-bg .skyline-svg{display:none}
.skyline-svg{position:absolute;left:0;right:0;bottom:30%;height:28%}
.skyline-svg svg{width:100%;height:100%;display:block}
.city-windows{position:absolute;left:0;right:0;top:40%;height:18%}
.city-windows i{
  position:absolute;width:5px;height:9px;background:var(--gold);opacity:0;
  animation:winOn 1s forwards;
}
@keyframes winOn{to{opacity:.85}}
.taillights{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:2;display:flex;gap:170px}
.taillights i{
  width:40px;height:16px;border-radius:999px;background:#ff2b3c;
  box-shadow:0 0 26px 10px rgba(255,43,60,.55);
  animation:tail 3.6s ease-in-out infinite alternate;
}
.taillights i:last-child{animation-delay:.5s}
@keyframes tail{from{opacity:.55}to{opacity:1}}

.finale-copy{
  width:1080px;margin:46px auto 0;position:relative;z-index:3;text-align:center;
  padding-bottom:84px;
}
.finale-copy h2{
  font-size:58px;text-transform:uppercase;color:#fff;
  text-shadow:0 5px 0 var(--ink),0 0 40px rgba(255,63,164,.55);margin-bottom:30px;
}
.ca-dark{background:rgba(8,3,20,.92)}

/* ───────── footer ───────── */
.foot{
  border-top:var(--line);background:#0a0416;padding:40px 0 54px;text-align:center;
}
.foot p{max-width:820px;margin:0 auto 10px;font-size:13.5px;opacity:.6;line-height:1.7}
.foot p:first-child{opacity:.9;font-size:15px}
.foot-ca code{font-size:12.5px;word-break:break-all;opacity:.55}

/* ───────── lightbox ───────── */
.lightbox{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  gap:18px;background:rgba(6,2,14,.93);backdrop-filter:blur(6px);padding:40px;
}
.lightbox[hidden]{display:none}
.lb-fig{margin:0;max-width:72vw;text-align:center}
.lb-fig img{
  max-height:74vh;width:auto;margin:0 auto;
  border:var(--line);border-radius:4px;box-shadow:var(--pop);background:var(--purple);
}
.lb-fig figcaption{
  margin-top:18px;font-family:var(--disp);font-size:22px;text-transform:uppercase;color:#fff;
}
.lb-nav,.lb-close{
  cursor:pointer;background:var(--paper);color:var(--ink);
  border:4px solid var(--ink);border-radius:50%;
  width:58px;height:58px;font-size:30px;line-height:1;
  display:grid;place-items:center;flex:none;
  transition:background .15s,transform .15s;
}
.lb-nav:hover,.lb-close:hover{background:var(--gold);transform:scale(1.07)}
.lb-close{position:absolute;top:28px;right:34px;width:50px;height:50px;font-size:26px}
.lb-dl{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  text-decoration:none;font-family:var(--disp);font-size:15px;
  padding:13px 28px;background:var(--pink);color:#fff;
  border:4px solid var(--ink);border-radius:6px;box-shadow:var(--pop-sm);
}

/* ───────── toast ───────── */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(26px);
  z-index:110;padding:14px 28px;background:var(--gold);color:var(--ink);
  font-family:var(--disp);font-size:15px;text-transform:uppercase;
  border:4px solid var(--ink);border-radius:999px;box-shadow:var(--pop-sm);
  opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;
}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* ───────── reduced motion ───────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .pnl{opacity:1;transform:none}
  .hero-logo{opacity:1;transform:none}
  .car-rig{opacity:1}
  .steps li{opacity:1;transform:none}
  .pop-count.tick{animation:none}
}