/* ===========================================================
   ECHELON YOUNG INNOVATORS HACKATHON 2026
   Stylesheet (pastel edition)

   Contents:
     1. Variables (your colours live here)
     2. Base reset
     3. Reusable pieces (container, buttons, headings)
     4. Navigation bar
     5. Hero, glass scene and countdown
     6. About
     6a. Tracks
     7. Timeline
     8. Eligibility
     9. Prizes
    10. Register (with the puzzle snap)
    11. FAQs
    12. Contact and footer
    13. Mobile adjustments
   =========================================================== */


/* =========== 1. VARIABLES ===========================
   One palette for the whole site. Lavender is the identity
   colour, icy blue and blush pink support it, and near-black
   carries the text so everything stays easy to read.
   ==================================================== */
:root {
  /* Backgrounds */
  --bg:       #F8F5FD;   /* page background, pale lavender white */
  --bg-alt:   #F0EAFB;   /* alternate section background */
  --surface:  #FFFFFF;   /* cards */

  /* Lines */
  --line:        #E4DAF6;
  --line-strong: #CDBFEE;

  /* Identity colour */
  --lavender:      #B9A5F6;   /* buttons, filled shapes */
  --lavender-soft: #EFE9FD;   /* tinted backgrounds */
  --lavender-deep: #6A4FD0;   /* icons, links, emphasis (readable on white) */

  /* Supporting colours */
  --icy:        #CFE6F8;
  --icy-deep:   #3E7FB5;
  --blush:      #F7CAD8;
  --blush-deep: #C4567D;
  --mint:       #D3F1E3;
  --peach:      #FFDCC6;
  --teal:       #2F7C77;      /* muted teal, used for "done" and success */

  /* Text */
  --ink:       #17131F;   /* headings and main text, near black */
  --ink-dim:   #5A5470;   /* secondary text */
  --on-accent: #17131F;   /* text on lavender buttons */

  /* Code typeface, used for anything that is data: times, counts,
     amounts, status readouts. Never for sentences. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
          "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --grid-line: rgba(106, 79, 208, 0.055);   /* the blueprint grid */

  /* Soft, lavender-tinted shadows */
  --shadow-soft: 0 12px 30px -14px rgba(76, 52, 150, 0.28);
  --shadow-lift: 0 22px 44px -18px rgba(76, 52, 150, 0.38);
}


/* =========== 2. BASE RESET ========================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Stops the sticky navbar covering a heading when you jump to a section */
  scroll-padding-top: 80px;
}

/* A faint blueprint grid sits behind the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.35) 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.35) 60%, transparent 100%);
}

body > * { position: relative; z-index: 1; }

/* The store of gradients and shapes. Zero size, but not display:none,
   because browsers refuse to paint gradients from a hidden SVG. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* While the popup is up, the page behind must not scroll */
html.promo-open,
html.promo-open body { overflow: hidden; }

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

img { max-width: 100%; display: block; }

/* Visible focus ring for keyboard users */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--lavender-deep);
  outline-offset: 3px;
  border-radius: 6px;
}


/* =========== 3. REUSABLE PIECES ===================== */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 { color: var(--ink); }

h2 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 800;
  margin-bottom: 20px;
}

h3 {
  font-size: 19px;
  margin-bottom: 6px;
}

p { color: var(--ink-dim); }

.section { padding: 84px 0; }

.section-alt { background-color: var(--bg-alt); }

.section-intro { max-width: 520px; margin-bottom: 36px; }

.eyebrow {
  color: var(--ink-dim);
  font-size: 15px;
  margin-bottom: 14px;
}

/* --- Badge: the small pill in the hero --- */
.badge {
  display: inline-block;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: var(--mint);
  border: 1px solid rgba(47, 124, 119, 0.3);
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

/* --- Icons --- */
.icon-sprite { display: none; }

.icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--lavender-deep);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-lg { width: 34px; height: 34px; }

/* --- Buttons --- */
.btn {
  display: inline-block;
  background-color: var(--lavender);
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 12px;
  border: 2px solid var(--lavender);
  box-shadow: 0 10px 22px -12px rgba(106, 79, 208, 0.7);
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  background-color: #A891F2;
  border-color: #A891F2;
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -14px rgba(106, 79, 208, 0.8);
}

.btn-small  { padding: 9px 18px; font-size: 14px; }
.btn-lg     { padding: 16px 34px; font-size: 17px; }

.btn-outline {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: none;
}

.btn-outline:hover {
  background-color: var(--surface);
  border-color: var(--lavender-deep);
  box-shadow: none;
}


/* =========== 4. NAVIGATION BAR ====================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(248, 245, 253, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}

.logo { display: flex; align-items: center; gap: 10px; }

/* The glass puzzle cube */
.logo-mark {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 8px rgba(106, 79, 208, 0.35));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* A small playful turn when you point at the logo */
.logo:hover .logo-mark { transform: rotate(-12deg) scale(1.08); }

.logo-text { font-weight: 700; font-size: 17px; color: var(--ink); }

.logo-img { height: 36px; width: auto; }

.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
}

.nav-links a {
  position: relative;
  color: var(--ink-dim);
  font-size: 15px;
  transition: color 0.2s;
}

/* An underline that draws in from the left on hover */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lavender), var(--blush));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease-out;
}

.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-cta { flex-shrink: 0; }

/* Hamburger button, hidden on wide screens */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
}

.menu-bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background-color: var(--ink);
}


/* =========== 5. HERO, GLASS SCENE AND COUNTDOWN ===== */
.hero {
  position: relative;
  overflow: hidden;          /* keeps the artwork from causing sideways scroll */
  background: var(--bg);
  padding: 76px 0 72px;
  border-bottom: 1px solid var(--line);
}

/* Two soft colour clouds drifting slowly behind everything */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.hero::before {
  width: 560px;
  height: 460px;
  top: -160px;
  right: -80px;
  background: radial-gradient(circle, rgba(185, 165, 246, 0.75), rgba(207, 230, 248, 0.45) 55%, transparent 70%);
  animation: cloud-drift 22s ease-in-out infinite alternate;
}

.hero::after {
  width: 460px;
  height: 380px;
  bottom: -180px;
  left: -120px;
  background: radial-gradient(circle, rgba(247, 202, 216, 0.75), rgba(255, 220, 198, 0.4) 55%, transparent 70%);
  animation: cloud-drift 26s ease-in-out infinite alternate-reverse;
}

@keyframes cloud-drift {
  0%   { translate: 0 0;       scale: 1; }
  100% { translate: -60px 40px; scale: 1.12; }
}

/* --- Glass scene ---
   The stage gives depth. The inner box turns gently towards the
   pointer, and each shape inside drifts by its own amount
   (data-depth in the HTML), which is what makes it feel layered. */
.hero-scene {
  position: absolute;
  top: 50%;
  right: 0;
  width: min(36vw, 450px);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  perspective: 900px;
  pointer-events: none;      /* clicks pass straight through */
  z-index: 0;
}

.hero-scene-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s ease-out;
}

.shape {
  position: absolute;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.shape svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Each shape bobs and turns slightly on its own timing.
   --r is its resting angle, --dur its speed. */
.shape-float {
  rotate: var(--r, 0deg);
  animation: float var(--dur, 9s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes float {
  0%, 100% { translate: 0 0;     rotate: var(--r, 0deg); }
  50%      { translate: 0 -16px; rotate: calc(var(--r, 0deg) + 6deg); }
}

/* Glass pieces get a soft coloured shadow */
.shape-piece svg,
.shape-mini svg {
  filter: drop-shadow(0 16px 22px rgba(106, 79, 208, 0.22));
}

/* The big cube in the middle, with a halo of light behind it */
.shape-cube { left: 18%; top: 14%; width: 64%; }

.shape-cube .shape-float::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 105, 240, 0.6), rgba(240, 160, 200, 0.3) 50%, transparent 72%);
  filter: blur(28px);
  z-index: -1;
}

.shape-cube svg {
  filter: drop-shadow(0 0 30px rgba(185, 165, 246, 0.5));
}

/* --- The 3D glass cube ---
   Eight small glass blocks, two by two by two. The whole group turns
   slowly, and every few seconds the blocks drift apart and click back
   together like puzzle pieces. Sizes use cqw (a percentage of the
   cube's own width), so it scales on any screen. */
@property --gap {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.cube3d {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  perspective: 1100px;
}

.cube3d-fallback { width: 100%; height: auto; display: block; }

.c3-rot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(-26deg) rotateY(-38deg);
  animation: c3-turn 26s linear infinite;
  --s: 27cqw;                 /* size of one small block */
  --gap: 0.6cqw;
}

@keyframes c3-turn {
  from { transform: rotateX(-26deg) rotateY(-38deg); }
  to   { transform: rotateX(-26deg) rotateY(322deg); }
}

/* The blocks part and rejoin. Held together most of the time, so it
   reads as one cube that occasionally shows how it is built. */
.c3-rot.is-breathing { animation: c3-turn 26s linear infinite, c3-split 7s ease-in-out infinite; }

@keyframes c3-split {
  0%, 50%, 100% { --gap: 0.6cqw; }
  70%           { --gap: 7cqw; }
  82%           { --gap: 7cqw; }
  92%           { --gap: 0cqw; }    /* a tiny overshoot: the click */
}

.c3-cell {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transform: translate3d(
    calc(var(--x) * (var(--s) / 2 + var(--gap) / 2)),
    calc(var(--y) * (var(--s) / 2 + var(--gap) / 2)),
    calc(var(--z) * (var(--s) / 2 + var(--gap) / 2)));
}

.c3-face {
  position: absolute;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  box-shadow:
    inset 0 0 1.8cqw rgba(255, 255, 255, 0.7),
    0 0 2.4cqw rgba(124, 92, 235, 0.45);
  backface-visibility: visible;    /* glass: you can see the far side */
  overflow: visible;
}

/* A band of light across every face, the way glass catches it */
.c3-face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(125deg, transparent 30%, rgba(255, 255, 255, 0.55) 46%, transparent 60%);
}

/* A jigsaw tab on the outer faces, sitting on the seam */
.c3-face.has-tab::after {
  content: "";
  position: absolute;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: inherit;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 1cqw rgba(255, 255, 255, 0.7);
}

.c3-face.tab-r::after { right: -17%; top: 33%; }
.c3-face.tab-l::after { left: -17%;  top: 33%; }
.c3-face.tab-b::after { bottom: -17%; left: 33%; }
.c3-face.tab-t::after { top: -17%;    left: 33%; }

/* Each direction gets its own glass tint from the palette */
.c3-front  { background: linear-gradient(160deg, rgba(167, 139, 250, 0.62), rgba(240, 150, 190, 0.55)); transform: translateZ(calc(var(--s) / 2)); }
.c3-back   { background: linear-gradient(160deg, rgba(139, 115, 230, 0.4), rgba(120, 175, 235, 0.38)); transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.c3-right  { background: linear-gradient(200deg, rgba(125, 185, 245, 0.66), rgba(124, 92, 235, 0.62));  transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.c3-left   { background: linear-gradient(200deg, rgba(150, 120, 245, 0.5), rgba(240, 160, 200, 0.45));  transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.c3-top    { background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(186, 166, 252, 0.66)); transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.c3-bottom { background: linear-gradient(135deg, rgba(139, 115, 230, 0.45), rgba(125, 185, 245, 0.42)); transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

/* A pool of light under the cube, like the reference picture */
.cube3d::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -4%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(124, 92, 235, 0.7), transparent 70%);
  filter: blur(7px);
  pointer-events: none;
}

/* The 3D cube already has its own light and shadow */
.shape-cube svg.cube3d-fallback { filter: drop-shadow(0 26px 30px rgba(76, 52, 150, 0.3)); }

/* Placement of the smaller pieces around the cube */
.shape-p1 { left: 22%; top: -2%; width: 20%; }
.shape-p2 { left: 74%; top: 62%; width: 23%; }
.shape-p3 { left: 3%;  top: 70%; width: 18%; }
.shape-p4 { left: 85%; top: 32%; width: 11%; }
.shape-m1 { left: 76%; top: 4%;  width: 15%; }
.shape-m2 { left: 42%; top: 86%; width: 10%; }

/* Text must stay above the scene */
.hero .container { position: relative; z-index: 1; }

.hero-title {
  font-size: clamp(38px, 5.6vw, 72px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 15ch;
  margin-bottom: 20px;
}

/* The word "Innovators" picks up the palette */
.hero-title .grad {
  background: linear-gradient(90deg, var(--lavender-deep), #9A6FD8 45%, var(--blush-deep));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero-tagline {
  font-size: 18px;
  max-width: 52ch;
}

.countdown { margin-top: 38px; }

.countdown-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lavender-deep);
  margin-bottom: 10px;
}

.countdown-row { display: flex; gap: 14px; }

/* Each unit sits on its own small glass tile */
.countdown-unit {
  min-width: 84px;
  padding: 10px 14px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(6px);
  text-align: center;
}

.countdown-value {
  display: block;
  font-family: var(--mono);
  font-size: clamp(28px, 4.4vw, 42px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;  /* stops digits jiggling */
}

/* Plays each time a number changes */
.countdown-value.is-ticking { animation: cd-tick 0.45s ease-out; }

@keyframes cd-tick {
  0%   { translate: 0 -8px; opacity: 0.2; }
  100% { translate: 0 0;    opacity: 1; }
}

.countdown-name {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 22px;
  margin-top: 60px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.fact dt {
  font-family: var(--mono);
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.fact dd { font-size: 17px; font-weight: 700; color: var(--ink); }


/* =========== 6. ABOUT =============================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.about-grid p + p { margin-top: 14px; }

.highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 44px;
}

.highlights li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.highlights li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

/* The icon sits on a small lavender tile */
.highlights .icon {
  width: 44px;
  height: 44px;
  padding: 9px;
  border-radius: 12px;
  background-color: var(--lavender-soft);
}

.highlights p { font-size: 15px; }


/* =========== 6a. TRACKS (on a rail) =================
   Laid out like the timeline so the page feels of a piece, but
   with no progress fill, because these are five choices rather
   than five steps in order.
   ==================================================== */
.tracks {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 54px;
}

.tk-rail {
  position: absolute;
  top: 27px;                 /* centre of the circles */
  left: 10%;
  right: 10%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--icy), var(--lavender) 50%, var(--blush));
}

.tk-item {
  position: relative;
  text-align: center;
  transition: opacity 0.45s ease-out;
}

.tk-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background-color: var(--surface);
  border: 3px solid var(--line-strong);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.25s, transform 0.25s, background-color 0.25s;
}

.tk-item:hover .tk-node {
  border-color: var(--lavender);
  transform: translateY(-3px);
}

/* The one currently lit */
.tk-item.is-active .tk-node {
  border-color: var(--lavender-deep);
  background-color: var(--lavender-soft);
  transform: scale(1.14);
  box-shadow: 0 0 0 7px rgba(185, 165, 246, 0.3),
              0 10px 28px rgba(106, 79, 208, 0.35);
}

/* script.js measures the lit circle and writes its centre into
   --tk-x and --tk-y, and this light slides there. */
.tk-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 4px;
  margin: -2px 0 0 -45px;
  z-index: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--lavender-deep), transparent);
  opacity: 0;
  transform: translate(var(--tk-x, 0px), var(--tk-y, 0px));
  transition: transform 0.55s cubic-bezier(0.3, 0.8, 0.3, 1), opacity 0.4s;
}

.tracks.is-cycling .tk-glow { opacity: 0.9; }

.tk-node .icon { margin: 0; width: 24px; height: 24px; }

.tk-item h3 {
  font-size: 17px;
  margin-bottom: 6px;
  min-height: 2.6em;         /* keeps the descriptions lined up */
}

.tk-detail { font-size: 14px; max-width: 24ch; margin: 0 auto; }

/* The catch-all track is marked out in blush */
.tk-open .tk-node { border-color: var(--blush); }
.tk-open .tk-node .icon { color: var(--blush-deep); }
.tk-open:hover .tk-node { border-color: var(--blush-deep); }


/* =========== 7. TIMELINE (progress track) ===========
   The filled part of the rail and the "happening now" marker are
   set by script.js from the real dates.
   ==================================================== */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 54px;
}

.tl-rail {
  position: absolute;
  top: 27px;
  left: 8%;
  right: 8%;
  height: 4px;
  background-color: var(--line);
  border-radius: 4px;
}

.tl-rail-fill {
  display: block;
  height: 100%;
  width: var(--tl-progress, 0%);   /* script.js sets --tl-progress */
  border-radius: 4px;
  background: linear-gradient(90deg, var(--icy-deep), var(--lavender-deep) 60%, var(--blush-deep));
  transition: width 1.2s cubic-bezier(0.2, 0.7, 0.3, 1),
              height 1.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.tl-step {
  position: relative;
  text-align: center;
}

.tl-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background-color: var(--surface);
  border: 3px solid var(--line-strong);
  transition: border-color 0.3s, background-color 0.3s, transform 0.3s;
}

.tl-num {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-dim);
}

.tl-when {
  font-family: var(--mono);
  color: var(--lavender-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.tl-step h3 { font-size: 19px; margin-bottom: 6px; }

.tl-detail { font-size: 15px; max-width: 26ch; margin: 0 auto; }

/* --- Stage states, applied by script.js --- */

/* Finished */
.tl-step.is-done .tl-node {
  border-color: var(--lavender);
  background-color: var(--lavender);
}
.tl-step.is-done .tl-num { color: var(--ink); }

/* Happening now */
.tl-step.is-now .tl-node {
  border-color: var(--lavender-deep);
  background-color: var(--surface);
  transform: scale(1.12);
  box-shadow: 0 0 0 7px rgba(185, 165, 246, 0.32);
}
.tl-step.is-now .tl-num { color: var(--lavender-deep); }

/* A pulsing ring, only on the stage happening right now */
.tl-step.is-now .tl-node::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--lavender-deep);
  animation: tl-pulse 2.4s ease-out infinite;
}

@keyframes tl-pulse {
  0%   { transform: scale(1);    opacity: 0.8; }
  100% { transform: scale(1.75); opacity: 0; }
}

.tl-status {
  display: inline-block;
  font-family: var(--mono);
  text-transform: uppercase;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tl-status-now  { background-color: var(--lavender); color: var(--on-accent); }
.tl-status-done { background-color: var(--mint); color: var(--teal); }
.tl-status-next { background-color: rgba(106, 79, 208, 0.08); color: var(--ink-dim); }


/* =========== 8. ELIGIBILITY (flip cards) ============ */
/* Three to a row. Flex instead of grid so a shorter last row sits
   in the middle rather than leaving a gap on the right. */
.rules {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 36px;
}

.rules > .rule { flex: 0 0 calc((100% - 40px) / 3); }

.rule {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;

  height: 190px;
  perspective: 900px;
}

.rule-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.rule[aria-expanded="true"] .rule-inner { transform: rotateY(180deg); }

.rule-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 22px;
  border-radius: 18px;
  background-color: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.rule-back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, var(--lavender-soft), #FBEFF4);
  border-color: var(--lavender);
}

.rule-title { font-size: 18px; font-weight: 700; color: var(--ink); }

.rule-detail { font-size: 15px; color: var(--ink); line-height: 1.55; }

.rule-hint {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: auto;
}

.rule .icon { margin-bottom: 2px; }

.rule:hover .rule-inner { transform: translateY(-3px); }
.rule[aria-expanded="true"]:hover .rule-inner { transform: rotateY(180deg) translateY(-3px); }

/* The card still awaiting information keeps a dashed outline */
.rule-pending .rule-front {
  background-color: rgba(255, 255, 255, 0.5);
  border: 1.5px dashed var(--line-strong);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .rule-inner { transition: none; }
}


/* =========== 9. PRIZES (podium) ===================== */
.podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end;
  gap: 18px;
  max-width: 760px;
  margin: 46px auto 0;
  border-bottom: 2px solid var(--line-strong);
}

.pod { text-align: center; }

.pod .icon { margin: 0 auto 10px; display: block; }

.pod-amount {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.pod-block {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px 16px 0 0;
  border: 1px solid var(--line);
  border-bottom: none;
}

.pod-rank {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.pod-1 .pod-block { height: 136px; }
.pod-2 .pod-block { height: 96px; }
.pod-3 .pod-block { height: 68px; }

/* Each place takes one of the three palette colours */
.pod-1 .pod-block { background: linear-gradient(180deg, var(--lavender), var(--lavender-soft)); border-color: var(--lavender); }
.pod-2 .pod-block { background: linear-gradient(180deg, var(--icy), #EEF6FD); }
.pod-3 .pod-block { background: linear-gradient(180deg, var(--blush), #FDF0F4); }

.pod-2 .icon { color: var(--icy-deep); }
.pod-3 .icon { color: var(--blush-deep); }

.pod-1 .pod-amount {
  font-size: 38px;
  color: var(--lavender-deep);
}


/* =========== 10. REGISTER =========================== */
.register {
  background:
    radial-gradient(36rem 18rem at 50% 0%, rgba(185, 165, 246, 0.45), transparent 65%),
    radial-gradient(24rem 14rem at 85% 100%, rgba(247, 202, 216, 0.5), transparent 65%),
    var(--bg);
  border-top: 1px solid var(--line);
  text-align: center;
}

.register-inner p {
  max-width: 48ch;
  margin: 0 auto 28px;
}

.register-inner a:not(.btn),
.faq-list a:not(.btn) {
  color: var(--lavender-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Puzzle snap ---
   Two glass pieces start apart and click together when the section
   scrolls into view. The class is-revealed is added by script.js. */
.snap {
  width: 170px;
  margin: 0 auto 24px;
}

.snap svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 12px 18px rgba(106, 79, 208, 0.28));
}

.snap-a,
.snap-b,
.snap-flash {
  transform-box: fill-box;
  transform-origin: center;
}

.snap-a { transform: translateX(-30px) rotate(-12deg); }
.snap-b { transform: translateX(30px) rotate(12deg); }

.snap-a,
.snap-b {
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}

.snap.is-revealed .snap-a,
.snap.is-revealed .snap-b { transform: none; }

/* A quick flash of light where the two pieces meet */
.snap-flash { opacity: 0; }

.snap.is-revealed .snap-flash { animation: snap-flash 0.9s ease-out 0.95s both; }

@keyframes snap-flash {
  0%   { opacity: 0;   transform: scale(0.4); }
  40%  { opacity: 0.95; }
  100% { opacity: 0;   transform: scale(2.4); }
}


/* =========== 11. FAQs =============================== */
.faq-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: start;
}

.faq-list {
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 4px 24px;
  box-shadow: var(--shadow-soft);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

.faq-list details:last-child { border-bottom: none; }

.faq-list summary {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  color: var(--lavender-deep);
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.faq-list details[open] summary::after { content: "\2212"; transform: rotate(180deg); }

.faq-list details p { margin-top: 10px; max-width: 60ch; }

/* The answer eases in rather than snapping open */
.faq-list details[open] p { animation: faq-open 0.35s ease-out; }

@keyframes faq-open {
  from { opacity: 0; translate: 0 -6px; }
  to   { opacity: 1; translate: 0 0; }
}


/* =========== 12. CONTACT AND FOOTER ================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.affiliation {
  margin-top: 14px;
  font-size: 15px;
}

.contact-details {
  display: grid;
  gap: 16px;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  box-shadow: var(--shadow-soft);
}

.contact-details dt {
  font-family: var(--mono);
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-details dd { font-size: 17px; font-weight: 600; color: var(--ink); }

.contact-details a[href^="tel:"] { font-family: var(--mono); font-size: 16px; }

.contact-details a { color: var(--lavender-deep); }

.footer {
  border-top: 1px solid var(--line);
  padding: 40px 0;
}

.footer-title { font-weight: 700; font-size: 17px; color: var(--ink); }

.footer-meta {
  font-size: 14px;
  color: var(--ink-dim);
  margin-top: 4px;
}

.footer-top {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lavender-deep);
}


/* =========== TECHY LAYER ============================
   Custom cursor, status strip, section indices, ticker.
   ==================================================== */

/* --- Custom cursor ---
   The native cursor is only hidden once script.js confirms these
   are working, so a failed script never leaves you without one. */
.cursor-ring,
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;             /* above everything, including the popup (200) */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  will-change: transform;
}

.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(23, 19, 31, 0.35);
  border-radius: 50%;
  transition: opacity 0.25s, width 0.2s, height 0.2s,
              margin 0.2s, border-color 0.2s, background-color 0.2s;
}

.cursor-dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background-color: var(--lavender-deep);
  border-radius: 50%;
}

.has-cursor .cursor-ring,
.has-cursor .cursor-dot { opacity: 1; }

.has-cursor,
.has-cursor a,
.has-cursor button,
.has-cursor summary { cursor: none; }

.cursor-ring.is-over {
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-color: var(--lavender-deep);
  background-color: rgba(185, 165, 246, 0.18);
}

/* --- Status strip --- */
.hud {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  margin-bottom: 20px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
}

.hud-cell { display: inline-flex; align-items: center; gap: 7px; }

.hud-sep {
  width: 14px;
  height: 1px;
  background-color: var(--line-strong);
}

.hud-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #3FB98A;
  animation: hud-blink 2.4s ease-out infinite;
}

@keyframes hud-blink {
  0%   { box-shadow: 0 0 0 0 rgba(63, 185, 138, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(63, 185, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 185, 138, 0); }
}

/* --- Section index --- */
.sec-index {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--lavender-deep);
  margin-bottom: 10px;
}

/* --- Ticker --- */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--lavender-soft), #FDF1F5 50%, #EEF6FD);
  padding: 13px 0;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-run 38s linear infinite;
}

.ticker-run {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  white-space: nowrap;
}

.ticker-run i { color: var(--blush-deep); font-style: normal; }

@keyframes ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .hud-dot { animation: none; }
}

/* --- Small icons sitting inside labels --- */
.icon-sm {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  vertical-align: -2px;
  margin-right: 7px;
  color: var(--lavender-deep);
}

.fact dt,
.contact-details dt {
  display: flex;
  align-items: center;
}

/* --- Code window ---
   Drawn with HTML and CSS, in a light theme to match the page. */
.codewin {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--surface);
  box-shadow: var(--shadow-lift);
  font-family: var(--mono);
}

.codewin-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background-color: #F4EFFE;
  border-bottom: 1px solid var(--line);
}

.codewin-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.codewin-dot-1 { background-color: #F3A5B9; }
.codewin-dot-2 { background-color: #FFD39E; }
.codewin-dot-3 { background-color: #9FD9BC; }

.codewin-name {
  margin-left: 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}

.codewin-body {
  margin: 0;
  padding: 16px 16px 18px;
  font-size: 12.5px;
  line-height: 1.85;
  overflow-x: auto;
  color: #2B2540;
}

.codewin .ln {
  display: inline-block;
  width: 24px;
  margin-right: 12px;
  text-align: right;
  color: #C2B7E2;
  user-select: none;
}

/* Syntax colours, darkened so they read on white */
.codewin .kw { color: #7C3AED; }   /* const */
.codewin .vr { color: #2F6FB0; }   /* variable */
.codewin .pr { color: #2F7C77; }   /* property */
.codewin .st { color: #3B8A57; }   /* string */
.codewin .nu { color: #C2457A; }   /* number */
.codewin .fn { color: #B5642B; }   /* function */
.codewin .cm { color: #9A93B0; }   /* comment */

.caret {
  display: inline-block;
  width: 8px;
  height: 15px;
  margin-left: 4px;
  vertical-align: -3px;
  background-color: var(--lavender-deep);
  animation: caret-blink 1.1s steps(1) infinite;
}

@keyframes caret-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* --- Circuit artwork behind the tracks --- */
#tracks { position: relative; overflow: hidden; }

.circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
}

.trace {
  stroke-dasharray: 90 2000;
  stroke-dashoffset: 2090;
  animation: trace-run 7s linear infinite;
}

.trace-late { animation-duration: 9s; animation-delay: 2.5s; }

@keyframes trace-run {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .trace { animation: none; opacity: 0; }
  .caret { animation: none; }
  .tracks.is-cycling .tk-item { opacity: 1; }
  .tk-glow { display: none; }
}


/* --- Poster popup ---
   Hidden unless script.js removes the hidden attribute. */
.promo[hidden] { display: none; }

.promo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(42, 31, 82, 0.38);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

.promo.is-open { opacity: 1; }

.promo-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 22px 22px 22px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background-color: var(--surface);
  box-shadow: 0 30px 70px rgba(42, 31, 82, 0.35);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.2, 0.75, 0.25, 1);
  text-align: center;
}

.promo.is-open .promo-card { transform: none; }

.promo-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lavender-deep);
  margin: 8px 40px 8px 0;   /* room for the close button */
  text-align: left;
}

.promo-title {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  text-align: left;
}

.promo-sub {
  font-size: 14px;
  margin-bottom: 16px;
  text-align: left;
}

/* The prize pool, the thing most people want to see first */
.promo-prize {
  padding: 16px 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, var(--lavender-soft), transparent 120%);
  margin-bottom: 16px;
}

.promo-prize-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.promo-prize-total {
  font-family: var(--mono);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--lavender-deep);
  margin: 2px 0 12px;
}

.promo-prize-split {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.promo-prize-split li {
  flex: 1;
  padding: 7px 4px;
  border-radius: 10px;
  background-color: var(--surface);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.promo-prize-split span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Key dates, as a short table */
.promo-dates {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
  text-align: left;
}

.promo-dates div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}

.promo-dates dt { color: var(--ink-dim); }
.promo-dates dd { font-family: var(--mono); font-weight: 700; color: var(--ink); }

.promo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.promo-actions .btn { padding: 11px 20px; font-size: 15px; }

.promo-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(42, 31, 82, 0.25);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.promo-close:hover { background-color: var(--blush-deep); color: #fff; }

.promo-close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

@media (max-width: 700px) {
  .promo { padding: 16px; }
  .promo-card { max-width: 320px; }
  .promo-close { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .promo,
  .promo-card { transition: none; }
}

/* --- College name with the college logo beside it --- */
.inst { white-space: nowrap; }

/* Long names may still wrap on a phone, rather than overflow */
@media (max-width: 700px) { .inst { white-space: normal; } }

/* The college logo. Put the file at images/college-logo.png.
   If the file is missing, script-free fallback: the image removes
   itself (onerror in the HTML), so no broken icon ever shows. */
.inst-mark {
  display: inline-block;
  height: 1.4em;
  width: auto;
  max-width: 3em;
  object-fit: contain;
  margin-right: 0.4em;
  vertical-align: -0.35em;
}

/* --- Full college and university logo --- */
.org-card {
  display: inline-block;
  margin-top: 22px;
  padding: 16px 20px;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.org-lockup {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
}

.org-lockup-footer {
  max-width: 260px;
  margin-bottom: 16px;
}

/* --- Contact background: a jigsaw grid with signals on the seams --- */
#contact { position: relative; overflow: hidden; }

#contact .container { position: relative; z-index: 1; }

.jigsaw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.85;
  /* Fades the grid out towards the left, where the text sits */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 35%, #000 70%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 35%, #000 70%);
}

/* pathLength is not set, so the dash numbers are in real units.
   A short bright dash, then a long gap, travels the full seam. */
.seam-run {
  stroke-linecap: round;
  stroke-dasharray: 120 3000;
  stroke-dashoffset: 3120;
  animation: seam-run 9s linear infinite;
}

.seam-run-2 { animation-duration: 7s; animation-delay: 2s; }
.seam-run-3 { animation-duration: 11s; animation-delay: 4.5s; animation-direction: reverse; }

@keyframes seam-run {
  to { stroke-dashoffset: 0; }
}

/* --- Ripple rings behind the contact card --- */
.contact-wrap { position: relative; }

.contact-wrap .contact-details { position: relative; z-index: 1; }

.ping {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  border: 2px solid rgba(139, 115, 230, 0.45);
  opacity: 0;
  pointer-events: none;
  animation: ping 4.5s ease-out infinite;
}

.ping-2 { animation-delay: 1.5s; border-color: rgba(231, 154, 182, 0.45); }
.ping-3 { animation-delay: 3s;   border-color: rgba(111, 174, 221, 0.45); }

@keyframes ping {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .seam-run, .ping { animation: none; opacity: 0; }
}

/* =========== 13. MOBILE ADJUSTMENTS ================= */
@media (max-width: 860px) {

  .about-grid,
  .faq-grid,
  .contact-grid,
  .highlights {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .faq-grid { gap: 8px; }

  .highlights { gap: 16px; margin-top: 30px; }

  .codewin-body { font-size: 11px; padding: 12px 10px 14px; }

  .codewin .ln { width: 18px; margin-right: 8px; }

  .rules > .rule { flex-basis: 100%; }

  /* Tracks turn into a vertical list */
  .tracks {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .tk-rail {
    top: 10px;
    bottom: 10px;
    left: 26px;
    right: auto;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, var(--icy), var(--lavender) 50%, var(--blush));
  }

  .tk-item {
    display: grid;
    grid-template-columns: 54px 1fr;
    column-gap: 18px;
    text-align: left;
    align-items: start;
  }

  .tk-node { grid-row: 1 / span 2; margin: 0; }

  .tk-glow {
    width: 4px;
    height: 70px;
    margin: -35px 0 0 -2px;
    background: linear-gradient(180deg, transparent, var(--lavender-deep), transparent);
  }

  .tk-item h3 { min-height: 0; }

  .tk-detail { margin: 0; max-width: none; }

  /* Timeline turns into a vertical list */
  .timeline {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .tl-rail {
    top: 10px;
    bottom: 10px;
    left: 25px;
    right: auto;
    width: 4px;
    height: auto;
  }

  .tl-rail-fill {
    width: 100%;
    height: var(--tl-progress, 0%);
    background: linear-gradient(180deg, var(--icy-deep), var(--lavender-deep) 60%, var(--blush-deep));
  }

  .tl-step {
    display: grid;
    grid-template-columns: 54px 1fr;
    column-gap: 18px;
    text-align: left;
    align-items: start;
  }

  .tl-node { grid-row: 1 / span 4; margin: 0; }

  .tl-detail { margin: 0; max-width: none; }

  .tl-step.is-now .tl-node { transform: none; }

  .tl-status { justify-self: start; }

  /* Podium becomes a simple stack, first place on top */
  .podium {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: none;
    border-bottom: none;
  }

  .pod-1 { order: -1; }

  .pod {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: var(--shadow-soft);
  }

  .pod .icon { margin: 0; }

  .pod-amount { margin: 0; font-size: 24px; }

  .pod-1 .pod-amount { font-size: 28px; }

  .pod-block,
  .pod-1 .pod-block,
  .pod-2 .pod-block,
  .pod-3 .pod-block {
    height: auto;
    background: none;
    border: none;
    margin-left: auto;
    padding: 0;
  }

  .facts { grid-template-columns: repeat(2, 1fr); }

  .countdown-unit { min-width: 0; flex: 1; padding: 8px 6px 6px; }
}

@media (max-width: 980px) {
  /* On a narrower screen the glass scene sits above the title instead
     of beside it. The pointer tilt is switched off by script.js here. */
  .hero-scene {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 230px;
    margin: 0 auto 18px;
    perspective: none;
  }
}

@media (max-width: 700px) {

  .section { padding: 60px 0; }

  .hud { font-size: 10px; gap: 8px; }
  .hud-sep { display: none; }
  .ticker-run { font-size: 11px; gap: 18px; padding-right: 18px; }

  .hero { padding: 36px 0 52px; }

  .hero-scene { width: 190px; }

  .logo-text { display: none; }

  /* Keeps Register beside the menu button, not floating mid-bar */
  .nav-cta { margin-left: auto; }

  .hud { border-radius: 16px; }

  .menu-toggle { display: flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 20px;
    background-color: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
  }

  .nav-links.is-open { display: flex; }

  .nav-links a {
    padding: 13px 0;
    font-size: 17px;
    border-bottom: 1px solid var(--line);
  }

  .nav-links a::after { display: none; }

  .nav-links a:last-child { border-bottom: none; }

  .countdown-row { gap: 8px; }
}


/* --- Reveal on scroll ---
   Things start a little low and faded, then settle as they come
   into view. script.js adds the is-revealed class.
   ------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out,
              transform 0.7s cubic-bezier(0.2, 0.75, 0.25, 1);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* The rails and the glow are lines, not items, so they are skipped */
[data-stagger] > *:not(.tk-rail):not(.tl-rail):not(.tk-glow) {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out,
              transform 0.6s cubic-bezier(0.2, 0.75, 0.25, 1);
}

[data-stagger].is-revealed > *:not(.tk-rail):not(.tl-rail):not(.tk-glow) {
  opacity: 1;
  transform: none;
}

[data-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-revealed > *:nth-child(2) { transition-delay: 90ms; }
[data-stagger].is-revealed > *:nth-child(3) { transition-delay: 180ms; }
[data-stagger].is-revealed > *:nth-child(4) { transition-delay: 270ms; }
[data-stagger].is-revealed > *:nth-child(5) { transition-delay: 360ms; }
[data-stagger].is-revealed > *:nth-child(6) { transition-delay: 450ms; }
[data-stagger].is-revealed > *:nth-child(7) { transition-delay: 540ms; }
[data-stagger].is-revealed > *:nth-child(8) { transition-delay: 630ms; }

/* Track circles pop in, the way a node lights up on a board */
.tracks[data-stagger] > .tk-item { transform: translateY(24px) scale(0.92); }
.tracks[data-stagger].is-revealed > .tk-item { transform: none; }

/* Podium blocks grow upward from the floor */
.podium[data-stagger] > .pod {
  transform: none;
  opacity: 0;
}

.podium[data-stagger] > .pod .pod-block {
  transform: scaleY(0.1);
  transform-origin: bottom;
  transition: transform 0.75s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.podium[data-stagger].is-revealed > .pod { opacity: 1; }
.podium[data-stagger].is-revealed > .pod .pod-block { transform: none; }

.podium[data-stagger].is-revealed > .pod-1 .pod-block { transition-delay: 260ms; }

/* The code window comes in from the side it sits on */
.codewin[data-reveal] { transform: translateY(24px) translateX(26px); }
.codewin[data-reveal].is-revealed { transform: none; }

@media (max-width: 860px) {
  .codewin[data-reveal] { transform: translateY(24px); }
}

/* Safety net: if JavaScript never runs, nothing stays invisible */
@media (scripting: none) {
  [data-reveal],
  [data-stagger] > * { opacity: 1; transform: none; }
}

/* While the spotlight runs, the others step back */
.tracks[data-stagger].is-cycling .tk-item:not(.is-active) { opacity: 0.45; }

/* Respect people who have reduced motion turned on */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  [data-reveal],
  [data-stagger] > *,
  .podium[data-stagger] > .pod .pod-block { opacity: 1; transform: none; }
  .snap-a, .snap-b { transform: none; }
  .c3-rot { --gap: 0.6cqw; }
}