/* Round 3: lid-reveal hero, bakkie route tracker, Sunday headcount picker. */

/* ---------- I · LIFT THE LID ---------- */
.lift__stage { overflow: hidden; background: var(--ink); perspective: 1600px; }
.lift__panels { position: absolute; inset: 0; z-index: 2; }
.panel { position: absolute; left: 0; top: 0; margin: 0; border-radius: 22px; overflow: hidden; background: #111; will-change: transform, opacity;
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.14); transform-origin: 50% 50%; }
.panel video { width: 100%; height: 100%; object-fit: cover; }
.panel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.14), transparent 28%, transparent 70%, rgba(255,255,255,.06)); }
.panel figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 14px; text-align: center; font-size: 13px; letter-spacing: .08em;
  color: #f1eee7; background: linear-gradient(transparent, rgba(0,0,0,.7)); opacity: var(--cap, 0); transition: opacity .3s; }
.dome { position: absolute; z-index: 6; left: 50%; top: 50%; width: min(1180px, 90vw); height: min(80vh, 760px);
  transform-origin: 50% 0%; will-change: transform, opacity; }
.dome__body { position: absolute; inset: 0; border-radius: 50% 50% 26px 26px / 64% 64% 26px 26px;
  background:
    radial-gradient(60% 45% at var(--hx, 32%) 20%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(90% 70% at 70% 100%, rgba(46,96,76,.22), transparent 60%),
    linear-gradient(175deg, #2b2f2d 0%, #141615 40%, #060707 100%);
  box-shadow: inset 0 3px 2px rgba(255,255,255,.28), inset 0 -40px 60px rgba(0,0,0,.6), 0 60px 120px -40px rgba(0,0,0,.95);
  -webkit-mask: radial-gradient(circle at 50% 36%, transparent 0 var(--win, 17%), #000 calc(var(--win, 17%) + .3%));
  mask: radial-gradient(circle at 50% 36%, transparent 0 var(--win, 17%), #000 calc(var(--win, 17%) + .3%)); }
.dome__window { position: absolute; left: 50%; top: 36%; width: calc(var(--win, 17%) * 2 * var(--asp, 1)); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(55% 40% at 32% 24%, rgba(255,255,255,.4), rgba(255,255,255,.04) 55%, transparent 70%);
  box-shadow: 0 0 0 10px #dcdedb, 0 0 0 11px #6f7370, 0 0 0 12px rgba(255,255,255,.4), inset 0 0 40px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.2); backdrop-filter: blur(1.5px) saturate(1.2); }
.dome__handle { position: absolute; left: 50%; top: 5%; width: 16%; height: 14px; transform: translateX(-50%); border-radius: 14px;
  background: linear-gradient(#fbf7ea, #c4b383 55%, #8e7d52); box-shadow: 0 4px 8px rgba(0,0,0,.5); }
.dome__lip { position: absolute; left: -1%; right: -1%; bottom: -8px; height: 16px; border-radius: 10px;
  background: linear-gradient(180deg, #fafaf8, #9da19e 45%, #e9eae7 70%, #7b7f7c); box-shadow: 0 6px 12px rgba(0,0,0,.5); }
.dome__shine { position: absolute; inset: 0; border-radius: 50% 50% 26px 26px / 64% 64% 26px 26px; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.12) 42%, transparent 50%); transform: translateX(var(--sx, -30%)); }
.dome__word { position: absolute; left: 50%; top: 72%; width: min(560px, 46%); transform: translate(-50%, -50%); color: var(--porcelain); }
.lift__copy { position: absolute; z-index: 8; left: 0; right: 0; bottom: calc(var(--dock-h) + 30px); display: grid; justify-items: center; text-align: center; padding: 0 16px; }
.lift__copy .beat { left: 0; right: 0; bottom: 0; top: auto; display: grid; justify-items: center; }
.lift__copy .beat__big { max-width: 26ch; }
.lift__copy .beat__list { justify-content: center; }
.lift__copy .hero__doors { justify-content: center; }
.lift .spin__dots { left: 50%; transform: translateX(-50%); bottom: auto; top: 26px; }

/* ---------- IX · BAKKIE ROUTE ---------- */
.route2__stage { overflow: hidden; background: #0c1612; color: var(--porcelain); }
.kzn { position: absolute; inset: 0; width: 100%; height: 100%; }
.kzn__sea { fill: url(#sea); fill: #0c1a15; }
.kzn__land path { fill: #141a17; stroke: rgba(229,207,156,.10); stroke-width: .6; vector-effect: non-scaling-stroke; }
.kzn__land .is-home { fill: #1d2a24; stroke: rgba(229,207,156,.55); stroke-width: 1.2; }
.kzn__land .is-country { fill: #111614; }
.kzn__road { fill: none; stroke: rgba(229,207,156,.28); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kzn__done { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(200,169,106,.6)); }
.pin circle { fill: #0c1612; stroke: var(--gold); vector-effect: non-scaling-stroke; stroke-width: 1.6; }
.pin.is-done circle { fill: var(--gold); }
.pin.is-now circle { fill: var(--porcelain); stroke: var(--porcelain); }
.pin.is-soft circle { stroke: rgba(229,207,156,.5); stroke-dasharray: 2 2; }
.pin text { fill: #dcd8cf; font-family: var(--sc-font-text); font-weight: 600; paint-order: stroke; stroke: #0c1612; stroke-width: 3px; stroke-linejoin: round; }
.pin.is-now text { fill: #fff; }
.van__canopy { fill: #f2f1ec; } .van__cab { fill: #f2f1ec; } .van__glass { fill: #2a3a44; } .van__base { fill: #111; } .van__wheel { fill: #0b0b0b; stroke: #888; stroke-width: 1; }
.route2__head { position: absolute; z-index: 3; left: clamp(20px, 5vw, 80px); top: 84px; max-width: 520px; pointer-events: none; }
.route2__head .display { font-size: clamp(2rem, 3.4vw, 3.2rem); text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.tracker { position: absolute; z-index: 4; right: clamp(16px, 3vw, 40px); top: 84px; bottom: calc(var(--dock-h) + 30px); width: 330px; display: flex; flex-direction: column;
  padding: 18px; border-radius: 22px; background: rgba(12,22,18,.72); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.tracker__top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.tracker__live { display: inline-flex; align-items: center; gap: 8px; color: #9fd3b2; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.tracker__live i { width: 8px; height: 8px; border-radius: 50%; background: #6fd39c; animation: pulse 2.4s infinite; }
.tracker__bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); margin: 14px 0 12px; } .tracker__bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--gold); }
.tracker__list { list-style: none; margin: 0; padding: 0; overflow: hidden; flex: 1; position: relative; }
.tracker__list li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 8px 0 8px; color: #8f9a94; font-size: 14px; transition: color .3s; }
.tracker__list li::before { content: ""; width: 12px; height: 12px; margin: 4px 0 0 5px; border-radius: 50%; border: 1.5px solid rgba(229,207,156,.5); }
.tracker__list li::after { content: ""; position: absolute; left: 10px; top: 24px; bottom: -6px; width: 1.5px; background: rgba(229,207,156,.2); }
.tracker__list li:last-child::after { display: none; }
.tracker__list li b { display: block; color: inherit; font-weight: 600; } .tracker__list li span { font-size: 12.5px; }
.tracker__list li.is-done { color: #cfd6d1; } .tracker__list li.is-done::before { background: var(--gold); border-color: var(--gold); }
.tracker__list li.is-now { color: #fff; } .tracker__list li.is-now::before { background: var(--porcelain); border-color: var(--porcelain); box-shadow: 0 0 0 5px rgba(246,244,239,.15); }
.tracker__credit { margin: 10px 0 0; font-size: 11.5px; color: #6f7a74; }
.postcard { position: absolute; z-index: 5; left: 0; top: 0; width: 260px; border-radius: 18px; overflow: hidden; background: #f6f4ef; color: var(--ink);
  box-shadow: 0 40px 70px -30px rgba(0,0,0,.9); opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .35s ease, transform .45s var(--ease); pointer-events: none; }
.postcard.is-on { opacity: 1; transform: none; pointer-events: auto; }
.postcard__media { aspect-ratio: 4 / 5; background: #222; } .postcard__media video, .postcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.postcard__media--empty { aspect-ratio: auto; height: 90px; background: linear-gradient(150deg, #1d2a24, #0e2a21); display: grid; place-items: center; color: var(--gold-2); font-family: var(--sc-font-display); font-style: italic; }
.postcard__text { padding: 12px 14px 14px; }
.postcard__place { margin: 0; font-family: var(--sc-font-display); font-size: 1.35rem; line-height: 1.1; }
.postcard__what { margin: 4px 0 10px; font-size: 13.5px; color: #4f4c45; }
.postcard__acts { display: flex; gap: 14px; font-size: 13.5px; font-weight: 700; } .postcard__acts a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--gold); }
.postcard__acts a[hidden] { display: none; }

/* ---------- SUNDAY headcount picker ---------- */
.feed { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px 28px; margin: 0 0 18px; border-color: rgba(229,207,156,.45); }
.feed__q { margin: 0 0 12px; font-family: var(--sc-font-display); font-size: 1.5rem; line-height: 1.15; }
.feed__count { display: inline-flex; align-items: center; gap: 16px; }
.feed__b { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; font-size: 26px; cursor: pointer; }
.feed__n { min-width: 2.2ch; text-align: center; font-family: var(--sc-font-display); font-size: 3.2rem; line-height: 1; }
.feed__range { width: 100%; margin-top: 14px; accent-color: #c8a96a; }
.feed__plates { display: flex; flex-wrap: wrap; gap: 7px; align-content: center; min-height: 80px; }
.feed__plates i { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, #f6f4ef 0 38%, #d9d3c4 40% 58%, #f6f4ef 60%); box-shadow: 0 2px 4px rgba(0,0,0,.35); animation: plate .35s var(--ease) both; }
.feed__plates i.is-spare { opacity: .35; filter: grayscale(1); }
@keyframes plate { from { transform: scale(.4); opacity: 0; } to { transform: none; } }
.feed__best { margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: #e3ece7; } .feed__best b { color: #fff; font-size: 1.35rem; font-family: var(--sc-font-display); }
.packs__or { text-align: center; color: #a9bcb2; font-size: 14px; margin: 0 0 12px; }
.pack.is-picked { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .dome { width: 94vw; height: 66vh; }
  .dome__word { width: 70%; top: 74%; }
  .panel figcaption { font-size: 10.5px; padding: 26px 6px 8px; }
  .lift__copy { bottom: calc(var(--dock-h) + 24px); }
  .route2__head { left: 16px; right: 16px; top: 64px; max-width: none; text-align: center; } .route2__head .display { font-size: 1.6rem; }
  .tracker { left: 12px; right: 12px; top: auto; bottom: calc(var(--dock-h) + 22px); width: auto; padding: 12px 14px; }
  .tracker__list, .tracker__credit { display: none; } .tracker__bar { margin: 10px 0 0; }
  .postcard { width: 180px; } .postcard__place { font-size: 1.1rem; } .postcard__what { font-size: 12.5px; margin-bottom: 6px; }
  .feed { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; padding: 20px 16px; }
  .feed__plates { justify-content: center; }
  .dock__item--route span { display: block; }
}

/* ---------- GALLERY: drifting rows + lightbox ---------- */
.gal { background: var(--porcelain); color: var(--ink); padding: clamp(90px, 12vh, 140px) 0; overflow: hidden; }
.gal__head { text-align: center; width: min(900px, 92vw); margin: 0 auto 34px; }
.gal__sub { color: var(--mute); margin: 12px 0 18px; }
.gal__filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gal .chip { border-color: #d8d1c2; background: #fff; color: #3b3832; }
.gal .chip[aria-pressed="true"] { background: var(--ink); color: var(--porcelain); border-color: var(--ink); }
.gal__rows { display: grid; gap: 14px; }
.gal__row { overflow: visible; }
.gal__track { display: flex; gap: 14px; width: max-content; padding: 0 14px; will-change: transform; }
.ph { position: relative; flex: 0 0 auto; height: clamp(190px, 26vh, 300px); padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: zoom-in; background: #ddd;
  box-shadow: 0 24px 40px -30px rgba(0,0,0,.5); }
.ph img { height: 100%; width: auto; display: block; transition: transform .6s var(--ease); }
.ph:hover img { transform: scale(1.05); }
.ph span { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; font-size: 12px; color: #fff; background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.ph:hover span, .ph:focus-visible span { opacity: 1; transform: none; }
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; align-items: center; background: rgba(8,9,8,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lightbox[hidden] { display: none; }
.lightbox__fig { margin: 0; display: grid; justify-items: center; gap: 12px; }
.lightbox__fig img { max-width: 100%; max-height: 82vh; border-radius: 10px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); }
.lightbox__fig figcaption { color: #d9d6cd; font-size: 14px; text-align: center; padding: 0 12px; }
.lightbox__nav, .lightbox__x { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; font-size: 28px; cursor: pointer; justify-self: center; }
.lightbox__x { position: absolute; top: 18px; right: 18px; }
@media (max-width: 860px) {
  .ph { height: 30vw; min-height: 150px; } .lightbox { grid-template-columns: 44px minmax(0, 1fr) 44px; } .lightbox__nav { width: 40px; height: 40px; font-size: 22px; }
}

.tracker__list li > * { grid-column: 2; }
.tracker__list li::before { grid-row: 1 / span 2; }