/* ============================================================================
   Brophy FPV Club · grant pitch — a night fly-through.
   The city is the background. Every slide is a cluster of solid floating cards
   laid out on a 1280×780 canvas; a neon path threads the cards in order and
   runs on to the next slide. Slides sit side by side along a winding route and
   the camera pans between them. No blur, no heavy glow: solid fills, one soft
   shadow, transforms only.
   ========================================================================== */

@property --neon{syntax:'<color>'; inherits:true; initial-value:#4de3ff}
:root{
  --bg:#070d18; --bg2:#0c1628;
  --card:#101b30; --card-2:#162440;
  --text:#f1ecdf; --soft:#b4bfd3; --dim:#7f8ca3;
  --line:rgba(241,236,223,.12);
  --neon:#4de3ff;
  transition:--neon 1.15s cubic-bezier(.55,0,.15,1);
  --font-mono:'Share Tech Mono','Consolas',monospace;
  --font-body:'Barlow','Segoe UI',system-ui,sans-serif;
  --fit:1;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg); color:var(--text); font-family:var(--font-body); overflow:hidden; -webkit-font-smoothing:antialiased; user-select:none}
a{color:inherit} button{font:inherit}

/* ---------------------------------------------------------------- sky */
#sky{position:fixed; inset:0; z-index:0; background:
  radial-gradient(ellipse at 50% 120%, #1b2d4f 0%, rgba(27,45,79,0) 55%),
  linear-gradient(#050913 0%, #0a1526 60%, #122240 100%)}

/* --------------------------------------------------------------- city */
#city{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden}
#city .layer{position:absolute; left:-200vw; width:500vw; bottom:0; background-repeat:repeat-x; background-position:0 100%;
  transition:transform 1.15s cubic-bezier(.55,0,.15,1)}
#city .l1{height:50vh; opacity:.55}
#city .l2{height:62vh; opacity:.8}
#city .l3{height:72vh}
#city .haze{position:absolute; left:0; right:0; bottom:0; height:36vh; background:linear-gradient(to top, rgba(7,13,24,.95), rgba(7,13,24,0))}

/* -------------------------------------------------------- light trails */
#flyers{position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden}
#flyers svg{position:absolute; inset:0; width:100%; height:100%}
#flyers .tr{fill:none; stroke-linecap:round; stroke-width:3}
#flyers .tr.glow{stroke-width:10; opacity:.18}
#flyers .hd{opacity:.95}

/* -------------------------------------------------------------- world */
#world{position:fixed; inset:0 0 44px 0; z-index:3; perspective:1600px; perspective-origin:50% 50%; overflow:hidden}
#route{position:absolute; left:50%; top:50%; width:0; height:0; transform-style:preserve-3d;
  transition:transform 1.15s cubic-bezier(.55,0,.15,1)}
/* no will-change here: the route is ~30,000 px wide and a pre-promoted layer that
   size exceeds the GPU texture limit, so slides silently stop painting */
.scene{
  position:absolute; left:-640px; top:-390px; width:1280px; height:780px; visibility:hidden;
  display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:min-content; gap:26px 24px; align-content:start; align-items:start; padding:0;
}
.scene.near{visibility:visible}
.scene .path{position:absolute; left:0; top:0; width:1280px; height:780px; overflow:visible; pointer-events:none; z-index:0}
.scene .path .pl{fill:none; stroke:var(--neon); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; opacity:.95}
.scene .path .pg{fill:none; stroke:var(--neon); stroke-width:16; stroke-linecap:round; stroke-linejoin:round; opacity:.18}
.scene .path .pulse{fill:none; stroke:#fff; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40 320; animation:dash 2.2s linear infinite; opacity:.95}
.scene .path circle{fill:var(--neon); stroke:#fff; stroke-width:2}
@keyframes dash{to{stroke-dashoffset:-360}}
.scene:not(.active) .path .pulse{animation-play-state:paused}

.card{position:relative; z-index:1; background:var(--card); border:1.5px solid var(--neon); border-radius:14px; padding:18px 22px; display:flex; flex-direction:column; gap:6px; min-width:0;
  box-shadow:0 14px 34px rgba(0,0,0,.45)}
.card::before{content:''; position:absolute; left:18px; right:18px; top:-1.5px; height:3px; background:var(--neon); border-radius:2px}
.card.head{padding:22px 28px 20px}
.card.head.big{padding:30px 34px 26px}
.card.small{padding:18px 22px} .card.small h4{font-size:27px}
.card.quote{font-size:24px; line-height:1.35; color:var(--soft); padding:18px 26px; font-style:italic; text-align:center}
.card .tbd{font-family:var(--font-mono); font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--neon); font-style:normal; margin-left:10px}
.card.tall{min-height:440px}

/* the curve from one slide's exit to the next slide's entry */
.link{position:absolute; left:0; top:0; overflow:visible; pointer-events:none}
.link path{fill:none; stroke-linecap:round}
.link .ll{stroke-width:calc(6px * var(--sw, 1)); opacity:.95}
.link .lg{stroke-width:calc(16px * var(--sw, 1)); opacity:.18}
.link .lp{stroke:#fff; stroke-width:calc(6px * var(--sw, 1)); stroke-dasharray:40 320; animation:dash 2.2s linear infinite; opacity:.95}

/* ---------------------------------------------------------- typography */
.eyebrow{font-family:var(--font-mono); font-size:16px; letter-spacing:3px; text-transform:uppercase; color:var(--neon)}
h1{margin:0; font-size:98px; line-height:.98; letter-spacing:-2px; font-weight:700}
h2{margin:0; font-size:48px; line-height:1.05; letter-spacing:-.5px; font-weight:700}
h4{margin:0; font-size:28px; line-height:1.1; font-weight:700}
.card p{margin:0; font-size:20px; line-height:1.38; color:var(--soft)}
.card p b{color:var(--text)}
.lede{margin:0; font-size:28px; line-height:1.3; color:var(--soft)}
.lede b{color:var(--text)}

.frag{opacity:0; transform:translateY(8px); transition:opacity .3s ease, transform .3s ease}
.frag.on,body.show-all .frag{opacity:1; transform:none}

/* stats (1) */
.card.stat{padding:16px 20px 14px}
.stat .v{font-family:var(--font-mono); font-size:50px; line-height:1; color:var(--neon)}
.stat .v small{font-size:26px; margin-left:3px}
.stat .l{font-family:var(--font-mono); font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); margin-top:6px}

/* figures */
.card.fig{padding:0; overflow:hidden; gap:0}
.card.fig::before{display:none}
.card.fig img{display:block; width:100%; height:100%; min-height:170px; max-height:260px; object-fit:cover; object-position:top; flex:1}
.card.fig .cap{font-family:var(--font-mono); font-size:12.5px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); padding:9px 14px; border-top:1px solid var(--line)}

/* tracks (2) */
.card.track{border-color:var(--c)} .card.track::before{background:var(--c)}
.card.track svg{width:50px; height:50px; fill:none; stroke:var(--c); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; margin-bottom:4px}
.card.track .k{font-size:28px; font-weight:700; line-height:1.05; color:var(--c)}
.card.track .n{font-family:var(--font-mono); font-size:13px; letter-spacing:2.5px; text-transform:uppercase; color:var(--dim)}

/* badge cards (3–6) */
.card.badge{padding:14px 20px 12px; display:grid; grid-template-columns:1fr auto; gap:2px 14px; align-items:baseline; border-color:var(--c)}
.card.badge::before{background:var(--c)}
.card.badge .n{font-size:25px; font-weight:700; line-height:1.1}
.card.badge .t{font-family:var(--font-mono); font-size:12.5px; letter-spacing:2px; text-transform:uppercase; color:var(--tier); white-space:nowrap}
.card.badge .d{grid-column:1/3; font-size:19px; line-height:1.3; color:var(--text)}
.card.badge .w{grid-column:1/3; font-size:16px; line-height:1.3; color:var(--soft); font-style:italic}

/* carousel (7) */
#carousel{position:relative; height:500px; perspective:1300px; perspective-origin:50% 50%}
#carousel .ring{position:absolute; left:50%; width:0; height:0; transform-style:preserve-3d}
#carousel .ring.deck0{top:26%} #carousel .ring.deck1{top:76%}
#carousel .card.sk{position:absolute; left:-135px; top:-82px; width:270px; height:164px; padding:16px 20px 14px; border-color:var(--c); backface-visibility:hidden; gap:10px}
#carousel .card.sk::before{background:var(--c)}
#carousel .card.sk .k{font-family:var(--font-mono); font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--c)}
#carousel .card.sk .n{font-size:15px; font-family:var(--font-mono); color:var(--dim); margin-top:auto}
#carousel .card.sk h4{font-size:25px}
#carousel .card.sk p{font-size:18px}
#carousel .card.sk svg{width:36px; height:36px; fill:none; stroke:var(--c); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
#carousel .arrow{position:absolute; top:50%; width:58px; height:58px; margin-top:-29px; border-radius:50%; border:1.5px solid var(--neon); background:var(--card); color:var(--neon); font-size:34px; line-height:54px; text-align:center; cursor:pointer; z-index:5}
#carousel .arrow.l{left:0} #carousel .arrow.r{right:0}

/* live stats (8) */
.live{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); margin:12px 0 8px}
.live i{width:9px;height:9px;border-radius:50%;background:#5dff8a}
.live.off i{background:#ffc14d}
.ministats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.ministats .stat{background:var(--card-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px 10px}
.ministats .stat .v{font-size:36px}

/* ladder (9) */
.ladder{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.rung{background:var(--card-2); border:1px solid var(--line); border-top:4px solid var(--c); border-radius:10px; padding:12px 12px 10px; display:flex; flex-direction:column; gap:6px}
.rung .tn{font-family:var(--font-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--c)}
.rung .nm{font-weight:700; font-size:22px; line-height:1}
.rung .gear{font-size:13.5px; color:var(--soft); line-height:1.25}
.rung .chips{display:flex; flex-direction:column; gap:5px}
.chip{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; border:1px solid var(--line); border-radius:6px; padding:3px 8px; line-height:1.15; background:rgba(255,255,255,.03); color:var(--soft)}
.chip i{width:9px; height:9px; border-radius:2px; background:var(--tc); flex:none}
.chip .ck{margin-left:auto; font-family:var(--font-mono); color:#5dff8a; opacity:0; transition:opacity .25s}
.chip.on{border-color:#5dff8a; color:var(--text)} .chip.on .ck{opacity:1}
.chip.el{opacity:.8}
.rung .gatebox{margin-top:auto; padding-top:7px; border-top:1px dashed var(--line); font-family:var(--font-mono); font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim); display:flex; justify-content:space-between; align-items:center}
.rung .gatebox svg{width:26px;height:22px} .rung .gatebox path{fill:none; stroke:var(--dim); stroke-width:3; stroke-linecap:round; transition:stroke .4s}
.rung.open .gatebox path{stroke:#5dff8a} .rung.open .gatebox{color:#5dff8a}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-family:var(--font-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); margin-top:12px}
.legend span{display:inline-flex; align-items:center; gap:6px} .legend i{width:10px;height:10px;border-radius:2px;background:var(--tc)}

/* yields (12) */
.card.banner{flex-direction:row; align-items:center; gap:22px; padding:18px 26px}
.card.banner svg,.card.yield svg{width:52px; height:52px; fill:none; stroke:var(--neon); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; flex:none}
.card.banner h4{font-size:28px}

/* gear (13) */
.card.item{padding:0 0 18px; gap:6px}
.card.item .pic{width:100%; aspect-ratio:1.2; background:#fff; border-radius:12px 12px 0 0; overflow:hidden}
.card.item .pic img{width:100%; height:100%; object-fit:cover; display:block}
.card.item .q{font-family:var(--font-mono); font-size:14px; letter-spacing:2px; color:var(--neon); padding:12px 20px 0}
.card.item h4{padding:0 20px 2px; font-size:24px}
.card.item p{padding:0 20px; font-size:17px}
.card.accessories{font-size:20px; line-height:1.4; color:var(--soft); display:block}
.card.accessories b{color:var(--text)} .card.accessories .tbd{font-family:var(--font-mono); font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--neon); margin-left:8px}
.card.accessories .dim{color:var(--dim); font-size:18px}

/* budget (14) */
.budget{display:flex; flex-direction:column; gap:14px}
.bar{display:grid; grid-template-columns:260px 1fr 130px; align-items:center; gap:18px; font-size:24px}
.bar .lab{font-weight:600}
.bar .track{display:block; height:30px; border-radius:6px; background:rgba(255,255,255,.06); border:1px solid var(--line); overflow:hidden}
.bar .fill{display:block; height:100%; width:var(--w); background:var(--neon); border-radius:6px; transform-origin:left; animation:grow 1s cubic-bezier(.2,.7,.2,1) both}
.bar.tbd .fill{background:repeating-linear-gradient(45deg, var(--neon) 0 8px, transparent 8px 16px); opacity:.7}
.bar .v{font-family:var(--font-mono); font-size:26px; text-align:right}
.bar.total{border-top:1px solid var(--line); padding-top:14px; margin-top:4px} .bar.total .lab{font-size:24px} .bar.total .v{color:var(--neon); font-size:32px}
@keyframes grow{from{transform:scaleX(0)} to{transform:scaleX(1)}}

/* timeline (15) */
.timeline{position:relative; display:grid; grid-template-columns:repeat(9,1fr); align-items:center; height:400px}
.timeline::before{content:''; position:absolute; left:3%; right:3%; top:50%; height:4px; margin-top:-2px; background:rgba(255,255,255,.12); border-radius:2px}
.timeline .line{position:absolute; left:3%; top:50%; height:4px; margin-top:-2px; background:var(--neon); border-radius:2px; width:var(--w,0%); transition:width 1.2s cubic-bezier(.3,.6,.2,1)}
.tnode{position:relative; height:100%}
.tnode .dot{position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; background:var(--card); border:3px solid rgba(255,255,255,.25); transition:background .4s, border-color .4s}
.tnode.done .dot{background:var(--neon); border-color:var(--neon)}
.tnode.now .dot{width:30px; height:30px; margin:-15px 0 0 -15px; box-shadow:0 0 0 6px rgba(90,169,255,.25)}
.tnode .lab{position:absolute; left:50%; width:150px; margin-left:-75px; text-align:center}
.tnode .lab .k{font-family:var(--font-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--dim)}
.tnode.done .lab .k{color:var(--neon)}
.tnode .lab h4{font-size:21px; line-height:1.15; margin:4px 0}
.tnode:not(.done) .lab h4{color:var(--soft)}
.tnode .lab p{margin:0; font-size:13.5px; line-height:1.3; color:var(--dim)}
.tnode:nth-child(odd) .lab{bottom:calc(50% + 28px)} .tnode:nth-child(even) .lab{top:calc(50% + 28px)}
.tnode .stem{position:absolute; left:50%; width:1px; background:rgba(255,255,255,.2)}
.tnode:nth-child(odd) .stem{bottom:50%; height:24px} .tnode:nth-child(even) .stem{top:50%; height:24px}

/* QR (16) */
.card.qr{text-align:center; background:#fff; color:#1f3350; padding:12px 10px 10px; gap:4px}
.card.qr::before{display:none}
.card.qr img{width:100%; display:block; margin:0 auto; image-rendering:pixelated}
.card.qr .t{font-weight:700; font-size:17px; margin-top:6px}
.card.qr .u{font-family:var(--font-mono); font-size:10.5px; color:#546881; word-break:break-all}
.card.qr.hero{border-width:3px}

/* ---------------------------------------------------------------- hud */
#hud{position:fixed; left:0; right:0; bottom:0; height:44px; background:#050913; border-top:1px solid var(--line); z-index:5}
#progress{height:4px; background:rgba(255,255,255,.08)} #progress i{display:block; height:100%; width:0; background:var(--neon); transition:width 1.15s cubic-bezier(.55,0,.15,1), background 1.15s}
#footer{display:flex; justify-content:space-between; padding:11px 18px; font-family:var(--font-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--dim)}
#hint{position:fixed; right:18px; bottom:52px; z-index:6; font-family:var(--font-mono); font-size:11px; letter-spacing:1px; color:var(--dim); opacity:.85; transition:opacity .6s}
#hint kbd{font:inherit; border:1px solid var(--line); border-radius:3px; padding:0 4px; margin:0 1px; color:var(--text)}
body.quiet #hint{opacity:0}
#toast{position:fixed; left:50%; top:24px; transform:translate(-50%,-16px); z-index:70; background:var(--card); color:var(--neon); border:1px solid var(--neon); font-family:var(--font-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; padding:8px 16px; border-radius:6px; opacity:0; transition:opacity .3s, transform .3s; pointer-events:none}
#toast.on{opacity:1; transform:translate(-50%,0)}

#notes{position:fixed; right:0; top:0; bottom:44px; width:420px; z-index:55; background:#fbf8f1; color:#1f3350; border-left:1.5px solid rgba(31,51,80,.4); box-shadow:-10px 0 30px rgba(0,0,0,.5); padding:22px 24px; overflow:auto; transform:translateX(102%); transition:transform .3s; user-select:text; font-size:16px; line-height:1.45}
#notes.open{transform:none}
#notes h3{font-family:var(--font-mono); letter-spacing:3px; text-transform:uppercase; font-size:13px; color:#8f3d12; margin:0 0 10px}
#notes h4{margin:14px 0 4px; font-size:17px} #notes p{margin:0 0 10px} #notes ul{margin:0 0 10px 18px; padding:0} #notes li{margin-bottom:5px}
#notes mark{background:#ffe9a8; padding:0 3px; border-radius:3px}
#notes .hint{font-family:var(--font-mono); font-size:12px; color:#546881}
#notes .cue{font-family:var(--font-mono); font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#1c5578; background:rgba(28,85,120,.08); border-left:3px solid #1c5578; padding:4px 8px; margin:8px 0}

#menu{position:fixed; inset:0; z-index:56; background:rgba(5,9,19,.96); display:none; place-items:center; color:var(--text)}
#menu.open{display:grid}
#menu h3{font-family:var(--font-mono); font-weight:400; letter-spacing:5px; font-size:13px; text-transform:uppercase; color:var(--dim); margin:0 0 18px; text-align:center}
#menu .list{display:grid; grid-template-columns:repeat(2,minmax(280px,420px)); gap:6px 36px; font-family:var(--font-mono); font-size:15px}
#menu .list button{background:none; border:1px solid transparent; color:var(--soft); text-align:left; padding:7px 12px; cursor:pointer; border-radius:6px; font:inherit}
#menu .list button:hover{border-color:var(--line); color:var(--text)}
#menu .list button.cur{color:var(--neon); border-color:var(--neon)}
#menu .list button span{opacity:.6; margin-right:10px}

#rotate{display:none; position:fixed; inset:0; z-index:80; background:var(--bg); color:var(--text); place-items:center; text-align:center; font-family:var(--font-mono); font-size:44px}
#rotate span{display:block; font-size:13px; letter-spacing:3px; text-transform:uppercase; opacity:.7; margin-top:10px}
@media (max-width:700px) and (orientation:portrait){ #rotate{display:grid} }
@media (max-width:1000px){ #hint{display:none} }
@media (max-width:700px){ #notes{width:92vw} }
@media (prefers-reduced-motion: reduce){ #route, #city .layer{transition-duration:.01s} .link .lp, .scene .path .pulse{animation:none} }