/*
Theme Name: Design Gameshow
Theme URI: https://gameshow.dundeedesignfestival.com
Author: Agency of None
Author URI: https://agencyofnone.com
Description: Custom theme for the Design Gameshow Prize Draw 2026, a single-page fundraising raffle site for Dundee Design Festival. Ported from the approved static HTML/CSS/JS prototype — this stylesheet is the same visual system, unchanged, enqueued directly by the theme.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary — all rights reserved by Leisure & Culture Dundee / Agency of None
Text Domain: design-gameshow
*/

:root {
  --grey-900: #111111;
  --grey-700: #444444;
  --grey-500: #777777;
  --grey-300: #cccccc;
  --grey-200: #e2e2e2;
  --grey-100: #f4f4f4;
  --white: #ffffff;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-owners-regular: "owners", var(--font);
  --font-owners-narrow-bold: "owners-narrow", var(--font);
  --font-owners-narrow-black: "owners-narrow", var(--font);

  /* Gameshow palette — drawn from inspiration/colour-palette.webp */
  --navy-950: #170821;
  --navy-900: #1e2c82;
  --blue-600: #3b9bd9;
  --cyan-300: #9ff3ff;
  --pink-300: #ffa8d8;
  --magenta-500: #e0507e;
  --berry-700: #a83f66;
  --plum-800: #6b2c43;
  --bulb: #fff2c4;

  --gradient-chrome-pink: linear-gradient(180deg, #ffffff 0%, var(--pink-300) 32%, var(--magenta-500) 68%, var(--berry-700) 100%);
  --gradient-chrome-blue: linear-gradient(180deg, #ffffff 0%, var(--cyan-300) 32%, var(--blue-600) 68%, var(--navy-900) 100%);
  --gradient-star-pink: linear-gradient(160deg, var(--pink-300) 0%, var(--magenta-500) 100%);
  --gradient-star-blue: linear-gradient(160deg, var(--cyan-300) 0%, var(--blue-600) 100%);
  --gradient-stage: radial-gradient(ellipse 120% 80% at 50% -10%, var(--navy-900) 0%, var(--navy-950) 65%);

  --shadow-hard: 4px 4px 0 var(--navy-950);
  --shadow-hard-sm: 3px 3px 0 var(--navy-950);
  --shadow-hard-lift: 6px 6px 0 var(--navy-950);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-owners-regular);
  font-weight: 400;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.85);
  background: var(--navy-950);
  padding-bottom: 96px; /* clear the sticky ticket bar */
}

h1, h2, h3 {
  font-family: var(--font-owners-narrow-black);
  font-weight: 800;
  color: var(--white);
}

/* Calmer info sections (How It Works, Why, FAQ, Terms, Contact) get a
   small diamond mark ahead of their title rather than the full chrome
   treatment — ties them back to the show's diamond badge without
   competing with the loud prize/ticket moments. */
h2:not(.prizes-headline):not(.sticky-title)::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 12px;
  background: var(--magenta-500);
  transform: rotate(45deg) translateY(-1px);
  vertical-align: middle;
}

/* "Why", "FAQs", "Terms" and "Contact" titles run larger and drop the
   diamond mark — the diamond moves onto each FAQ question instead (see
   summary::before). */
#why h2,
#faq h2,
#terms h2,
#contact h2 {
  font-size: 2.5rem;
}
#why h2::before,
#faq h2::before,
#terms h2::before,
#contact h2::before {
  content: none;
}

.prizes-kicker,
.btn {
  font-family: var(--font-owners-narrow-bold);
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Gameshow visual primitives — chrome type, marquee lights, starburst  */
/* CTAs, diamond badges, confetti dividers. See PROJECT.md Stage 4.     */
/* ------------------------------------------------------------------ */

/* Dimensional "chrome sign" text — gradient fill, outline, hard offset
   shadow. Reserved for prize/ticket moments, not general headings. */
.chrome-text {
  color: transparent;
  background: var(--gradient-chrome-pink);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1.5px var(--navy-950);
  filter: drop-shadow(var(--shadow-hard));
}
.chrome-text--blue { background: var(--gradient-chrome-blue); }

/* Small recurring diamond motif, used as a bullet ahead of section
   titles to tie calmer sections back to the show's diamond badge mark. */
.diamond-bullet {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  background: var(--magenta-500);
  transform: rotate(45deg);
  vertical-align: middle;
}

/* Marquee light-chase border: a strip of glowing "bulbs." Used to frame
   the hero and the sticky ticket bar — the site's two "stages." */
.marquee-lights {
  display: none;
  position: relative;
  z-index: 1;
  height: 14px;
  background-color: var(--navy-950);
  background-image:
    radial-gradient(circle, var(--bulb) 0 3px, transparent 3.5px),
    radial-gradient(circle, rgba(255, 242, 196, 0.45) 0 6px, transparent 6.5px);
  background-size: 28px 100%, 28px 100%;
  background-position: 14px center, 14px center;
  background-repeat: repeat-x;
}

/* Confetti divider — Memphis-style geometric strip used sparingly at 2-3
   "stage" transitions rather than as general wallpaper. */
.confetti-divider {
  height: 20px;
  background-color: var(--white);
  background-image:
    radial-gradient(circle at 10% 50%, var(--magenta-500) 0 4px, transparent 4px),
    radial-gradient(circle at 40% 30%, var(--cyan-300) 0 3px, transparent 3px),
    linear-gradient(45deg, transparent 45%, var(--blue-600) 45% 55%, transparent 55%),
    radial-gradient(circle at 75% 60%, var(--berry-700) 0 3px, transparent 3px),
    linear-gradient(-45deg, transparent 45%, var(--pink-300) 45% 55%, transparent 55%);
  background-size: 96px 20px;
  background-repeat: repeat-x;
  background-position: center;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 64px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Section backgrounds rotate between the two "stage" blues so each
   section stays clearly differentiated while remaining one family.
   (.prizes-section and #why keep their own rules further down.) */
#how-it-works {
  position: relative;
  padding-top: 128px;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, transparent 15%, transparent 85%, rgba(0, 0, 3, 0.85) 100%) center / 100% 100% no-repeat,
    url("assets/images/sparkle-bg.jpg") center / contain repeat;
}
/* Content stays above the sparkle field and edge-fade below — both are
   positioned (z-index: auto/none), so an explicit z-index here is what
   keeps them from painting over the title/banner/cards despite coming
   later in source order. Same pattern as header.hero's .hero-inner. */
#how-it-works .container { position: relative; z-index: 1; }
/* Dark fades on the left/right edges, matching the hero's own vignette. */
#how-it-works::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, transparent 30%),
    linear-gradient(to left, rgba(0, 0, 0, 0.75) 0%, transparent 30%);
  pointer-events: none;
}
#faq { background: var(--navy-950); }
#faq .container { max-width: 700px; }
#terms .container, #contact .container { max-width: 700px; }
#terms { background: var(--navy-950); }
footer#contact { background: var(--navy-950); }

header.hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  border-top: none;
  background: var(--gradient-stage);
  position: relative;
  overflow: hidden;
}
/* Foil-curtain backdrop: faint vertical shimmer stripes, like the tinsel
   backdrop in the reference photos — subtle so it reads as texture, not
   a busy pattern. */
header.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(159, 243, 255, 0.05) 0px,
    rgba(159, 243, 255, 0.05) 2px,
    transparent 2px,
    transparent 10px
  );
  pointer-events: none;
}
/* Edge vignette — darkens the left/right 30% of the hero for text/logo
   legibility over the video background. An ::after (not ::before) so it
   paints above the video, which is a real DOM child and would otherwise
   cover it. */
header.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, transparent 30%),
    linear-gradient(to left, rgba(0, 0, 0, 0.75) 0%, transparent 30%);
  pointer-events: none;
}
header.hero .container.hero-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 48px;
  padding-bottom: 48px;
  position: relative;
  z-index: 1;
}
header.hero .lede,
header.hero .meta {
  color: var(--white);
}
header.hero .meta { color: rgba(255, 255, 255, 0.75); }

.hero-logo {
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-bottom: 24px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
}

/* Preloader (video-hero alternative page) */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--grey-900);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#preloader.is-loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: preloader-spin 0.8s linear infinite;
}
@keyframes preloader-spin {
  to { transform: rotate(360deg); }
}
.preloader-text {
  color: var(--white);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Video hero (alternative header): plays once, no overlay, pauses on its
   last frame, then reveals the sticky ticket bar + a scroll prompt. */
.video-hero {
  position: relative;
  overflow: hidden;
}
.video-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-hero .hero-inner {
  position: relative;
  z-index: 1;
}
.video-hero .lede { color: var(--white); }
.video-hero .meta { color: rgba(255, 255, 255, 0.8); }
/* Fallback if the video can't load: fall back to the static background image */
.video-hero.video-fallback .video-hero-media { display: none; }
.video-hero.video-fallback { background: url("assets/images/bg.jpg") center / cover no-repeat; }

/* Hero starbursts: prize-draw sits upper-left, prizes sits lower-right.
   Both stay hidden until script.js adds .is-visible (3s after the video
   has loaded/fallen back), then pop in with three full spins while scaling
   up from nothing — prize-draw spinning one way, prizes spinning the other,
   so the two entrances read as distinct events rather than a mirrored copy. */
.hero-starburst {
  --pos: ; /* empty on desktop so `var(--pos) scale(...) rotate(...)` stays a
              valid transform list — the keyword "none" here would invalidate
              the whole declaration once combined with scale()/rotate(). */
  position: absolute;
  width: clamp(230px, 25.3vw, 437px);
  height: auto;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: var(--pos) scale(0.2) rotate(-1080deg);
}
.hero-starburst.is-visible {
  animation: hero-starburst-appear 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Scoped to the header's two starbursts only — the prizes-section reuses
   the .hero-starburst--prizes class for its own copy, which sits over a
   different, already-contrasty backdrop and doesn't need the shadow. */
header.hero .hero-starburst {
  filter: drop-shadow(6px 6px 8px var(--navy-950));
}
.hero-starburst--prize-draw {
  top: 14%;
  left: 4%;
}
.hero-starburst--prizes {
  bottom: 10%;
  right: 4%;
  transform: var(--pos) scale(0.2) rotate(1080deg);
}
/* Compound selectors (matching the base rule's specificity) so these
   longhand overrides actually win over the shorthand above instead of
   being silently outranked by it. */
.hero-starburst--prizes.is-visible {
  animation-name: hero-starburst-appear-reverse;
  animation-delay: 0.15s;
}
@keyframes hero-starburst-appear {
  0% { opacity: 0; transform: var(--pos) scale(0.2) rotate(-1080deg); }
  70% { opacity: 1; transform: var(--pos) scale(1.08) rotate(12deg); }
  100% { opacity: 1; transform: var(--pos) scale(1) rotate(0deg); }
}
@keyframes hero-starburst-appear-reverse {
  0% { opacity: 0; transform: var(--pos) scale(0.2) rotate(1080deg); }
  70% { opacity: 1; transform: var(--pos) scale(1.08) rotate(-12deg); }
  100% { opacity: 1; transform: var(--pos) scale(1) rotate(0deg); }
}
@media (max-width: 720px) {
  .hero-starburst {
    --pos: translateX(-50%);
    left: 50%;
    right: auto;
    width: clamp(176px, 58.7vw, 293px);
  }
  /* Un-centers the first starburst into the top-left corner instead of the
     shared centered mobile position above. */
  .hero-starburst--prize-draw {
    --pos: ;
    top: 4%;
    left: 4%;
  }
  .hero-starburst--prizes { bottom: calc(6% + 20px); }
  header.hero::after {
    background-image:
      linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, transparent 30%),
      linear-gradient(to left, rgba(0, 0, 0, 0.75) 0%, transparent 30%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 25%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-starburst.is-visible { animation: none; opacity: 1; transform: var(--pos) scale(1) rotate(0deg); }
}

/* Randomised sparkle field over the hero video — script.js scatters a
   handful of these star sprites, each with its own size/position/timing.
   Based on the "starshine glitter" technique (codepen.io/kucsatax/pen/
   vyWevX): a single star image, scaled/rotated/faded in on a snap rather
   than a smooth pulse, then held invisible for the back half of each
   cycle before it starts again — no page background, far fewer stars. */
.hero-sparkles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.sparkle {
  position: absolute;
  opacity: 0;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAJYCAMAAACJuGjuAAADAFBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+/LkhhAAAA/3RSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLi8wMTIzNDU2Nzg5Ojs8PT4/QEFCQ0RFRkdISUpLTE1O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");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  animation-name: sparkle-twinkle;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes sparkle-twinkle {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
  25% { opacity: 1; transform: translate(var(--dx, 0), var(--dy, 0)) scale(1) rotate(360deg); }
  50% { opacity: 0; transform: translate(calc(var(--dx, 0) * 2), calc(var(--dy, 0) * 2)) scale(0.3) rotate(720deg); }
  100% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sparkles { display: none; }
}

/* Prizes section reuses the same starburst graphic, pinned to the top
   right of the container with the same spin/scale reveal as the hero. */
.prizes-section .container { position: relative; }
.prizes-section .hero-starburst {
  top: -130px;
  right: -110px;
  bottom: auto;
  left: auto;
  width: clamp(200px, 24vw, 360px);
}
/* Below ~1420px the container has no longer has 110px of margin outside
   its own right edge for the starburst to bleed into (container hits
   max-width: 1200px only above that), so the -110px offset pushes the
   image past the viewport edge and causes horizontal scroll. Flush it to
   the container's edge instead once that margin runs out; the vertical
   bleed (top: -130px) is unaffected and keeps overlapping the section
   above. */
@media (max-width: 1420px) {
  .prizes-section .hero-starburst {
    right: 0;
  }
}

/* Second prizes-section starburst — the site-URL badge — mirrored on the
   left at the same top offset, opposite horizontal bleed. Same specificity
   as the rule above (.prizes-section + one class each), so it must come
   after it in source order to win the left/right tie-break. */
.prizes-section .hero-starburst--dgs {
  left: -110px;
  right: auto;
}
@media (max-width: 1420px) {
  .prizes-section .hero-starburst--dgs {
    left: 0;
  }
}
/* Both badges pinned to the top would collide with each other (and the
   kicker heading) once the container narrows enough that their widths
   overlap — drop the left one to the bottom corner instead, the same
   top/bottom split the hero already uses for its own two starbursts. */
@media (max-width: 620px) {
  .prizes-section .hero-starburst--dgs {
    top: auto;
    bottom: -60px;
  }
}

.scroll-prompt {
  position: absolute;
  /* Bottom offset cleared against the sticky ticket bar's measured height
     (156px) plus a visible gap, so the prompt never sits behind/under the
     bar's buttons once both reveal together post-video. */
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 165px;
  height: 165px;
  opacity: 0;
  /* Fades in after the sticky ticket bar's own 0.6s reveal transition has
     finished, so the two don't compete for attention the instant the
     video ends — the flashing prompt reads as a follow-up beat. */
  transition: opacity 0.6s ease 0.6s;
}
.scroll-prompt.is-visible { opacity: 1; }
.scroll-prompt-image {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(6px 6px 8px var(--navy-950));
  /* Starts after the same 0.6s opacity-transition delay above, so the
     flash doesn't begin mid-fade-in. */
  animation: scroll-prompt-flash 1s steps(1, end) 0.6s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-prompt-image { animation: none; }
}
@media (max-width: 720px) {
  .scroll-prompt {
    display: none;
  }
}
@keyframes scroll-prompt-flash {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.sticky-ticket-bar--reveal {
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.sticky-ticket-bar--reveal.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.hero-text-reveal {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero-text-reveal.is-visible {
  opacity: 1;
}

h1 { font-size: 2.25rem; margin: 16px 0; }
h2 { font-size: 1.5rem; margin: 0 0 16px; }
h3 { font-size: 1.1rem; margin: 0 0 4px; }
p { line-height: 1.5; color: rgba(255, 255, 255, 0.75); text-wrap: pretty; }

a { color: var(--cyan-300); }

.placeholder-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.is-hidden { display: none !important; }

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-media {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  height: auto;
  margin-bottom: 24px;
}
.lede { font-size: 1.1rem; max-width: 640px; margin: 0 0 24px; }

.cta-group { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.meta { display: block; color: var(--grey-500); font-size: 0.85rem; margin-top: 16px; }

.btn {
  position: relative;
  display: inline-block;
  padding: 25px 58px;
  border-radius: 8px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  border: 2px solid var(--navy-950);
  box-shadow: var(--shadow-hard);
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard-lift); }
.btn:active { transform: translate(2px, 2px); box-shadow: none; }

.btn-primary { background: var(--gradient-star-pink); color: var(--navy-950); }
.btn-secondary { background: var(--gradient-star-blue); color: var(--navy-950); }

.section-title-center { text-align: center; font-size: 5rem; text-transform: uppercase; padding-bottom: 32px; }
.how-it-works-banner {
  display: block;
  width: 100%;
  transform: rotate(5deg);
  max-width: 480px;
  height: auto;
  margin: -34px auto 100px;
  filter: drop-shadow(var(--shadow-hard));
}
/* Mirrors the shared h2::before diamond onto the right of the "How It
   Works" title too, so it reads as bracketed rather than one-sided. */
.section-title-center::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 12px;
  background: var(--magenta-500);
  transform: rotate(45deg) translateY(-1px);
  vertical-align: middle;
}

.how-it-works-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: start;
  margin-top: 56px;
}
.how-it-works-media {
  position: sticky;
  top: 15vh;
  /* The Vimeo clips are all natively 1:1 (confirmed via Vimeo's oEmbed API)
     — matching the panel to that ratio, rather than an independent
     viewport-based height, is what makes cover below both fill edge-to-edge
     and show the full frame. A mismatched ratio here is what caused the
     earlier cropping (cover) / letterboxing (contain) trade-off. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.how-it-works-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000; /* fallback while the iframe loads, not a fit compromise */
  display: block;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  pointer-events: none; /* decorative background video, not an interactive player */
}
.how-it-works-image[data-step-image="1"] { z-index: 4; transform: rotate(0deg) translate(0, 0); }
.how-it-works-image[data-step-image="2"] { z-index: 3; transform: rotate(-3deg) translate(10px, 10px); }
.how-it-works-image[data-step-image="3"] { z-index: 2; transform: rotate(-6deg) translate(20px, 20px); }
.how-it-works-image[data-step-image="4"] { z-index: 1; transform: rotate(-9deg) translate(30px, 30px); }

/* Deliberately tall — each step gets a full-ish screen of scroll distance
   while the video panel stays pinned, so revealing all 4 steps is a real
   scrolling journey rather than a quick flick. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}
.steps li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
}
/* Step 4 has no next card to reveal, so its slot doubles up: the fine
   print sits directly under it, closing out the scroll journey instead
   of trailing after a separate empty stretch. */
.how-it-works-step[data-step="4"] {
  flex-direction: column;
  gap: 24px;
}
.step-card {
  position: relative;
  background: var(--white);
  border: 2px solid var(--navy-950);
  border-radius: 8px;
  padding: 32px;
  box-shadow: var(--shadow-hard-sm);
}
.steps h3 { font-size: 2.9rem; line-height: 2.9rem; text-transform: uppercase; margin-bottom: 4px; color: var(--navy-950); }
.steps p { font-size: 1.5rem; color: var(--grey-700); margin-top: 5px; }
/* Pinned to the card's top-left corner rather than sitting inline like the
   old numbered circle — mostly hangs off the edge, with just enough overlap
   onto the card to read as a badge stuck on, not a floating decoration. */
.step-badge {
  position: absolute;
  top: -84px;
  left: -86px;
  width: 156px;
  height: 156px;
  z-index: 2;
  pointer-events: none;
}
/* Higher specificity than ".steps p" (line 524), which would otherwise win
   and override this to the step-card body size/colour now that fine-print
   lives inside .steps. Styled to match .step-card (white, bordered, hard
   shadow) with regular body-copy text rather than the small reversed
   fine-print treatment it used to have. */
.steps .fine-print {
  background: var(--white);
  color: var(--grey-700);
  border: 2px solid var(--navy-950);
  border-radius: 8px;
  box-shadow: var(--shadow-hard-sm);
  font-size: 1.5rem;
  line-height: 1.5;
  margin-top: 100px;
  padding: 32px;
  max-width: 500px;
  text-align: left;
}
.steps .fine-print a { color: var(--navy-900); }

/* Prizes marquee — the "stage": navy backdrop, spotlit white prize
   tiles, chrome-sign headline. This is the loudest section on the page,
   deliberately, since prizes are the entire point of the site. */
.prizes-section {
  position: relative;
  isolation: isolate;
  padding-left: 0;
  padding-right: 0;
  background:
    linear-gradient(to bottom, var(--navy-950) 0%, transparent 15%),
    linear-gradient(to right, var(--navy-950) 0%, transparent 6%),
    linear-gradient(to left, var(--navy-950) 0%, transparent 6%),
    var(--gradient-stage);
  border-top: none;
}
/* CRT-ridge texture, multiplied over the stage gradient. Its own layer
   (z-index: -1, isolated to this section) rather than folded into the
   .prizes-section background shorthand above, so it doesn't disturb the
   already-tuned vignette blending between those gradient layers, and so
   the marquee/text content — normal-flow, unpositioned — paints above it
   automatically. */
.prizes-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/images/crt.jpg") repeat;
  background-size: 800px auto;
  mix-blend-mode: multiply;
  pointer-events: none;
}
#why { border-top: none; padding-top: 50px; padding-bottom: 114px; }
.prizes-kicker {
  text-align: center;
  font-size: 5rem;
  max-width: 630px;
  line-height: 5rem;
  margin: 0 auto;
  color: var(--cyan-300);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 32px;
}
.prizes-headline {
  text-align: center;
  font-size: 3.5rem;
  line-height: 1.05;
  padding: 32px 24px 12px;
  margin: 0 auto 12px;
  max-width: 700px;
}
.prizes-body {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 28px;
  color: #fff;
  margin-top: 32px;
  font-size: 1.4rem;
}
.marquee-pause-toggle {
  display: block;
  margin: 16px auto 0;
  padding: 10px 20px;
  font-size: 1rem;
  font-family: var(--font);
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 100px;
  cursor: pointer;
}
.marquee-row { overflow: hidden; margin: 24px 0; }
.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
}
.marquee-track.is-draggable { cursor: grab; }
.marquee-track.is-draggable:active { cursor: grabbing; }
.prize-card {
  flex: 0 0 294px;
  text-align: left;
  text-transform: uppercase;
}
.prize-card:nth-child(3n+1) { transform: rotate(-1.5deg); }
.prize-card:nth-child(3n+2) { transform: rotate(1deg); }
.prize-card:nth-child(3n) { transform: rotate(-0.5deg); }
.prize-image { display: block; width: 100%; height: 294px; margin-bottom: 8px; border-radius: 4px; object-fit: cover; }
.prize-name {
  font-family: var(--font-owners-narrow-bold);
  font-weight: 700;
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.1rem;
  color: var(--white);
}
.prize-maker { margin: 2px 0 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); }

/* Winner reveal — a gold "bulb" badge with the show's diamond mark,
   appended once a prize has been drawn. Placeholder copy ("Won by —")
   ships ahead of the draw (28 Sept 2026); real names get swapped in
   per prize at Stage 7. */
.prize-winner {
  display: inline-flex;
  align-items: center;
  margin: 8px 0 0;
  padding: 4px 12px 4px 8px;
  font-family: var(--font-owners-narrow-bold);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--navy-950);
  background: var(--bulb);
  border-radius: 100px;
}
.prize-winner::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  background: var(--magenta-500);
  transform: rotate(45deg);
}
.cta-inline { margin-top: 32px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.two-col .placeholder-box { height: 280px; }
.why-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 2px solid var(--navy-950);
  box-shadow: var(--shadow-hard-sm);
}
.why-photo-credit {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 8px 0 0;
}

.terms-list { padding-left: 20px; }
.terms-list li { margin-bottom: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); }

/* FAQ + terms content are dense, read-heavy text — reversed white-on-navy
   gets fatiguing at this length, so these live in light cards instead. */
.info-card {
  background: var(--white);
  color: var(--navy-950);
  border: 2px solid var(--navy-950);
  border-radius: 8px;
  padding: 28px 32px;
  box-shadow: var(--shadow-hard-sm);
}
.info-card > p:first-child { margin-top: 0; color: var(--grey-700); }
.info-card a { color: var(--navy-900); }

details {
  background: var(--white);
  color: var(--navy-950);
  border: 2px solid var(--navy-950);
  border-radius: 10px;
  padding: 22px 28px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-hard-sm);
}
summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 1.15rem;
  list-style: none; /* drop the native disclosure triangle */
}
summary::-webkit-details-marker { display: none; } /* Safari's marker isn't covered by list-style */
summary::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 12px;
  background: var(--magenta-500);
  transform: rotate(45deg) translateY(-1px);
  vertical-align: middle;
}
details p { margin: 10px 0 0; color: var(--grey-700); }
details a { color: var(--navy-900); }


/* No background on the bar itself — only the marquee row underneath
   should read as a solid strip; the buttons row above stays transparent
   so just the button pills (with their own fills) sit over the page. */
.sticky-ticket-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.sticky-ticket-bar .marquee-lights { height: 8px; }
.sticky-inner {
  --sticky-pad-x: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px var(--sticky-pad-x) 0;
}
.sticky-buttons { position: relative; z-index: 1; display: flex; gap: 12px; flex-shrink: 0; margin-bottom: 8px; }
/* Equal-width pair: "1 Ticket — £7" and "3 Tickets — £15" are different
   lengths, and .btn sizes itself to its own text (inline-block, padding
   only) — so without this the two pills render at different widths even
   though every other style on them is identical. flex-basis 0 + grow 1
   inside this shrink-to-fit row makes both match the wider button's
   natural width instead of each hugging its own text. */
.sticky-buttons .btn { flex: 1 1 0; text-align: center; }

/* Marquee ticker sits below the buttons and carries its own full-width
   background — negative margins cancel .sticky-inner's side padding so
   it bleeds edge to edge regardless of the (transparent) bar above it.
   Edge mask fades the text in/out at the crop rather than cutting it off
   hard. */
.sticky-marquee {
  align-self: stretch;
  width: auto;
  margin: 0 calc(-1 * var(--sticky-pad-x));
  padding: 10px 0;
  background: var(--navy-950);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
/* Two identical blocks, driven by a JS-measured GSAP tween (script.js)
   rather than a CSS "-50%" keyframe — the previous version approximated
   the loop distance as exactly half the track's width, which only holds
   if the flex gap before/after the seam matches every other gap. It
   didn't (no gap is added after the last child), so the loop jumped and
   gapped at the seam every cycle. Giving the block-to-block gap here the
   same value as each block's own internal gap keeps the seam visually
   identical to every other gap, and measuring the real block width in
   JS removes the "close enough" assumption entirely. */
.sticky-marquee-track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
}
.sticky-marquee-block {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.sticky-marquee-bullet {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  animation: sticky-marquee-bullet-spin 2s linear infinite;
}
@keyframes sticky-marquee-bullet-spin {
  to { transform: rotate(360deg); }
}
.sticky-title {
  font-size: 1.9rem;
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--font-owners-narrow-black);
  font-weight: 800;
  color: transparent;
  background: var(--gradient-chrome-blue);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px var(--navy-950);
}
/* Reads as a marquee bulb catching now and again, not a constant pulse. */
.sticky-marquee-flash { text-transform: uppercase; animation: sticky-buy-flash 3.6s steps(1, end) infinite; }
.sticky-info {
  font-size: 1.75rem;
  font-family: var(--font-owners-narrow-bold);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
  white-space: nowrap;
}
/* Triple flash: three quick dims, then held on for the rest of the loop —
   reads as a marquee bulb burst rather than a single blink. Dims to 0.25
   rather than 0: this title scrolls continuously (script.js), so a full
   opacity:0 here made it vanish completely whenever a blink landed while
   it was crossing the visible strip — a "hole" punched in the marquee
   rather than a flash. Staying just above invisible keeps the blink
   readable without ever dropping the text entirely. */
@keyframes sticky-buy-flash {
  0%, 70% { opacity: 1; }
  73% { opacity: 0.25; }
  76% { opacity: 1; }
  79% { opacity: 0.25; }
  82% { opacity: 1; }
  85% { opacity: 0.25; }
  88%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-marquee-flash { animation: none; }
  .sticky-marquee-bullet { animation: none; }
}

footer p { margin: 4px 0; }
#contact .container > p { margin: 16px 0; }
.footer-credit {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-credit p { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); }
.footer-credit a { color: var(--cyan-300); }

@media (max-width: 768px) {
  .section-title-center { font-size: 2.7rem; padding-bottom: 0; }
  .how-it-works-layout { grid-template-columns: 1fr; gap: 24px; }
  /* The sticky-pinned fan/fly-away effect only works with the two-column
     desktop layout (see script.js's matchMedia gate). On mobile, both
     wrappers collapse via display:contents so their children — the 4
     videos and 4 cards — become direct siblings in .how-it-works-layout's
     single-column flow; `order` below then interleaves them video/card/
     video/card instead of showing one stacked block above all the cards. */
  .how-it-works-media,
  .steps {
    display: contents;
  }
  .how-it-works-image {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: 8px;
  }
  .how-it-works-image[data-step-image="1"] { order: 1; z-index: auto; transform: none; }
  .how-it-works-step[data-step="1"] { order: 2; }
  .how-it-works-image[data-step-image="2"] { order: 3; z-index: auto; transform: none; }
  .how-it-works-step[data-step="2"] { order: 4; }
  .how-it-works-image[data-step-image="3"] { order: 5; z-index: auto; transform: none; }
  .how-it-works-step[data-step="3"] { order: 6; }
  .how-it-works-image[data-step-image="4"] { order: 7; z-index: auto; transform: none; }
  .how-it-works-step[data-step="4"] { order: 8; }
  /* The sticky-pinned scroll effect only works with the two-column desktop
     layout — on a stacked mobile layout it would just be dead space. */
  .steps li { min-height: 0; }
  .two-col { grid-template-columns: 1fr; }
  .sticky-inner { --sticky-pad-x: 10px; padding: 12px var(--sticky-pad-x) 0; }
  .sticky-buttons { gap: 6px; }
  .sticky-buttons .btn { padding: 16px 18px; font-size: 1.15rem; }
  .sticky-title { font-size: 1.35rem; }
  .sticky-info { font-size: 0.95rem; }
  .sticky-marquee-bullet { width: 18px; height: 18px; }
  .sticky-marquee-track { gap: 14px; }
  .sticky-marquee-block { gap: 14px; }
  .prize-card { flex: 0 0 185px; }
  .prize-image { height: 185px; }
  .step-card { padding: 24px; }
  .step-badge { width: 102px; height: 102px; top: -60px; left: -33px; }
  .steps p { font-size: 1.2rem; }
  .steps .fine-print { margin-top: 50px; }
  .prizes-section::before { display: none; }
  .prizes-section .hero-starburst--dgs { display: none; }
  .prizes-kicker { font-size: 4rem; line-height: 4rem; }
  #how-it-works { padding-top: 64px; }
  .how-it-works-banner { margin: 16px auto 60px; }
}