/* ============================================================================
   Beyond the Line — theme: "NIGHT CIRCUIT"
   ----------------------------------------------------------------------------
   Near-black ground with pink / cyan / violet neon, 1px violet rules and
   rounded corners.

   assets/css/site.css holds the layout and declares a colour palette in :root;
   this file re-declares those same tokens and adds the personality on top. That
   means the whole direction is one file — swap theme.css and the site changes
   skin without a single structural edit.

   CONTENTS
     1. colour tokens       5. how your church can join
     2. header + buttons    6. marquee + closing
     3. hero + board        7. footer
     4. why / expect / info 8. stickers
   ========================================================================== */

/* ---------- 1. colour tokens ---------- */
/* Overrides the palette in site.css. Nothing else in this file needs to know
   the hex values — change them here and the whole site follows. */
:root {
  --bg: #06040f;
  --fg: #f4f1ff;
  --muted: #a99ed6;
  --line: rgba(139, 92, 246, .34);
  --lw: 1px;
  --accent: #ff2fb0;
  --accent2: #35d7ff;
  --on-accent: #ffffff;
  --ink-bg: #0a0714;
  --ink-fg: #f4f1ff;
  --ink-muted: #8d81ba;
  --panel: rgba(10, 7, 20, .72);
  --panel-line: rgba(139, 92, 246, .5);
  --field: rgba(10, 7, 20, .85);
  --r: 8px;
  --r-lg: 16px;
  --glow: 0 0 30px rgba(255, 47, 176, .38);
}

/* ---------- 2. header + buttons ---------- */
.site-header { background: rgba(6, 4, 15, .86); backdrop-filter: blur(12px); }
.progress-bar { background: linear-gradient(90deg, #35d7ff, #ff2fb0); }

.header-cta { background: linear-gradient(135deg, #ff2fb0, #8b5cf6); }
.header-cta:hover { background: linear-gradient(135deg, #ff2fb0, #8b5cf6); filter: brightness(1.12); }

.btn-primary { background: linear-gradient(135deg, #ff2fb0, #8b5cf6); }
.btn-primary:hover { background: linear-gradient(135deg, #ff2fb0, #8b5cf6); filter: brightness(1.12); }
.btn-ghost { color: var(--accent2); box-shadow: 0 0 24px rgba(53, 215, 255, .2); }
/* Straight up rather than a diagonal nudge — nothing here is pretending to be
   a printed thing. */
.btn:hover { transform: translateY(-3px); }

/* ---------- 3. hero + board ---------- */
/* The photograph is already a neon night circuit, so this theme barely touches
   it — a light violet wash for cohesion and nothing more. The heavy pink / cyan
   recolouring the old sunset shot needed would only muddy this one, and the
   drawn perspective grid it used to carry fought the real track, so both are
   gone.

   --hero-focus is the point of the photo that stays in frame. The hero is a
   full screen tall, so `cover` scales the image past the viewport width and
   crops the sides; without this the kart on the right disappeared, badly on
   phones. It sits at roughly 68% across / 59% down, so the narrower the screen,
   the closer the focus moves to it. Re-measure if you change the photograph. */
.hero-bg {
  --hero-focus: 68% 58%;
  background:
    linear-gradient(180deg, rgba(11, 7, 34, .3) 0%, rgba(6, 4, 15, .28) 100%),
    url("../img/hero-kart-night.jpg") var(--hero-focus) / cover no-repeat,
    #06040f;
}
@media (max-width: 900px) { .hero-bg { --hero-focus: 72% 60%; } }
@media (max-width: 560px) { .hero-bg { --hero-focus: 74% 61%; } }

/* Wash over the photograph. Darker at the top so the sticky header reads,
   lightest behind the artwork, deepening at the bottom so the pitch, the button
   and the board all read against it. The second layer is a faint CRT scanline. */
.hero-shade {
  background:
    linear-gradient(180deg, rgba(6, 4, 15, .6) 0%, rgba(6, 4, 15, .1) 32%,
      rgba(6, 4, 15, .44) 68%, rgba(6, 4, 15, .8) 100%),
    repeating-linear-gradient(180deg, rgba(244, 241, 255, .04) 0 1px, transparent 1px 5px);
}

.hero-logo { filter: drop-shadow(0 0 56px rgba(255, 47, 176, .5)) drop-shadow(0 14px 30px rgba(0, 0, 0, .6)); }

/* Start lights in cyan, so they read against the pink logo. */
.grid-lights { display: flex; justify-content: center; gap: 7px; }
.grid-lights span {
  width: clamp(14px, 1.7vw, 22px); height: clamp(14px, 1.7vw, 22px);
  background: var(--accent2); border-radius: var(--r);
  box-shadow: 0 0 18px rgba(53, 215, 255, .6);
  animation: light 1.1s ease-in-out infinite;
}
@keyframes light { 0%, 100% { transform: scale(1); } 50% { transform: scale(.7); } }

/* Neon beam closing the hero. */
.hero-strip {
  position: relative; height: 4px;
  background: linear-gradient(90deg, #35d7ff, #8b5cf6, #ff2fb0);
  animation: glow 3s ease-in-out infinite;
}

.hero-beats { color: var(--ink-fg); }
.hero-beats li + li::before { background: var(--accent2); box-shadow: 0 0 10px rgba(53, 215, 255, .85); }

/* The board across the foot of the hero: enough tint to read against the
   photograph, with one neon rule along its top edge. */
.hero-board {
  background: rgba(8, 5, 18, .78);
  backdrop-filter: blur(6px);
}
/* Each panel takes its own colour: a neon rule along the top, the label, and a
   soft wash of the same colour behind the value. */
.hero-board-item { --c: #35d7ff; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, transparent), transparent 75%); }
.hero-board-item:nth-child(2) { --c: #ffd23d; }
.hero-board-item:nth-child(3) { --c: #a78bfa; }
.hero-board-item::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--c); box-shadow: 0 0 18px var(--c);
}
.hero-board-item + .hero-board-item { border-color: rgba(139, 92, 246, .45) !important; }
.hero-board-label { color: var(--c); }
.hero-board-value { color: #f4f1ff; text-shadow: 0 0 24px color-mix(in srgb, var(--c) 60%, transparent); }

/* ---------- 4. why / expect / event information ---------- */
/* Why we're racing sits on a deep blue-black gradient: still the night, with a
   cyan glow off the top right and a cooler blue rising from the bottom left. */
.why {
  background:
    radial-gradient(80% 70% at 85% 0%, rgba(53, 215, 255, .20), transparent 62%),
    radial-gradient(70% 60% at 5% 100%, rgba(59, 91, 246, .30), transparent 62%),
    linear-gradient(160deg, #0a1730 0%, #070a1c 50%, #06040f 100%);
}
.why-lede { color: #f4f1ff; }
/* Amber, so the goal reads as its own thing against the pink and cyan. */
.why-figure-n { color: #ffa63d; text-shadow: 0 0 60px rgba(255, 166, 61, .5); }
.expect-card { background: rgba(10, 7, 20, .5); }
.expect-n { color: var(--accent2); }
/* Phones: the cards stack, so as each one scrolls in its number lights up in
   turn. Dim lavender to a soft cyan glow, eased over most of a second. */
@media (max-width: 899px) {
  .expect-n {
    color: rgba(169, 158, 214, .5);
    transition: color .8s ease .2s, text-shadow .8s ease .2s;
  }
  .expect-card {
    transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1),
                box-shadow .8s ease .2s;
  }
  .expect-card.is-in .expect-n { color: var(--accent2); text-shadow: 0 0 14px rgba(53, 215, 255, .5); }
  .expect-card.is-in { box-shadow: inset 3px 0 0 rgba(53, 215, 255, .55); }
}
.step-time { color: var(--accent2); }
/* Audience tags: the racing half of the day in cyan like the rest of the
   programme, the parts that are for everybody in the orange used by "5,000". */
.step-tag { color: var(--accent2); border-color: rgba(53, 215, 255, .45); }
.step-tag--everyone { color: #ffa63d; border-color: rgba(255, 166, 61, .5); }
.rail-line { background: linear-gradient(180deg, #35d7ff, #8b5cf6, #ff2fb0); opacity: .6; }

/* The whole site is dark here, so `section--invert` lifts a section forward on a
   violet panel rather than dropping it to black. Event information uses it. */
.section--invert {
  background:
    radial-gradient(90% 120% at 80% 0%, rgba(139, 92, 246, .18), transparent 70%),
    #0d0920;
}
.section--invert .kicker { color: var(--accent2); }

/* The circuit graphic is drawn in red; hue-rotate swings it round to the pink of
   this palette so it belongs. */
.venue-map {
  background: radial-gradient(120% 90% at 50% 0%, rgba(139, 92, 246, .22), rgba(10, 7, 20, .8));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.venue-map-img { filter: hue-rotate(315deg) saturate(1.25) brightness(1.1); }
/* The traced circuit: pink band with a dark centre line, so it reads as the two
   edges of the track like the drawing does, and a white kart dot. */
.course-glow { stroke: #ff2fb0; }
.course-band { stroke: #ff2fb0; }
.course-core { stroke: #0a0714; }
.course-kart { fill: #f4f1ff; stroke: #ff2fb0; filter: drop-shadow(0 0 8px rgba(255, 47, 176, .9)); }
.info-link { color: var(--accent2); }
.info-link:hover { background: var(--accent2); color: #0a0714; }
.venue-map-cap { background: linear-gradient(135deg, #ff2fb0, #8b5cf6); }

/* ---------- 5. how your church can join ---------- */
/* Same violet panel as event information (see .section--invert above), so the
   two read as a pair. The cards are lifted panels with a blue arrow disc; the
   hover brings up the pink-to-purple gradient. */
#register {
  background:
    radial-gradient(90% 120% at 80% 0%, rgba(139, 92, 246, .18), transparent 70%),
    #0d0920;
}
.join-card {
  background: rgba(139, 92, 246, .10); color: #f4f1ff; border-color: rgba(139, 92, 246, .45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.join-card .join-card-body { color: #bfb4e6; }
.join-arrow { background: #35d7ff; color: #0a0714; }
.join-card:hover {
  background: linear-gradient(135deg, #ff2fb0, #8b5cf6); color: #f4f1ff; border-color: transparent;
  transform: translateY(-4px); box-shadow: 0 18px 38px rgba(255, 47, 176, .4);
}
.join-card:hover .join-card-body { color: rgba(255, 255, 255, .88); }
.join-card:hover .join-arrow { background: #f4f1ff; color: #0a0714; }

/* FAQ: the plus marks and the question hover are blue too. */
.faq-mark { color: var(--accent2); }
.faq-item summary:hover { color: var(--accent2); }

/* ---------- 6. marquee + closing ---------- */
.marquee { background: linear-gradient(120deg, #ff2fb0, #8b5cf6 55%, #35d7ff); }
.marquee-group { color: #0a0714; }
.closing {
  background:
    radial-gradient(60% 80% at 50% 120%, rgba(255, 47, 176, .22), transparent 70%),
    radial-gradient(50% 60% at 12% 0%, rgba(53, 215, 255, .14), transparent 70%);
}
.closing-title { text-shadow: 0 0 44px rgba(255, 47, 176, .35); }

/* ---------- 7. footer ---------- */
.site-footer { background: #0a0714; }
/* Alpha's mark stays its own red — it is another organisation's brand, so it is
   deliberately the one thing here not recoloured. */

/* ============================================================================
   8. STICKERS
   ----------------------------------------------------------------------------
   Die-cut graphics scattered down the page, the way stickers end up on a race
   helmet. Purely decorative: each one is aria-hidden in the HTML and
   pointer-events:none here, so they never block a link or reach a screen
   reader. Files: assets/img/sticker-*.png and race-course.png.

   The artwork is drawn in the poster theme's red, so hue-rotate swings it to
   this palette's pink. Drop that filter if you get artwork in the right colours.

   To move one .............. change its top/right/bottom/left below
   To resize one ............ change its --size
   To rotate one ............ change its --rot
   To remove one ............ delete its <img> from index.html
   To add one ............... copy an <img class="sticker st-…"> into a section
                              listed under "sticker anchors" just below, then
                              give it a rule here

   All of them are hidden under 900px wide so phones stay clean.
   ========================================================================== */

/* sticker anchors — a sticker positions itself against the nearest of these */
.why, #expect, #programme, #register, #faq, .site-footer { position: relative; }
/* Some stickers hang off the right edge on purpose — clip them at the section
   boundary so they never widen the page or bleed into the next section. */
.why, #programme, .site-footer { overflow: hidden; }

.sticker {
  position: absolute; z-index: 2;
  width: var(--size, 130px); height: auto;
  transform: rotate(var(--rot, 0deg));
  pointer-events: none; user-select: none;
  filter: hue-rotate(315deg) saturate(1.15) drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
}

/* Sits behind the content as a faint watermark instead of on top of it. */
.sticker--ghost { z-index: 0; opacity: .16; filter: hue-rotate(315deg) saturate(1.15); }

@media (max-width: 900px) { .sticker { display: none; } }

/* --- hero: over the photograph, clear of the centred artwork --- */
.st-helmet  { top: clamp(84px, 11vw, 140px); right: clamp(16px, 4vw, 64px);
              --size: clamp(75px, 8.1vw, 119px); --rot: 10deg; }
.st-chevron { top: clamp(84px, 11vw, 140px); left: clamp(16px, 4vw, 64px);
              --size: clamp(65px, 6.8vw, 99px); --rot: -3deg; }

/* --- why we're racing: big rosette bleeding off the right edge --- */
.st-rosette { top: -60px; right: -56px; --size: clamp(190px, 20vw, 300px); --rot: -12deg; }

/* --- what to expect: kart level with the section heading --- */
/* Starts beside the end of the heading and drives right as the section
   scrolls in. site.js sets left/top and the translate; these are the fallback. */
.st-kart    { top: clamp(26px, 3.4vw, 62px); right: clamp(20px, 5vw, 100px);
              --size: clamp(112px, 12vw, 178px); --rot: -6deg; will-change: transform; }

/* --- programme: the circuit as a watermark behind the timeline --- */
.st-course  { top: 20%; right: -5%; --size: clamp(290px, 30vw, 470px); --rot: 6deg; }

/* --- faq: the list caps at 1000px, so the right column is free. Three
       stickers stacked down it: 2026 badge, stamp, blossom. --- */
.st-2026    { top: clamp(26px, 3.4vw, 56px); right: clamp(20px, 6vw, 110px);
              --size: clamp(104px, 12vw, 170px); --rot: 7deg; }
.st-stamp   { top: 44%; right: clamp(46px, 9.5vw, 178px);
              --size: clamp(94px, 10vw, 146px); --rot: -7deg; }
.st-blossom { bottom: clamp(26px, 3.6vw, 64px); right: clamp(86px, 15vw, 240px);
              --size: clamp(66px, 7.5vw, 104px); --rot: -14deg; }

/* --- footer: the wireframe globe needs the dark ground to read --- */
.st-tyre    { bottom: clamp(16px, 2.5vw, 40px); right: clamp(20px, 5vw, 90px);
              --size: clamp(112px, 13vw, 180px); --rot: 4deg; }