/* /lab in the Founders pass skin (owner 10-21: "full glam"): hot-pink velvet, gold trim, glitter, steel plates with the gold
   diamond mark, and the pass label type (Bungee for the names, Figtree for the lines), as on the pass cards. Loaded by
   lab/index.html only, after site.css. The once-per-session laser sweep that burns the mark onto the plate is CSS below, run
   when sweep.js sets html.sweep-on before first paint; otherwise (a later visit, reduced motion, no script) the plate shows its
   finished mark. */
.glam {
  --velvet-0: #1a0713; --velvet-1: #2a0619; --velvet-2: #4b0c31; --velvet-3: #8e1857;
  --hot: #ff5fae; --hot-deep: #c22f78; --gold: #f4c34a; --gold-lt: #f7d774; --gold-dk: #b9852a;
  --cream: #fbf3ff; --lilac: #d9c6e6;
  --pass-name: 'Bungee', Impact, 'Arial Black', sans-serif;
  --pass-line: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --glitter:
    radial-gradient(circle, rgba(255,246,214,.95) 0 1.5px, transparent 2.6px) 89px 19px / 211px 173px,
    radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 2.2px) 150px 90px / 263px 239px,
    radial-gradient(circle, rgba(255,232,160,.8) 0 1.1px, transparent 2px) 0 0 / 127px 113px,
    radial-gradient(circle, rgba(255,175,218,.55) 0 .8px, transparent 1.5px) 41px 67px / 61px 79px,
    radial-gradient(circle, rgba(247,215,116,.45) 0 .7px, transparent 1.3px) 17px 33px / 47px 53px;
  background: var(--velvet-0);
  color: var(--lilac);
  font-family: var(--pass-line);
}
.glam :focus-visible { outline-color: var(--gold-lt); }

/* ---------- the site header, in velvet ---------- */
.glam .hero { padding-bottom: 0; border-top-color: var(--hot); color: var(--cream);
  background: var(--glitter), linear-gradient(180deg, var(--velvet-1), #3d0a28); }
.glam .site-nav { font-family: var(--pass-line); font-size: 16px; }
.glam .site-nav a, .glam .hero .quiet { color: var(--cream); font-family: var(--pass-line); }
.glam .site-nav a[aria-current="page"] { text-decoration-color: var(--hot); }

/* ---------- Season 1 ---------- */
.s01 { position: relative; overflow: hidden; padding-block: 18px 34px; color: var(--cream);
  border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, var(--gold-dk), var(--gold-lt) 30%, var(--gold) 55%, var(--gold-lt) 80%, var(--gold-dk)) 1;
  background:
    var(--glitter),
    linear-gradient(112deg, transparent 32%, rgba(255,150,205,.10) 46%, transparent 60%),
    radial-gradient(70% 70% at 74% 38%, var(--velvet-3), transparent 72%),
    radial-gradient(120% 90% at 50% 0%, #6a1042, var(--velvet-2) 45%, var(--velvet-1) 100%); }
.s01-grid { display: grid; gap: 18px; align-items: center; }
.s01-copy { display: grid; gap: 12px; align-content: start; min-width: 0; }
.kick { margin: 0; font-weight: 600; font-size: 15px; letter-spacing: .04em; color: var(--lilac); }
.s01 h1 { margin: 0; font-family: var(--pass-name); font-weight: 400; font-size: clamp(42px, 6.1vw, 84px); line-height: .98; letter-spacing: 0; color: var(--hot);
  text-shadow: 3px 4px 0 var(--gold), 6px 8px 0 rgba(26,7,19,.55); }
.s01 h1 span { display: block; white-space: nowrap; }
.s01 h1 span + span { color: var(--gold-lt); text-shadow: 3px 4px 0 var(--hot-deep), 6px 8px 0 rgba(26,7,19,.55); }
.s01-lead { margin: 6px 0 0; max-width: 22em; font-weight: 500; font-size: clamp(20px, 2.3vw, 25px); line-height: 1.3; color: var(--cream); }
.soon { margin: 2px 0 0; }
.soon-pill { display: inline-block; padding: 7px 16px 6px; border-radius: 999px; font-family: var(--pass-name); font-size: 15px; letter-spacing: .03em; color: var(--velvet-1);
  background: linear-gradient(135deg, var(--gold-lt), var(--gold) 45%, #ffe9a6 60%, var(--gold-dk));
  box-shadow: 0 0 0 2px rgba(26,7,19,.5), 0 6px 18px rgba(244,195,74,.28); }

/* the fan: Velvet, Salute (raised, in front), Throne, and the steel plate between them */
.fan { position: relative; width: min(100%, 540px); aspect-ratio: 540 / 480; margin-inline: auto; }
.fc { position: absolute; top: 13%; width: 38%; height: auto; border-radius: 3.4% / 2.6%;
  box-shadow: 0 0 0 1px rgba(247,215,116,.55), 0 20px 34px -14px rgba(0,0,0,.8); transition: transform .5s cubic-bezier(.3,.8,.25,1); }
.fc-l { left: 2%; transform: rotate(-12deg); }
.fc-c { left: 31%; top: 0; z-index: 2; box-shadow: 0 0 0 1px rgba(247,215,116,.8), 0 0 40px rgba(255,95,174,.35), 0 26px 40px -16px rgba(0,0,0,.85); }
.fc-r { left: 60%; transform: rotate(12deg); }
.fan:hover .fc-l { transform: rotate(-15deg) translateX(-3%); }
.fan:hover .fc-r { transform: rotate(15deg) translateX(3%); }
.slab { position: absolute; left: 50%; top: 59%; z-index: 3; width: 29%; aspect-ratio: 1; transform: translateX(-50%) rotate(-3deg); border-radius: 4%;
  container-type: inline-size;
  background:
    linear-gradient(160deg, rgba(255,255,255,.35), transparent 38%, rgba(0,0,0,.18)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #e3e6ea, #a9adb3 45%, #d6d9dd 62%, #8f9399);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.35), 0 0 0 1px rgba(40,10,25,.6), 0 24px 34px -12px rgba(0,0,0,.85); }
.slab .bolt { position: absolute; width: 6.5%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #f1f2f4, #8b8f95 45%, #3b3d41 80%); box-shadow: 0 1px 2px rgba(0,0,0,.6); }
.slab .b1 { left: 5%; top: 5%; } .slab .b2 { right: 5%; top: 5%; } .slab .b3 { left: 5%; bottom: 5%; } .slab .b4 { right: 5%; bottom: 5%; }
.mark { position: absolute; inset: 14%; width: 72%; height: 72%; overflow: visible; color: var(--gold);
  filter: drop-shadow(0 0 1.5px rgba(255,205,95,.7)) drop-shadow(0 1px 0 rgba(90,50,0,.45)); }
.mark path { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linejoin: miter; stroke-linecap: square; }
.slab .head { position: absolute; left: 14%; top: 17%; width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0 30%, #ffd2ea 45%, rgba(255,95,174,0) 72%);
  box-shadow: 0 0 10px 4px rgba(255,155,208,.85), 0 0 26px 10px rgba(255,95,174,.5); }
/* the beam comes down from above the hero to the spot */
.slab .head::before { content: ""; position: absolute; left: 50%; bottom: 50%; width: 2px; height: 1100px; transform: translateX(-50%);
  background: linear-gradient(to top, #fff, rgba(255,170,215,.95) 6%, rgba(255,95,174,.45) 40%, rgba(255,95,174,0)); box-shadow: 0 0 8px 1px rgba(255,95,174,.6); }
/* a spray of sparks under the spot */
.slab .head::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; border-radius: 50%; background: #fff6d8;
  box-shadow: 6px -5px 0 #ffe49a, -7px -3px 0 #fff, 4px 7px 0 #ffb3dc, -5px 6px 0 #ffe49a, 10px 1px 0 rgba(255,228,154,.7), -10px -1px 0 rgba(255,179,220,.7); }

/* the sweep: twelve raster passes, the burn showing behind the spot, white-hot, cooling to gold */
.sweep-on .mark { animation: sw-cool 1.6s ease-out 2.8s both; }
.sweep-on .mark path { animation: sw-reveal 1.8s steps(12, end) 1s both; }   /* the clip is on the path, so the hot glow is never cut square */
.sweep-on .slab .head { animation: sw-x .15s linear 1s 12 alternate both, sw-y 1.8s steps(12, jump-none) 1s both, sw-on 2s linear .9s both; }
.sweep-on .slab .head::after { animation: sw-spark .09s steps(2, end) 1s 22 both; }
@keyframes sw-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sw-cool {
  from { color: #fff6e2; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px #ff5fae) drop-shadow(0 0 14px rgba(255,140,60,.7)); }
  to { color: var(--gold); filter: drop-shadow(0 0 1.5px rgba(255,205,95,.7)) drop-shadow(0 1px 0 rgba(90,50,0,.45)); } }
@keyframes sw-x { from { left: 14%; } to { left: 86%; } }
@keyframes sw-y { from { top: 17%; } to { top: 83%; } }
@keyframes sw-on { 0% { opacity: 0; } 5%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sw-spark { from { transform: rotate(0deg) scale(1); } to { transform: rotate(140deg) scale(1.6); } }

/* the yard, in miniature: two rows of four plates and the Burn Run bay beside them, as on /lab/s01/ */
.yardbar { margin-top: 26px; display: grid; gap: 18px 28px; align-items: center; padding: 18px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(26,7,19,.72), rgba(26,7,19,.86)); box-shadow: inset 0 0 0 1px rgba(244,195,74,.5), 0 18px 40px -20px rgba(0,0,0,.8); }
.rail { justify-self: center; display: grid; grid-template-columns: repeat(4, minmax(0, 58px)) minmax(0, 72px); grid-template-rows: auto auto; gap: 10px;
  align-items: center; text-decoration: none; }
.rail img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 3px; border: 4px solid #3a3c40;
  box-shadow: 0 2px 0 #18191b, 0 8px 12px rgba(0,0,0,.6); transition: transform .3s cubic-bezier(.3,.8,.25,1); }
.rail img.bay { grid-column: 5; grid-row: 1 / 3; margin-left: 8px; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(26,7,19,.8), 0 0 18px rgba(244,195,74,.35), 0 8px 12px rgba(0,0,0,.6); }
.yardbar:hover .rail img { transform: translateY(-2px); }
.yb-copy { display: grid; gap: 8px; min-width: 0; }
.yb-copy h2 { font-family: var(--pass-line); font-weight: 800; font-size: clamp(24px, 2.6vw, 30px); color: var(--cream); letter-spacing: 0; }
.yb-copy h2 .badge { margin: 0 0 0 6px; }
.yb-copy p { margin: 0; color: var(--lilac); }
.glam .more { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 8px; font-family: var(--pass-name); font-weight: 400;
  font-size: 15px; letter-spacing: .02em; text-decoration: none; color: var(--velvet-1);
  background: linear-gradient(180deg, var(--gold-lt), var(--gold) 55%, #d99a2c); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 20px -8px rgba(244,195,74,.6); }
.glam .more:hover { filter: brightness(1.06); }

/* ---------- the business doors ---------- */
.doors { background: linear-gradient(180deg, #22071a, var(--velvet-0)); }
.doors h2 { font-family: var(--pass-name); font-weight: 400; font-size: clamp(26px, 3.2vw, 34px); letter-spacing: .01em; color: var(--gold); margin-bottom: 22px; }
.door-grid { display: grid; gap: 18px; }
.door { display: grid; gap: 8px; align-content: start; min-width: 0; overflow: hidden; padding: 22px 24px; border-radius: 14px; color: var(--lilac);
  background: linear-gradient(180deg, #2e0a21, #230819); box-shadow: inset 0 0 0 1px rgba(244,195,74,.45), 0 18px 34px -20px rgba(0,0,0,.9); }
.door p { margin: 0; }
.door h3 { font-family: var(--pass-line); font-weight: 800; font-size: 22px; color: var(--cream); }
.door strong { color: var(--cream); }
.door a:not(.more):not(.psd-door) { color: var(--gold-lt); }
.glam .label { font-family: var(--pass-line); font-weight: 700; font-size: 13px; letter-spacing: .02em; text-transform: none; color: var(--gold-lt); border-color: rgba(247,215,116,.7); }
.glam .label.soon-label { color: var(--hot); border-color: var(--hot); }
.glam #pro-shop-door .psd-door { box-shadow: inset 0 -1px 0 rgba(244,195,74,.4); }
.tl-door { display: flex; align-items: center; justify-content: center; height: 132px; margin: -22px -24px 8px; box-shadow: inset 0 -1px 0 rgba(244,195,74,.4);
  background:
    radial-gradient(60% 90% at 50% 100%, rgba(247,215,116,.18), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, rgba(0,0,0,.25)),
    repeating-linear-gradient(90deg, #4a0b31 0, #7d1650 9px, #5a0d37 15px, #3a0826 22px); }
.tl-cup { height: 96px; width: auto; filter: drop-shadow(0 0 6px rgba(244,195,74,.45)); }
.tl-cup path { fill: none; stroke: var(--gold-lt); stroke-width: 2; stroke-linejoin: round; }

/* ---------- footer on velvet ---------- */
.glam footer { border-top-color: rgba(244,195,74,.3); }

@media (min-width: 640px) {
  .rail { grid-template-columns: repeat(4, minmax(0, 66px)) minmax(0, 84px); }
}
@media (min-width: 760px) {
  .door-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .s01 { padding-block: 26px 48px; }
  .s01-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 32px; }
  .yardbar { grid-template-columns: auto minmax(0, 1fr); padding: 22px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc, .rail img { transition: none; }
  .fan:hover .fc-l { transform: rotate(-12deg); }
  .fan:hover .fc-r { transform: rotate(12deg); }
}