/* ============================================================
   CCAIF v5 — body / continuous editorial scroll.
   Concept: long-form magazine flow (no PPT-like section covers).
   The hero's 3D sphere stays beneath as the shared background image,
   revealed through a vignette porthole that is driven by scroll
   position with dwell zones at each anchor (so it truly stops on
   each beat). Type system: Geist for prose + JetBrains Mono for
   eyebrows + adineue PRO Black for display track names (matching
   the hero opening's typographic treatment).
   ============================================================ */

/* Display fonts — re-declared here so the body sections (Tracks,
   Judge criteria) can use the same display family as the hero. */
@font-face {
  font-family: 'adineue PRO Black';
  src: url('../assets/fonts/adineue/adineuePRO-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

@property --hole-x    { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --hole-y    { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --hole-r    { syntax: '<length>';     inherits: true; initial-value: 0vmin; }
@property --canvas-tx { syntax: '<length-percentage>'; inherits: true; initial-value: 0px; }
@property --canvas-ty { syntax: '<length-percentage>'; inherits: true; initial-value: 0px; }
@property --canvas-s  { syntax: '<number>';     inherits: true; initial-value: 1.0; }

:root {
  --hole-x: 50%;
  --hole-y: 50%;
  --hole-r: 0vmin;
  --canvas-tx: 0vw;
  --canvas-ty: 0vh;
  --canvas-s:  1.0;
  --port-accent: rgba(255,255,255,0.18);
  --ease: cubic-bezier(0.22,0.61,0.36,1);
}

/* Hero canvas: hidden once we leave the hero region. The body now
   uses its own .body-sphere (custom textures per stage) instead of
   bleeding the hero sphere through. */
body[data-section="2"] #sceneCanvas {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.6s ease !important;
}
body[data-section="2"] .scroll-cue { opacity: 0 !important; }

/* ============================================================
   LIQUID GLASS — shared recipe used by every panel that wants the
   "frosted/textured glass" feel: tracks-detail, submit-panel,
   judges-panel-fill, faq-panel, footer. Five layers stacked on top
   of each other through background-blend-mode:
     1) fine SVG fractalNoise grain (hard, dominant)
     2) coarser SVG noise for low-frequency tonal break-up
     3) diagonal sheen — soft top-left to bottom-right highlight that
        gives the surface a "tilted glass slab" feel (liquid glass)
     4) soft top-edge highlight (radial — catches light along upper
        edge like a tilted pane)
     5) base tint (cool dark)
   Plus a saturate-bumped backdrop blur, an inset top hairline
   highlight, an inset edge glow, and a soft outer drop-shadow. The
   visible grain is the key to "质感" — flat blur reads as plastic,
   layered noise reads as glass.
   ============================================================ */
.glass-surface {
  position: relative;
  background:
    /* Layer 1 — fine grain (dominant texture) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    /* Layer 2 — coarse noise (tonal break-up) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    /* Layer 3 — diagonal sheen (tilted-pane highlight) */
    linear-gradient(135deg,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.00) 40%,
      rgba(255,255,255,0.04) 100%),
    /* Layer 4 — soft top edge highlight */
    radial-gradient(ellipse 80% 60% at 50% 0%,
      rgba(255,255,255,0.10) 0%,
      transparent 70%),
    /* Layer 5 — base tint */
    rgba(20,22,30,0.50);
  background-size: 180px 180px, 320px 320px, auto, auto, auto;
  background-blend-mode: overlay, soft-light, normal, normal, normal;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),     /* top inner highlight */
    inset 0 -1px 0 rgba(255,255,255,0.04),    /* bottom inner hairline */
    inset 0 0 0 1px rgba(255,255,255,0.04),   /* edge subtle ring */
    0 24px 60px -28px rgba(0,0,0,0.55);       /* outer soft drop */
}
/* User feedback (2026-05-06 v6): "毛玻璃感觉不够通透，太白了". Pulled
   the base alpha way down (0.54 → 0.22) and reduced the white grain
   layers so the canvas behind reads clearly. The effect is now closer
   to genuine clear glass with subtle texture rather than a tinted slab. */
.flow-judges .judges-panel-fill,
.flow-faq .faq-panel,
.flow-submit .submit-panel,
.tk-detail {
  background:
    /* L1 — fine dark grain (very subtle for tactile texture) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.20 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    /* L2 — iridescent shimmer (very low alpha; glass "catches"
       imagined colour from the environment — liquid-glass cue) */
    conic-gradient(from 220deg at 70% 30%,
      rgba(255,200,255,0.04) 0%,
      rgba(180,200,255,0.03) 18%,
      rgba(180,255,230,0.04) 38%,
      rgba(255,220,180,0.03) 60%,
      rgba(255,180,210,0.04) 82%,
      rgba(255,200,255,0.04) 100%),
    /* L3 — specular top-left "wet" highlight (very small alpha) */
    radial-gradient(ellipse 50% 60% at 12% 8%,
      rgba(255,255,255,0.08) 0%,
      transparent 60%),
    /* L4 — diagonal sheen */
    linear-gradient(135deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.00) 50%,
      rgba(255,255,255,0.02) 100%),
    /* L5 — base tint, much lower alpha for transparency */
    rgba(12,14,20,0.22);
  background-size: 200px 200px, auto, auto, auto, auto;
  background-blend-mode: overlay, screen, screen, screen, normal;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),       /* top inner highlight */
    inset 0 -1px 0 rgba(255,255,255,0.03),      /* bottom inner hairline */
    inset 1px 0 1px rgba(180,200,255,0.03),     /* chromatic left edge */
    inset -1px 0 1px rgba(255,200,210,0.03),    /* chromatic right edge */
    0 28px 60px -32px rgba(0,0,0,0.55);         /* outer soft drop */
}

/* ============================================================
   PORTHOLE — vignette gradient, NOT a hard box-shadow circle.
   One fullscreen fixed div whose background is a layered radial
   gradient. Center is transparent (sphere visible), then feathers
   outward through 3 stops to solid black. Driven by --hole-x/y/r.
   ============================================================ */

/* ============================================================
   BODY 3D CANVAS — independent Three.js scene. Lives BEHIND the
   porthole and the content. Hidden during hero (data-section="1")
   so the hero canvas owns the first screen exclusively.
   ============================================================ */
#bodyCanvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 1;
  pointer-events: none;
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease;
}
body[data-section="2"] #bodyCanvas { opacity: 1; }

/* ============================================================
   PORTHOLE — foreground vignette mask. Fixed full-screen, with a
   soft circular hole at (--hole-x, --hole-y) of radius --hole-r.
   When --hole-r = 0 the entire screen reads "full sphere visible"
   (the porthole opacity is also gated by stage). When --hole-r > 0
   the porthole closes around the focused card on the body sphere.
   ============================================================ */
.porthole {
  position: fixed; inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  background:
    radial-gradient(
      circle 220vmax at var(--hole-x) var(--hole-y),
      rgba(0,0,0,0)        calc(var(--hole-r) - 0.5vmin),
      rgba(0,0,0,0.18)     calc(var(--hole-r) + 4vmin),
      rgba(0,0,0,0.55)     calc(var(--hole-r) + 14vmin),
      rgba(0,0,0,0.85)     calc(var(--hole-r) + 28vmin),
      rgba(0,0,0,0.96)     calc(var(--hole-r) + 48vmin),
      rgba(0,0,0,1)        calc(var(--hole-r) + 75vmin)
    );
}
body[data-section="2"] .porthole { opacity: 1; }
/* The porthole only needs to mask when there's a hole. For stages
   with hole-r=0 we soften it so the sphere shows freely (no veil). */
/* All stage-specific porthole rules are scoped under data-section="2"
   so they NEVER fire on the hero (section 1). Without this guard the
   default data-stage at top of page (= "reel") would slap an opacity:
   0.88 vignette across the hero scene before the user has even
   scrolled. Hero stays exactly as bright at REST as designed. */
body[data-section="2"][data-stage="extras"]  .porthole,
body[data-section="2"][data-stage="judges"]  .porthole,
body[data-section="2"][data-stage="timeline"].porthole { opacity: 0.55; }
/* Content-heavy stages with a lot of prose alongside sphere imagery
   — bumped opacity (0.55 → 0.72) so the ambient sphere doesn't fight
   readability of the criteria / submit / tracks paragraphs. */
body[data-section="2"][data-stage="tracks"]  .porthole,
body[data-section="2"][data-stage="criteria"].porthole,
body[data-section="2"][data-stage="submit"]  .porthole { opacity: 0.72; }
body[data-section="2"][data-stage="reel"]    .porthole { opacity: 0.88; }
/* Closing — porthole heavily darkened so the headline + CTAs read
   with strong contrast. The sphere remains as a faint glow behind. */
body[data-section="2"][data-stage="closing"] .porthole { opacity: 0.92; }
body[data-section="2"][data-stage="perks"]   .porthole { opacity: 0; }

.perks-shade {
  position: fixed;
  inset: 0;
  z-index: 5;            /* same layer as .porthole */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  /* INVERSE vignette pushed darker overall — centre is now near-
     opaque so prose text reads with maximum contrast, mid range
     stays heavy enough that the cards' vivid backgrounds carry
     the colour, edges fade to a soft 30% so the sphere still hints
     at atmosphere in the corners (not zero, just faint). */
  background: radial-gradient(
    ellipse 95% 80% at 50% 50%,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.84) 28%,
    rgba(0,0,0,0.66) 56%,
    rgba(0,0,0,0.42) 82%,
    rgba(0,0,0,0.30) 100%
  );
}
body[data-section="2"][data-stage="perks"] .perks-shade { opacity: 1; }
body[data-section="2"][data-stage="faq"] .porthole { opacity: 0.92; }

/* ============================================================
   Body container — transparent so porthole+canvas show through.
   ============================================================ */

.section-2 {
  position: relative; z-index: 80;
  margin-top: 100vh;
  background: transparent;
  /* No `transform`, no `opacity` — both create stacking contexts
     that would prevent backdrop-filter on descendants (FAQ /
     Submit panels) from sampling the body sphere canvas behind.
     Opacity ramp removed; users have already left the hero by the
     time .section-2 is in view, so an entry fade is unnecessary. */
  pointer-events: auto;
  color: rgba(244,245,247,0.86);
  font-family: 'abcNormal';
}

/* ============================================================
   FLOW — single 12-column grid shared by every section.
   Each section is a row of content blocks placed via grid-column.
   Sections aren't 100vh "pages"; they're as tall as their content.
   ============================================================ */

.flow {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  row-gap: 14px;
  width: min(1240px, 92vw);
  margin: 0 auto;
  padding: 16vh 0;
}

/* Small uppercase tag — appears either in left gutter (default) or
   above content in a section that has a sphere on the left side. */
.flow .tag {
  grid-column: 1 / 3;
  align-self: start;
  margin-top: 6px;
  font-family: 'abcNormal';
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.33em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  position: relative;
  padding-left: 36px;
}
.flow .tag::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 26px; height: 1px;
  background: rgba(255,255,255,0.32);
}

/* ----- flow-left: sphere is on the right, content sits on the left
   (cols 1-7). Tag is inline at top of content. ----- */
.flow.flow-left .tag        { grid-column: 1 / 4; padding-left: 0; }
.flow.flow-left .tag::before { display: none; }
.flow.flow-left .prose,
.flow.flow-left .perk-list,
.flow.flow-left .prize-table,
.flow.flow-left .extras { grid-column: 1 / 7; }

/* ----- flow-right: sphere is on the LEFT, content sits on the right
   (cols 7-13). Tag is inline at top of content. ----- */
.flow.flow-right .tag        { grid-column: 7 / 10; padding-left: 0; }
.flow.flow-right .tag::before { display: none; }
.flow.flow-right .prose,
.flow.flow-right .perk-list,
.flow.flow-right .prize-table,
.flow.flow-right .extras { grid-column: 7 / 13; }

/* Prose — body paragraphs in a consistent column band */
.prose {
  grid-column: 4 / 11;
  font-family: 'abcNormal';
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin: 0 0 14px 0;
  letter-spacing: 0.005em;
  max-width: 64ch;
  /* Subtle shadow keeps body copy crisp over the sphere imagery. */
  text-shadow: 0 1px 14px rgba(0,0,0,0.45);
  font-family: 'KMR Waldenburg', 'abcNormal';
}
.prose.lead {
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.4;
  color: #fff;
  /* Soft text-shadow holds the headline crisp against the sphere's
     atmosphere imagery without halo. */
  text-shadow: 0 1px 18px rgba(0,0,0,0.55);
  font-weight: 500;
  letter-spacing: -0.012em;
  margin-bottom: 14px;
  font-family: 'abcNormal';
}
.prose.fineprint {
  margin-top: 18px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.45);
  line-height: 1.55;
  max-width: 70ch;
}

/* ============================================================
   REEL — fixed-centered trailer (NOT in document flow). It only
   shows when reel stage is active. The flow-reel section in the
   page just reserves scroll height. Background sphere blurs in.
   ============================================================ */

.flow-reel {
  /* Reserve a generous vertical scroll band so the trailer dwells
     in view long enough to read. The actual trailer is a fixed
     overlay; this section just provides the scroll height. */
  min-height: 170vh;
  /* Empty section — must NOT capture clicks, otherwise this z:80
     stacking-context wrapper would intercept the click before it
     can reach the fixed trailer button at z:4 below. */
  pointer-events: none;
}

/* Hide all left-gutter section tags globally — too rigid */
.flow .tag { display: none; }

.reel {
  position: fixed;
  left: 50%; top: 50%;
  /* MUST sit above .section-2 (z:80), otherwise hit-testing falls
     back to the section-2 container (pointer-events:auto) and
     swallows the click before it reaches this button. */
  z-index: 90;
  width: min(58vw, 820px);
  aspect-ratio: 16 / 9;
  background: transparent;
  border: 0; padding: 0;
  cursor: none;
  pointer-events: auto;
  /* Slide-up motion: --reel-y drives a single bottom-to-top translate.
     Entry: starts at +120vh (off-screen below), arrives at 0.
     Exit:  leaves toward -120vh (off-screen above).
     Opacity stays full — no fade in/out, the slide is the transition. */
  opacity: 1;
  transform:
    translate(-50%, -50%)
    translateY(var(--reel-y, 120vh))
    perspective(2400px) rotateX(1.8deg);
  filter: drop-shadow(0 24px 60px rgba(0,0,0,0.85));
  overflow: visible;
}
/* JS still sets data-visible based on reelT so off-screen trailer
   doesn't intercept clicks meant for hero/about. */
.reel[data-visible="false"] { pointer-events: none; }
.reel:hover {
  transform:
    translate(-50%, -50%)
    translateY(var(--reel-y, 120vh))
    perspective(2400px) rotateX(1.8deg) scale(1.02);
}

/* The sharp video — single layer. 9-stop ultra-gradual mask so the
   rectangular boundary truly dissolves: every adjacent step ≤0.18
   alpha, no perceivable seam. */
.reel-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 90% 100% at 50% 50%,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,1)    18%,
    rgba(0,0,0,0.95) 30%,
    rgba(0,0,0,0.82) 42%,
    rgba(0,0,0,0.62) 55%,
    rgba(0,0,0,0.38) 68%,
    rgba(0,0,0,0.18) 80%,
    rgba(0,0,0,0.06) 90%,
    transparent      100%);
          mask-image: radial-gradient(ellipse 90% 100% at 50% 50%,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,1)    18%,
    rgba(0,0,0,0.95) 30%,
    rgba(0,0,0,0.82) 42%,
    rgba(0,0,0,0.62) 55%,
    rgba(0,0,0,0.38) 68%,
    rgba(0,0,0,0.18) 80%,
    rgba(0,0,0,0.06) 90%,
    transparent      100%);
}

/* Cinematic darkening layer on the video — extra-smooth gradients
   (each step ≤0.20 alpha) so there's no visible letterbox bar. */
.reel-cine {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.32) 10%,
      rgba(0,0,0,0.14) 20%,
      rgba(0,0,0,0.02) 30%,
      transparent      40%,
      transparent      60%,
      rgba(0,0,0,0.02) 70%,
      rgba(0,0,0,0.14) 80%,
      rgba(0,0,0,0.34) 90%,
      rgba(0,0,0,0.62) 100%),
    radial-gradient(ellipse 90% 96% at 50% 50%,
      transparent      40%,
      rgba(0,0,0,0.10) 58%,
      rgba(0,0,0,0.28) 76%,
      rgba(0,0,0,0.50) 90%,
      rgba(0,0,0,0.72) 100%);
}

/* Frosted-glass CTA pill — matches the top nav's look (semi-dark
   blurred background, thin white border, white play disc + label). */
.reel-cta {
  position: absolute;
  left: 50%; bottom: 22%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex; align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 12px;
  border-radius: 999px;
  background: rgba(8,8,12,0.55);
  border: 1px solid rgba(255,255,255,0.20);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: #fff;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease);
}
.reel:hover .reel-cta {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.45);
  transform: translateX(-50%) translateY(-2px);
}
.reel-play {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #07080B;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.reel-play svg { width: 11px; height: 11px; transform: translateX(1px); }
.reel-text {
  font-family: 'abcNormal';
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
}

/* Body canvas defocuses during the hero→trailer handoff so the
   transition reads as a continuous focus pull. --reveal-t (set in
   the scroll handler) goes 0 → 1 as the trailer arrives, so the
   blur fades out exactly as the trailer lands. Outside the
   transition window --reveal-t = 1 → no blur, no perf hit. */
#bodyCanvas {
  filter: blur(calc((1 - var(--reveal-t, 1)) * 14px));
  transition: opacity 0.6s ease;
}

/* Tracks stage — pure black background, sphere hidden, porthole
   fully opaque so the section's videos own the frame. */
body[data-stage="tracks"] #bodyCanvas { opacity: 0 !important; }
body[data-stage="tracks"] .porthole {
  opacity: 1;
  background: #000 !important;
}

/* ============================================================
   PERKS — list cards in a 3-up grid, rule-based, no boxes
   ============================================================ */

/* Perks — three parallel cards, each with its own aurora gradient.
   Self-contained content (number / title / description / CTA), no
   sphere mechanics, no tooltip — direct, scannable, parallel. */
.flow-perks { padding: 16vh 0 32vh 0; }
.flow-perks .tag,
.flow-perks > .prose { grid-column: 3 / 11; }
.flow-perks > .prose.lead { margin-top: 0px; }
.flow-perks > .prose.fineprint { grid-column: 3 / 11; margin-top: 28px; }

.perk-cards {
  grid-column: 3 / 11;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 0.1px;
}
.perk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 42px 28px;
  min-height: 280px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
  isolation: isolate;
  background: #0a0c14;
  transition: transform 0.5s var(--ease), border-color 0.4s ease;
}
/* Unified 4-color palette flowing across every card — cyan / lilac /
   pink / amber blobs on a deep base, slowly drifting and rotating so
   the surface feels alive (mesh-gradient / aurora liquid). Layer A and
   layer B drift independently for organic, non-cyclical motion. Each
   card uses the same palette but with offset phase for variation. */
/* Per-card color palette — pastel high-key, replicating the cyan
   reference video for card 1 and applying the same recipe in lilac
   and amber for cards 2 and 3. Each card uses TWO shades of its
   own hue (saturated primary + near-white pastel) so the flowing
   layers feel youthful and air-y, not corporate-dark. */
/* CINEMATIC PAINTERLY palette — three cards, three completely
   different visual languages. No more shared "core/rim/env/spec"
   recipe; each card has its OWN compositional logic + colour
   relationships + motion vocabulary. Goal: read as painterly
   cinematic atmospheres, not 3D-rendered tech surfaces. */

/* Card 1: AQUA WASH — vertical flowing water, cyan/teal/lilac bleed.
   Drop the cold electric blue (which read as "tech / sci-fi") in
   favour of warmer cyan-into-lilac that feels organic. */
.perk-card[data-color="cyan"] {
  --c-deep:   #053E3A;   /* deep teal shadow */
  --c-mid:    #1FA29A;   /* mid teal */
  --c-bright: #6FE9D8;   /* hero cyan */
  --c-bleed:  #B8A4FF;   /* lilac bleed for warmth */
  --c-warm:   #FFB6E3;   /* warm pink hint to break the cold */
  --base:     #051410;
  --ink:      #FFFFFF;
}
/* Card 2: SOFT BLOOM — circular dawn light expanding outward,
   lilac into pink with cyan flourish. Soft, dreamy, no hard edges. */
.perk-card[data-color="lilac"] {
  --c-deep:   #1B0A40;
  --c-mid:    #6F4FCC;
  --c-bright: #B8A4FF;
  --c-bleed:  #FF6FC1;
  --c-warm:   #FFE0F0;
  --base:     #0F0420;
  --ink:      #FFFFFF;
}
/* Card 3: SUNSET SWEEP — diagonal warm wash, amber bleeding into
   magenta and pink with hot orange anchor. Classic golden-hour. */
.perk-card[data-color="amber"] {
  --c-deep:   #3A1500;
  --c-mid:    #C8521A;
  --c-bright: #FEBC42;
  --c-bleed:  #FF6FC1;
  --c-warm:   #FFE070;
  --base:     #1F0808;
  --ink:      #FFFFFF;
}
.perk-card { background: var(--base); }
.perk-card .perk-num,
.perk-card .perk-card-title,
.perk-card .perk-card-desc,
.perk-card .perk-card-cta {
  color: var(--ink) !important;
}
.perk-card .perk-num         { color: color-mix(in srgb, var(--ink) 60%, transparent) !important; }
.perk-card .perk-card-desc   { color: color-mix(in srgb, var(--ink) 86%, transparent) !important; }
.perk-card .perk-card-cta    { border-bottom-color: color-mix(in srgb, var(--ink) 55%, transparent); }
.perk-card .perk-card-cta:hover { border-bottom-color: var(--ink); }

/* Two pseudo-layers — each filled with OVERSIZED radial fields
   (90-130% of card) so the curve is invisible: it reads as
   continuous color light, not "circles". Inset -100% means the
   layer is 3× the card width and 3× the card height, giving large
   off-screen room for translation without ever exposing edges. */
/* Each card uses a DIFFERENT gradient TYPE (radial / conic / linear)
   so the visual language is genuinely different per card, not just
   "same recipe, different colours". No specular highlights, no rim
   lights — those read as polished metal. Painterly bleeds instead. */
.perk-card::before,
.perk-card::after {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}

/* ==================================================================
   Card 1 — AQUA WASH
   ::before  vertical color band field (radial stack reading as a
             flowing water column)
   ::after   conic painterly swirl in same hue family
   ================================================================== */
.perk-card[data-color="cyan"]::before {
  background:
    radial-gradient(ellipse 120% 30% at 50%   8%, var(--c-bright) 0%, transparent 60%),
    radial-gradient(ellipse 110% 28% at 50%  35%, var(--c-bleed)  0%, transparent 62%),
    radial-gradient(ellipse 110% 30% at 50%  62%, var(--c-mid)    0%, transparent 62%),
    radial-gradient(ellipse 110% 30% at 50%  92%, var(--c-deep)   0%, transparent 62%);
  filter: blur(32px);
  opacity: 0.92;
}
.perk-card[data-color="cyan"]::after {
  background: conic-gradient(
    from 200deg at 38% 60%,
    var(--c-warm)   0%,
    var(--c-bleed)  20%,
    var(--c-bright) 45%,
    var(--c-mid)    70%,
    var(--c-warm)   100%
  );
  filter: blur(28px);
  opacity: 0.42;
  mix-blend-mode: screen;
}

/* ==================================================================
   Card 2 — SOFT BLOOM
   ::before  large concentric radial bloom — soft dawn light
             expanding outward from off-centre
   ::after   secondary smaller bloom + warm pink halo
   ================================================================== */
.perk-card[data-color="lilac"]::before {
  background:
    radial-gradient(circle at 38% 42%,
      var(--c-warm)  0%,
      var(--c-bright) 15%,
      var(--c-bleed) 32%,
      var(--c-mid)   55%,
      var(--c-deep)  90%,
      var(--c-deep)  100%);
  filter: blur(28px);
  opacity: 0.94;
}
.perk-card[data-color="lilac"]::after {
  background:
    radial-gradient(ellipse 70% 60% at 78% 80%, var(--c-bleed)  0%, transparent 62%),
    radial-gradient(ellipse 50% 45% at 22% 72%, var(--c-mid)    0%, transparent 60%);
  filter: blur(36px);
  opacity: 0.65;
  mix-blend-mode: soft-light;
}

/* ==================================================================
   Card 3 — SUNSET SWEEP
   ::before  diagonal linear sweep top-left → bottom-right
   ::after   warm radial highlight + pink magenta echo
   ================================================================== */
.perk-card[data-color="amber"]::before {
  background: linear-gradient(
    122deg,
    var(--c-warm)   0%,
    var(--c-bright) 22%,
    var(--c-mid)    48%,
    var(--c-bleed)  72%,
    var(--c-deep)   100%
  );
  filter: blur(28px);
  opacity: 0.94;
}
.perk-card[data-color="amber"]::after {
  background:
    radial-gradient(ellipse 70% 55% at 28% 30%, var(--c-warm)  0%, transparent 60%),
    radial-gradient(ellipse 60% 55% at 82% 78%, var(--c-bleed) 0%, transparent 62%);
  filter: blur(34px);
  opacity: 0.55;
  mix-blend-mode: screen;
}

/* Each card has a UNIQUE motion language matching its visual:
   · Card 1 (aqua wash)  → vertical tide drift (up/down)
   · Card 2 (soft bloom) → scale pulse (breathe in/out)
   · Card 3 (sunset sweep) → rotational drift (slow turn)
   Idle motion is small + slow; hover motion is bigger + faster. */

/* === Card 1 IDLE: subtle vertical tide === */
.perk-card[data-color="cyan"]::before { animation: tideIdle    9s ease-in-out infinite; }
.perk-card[data-color="cyan"]::after  { animation: swirlIdle  11s linear      infinite; }
@keyframes tideIdle {
  0%, 100% { transform: translateY(-4%); }
  50%      { transform: translateY( 4%); }
}
@keyframes swirlIdle {
  0%   { transform: rotate(0deg)   scale(1);    }
  100% { transform: rotate(360deg) scale(1.04); }
}

/* === Card 2 IDLE: gentle bloom pulse === */
.perk-card[data-color="lilac"]::before { animation: bloomIdle  8s ease-in-out infinite; }
.perk-card[data-color="lilac"]::after  { animation: bloomIdleB 11s ease-in-out infinite; }
@keyframes bloomIdle {
  0%, 100% { transform: scale(0.97) translate( 0%,  0%); }
  50%      { transform: scale(1.06) translate( 2%, -2%); }
}
@keyframes bloomIdleB {
  0%, 100% { transform: scale(1.04) translate( 2%,  3%); }
  50%      { transform: scale(0.95) translate(-3%, -2%); }
}

/* === Card 3 IDLE: slow rotational drift === */
.perk-card[data-color="amber"]::before { animation: sweepIdle 16s linear        infinite; }
.perk-card[data-color="amber"]::after  { animation: sweepIdleB 12s ease-in-out infinite; }
@keyframes sweepIdle {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}
@keyframes sweepIdleB {
  0%, 100% { transform: rotate(0deg)  scale(1);    }
  50%      { transform: rotate(-12deg) scale(1.06); }
}

/* === Hover: bigger amplitude, faster on each card's own language === */
.perk-card[data-color="cyan"]:hover::before  { animation: tideHover    3s ease-in-out infinite; }
.perk-card[data-color="cyan"]:hover::after   { animation: swirlHover   4s linear      infinite; }
.perk-card[data-color="lilac"]:hover::before { animation: bloomHover   2.6s ease-in-out infinite; }
.perk-card[data-color="lilac"]:hover::after  { animation: bloomHoverB  3.4s ease-in-out infinite; }
.perk-card[data-color="amber"]:hover::before { animation: sweepHover   5s linear        infinite; }
.perk-card[data-color="amber"]:hover::after  { animation: sweepHoverB  3.5s ease-in-out infinite; }

@keyframes tideHover {
  0%, 100% { transform: translateY(-22%) scale(1);    }
  50%      { transform: translateY( 22%) scale(1.10); }
}
@keyframes swirlHover {
  0%   { transform: rotate(0deg)    scale(1.08); }
  100% { transform: rotate(-360deg) scale(0.95); }
}
@keyframes bloomHover {
  0%, 100% { transform: scale(0.85) translate(  0%,   0%); }
  50%      { transform: scale(1.30) translate(  6%,  -8%); }
}
@keyframes bloomHoverB {
  0%, 100% { transform: scale(1.20) translate(  4%,  6%); }
  50%      { transform: scale(0.78) translate( -8%, -6%); }
}
@keyframes sweepHover {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}
@keyframes sweepHoverB {
  0%, 100% { transform: rotate( 0deg)  scale(1);    }
  50%      { transform: rotate(-30deg) scale(1.18); }
}


/* Triple-stack grain — three different scales of noise overlaid for
   a clearly visible, tactile film grain. The card surface no longer
   reads as a CSS gradient; it has texture you can almost feel. */
.perk-card {
  background-image:
    /* Layer 1: very fine grain, hard alpha — this is the dominant
       perceptible noise. */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.65 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    /* Layer 2: medium grain for mid-frequency texture. */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.0' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.42 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    /* Layer 3: large clouds for low-frequency tonal break-up. */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.28 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 110px 110px, 160px 160px, 280px 280px;
  background-blend-mode: soft-light, overlay, soft-light;
}

@keyframes perkFlowA {
  0%   { transform: translate(0%, 0%)    rotate(0deg)   scale(1);    }
  33%  { transform: translate(22%, -16%) rotate(55deg)  scale(1.22); }
  66%  { transform: translate(-18%, 20%) rotate(-40deg) scale(0.86); }
  100% { transform: translate(0%, 0%)    rotate(0deg)   scale(1);    }
}
@keyframes perkFlowB {
  0%   { transform: translate(0%, 0%)    rotate(0deg)   scale(1);    }
  50%  { transform: translate(-26%, 18%) rotate(-70deg) scale(1.28); }
  100% { transform: translate(0%, 0%)    rotate(0deg)   scale(1);    }
}
.perk-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.22);
}
.perk-card .perk-num {
        font-family: 'abcNormal';
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
}
.perk-card .perk-card-title {
  margin: 0;
  font-family: 'adineue PRO Black', 'Archivo Black', sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 2.5vw, 30px);;
  line-height: 0.98;
  letter-spacing: -0.014em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.18);
}
/* Title block (perk-num + perk-card-title) — vertically centered in
   the card by default (when desc + cta are hidden), slides UP on
   hover to make room for the typewriter description below. */
.perk-card .perk-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  transform: translateY(var(--head-offset, 60px));   /* 使用 CSS 变量，默认回退 60px */
  transition: transform 0.55s var(--ease);
}
.perk-card:hover .perk-head { transform: translateY(0); }

.perk-card .perk-card-desc {
  margin: 0;
  font-family: 'KMR Waldenburg', 'abcNormal';
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.005em;
  /* Collapsed by default — JS only fills text on hover. */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease), opacity 0.3s ease 0.05s;
}
.perk-card:hover .perk-card-desc {
  max-height: 9em;
  opacity: 1;
}
/* Caret — only visible (and only animated) while hovering, never
   blinks at rest. */
.perk-card .perk-card-desc::after {
  content: '';
  display: inline-block;
  width: 0.5ch;
  height: 1em;
  vertical-align: -0.18em;
  margin-left: 1px;
  background: currentColor;
  opacity: 0;
}
.perk-card:hover .perk-card-desc::after {
  opacity: 1;
  animation: perkCaret 0.9s steps(2) infinite;
}
@keyframes perkCaret {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.perk-card .perk-card-cta {
  margin-top: auto;
  font-family: 'abcNormal';
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  padding-bottom: 3px;
  /* Hidden until the typewriter finishes (.is-typed added by JS). */
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s var(--ease), border-color 0.25s ease;
}
.perk-card.is-typed .perk-card-cta {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.perk-card .perk-card-cta:hover { border-bottom-color: #ffffff; }

/* Babylonica cursive — visible by default, sits ON the adineue
   title overlapping the first word, in a BRIGHT CONTRAST color per
   card (user spec: 一开始就有，亮色反差色). Each card uses the
   opposite-hue accent so the cursive pops against the card's own
   gradient field. */
.perk-card .perk-script {
  position: absolute;
  top: 60px;
  right: 22px;
  font-family: 'Babylonica', 'Brush Script MT', cursive;
  font-weight: 400;
  font-size: clamp(64px, 5.6vw, 104px);
  line-height: 0.85;
  color: var(--perk-script-color, #fff);
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
  transform: rotate(-6deg);
  transition: transform 0.5s var(--ease);
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
}
/* Per-card high-contrast neon for visibility against each gradient.
   Picked from the warm/cool axis OPPOSITE the card's dominant hue so
   the cursive jumps off the surface. */
.perk-card[data-color="cyan"]  { --perk-script-color: #FFE94A; }  /* aqua → electric yellow */
.perk-card[data-color="lilac"] { --perk-script-color: #C7FF3B; }  /* lilac → electric lime */
.perk-card[data-color="amber"] { --perk-script-color: #3DEFFF; }  /* amber → electric aqua */
.perk-card:hover .perk-script {
  transform: rotate(-3deg) translateY(-2px);
}

/* Iridescent chrome sweep — adds the layered/painterly richness the
   user asked for (Image #89 reference). A conic gradient with
   rainbow stops, blurred + screened over the base, gives the cards a
   metallic shimmer instead of just one flat-looking gradient. */
.perk-card .perk-iridescent {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(
    from 220deg at 60% 40%,
    rgba(255,255,255,0.0)   0%,
    rgba(255,255,255,0.18)  18%,
    rgba(255,255,255,0.0)   30%,
    rgba(255,255,255,0.22)  56%,
    rgba(255,255,255,0.0)   78%,
    rgba(255,255,255,0.20) 100%);
  filter: blur(24px);
  mix-blend-mode: overlay;
  opacity: 0.55;
  transition: opacity 0.6s ease, transform 8s linear;
  transform: rotate(0deg);
  animation: iriRotate 22s linear infinite;
}
.perk-card:hover .perk-iridescent { opacity: 0.85; }
@keyframes iriRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.perk {
  border-bottom: 1px solid rgba(255,255,255,0.10);
  border-right: 1px solid rgba(255,255,255,0.10);
  padding: 22px 22px 26px;
  display: flex; flex-direction: column;
  gap: 10px;
  --perk-accent: var(--cyan);
}
.perk[data-color="lilac"] { --perk-accent: var(--lilac); }
.perk[data-color="amber"] { --perk-accent: var(--amber); }
.perk:last-child { border-right: none; }
.perk-meta {
  font-family: 'abcNormal';
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.33em;
  text-transform: uppercase;
  color: var(--perk-accent);
}
.perk h4 {
  margin: 0;
  font-family: 'abcNormal';
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: #fff;
}
.perk p {
  margin: 0; flex: 1;
  font-family: 'abcNormal';
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
}
.perk-btn {
  align-self: flex-start;
  margin-top: 6px;
  font-family: 'abcNormal';
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  cursor: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.perk-btn:hover { color: var(--perk-accent); border-bottom-color: var(--perk-accent); }

/* ============================================================
   AWARDS prize table
   ============================================================ */

/* Awards + Extras — sphere stays at moderate opacity (still visible
   as atmosphere); the foreground is the video bg + the gradient
   award cards. Earlier we collapsed the sphere here, but with the
   video back the sphere should remain part of the layered scene. */
body[data-stage="awards"] #bodyCanvas,
body[data-stage="extras"] #bodyCanvas {
  opacity: 0.45;
}

.awards-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 2;            /* above sphere (z:1) below porthole (z:5) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s var(--ease);
}
.awards-bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.42) 0%,
    rgba(0,0,0,0.28) 35%,
    rgba(0,0,0,0.20) 65%,
    rgba(0,0,0,0.46) 100%);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
/* Awards 背景视频：由 Intersection Observer 驱动，
   只要 .flow-awards 有一点点进入视口就显示，
   等整个区块完全滚出去才消失。 */
body.awards-in-view .awards-bg,
body.awards-in-view .awards-bg-overlay {
  opacity: 1;
}
/* 关键：Awards 进入视口时，必须强制撤掉 porthole 遮罩。
   否则 z-index:5 的暗角 vignette 会把视频完全压暗，
   导致视频虽然 opacity:1 但视觉上“没出现”。 */
body.awards-in-view .porthole {
  opacity: 0 !important;
  pointer-events: none;
}

/* Juror tooltip — same vocabulary as perk-tip; rounded glass card. */
.juror-tip {
  position: fixed;
  pointer-events: none;
  z-index: 95;
  max-width: 320px;
  padding: 16px 20px 14px;
  border-radius: 12px;
  background: rgba(14,14,18,0.92);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s var(--ease), transform 0.22s var(--ease);
}
.juror-tip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.juror-tip .jt-name {
  margin: 0 0 4px 0;
  font-family: 'abcNormal';
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: -0.005em;
  color: #fff;
}
.juror-tip .jt-role {
  margin: 0;
  font-family: 'abcNormal';
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255,255,255,0.72);
}

/* Canvas pointer events disabled — judges focus is now scroll-driven,
   not hover-driven, so raycaster isn't needed. */

/* Perks stage — show the full infinite canvas at full opacity. No
   dimming, no vignette, no overlay. The cards in front have their
   own opaque pastel backgrounds so they don't need help reading. */
.perks-bg-vignette { display: none; }
#bodyCanvas {
  transition: opacity 0.6s var(--ease),
              transform 0.7s var(--ease),
              filter   0.5s var(--ease);
  transform-origin: center center;
}

/* Awards stage gets generous top padding so the video can breathe;
   the bottom is tight because Extras flows directly underneath as
   a continuation of the same conversation. */
.flow-awards { padding: 0vh 0 16vh 0}
.flow-extras { padding: 0 0 16vh; margin-top: -2vh; }

.flow-awards .tag,
.flow-extras .tag,
.flow-awards .prose,
.flow-extras .prose {
  grid-column: 3 / 11;
}
.flow-awards .prose.lead,
.flow-extras .prose.lead {
  margin-top: 0px;
}
.flow-awards > .prose,
.flow-extras > .prose {
  max-width: 56ch;
}

/* Awards — 4 aurora gradient cards, each in its own track-tier color.
   Hierarchy via card span: Grand Prix takes the full top row;
   Track Gold / Silver / Best Student Film share the bottom row. */
.flow-awards .award-cards {
  grid-column: 3 / 11;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 18px;
  margin: 0.1px 0 0;
}
/* Award cards — reuse the painterly card recipe from perks: each
   tier has its own 4-shade palette, ::before draws the main coloured
   form, ::after adds a soft rim wash + faint specular accent. Triple
   grain noise is on the card itself for film texture. */
.award-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 30px 30px;
  min-height: 260px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--base, #0e0f15);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.20 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 110px 110px, 220px 220px;
  background-blend-mode: soft-light, overlay;
  transition: transform 0.5s var(--ease), border-color 0.4s ease;
}
/* Per-tier tokens (4 shades each, mirrors perks `--core/rim/env/acc`). */
.award-card[data-tier="grand"] {
  --core: #6FE9D8; --rim: #B8A4FF; --env: #4090FF; --acc: #FFB6E3;
  --base: #051018;
}
.award-card[data-tier="gold"] {
  --core: #FEBC42; --rim: #FF6FC1; --env: #FF6F3D; --acc: #FFE070;
  --base: #1A0808;
}
.award-card[data-tier="silver"] {
  --core: #B8A4FF; --rim: #FF6FC1; --env: #C44CFF; --acc: #6FE9D8;
  --base: #0F0420;
}
.award-card[data-tier="student"] {
  --core: #FF6FC1; --rim: #FFD278; --env: #C44CFF; --acc: #6FE9D8;
  --base: #170414;
}

/* Grand Prix — full-width hero tier on top row */
.award-card[data-tier="grand"] {
  grid-column: 1 / -1;
  min-height: 240px;
  padding: 38px 36px 34px;
}

.award-card::before,
.award-card::after {
  content: '';
  position: absolute;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  filter: blur(28px);
  will-change: transform;
}
.award-card::before {
  background:
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(0,0,0,0.45) 0%, transparent 65%),
    radial-gradient(ellipse 75% 70% at 32% 38%, var(--core) 0%, transparent 60%),
    radial-gradient(ellipse 60% 55% at 78% 72%, var(--env)  0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 80%, var(--acc)  0%, transparent 60%);
  opacity: 0.96;
}
.award-card::after {
  background:
    radial-gradient(ellipse 80% 35% at 60% 18%, var(--rim) 0%, transparent 55%),
    radial-gradient(circle 9% at 32% 28%, rgba(255,255,255,0.85) 0%, transparent 55%);
  opacity: 1;
  filter: blur(20px);
}
.award-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.22);
}
.award-card .aw-tag {
  font-family: 'abcNormal';
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
}
.award-card .aw-name {
  margin: 0;
  font-family: 'adineue PRO Black', 'Archivo Black', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2.5vw, 30px);;
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: #ffffff;
}
.award-card[data-tier="grand"] .aw-name {
  font-size: clamp(34px, 3vw, 52px);

}
.award-card .aw-cap {
  margin: 0;
  font-family: 'abcNormal';
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
  max-width: 42ch;
}
.award-card .aw-amt {
  margin-top: auto;
  padding-top: 14px;
  font-family: 'adineue PRO Black', 'Archivo Black', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 26px);
  letter-spacing: -0.005em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.flow-awards .fineprint {
  grid-column: 3 / 11;
  margin-top: 24px;
  color: rgba(255,255,255,0.42);
  font-size: 13.5px;
  max-width: 62ch;
}

/* Extras as 3-column grid — sits directly below Awards table,
   sharing the same column footprint so it reads as a continuation,
   not a new section. Hairline grid separators echo the awards rows. */
.flow-extras .extras {
  grid-column: 3 / 11;
  list-style: none;
  margin: 0.1px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,0.18);
}
.flow-extras .extras li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px 24px 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  border-right: 1px solid rgba(255,255,255,0.10);
}
.flow-extras .extras li:nth-child(3n) { border-right: none; padding-right: 0; }
.flow-extras .extras li:nth-child(n+1):nth-child(-n+3):first-child,
.flow-extras .extras li:nth-child(2),
.flow-extras .extras li:nth-child(3) { padding-left: 0; }
.flow-extras .extras li:not(:nth-child(3n+1)) { padding-left: 24px; }
.flow-extras .ex-title {
  font-family: 'KMR Waldenburg', 'abcNormal';
  font-weight: 500;
  font-size: clamp(20px, 1.25vw, 25px);
  color: #fff;
  letter-spacing: -0.005em;
}
.flow-extras .ex-cap {
  font-family: 'KMR Waldenburg', 'abcNormal';
  font-weight: 400;
  font-size: 13.5px;
  color: rgba(255,255,255,0.65);
  line-height: 1.25;
  letter-spacing: 0.005em;
}

/* ============================================================
   TRACKS — 4 video cards, accordion. Inside expanded card:
   scrollable detail panel with full original copy.
   ============================================================ */

/* Judges — a scroll-driven juror carousel. The section is multiple
   viewports tall: as the user scrolls through it the sphere camera
   pans smoothly from one juror to the next, with the focused juror
   enlarging at viewport centre and a fixed info card below it
   showing their name + role. The section's HTML content is sparse
   (intro band at top); the sphere does the visual work. */
/* Judges — tab-driven layout. The lead headline matches the About
   section's lead exactly (size, weight, colour) so titles stay
   typographically consistent across the page. Tabs sit in a single
   row; bio paragraph below is the same body-text size used
   elsewhere. */
.flow-judges { padding: 16vh 0; }
.flow-judges .tag,
.flow-judges > .prose,
.flow-judges .judges-panel { grid-column: 3 / 11; }
/* Two-tone outlined panel — outer is just a hairline border (canvas
   shows through upper half); lower is filled with our shared liquid-
   glass recipe (.glass-surface mixin below). */
.flow-judges .judges-panel {
  position: relative;
  margin-top: 14px;
  min-height: 460px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.18);
  overflow: hidden;
  background: transparent;
}
.flow-judges .judges-panel-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 36px;
  min-height: 132px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.flow-judges .prose.lead {
  font-family: 'abcNormal';
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0;
  max-width: 56ch;
}
.judges-tabs {
  /* 6 juror names, side-by-side. Active name is dramatically larger;
     siblings shrink to make room — real squeeze layout via flex-grow
     so width AND font-size both transition together. */
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.judge-tab {
  flex: 1 1 0;
  min-width: 0;
  font-family: 'abcNormal';
  font-weight: 500;
  font-size: 15px;
  line-height: 1.0;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 6px;
  border-bottom: 1.5px solid transparent;
  cursor: pointer;
  background: transparent;
  transition: flex 0.55s var(--ease), font-size 0.55s var(--ease),
              color 0.3s ease, border-color 0.3s ease,
              letter-spacing 0.4s var(--ease);
}
.judge-tab:hover,
.judge-tab.is-active {
  flex: 2 1 0;             /* takes ~4× the room of a non-active sibling */
  font-size: clamp(20px, 2.5vw, 30px);
  letter-spacing: -0.014em;
  color: #fff;
  border-bottom-color: var(--cyan, #6FE9D8);
  overflow: visible;       /* allow active to show in full */
  font-family: 'adineue PRO Black', 'Archivo Black', sans-serif;
}
.judges-bio {
  /* Inside .judges-panel — sits below the name strip with a small
     gap; full-white text since the panel already provides contrast. */
  font-family: 'KMR Waldenburg', 'abcNormal';
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.65);
  max-width: 64ch;
  margin: 14px 0 0;
}

.flow-tracks { padding: 16vh 0; }

/* Section heading + lede — Geist sized to match the standard
   .prose.lead pattern used by every other section (About / Perks /
   Awards / Judges) so the track section's introduction reads as part
   of the same typographic system. The HERO display font (adineue
   PRO Black) only appears on the actual track names below. */
.flow-tracks .tracks-display {
  grid-column: 1 / 11;
  margin: 0px 0 14px;
  font-family: 'abcNormal';
  font-weight: 500;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: #fff;
  max-width: 56ch;
}
.flow-tracks .tracks-display em {
  font-style: normal;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}
.flow-tracks .tracks-lede {
  grid-column: 3 / 11;
  margin: 0 0 28px;
  font-family: 'abcNormal';
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.78);
  max-width: 64ch;
}

.flow-tracks .tracks-deck {
  grid-column: 1 / -1;
  position: relative;
  margin-top: 0.1px;
}
.tracks-deck > input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

/* Default state: video plays in each card with the track name visible.
   On select: that card expands, the video continues but goes into a
   blurred background; the detail panel slides over the top with body
   copy that reads as a continuation of the hero typography. */
.tk-row {
  display: flex;
  gap: 14px;
  height: clamp(560px, 72vh, 760px);
}
.tk-card {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #0d1016;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: flex 0.7s var(--ease), border-color 0.4s ease;
  isolation: isolate;
}
.tk-card:hover { border-color: rgba(255,255,255,0.20); }
.tk-vid {
  /* Scaled 1.18× to crop out the videos' embedded letterbox black
     bars (especially noticeable on tracks 1 + 3). Combined with
     `object-fit: cover`, this guarantees the visible frame is
     pure footage — no top/bottom black borders. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  transform-origin: center;
  filter: saturate(0.92) brightness(0.78);
  transition: filter 0.55s var(--ease), transform 0.7s var(--ease);
  pointer-events: none;
}
.tk-cover {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.45) 55%,
    rgba(0,0,0,0.88) 100%);
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.tk-num {
  position: absolute; top: 22px; left: 24px;
  font-family: 'abcNormal';
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.005em;

    text-transform: uppercase;
    


  color: rgba(255,255,255,0.78);
  z-index: 2;
}
.tk-name {
    position: absolute;
    top: 24px;
    right: 22px;
    right: 22px;
    font-family: 'adineue PRO Black', 'Archivo Black', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 0.95;
    letter-spacing: -0.014em;
    text-transform: uppercase;
    color: #fff;
    z-index: 2;
    transition: opacity 0.4s ease, transform 0.55s var(--ease);
    text-shadow: 0 4px 22px rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: visible;
    writing-mode: vertical-rl;
    align-content: end;
    /* width: 7ch; */
    /* white-space: nowrap; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
}
/*.tk-name {*/
  /* Matches the hero opening's track headline treatment — adineue
     PRO Black uppercase. Sized to fit `Commercial` (the longest
     name) inside the 1/4-width collapsed card without truncation. */
/*  position: absolute; bottom: 24px; left: 22px; right: 22px;*/
/*  font-family: 'adineue PRO Black', 'Archivo Black', 'Inter Tight', sans-serif;*/
/*  font-weight: 900;*/
/*  font-size: 20px;*/
/*  line-height: 0.95;*/
/*  letter-spacing: -0.014em;*/
/*  text-transform: uppercase;*/
/*  color: #fff;*/
/*  z-index: 2;*/
/*  transition: opacity 0.4s ease, transform 0.55s var(--ease);*/
/*  text-shadow: 0 4px 22px rgba(0,0,0,0.5);*/
/*  white-space: nowrap;*/
/*  overflow: visible;*/
  /*width: 7ch;*/
  /*white-space: nowrap;*/
  /*overflow: hidden;*/
  /*text-overflow: ellipsis;*/
/*}*/

/* Per-track accent palette — same DNA as the rest of the body's
   four-color system. Active card border + detail headline tint use
   the track's accent. */
.tk-card[data-track="film"]       { --track-accent: var(--cyan);  }
.tk-card[data-track="series"]     { --track-accent: var(--lilac); }

.tk-card[data-track="commercial"] { --track-accent: var(--amber);  }
.tk-card[data-track="creative"]   { --track-accent: var(--pink); }
/* Hero-style triple-stack inside the expanded detail panel:
     [Babylonica "CapCut AI"] upper-LEFT, tilted -3°
     [adineue PRO Black bold track name] center
     [Babylonica short word] lower-RIGHT, tilted -2°
   Sizes locked to the hero's exact ratio (cursive ≈ 0.74 × bold;
   hero uses 200/270 in viewBox units). Color is WHITE per user
   spec — same as hero's lb-script. */
.tk-h-wrap {
  position: relative;
  display: inline-block;
  /* Wrap matches the bold's bounding box exactly — no padding, so
     cursives positioned at top/bottom 0 anchor to the bold's actual
     edges. Cursives extend visually beyond via overflow visible. */
  padding: 0;
  overflow: visible;
  margin: 0.6em 0;          /* outer breathing space lives in margin,
                                NOT padding, so it doesn't push the
                                anchor reference. */
}
.tk-h-script {
  /* Tighten the line-box to match the visible cursive height; with
     line-height 0.5 the box hugs the character, so translateY(±50%)
     places the visible cursive's vertical center on the bold's edge
     and produces a real ~50% overlap. */
  line-height: 0.55 !important;
}
.tk-h { position: relative; z-index: 1; }
.tk-h-script {
  position: absolute;
  z-index: 2;
  font-family: 'Babylonica', 'Brush Script MT', cursive;
  font-weight: 400;
  /* User spec: 2/3 of previous (3em → 2em). Position straddles the
     bold's edge so ~50% of the cursive's body overlaps the bold. */
  font-size: 2.0em;
  line-height: 0.9;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  color: rgba(255,255,255,0.98);
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.5s ease 0.2s, transform 0.55s var(--ease) 0.2s;
}
.tk-h-script-tl {
  /* Cursive box pushed deeply INTO the bold's vertical range —
     ~70% of the cursive sits ON the bold (only 30% extends above). */
  top: 0;
  left: -0.05em;
  transform: translateY(-22%) rotate(-4deg);
}
.tk-h-script-br {
  /* Same on the lower edge — ~70% inside, 30% below. */
  bottom: 0;
  right: -0.4em;
  transform: translateY(22%) rotate(-2deg);
}
/* Reveal on the active card only. */
#trk-1:checked ~ .tk-row .tk-card[data-card="1"] .tk-h-script,
#trk-2:checked ~ .tk-row .tk-card[data-card="2"] .tk-h-script,
#trk-3:checked ~ .tk-row .tk-card[data-card="3"] .tk-h-script,
#trk-4:checked ~ .tk-row .tk-card[data-card="4"] .tk-h-script {
  opacity: 1;
}

.tk-detail {
  position: absolute; inset: 0;
  padding: 38px 40px 36px;
  display: flex; flex-direction: column;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease) 0.15s;
  overflow-y: auto;
  overscroll-behavior-y: auto;
}
/* Tracks panel — extends the shared liquid-glass recipe with a
   per-track ACCENT BLOB so each expanded card has its own colour
   gradient sheen (Track 01 cyan, 02 lilac, 03 amber, 04 pink). */
.tk-detail::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 65% 80% at 95% 95%,
      color-mix(in srgb, var(--track-accent, #6FE9D8) 32%, transparent) 0%,
      transparent 65%),
    radial-gradient(ellipse 55% 60% at 5% 0%,
      rgba(255,255,255,0.08) 0%,
      transparent 60%),
    linear-gradient(165deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.00) 50%,
      color-mix(in srgb, var(--track-accent, #6FE9D8) 8%, transparent) 100%);
  mix-blend-mode: screen;
}
.tk-detail::-webkit-scrollbar { width: 4px; }
.tk-detail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 4px; }
.tk-detail .tk-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: 16px;
}
/* Expanded detail panel — editorial layout aligned with the rest of
   the body's typographic system. Vertical hierarchy: small mono
   eyebrow → adineue display title → italic tagline → Geist prose →
   meta list. Sizes/colors mirror .prose / .prose.lead from the
   global system. */
.tk-detail .tk-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 56ch;
}
.tk-detail .tk-eye {

    font-family: 'abcNormal';
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.005em;

    text-transform: uppercase;




  color: var(--track-accent, rgba(255,255,255,0.52));
}
.tk-detail .tk-h {
  margin: 0;
  font-family: 'adineue PRO Black', 'Archivo Black', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  color: var(--track-accent, #fff);
}
.tk-detail .tk-tagline {
  margin: 0;
  font-family: 'abcNormal';
  font-weight: 400;
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.78);
}
.tk-detail .tk-prose {
  margin: 0;
  font-family: 'abcNormal';
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.78);
}
.tk-detail .tk-meta {
  list-style: none;
  margin: 25px 0 0; padding: 0;
  display: grid;
  gap: 18px;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 50px;
}
.tk-detail .tk-meta li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  align-items: center;
}
.tk-detail .tk-meta span {
  font-family: 'abcNormal';
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.005em;
  /*text-transform: uppercase;*/
  /*color: rgba(255,255,255,0.45);*/
  line-height: 1.25;
}
.tk-detail .tk-meta em {
    font-style: normal;
  font-family: 'abcNormal';
  font-weight: 400;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.85);
}


/* Active card — flex grows; video stays playing but blurs into
   background; tk-num + tk-name fade out (replaced by tk-detail's
   own eyebrow + adineue title); detail panel fades in tinted with
   the track's accent color. */
#trk-1:checked ~ .tk-row .tk-card[data-card="1"],
#trk-2:checked ~ .tk-row .tk-card[data-card="2"],
#trk-3:checked ~ .tk-row .tk-card[data-card="3"],
#trk-4:checked ~ .tk-row .tk-card[data-card="4"] {
  flex: 4;
  /* Per user feedback: outer glow felt overdone. Now only a thin
     accent-colored border, no halo. */
  border-color: var(--track-accent, rgba(255,255,255,0.32));
  box-shadow: none;
}
/* Hide the front-of-card "Track 0X" tag on the active card — its
   role is taken over by .tk-eye inside the detail body, preventing
   the duplicate "Track 01" the user reported. */
#trk-1:checked ~ .tk-row .tk-card[data-card="1"] .tk-num,
#trk-2:checked ~ .tk-row .tk-card[data-card="2"] .tk-num,
#trk-3:checked ~ .tk-row .tk-card[data-card="3"] .tk-num,
#trk-4:checked ~ .tk-row .tk-card[data-card="4"] .tk-num {
  opacity: 0;
}
#trk-1:checked ~ .tk-row .tk-card[data-card="1"] .tk-vid,
#trk-2:checked ~ .tk-row .tk-card[data-card="2"] .tk-vid,
#trk-3:checked ~ .tk-row .tk-card[data-card="3"] .tk-vid,
#trk-4:checked ~ .tk-row .tk-card[data-card="4"] .tk-vid {
  /* Lighter blur / brighter — user wants the playing video to read
     clearly behind the panel (motion visible, not "carousel"). */
  filter: saturate(1.0) brightness(0.78) blur(6px);
  transform: scale(1.04);
}
#trk-1:checked ~ .tk-row .tk-card[data-card="1"] .tk-name,
#trk-2:checked ~ .tk-row .tk-card[data-card="2"] .tk-name,
#trk-3:checked ~ .tk-row .tk-card[data-card="3"] .tk-name,
#trk-4:checked ~ .tk-row .tk-card[data-card="4"] .tk-name {
  opacity: 0;
  transform: translateY(20px);
}
#trk-1:checked ~ .tk-row .tk-card[data-card="1"] .tk-cover,
#trk-2:checked ~ .tk-row .tk-card[data-card="2"] .tk-cover,
#trk-3:checked ~ .tk-row .tk-card[data-card="3"] .tk-cover,
#trk-4:checked ~ .tk-row .tk-card[data-card="4"] .tk-cover {
  opacity: 0;
}
#trk-1:checked ~ .tk-row .tk-card[data-card="1"] .tk-detail,
#trk-2:checked ~ .tk-row .tk-card[data-card="2"] .tk-detail,
#trk-3:checked ~ .tk-row .tk-card[data-card="3"] .tk-detail,
#trk-4:checked ~ .tk-row .tk-card[data-card="4"] .tk-detail {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   JURY — 3 placeholder cards in a row
   ============================================================ */

.flow .jurors {
  grid-column: 1 / -1;
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,0.14);
}
.ju {
  padding: 22px 22px 26px;
  border-right: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.ju:last-child { border-right: none; }
.ju-meta {
  display: block;
  font-family: 'abcNormal';
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.33em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
}
.ju h4 {
  margin: 0 0 8px 0;
  font-family: 'abcNormal';
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.012em;
  color: #fff;
}
.ju p {
  margin: 0;
  font-family: 'abcNormal';
  font-size: 13.5px;
  line-height: 1.25;
  color: rgba(255,255,255,0.55);
}

/* ============================================================
   CRITERIA — numbered list, full descriptions
   ============================================================ */

/* HOW WE JUDGE — refined editorial typography, no rectangles, no
   boxes, no chart-like numbers. Each criterion is a single line:
   small monospaced index → wide hairline → sentence-cased Geist
   title. Reads like a film credits roll or magazine TOC. Hover
   slides the row in 6px and lifts the title to white + extends a
   cyan stub into the hairline. Restrained, quiet, design-led. */
.flow-criteria.flow-left .crit-cards { grid-column: 1 / 7; }
.flow-criteria .crit-cards {
  display: flex;
  flex-direction: column;
  margin-top: 0.1px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.flow-criteria .crit-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  cursor: pointer;
  transition: padding 0.4s var(--ease);
}
.flow-criteria .crit-card:hover,
.flow-criteria .crit-card.is-active { padding-left: 6px; }
.flow-criteria .crit-card .cr-n {
    font-family: 'abcNormal';
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    text-transform: uppercase;

    color: rgba(255,255,255,0.40);
    transition: color 0.3s ease;
    display: none;
}
.flow-criteria .crit-card:hover .cr-n,
.flow-criteria .crit-card.is-active .cr-n { color: var(--crit-accent, var(--cyan)); }
.flow-criteria .crit-card h5 {
  position: relative;
  margin: 0;
  font-family: 'adineue PRO Black', 'Archivo Black', sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.014em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  transition: color 0.3s ease, background 0.3s ease;
  display: inline-block;
}
/* Per-row 5-color palette — each criterion lights up in its own
   colour when active/hovered (类似 Perks 的设计 per user spec). */
.flow-criteria .crit-card[data-color="cyan"]  { --crit-accent: #6FE9D8; --crit-accent-2: #B8A4FF; }
.flow-criteria .crit-card[data-color="lilac"] { --crit-accent: #B8A4FF; --crit-accent-2: #FF6FC1; }
.flow-criteria .crit-card[data-color="amber"] { --crit-accent: #FEBC42; --crit-accent-2: #FF6FC1; }
.flow-criteria .crit-card[data-color="pink"]  { --crit-accent: #FF6FC1; --crit-accent-2: #FEBC42; }
.flow-criteria .crit-card[data-color="lime"]  { --crit-accent: #C7FF3B; --crit-accent-2: #6FE9D8; }
/* Active state: title text gets a horizontal gradient between the
   row's accent and its complement — colorful, vibrant, on-brand. */
.flow-criteria .crit-card:hover h5,
.flow-criteria .crit-card.is-active h5 {
  background: linear-gradient(90deg,
    var(--crit-accent, #6FE9D8) 0%,
    var(--crit-accent-2, #B8A4FF) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
/* Trailing arrow — only shows when row is active, signals the
   selected criterion connects to the right-side sphere card. */
.flow-criteria .crit-card::after {
  content: '→';
  font-family: 'abcNormal';
  font-size: 30px;
  color: rgba(255,255,255,0);
  transition: color 0.3s ease, transform 0.4s var(--ease);
  transform: translateX(-8px);
  align-self: center;
}
.flow-criteria .crit-card:hover::after,
.flow-criteria .crit-card.is-active::after {
  color: var(--crit-accent, var(--cyan));
  transform: translateX(0);
}

/* ============================================================
   SUBMIT — 4 numbered steps + big CTA
   ============================================================ */

/* Submit — squeeze-accordion of 5 horizontal cells (4 steps + CTA).
   Default: outline-only with a colourful "active" first cell. On
   hover any cell, that cell expands (flex 3) and the others shrink
   (flex 1), with the colourful fill following the hovered cell. */
.flow-submit .tag,
.flow-submit > .prose,
.flow-submit .submit-grid { grid-column: 3 / 11; }
.flow-submit .submit-sub {
  margin-top: 8px;
  font-family: 'abcNormal';
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.78);
  max-width: 64ch;
}
.flow-submit .submit-grid {
  margin-top: 0.1px;
  display: grid;
  /* Asymmetric mosaic — base columns give cell sg-2 (col 3) enough
     room for its title at default width, sg-1 (cols 1-2) keeps lead
     position. Sizes redefine per `data-active` for real squeeze. */
  grid-template-columns: 1.5fr 0.85fr 1.7fr 1.0fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  height: clamp(460px, 64vh, 620px);
  transition: grid-template-columns 0.55s var(--ease),
              grid-template-rows 0.55s var(--ease);
}
/* Per-active grid layout — the active cell's row/column becomes
   bigger, the others shrink. Real squeeze, driven by JS-set
   data-active on the grid. */
/* Cell layout reminder:
     sg-1 → row 1 / cols 1-2  (wide top-left)
     sg-2 → row 1 / col 3     (medium top-mid)
     sg-3 → row 2 / col 1     (medium bottom-left)
     sg-4 → row 2 / cols 2-3  (wide bottom)
     sg-5 → rows 1-2 / col 4  (tall right)
   Each active state widens the column(s) and row that house the
   active cell, and shrinks the others. */
/* Each non-active cell still needs enough min width to keep its
   adineue title on a sane line. Col 3 (cell 02 "PICK A TRACK") is
   the longest non-active title, so it gets a 1.2fr floor.
   
   
   
   5.6*/
.submit-grid[data-active="1"] {
  grid-template-columns: 2fr 0.4fr 1.5fr 1.7fr;
  grid-template-rows: 1.4fr 0.7fr;
}
.submit-grid[data-active="2"] {
  grid-template-columns: 1.7fr 0.2fr 2.0fr 1.7fr;
  grid-template-rows: 1.4fr 0.7fr;
}
.submit-grid[data-active="3"] {
  grid-template-columns: 2.2fr 0fr 1.7fr 1.7fr;
  grid-template-rows: 0.7fr 1.4fr;
}
.submit-grid[data-active="4"] {
  grid-template-columns: 1.7fr 0.2fr 2.0fr 1.7fr;
  grid-template-rows: 0.7fr 1.4fr;
}
.submit-grid[data-active="5"] {
  grid-template-columns: 1.7fr 0.2fr 2.0fr 1.7fr;
  grid-template-rows: 1fr 1fr;
}
.sg-1 { grid-area: 1 / 1 / 2 / 3; }   /* row 1, cols 1-2  (wide) */
.sg-2 { grid-area: 1 / 3 / 2 / 4; }   /* row 1, col 3     (medium) */
.sg-3 { grid-area: 2 / 1 / 3 / 2; }   /* row 2, col 1     (medium) */
.sg-4 { grid-area: 2 / 2 / 3 / 4; }   /* row 2, cols 2-3  (wide) */
.sg-5 { grid-area: 1 / 4 / 3 / 5; }   /* rows 1-2, col 4  (tall) */
/* Each cell — outline-only when inactive, colourful Perks-style
   gradient fill when active. Active state is driven by JS-toggled
   .is-active class so the highlight sticks on the most-recently-
   hovered cell across hover-outs (not pure CSS :hover). */
.sg-cell.is-active {
         justify-content: center;
   }
   .sg-cell.sg-5.is-active {
       justify-content: flex-start;
   }
.sg-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 26px 26px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  /* Plain semi-transparent dark tint — backdrop-filter does the
     visible work. NO multi-layer bg here; previous layered bg was
     too opaque and hid the blur. Same minimal recipe as a real
     glass tile. */
  background: rgba(12,14,20,0.18);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 28px 60px -32px rgba(0,0,0,0.55);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  /* No `transform` and no `isolation` — both create stacking
     contexts that suppress backdrop-filter from sampling the body
     sphere canvas behind. */
  opacity: 1;
  transition: background 0.5s ease, border-color 0.5s ease,
              box-shadow 0.5s ease;
word-break: break-up;
}
/* Per-cell colour duo (drives the gradient blob compositions). */
.sg-cell[data-color="cyan"]  { --sg-c1: #6FE9D8; --sg-c2: #B8A4FF; --sg-c3: #FFB6E3; }
.sg-cell[data-color="lilac"] { --sg-c1: #B8A4FF; --sg-c2: #FF6FC1; --sg-c3: #FFE0F0; }
.sg-cell[data-color="amber"] { --sg-c1: #FEBC42; --sg-c2: #FF6FC1; --sg-c3: #FFE070; }
.sg-cell[data-color="pink"]  { --sg-c1: #FF6FC1; --sg-c2: #FEBC42; --sg-c3: #FFD3F0; }
.sg-cell[data-color="lime"]  { --sg-c1: #C7FF3B; --sg-c2: #6FE9D8; --sg-c3: #E6FFB7; }

.sg-cell .sg-num {
    font-family: 'abcNormal';
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    text-transform: uppercase;
   
    color: rgba(255,255,255,0.55);
    transition: color 0.3s ease;
}
.sg-cell .sg-title {
  margin: 0;
  font-family: 'adineue PRO Black', 'Archivo Black', sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 2.5vw, 30px);
  line-height: 1.0;
  letter-spacing: -0.014em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  transition: color 0.4s ease;
  white-space: normal;
  word-break: break-word;
}

.sg-cell .sg-desc {
  margin: 0;
      font-family: 'KMR Waldenburg', 'abcNormal';
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.005em;
    
 word-break:normal;

  color: rgba(255,255,255,0.88);
  max-width: 30ch;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.5s var(--ease);
}
/* CTA's arrow — small, inline, same size as title (per user spec).
   Sits next to the "Submit" word in the title row. */
.sg-cta .sg-arrow {
  display: inline-block;
  margin-left: 0.18em;
  font-weight: 400;
  transition: transform 0.4s var(--ease);
  font-family: 'abcNormal';
}
.sg-cell.is-active.sg-cta .sg-arrow {
  transform: translateX(6px);
}

/* Active fill: ::before is the painterly multi-blob field (sized
   slightly larger than the cell so blob edges feather past the
   border), ::after is a conic painterly swirl on top. Both heavily
   blurred + animated for the same Perks-style aurora the user
   referenced as "more 高级". Per-cell offsets + animation phase
   shifts keep all 5 surfaces visually distinct. */
.sg-cell::before,
.sg-cell::after {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease;
  will-change: transform;
}
.sg-cell::before {
  background:
    /* Unified gradient - same structure as perk-card/award-card */
    radial-gradient(ellipse 75% 70% at 32% 38%,
      color-mix(in srgb, var(--sg-c1) 70%, transparent) 0%,
      transparent 60%),
    radial-gradient(ellipse 60% 55% at 78% 72%,
      color-mix(in srgb, var(--sg-c2) 50%, transparent) 0%,
      transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 80%,
      color-mix(in srgb, var(--sg-c3) 38%, transparent) 0%,
      transparent 60%);
  filter: blur(28px);
}
.sg-cell::after {
  background:
    radial-gradient(ellipse 80% 35% at 60% 18%,
      color-mix(in srgb, var(--sg-c2) 65%, transparent) 0%, transparent 55%),
    radial-gradient(circle 9% at 32% 28%, rgba(255,255,255,0.85) 0%, transparent 55%);
  filter: blur(20px);
  mix-blend-mode: screen;
  opacity: 0;
}
/* Multi-colour grain — three SVG noise layers in three different
   tints layered + blended for a richly textured surface that reads
   as "杂色" rather than monochrome speckle. Lives on its own layer
   so it sits OVER the colour field but UNDER the text content. */
.sg-cell .sg-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='1 0 0 0 0  0 0.2 0 0 0  0 0 0.7 0 0  0 0 0 0.42 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.0' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0.2 0 0 0 0  0.9 0 0 0 0  0.6 0 0 0 0  0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='1 0 0 0 0  0.7 0 0 0 0  0 0 0 0 0  0 0 0 0.20 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px, 220px 220px, 320px 320px;
  mix-blend-mode: overlay;
}
.sg-cell.is-active .sg-grain { opacity: 0.8; }
.sg-cell .sg-content {
  position: relative;
  z-index: 2;
  display: flex; flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
}
/* Per-cell animation phase + speed so all 5 don't drift in lockstep. */
.sg-cell.is-active::before { animation: sgFlowA 12s ease-in-out infinite; }
.sg-cell.is-active::after  { animation: sgFlowB 16s linear           infinite; }
.sg-2.is-active::before { animation-duration:  9s; animation-delay: -3s; }
.sg-3.is-active::before { animation-duration: 14s; animation-delay: -6s; }
.sg-4.is-active::before { animation-duration: 11s; animation-delay: -9s; }
.sg-5.is-active::before { animation-duration: 13s; animation-delay: -2s; }
.sg-2.is-active::after  { animation-duration: 13s; animation-delay: -4s; }
.sg-3.is-active::after  { animation-duration: 18s; animation-delay: -7s; }
.sg-4.is-active::after  { animation-duration: 15s; animation-delay: -1s; }
.sg-5.is-active::after  { animation-duration: 17s; animation-delay: -5s; }
@keyframes sgFlowA {
  0%, 100% { transform: translate(0%,  0%) scale(1);    }
  33%      { transform: translate(6%, -8%) scale(1.10); }
  66%      { transform: translate(-7%, 6%) scale(0.94); }
}
@keyframes sgFlowB {
  0%   { transform: rotate(0deg)   scale(1);    }
  100% { transform: rotate(360deg) scale(1.06); }
}


/* ACTIVE — JS toggles .is-active onto the most-recently-hovered cell
   (defaults to .sg-1). Active scales UP, siblings stay at scale 0.96
   so the size differential creates the "squeeze" effect the user
   asked for. The painterly blob field fades in. */
.sg-cell.is-active::before,
.sg-cell.is-active::after { opacity: 1; }
.sg-cell.is-active .sg-desc { opacity: 1; transform: translateY(0); max-width: 100%; }
.sg-cell.is-active .sg-num { color: rgba(255,255,255,0.92); }
.sg-cell.is-active .sg-title { color: #fff; }
.sg-cell.is-active {
  border-color: color-mix(in srgb, var(--sg-c1) 55%, rgba(255,255,255,0.22));
  /* Squeeze comes from the grid-template change, not transform —
     transform-scale would clip across grid lines. */
  transform: scale(1);
  opacity: 1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 28px 70px -32px rgba(0,0,0,0.65),
    0 0 0 1px color-mix(in srgb, var(--sg-c1) 25%, transparent);
  z-index: 2;
}

.big-cta {
  /* Lives inside .submit-panel now — no grid-column scoping needed. */
  display: inline-flex; align-items: center;
  gap: 14px;
  padding: 16px 30px;
  border-radius: 999px;
  background: #fff;
  color: #07080B;
  font-family: 'abcNormal';
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.5),
              0 12px 50px rgba(255,255,255,0.18);
  transition: all 0.4s var(--ease);
}
.big-cta:hover {
  background: var(--cyan);
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--cyan),
              0 16px 60px rgba(111,233,216,0.5);
}
.big-cta .arr { font-size: 15px; transition: transform 0.3s ease; }
.big-cta:hover .arr { transform: translateX(5px); }

/* ============================================================
   TIMELINE — horizontal scroll-driven rail. The section is tall
   (250vh) so vertical scroll progress maps to horizontal rail
   translation + axis fill. The pinned content stays in the viewport.
   ============================================================ */

.flow-timeline {
  /* Section is 300vh tall. JS toggles `is-pinned` / `is-pinned-end`
     to swap the inner pin between absolute (top), fixed (during the
     200vh pin range), and absolute (bottom). `position: sticky` was
     attempted first but is broken by `overflow-x: hidden` on
     html/body in shared/base.css — the body becomes the sticky's
     scrolling ancestor and sticky silently fails. Fixed positioning
     is reliable across all browsers. */
  position: relative;
  padding: 0 !important;
  min-height: 300vh !important;
  display: block;
  width: 100% !important;
  max-width: none !important;
}
.flow-timeline .tl-pin {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  overflow: hidden;
}
.flow-timeline.is-pinned .tl-pin {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100vw;
}
.flow-timeline.is-pinned-end .tl-pin {
  top: auto;
  bottom: 0;
}
.flow-timeline .tl-head {
  width: min(1240px, 92vw);
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: 22px;
}
.flow-timeline .tl-head .tag { margin: 0; padding: 0; }
.flow-timeline .tl-head .tag::before { display: none; }
.flow-timeline .tl-head .prose.lead { margin: 0; }
.flow-timeline .tl-track {
  position: relative;
  /* overflow-x clips the rail's horizontal extent (handled at body
     level by overflow-x:hidden on html/body), but vertical must be
     visible so the dots' colored glow shadows aren't clipped at
     the top of the track. */
  padding: 36px 0;
}
.flow-timeline .tl-rail {
  position: relative;
  list-style: none;
  margin: 0; padding: 0 5vw;
  display: flex;
  gap: 8vw;
  width: max-content;
  will-change: transform;
}
/* Two-layer axis: dim base bar (::before) is the full track; the
   colored gradient fill (::after) scales horizontally with progress
   from left to right. Both sit at the same y, so as scroll advances
   the colorful fill creeps across the dim base. Dots are placed ON
   the axis line so they always overlap perfectly. */
.flow-timeline .tl-rail::before {
  content: '';
  position: absolute;
  top: 6px;             /* center of 16px dots */
  left: 5vw; right: 5vw;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.16);
  z-index: 0;
}
.flow-timeline .tl-rail::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 5vw; right: 5vw;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--cyan)  0%,
    var(--lilac) 26.04%,
    var(--amber) 52.08%,
    var(--pink)  78.13%);

  transform-origin: left center;
clip-path: inset(0 calc(100% - var(--tl-progress, 0) * 100%) 0 0);
  z-index: 0;
  box-shadow: 0 0 18px rgba(255,255,255,0.12);
}
.flow-timeline .tl-node {
  position: relative;
  flex: 0 0 auto;
  width: 42vw;
  padding-top: 36px;
}
.flow-timeline .tl-dot {
  position: absolute;
  top: 0; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(20,22,28,0.95);
  border: 2px solid rgba(255,255,255,0.30);
  transition: background 0.3s ease, border-color 0.3s ease,
              transform 0.3s var(--ease), box-shadow 0.3s ease;
  z-index: 1;
}
.flow-timeline .tl-node[data-color="cyan"]  .tl-dot { border-color: var(--cyan);  }
.flow-timeline .tl-node[data-color="lilac"] .tl-dot { border-color: var(--lilac); }
.flow-timeline .tl-node[data-color="amber"] .tl-dot { border-color: var(--amber); }
.flow-timeline .tl-node[data-color="pink"]  .tl-dot { border-color: var(--pink);  }
.flow-timeline .tl-node.is-passed[data-color="cyan"]  .tl-dot,
.flow-timeline .tl-node.is-active[data-color="cyan"]  .tl-dot {
  background: var(--cyan);  box-shadow: 0 0 18px var(--cyan);
}
.flow-timeline .tl-node.is-passed[data-color="lilac"] .tl-dot,
.flow-timeline .tl-node.is-active[data-color="lilac"] .tl-dot {
  background: var(--lilac); box-shadow: 0 0 18px var(--lilac);
}
.flow-timeline .tl-node.is-passed[data-color="amber"] .tl-dot,
.flow-timeline .tl-node.is-active[data-color="amber"] .tl-dot {
  background: var(--amber); box-shadow: 0 0 18px var(--amber);
}
.flow-timeline .tl-node.is-passed[data-color="pink"]  .tl-dot,
.flow-timeline .tl-node.is-active[data-color="pink"]  .tl-dot {
  background: var(--pink);  box-shadow: 0 0 18px var(--pink);
}
.flow-timeline .tl-node.is-active .tl-dot { transform: scale(1.35); }
.flow-timeline .tl-when {
  display: block;
  font-family: 'abcNormal';
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    
  color: rgba(255,255,255,0.55);
  margin-bottom: 14px;
  transition: color 0.3s ease;
}
.flow-timeline .tl-node[data-color="cyan"]  .tl-when { color: var(--cyan);  }
.flow-timeline .tl-node[data-color="lilac"] .tl-when { color: var(--lilac); }
.flow-timeline .tl-node[data-color="amber"] .tl-when { color: var(--amber); }
.flow-timeline .tl-node[data-color="pink"]  .tl-when { color: var(--pink);  }
.flow-timeline .tl-node h5 {
  margin: 0 0 12px;
  font-family: 'adineue PRO Black', 'Archivo Black', sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 2.5vw, 30px);
  line-height: 1.0;
  letter-spacing: -0.014em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  transition: color 0.3s ease;
}
.flow-timeline .tl-node.is-active h5,
.flow-timeline .tl-node.is-passed h5 { color: #fff; }
.flow-timeline .tl-node p {
  margin: 0;
  font-family: 'abcNormal';
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.55);
  max-width: 38ch;
  transition: color 0.3s ease;
}
.flow-timeline .tl-node.is-active p { color: rgba(255,255,255,0.85); }

/* ============================================================
   FAQ — categorized list
   ============================================================ */

/* Nested folding — categories collapse by default. Click a category
   to reveal its question list (still folded). Click a question to
   reveal its answer. Closed state is just three thin rows: minimum
   visual real-estate. */
.flow-faq .tag,
.flow-faq > .prose,
.flow-faq .faq-sub,
.flow-faq .faq-stack { grid-column: 3 / 11; }
.flow-faq .faq-sub {
  margin-top: 8px;
  font-family: 'abcNormal';
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-width: 64ch;
}
.flow-faq .faq-stack {
  margin-top: 0.1px;
}
/* Frosted-glass panel wrapping the FAQ accordion — heavier blur +
   higher opacity tint per user feedback ("背景还是很乱"). The canvas
   behind should read as a soft atmospheric blur, not as recognizable
   shapes. */
.flow-faq .faq-panel {
  padding: 14px 28px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  /* Background / blur / box-shadow inherited from .glass-surface
     shared rule near the top of this file. */
}
.flow-faq .faq-panel .faq-group:first-child { border-top: none; }
.flow-faq details.faq-group {
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.flow-faq details.faq-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0;
  font-family: 'abcNormal';
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.005em;
  color: #fff;
}
.flow-faq details.faq-group > summary::-webkit-details-marker { display: none; }
.flow-faq details.faq-group > summary::before {
  content: '＋';
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.45);
  margin-right: 14px;
  transition: transform 0.3s ease, color 0.25s ease;
  display: inline-block;
}
.flow-faq details.faq-group[open] > summary::before {
  content: '—';
  color: var(--cyan, #6FE9D8);
}
.flow-faq details.faq-group > summary .fg-label { flex: 1;     font-family: 'KMR Waldenburg', 'abcNormal';
    font-weight: 500;
    font-size: clamp(20px, 1.25vw, 25px);
    color: #fff;
    letter-spacing: -0.005em; }
.flow-faq details.faq-group > summary .fg-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.40);
}
.flow-faq details.faq-group .fg-body {
  padding: 0 0 8px 26px;          /* indent under the +/- glyph */
  border-top: 1px solid rgba(255,255,255,0.06);
}
.flow-faq details.qa {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.flow-faq details.qa:last-child { border-bottom: none; }
.flow-faq details.qa > summary {

    font-family: 'KMR Waldenburg', 'abcNormal';
    font-weight: 400;
    font-size: 15px;

    line-height: 1.5;


  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0;

  font-weight: 400;

  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.82);
  transition: color 0.2s ease;
}
.flow-faq details.qa > summary::-webkit-details-marker { display: none; }
.flow-faq details.qa > summary::after {
  content: '+';
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: rgba(255,255,255,0.35);
  margin-left: 14px;
  transition: color 0.2s ease;
}
.flow-faq details.qa[open] > summary::after { content: '−'; color: var(--cyan, #6FE9D8); }
.flow-faq details.qa:hover > summary { color: #fff; }
.flow-faq details.qa p {
  margin: 0 0 12px;
  font-family: 'abcNormal';
  font-size: 13.5px;
  color: rgba(255,255,255,0.62);
  line-height: 1.25;
  max-width: 70ch;
}

/* ============================================================
   CLOSING
   ============================================================ */

.flow-closing {
  text-align: center;
  padding: 30vh 8vw;           /* 原来是 140px 8vw 130px，改成视口比例 */
  min-height: calc(100vh - 100px);           /* 新增：至少占满整个屏幕高度 */
  box-sizing: border-box;      /* 新增：padding 不撑破容器 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 删掉 grid-template-columns: 1fr; 这行——flex 模式下不需要 */
}
.flow-closing > * { grid-column: 1 / -1; }
.closing-h {
  position: relative;
  display: inline-block;
  margin: 0 0 24px 0;
  font-family: 'adineue PRO Black', 'Archivo Black', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 4.4vw, 68px);
  line-height: 1.0;
  letter-spacing: -0.016em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;     /* keep on one line */
  max-width: none;
}
/* "CapCut AI Fast" cursive flourish overlaid on the closing
   headline, tilted, in brand cyan (same as the primary CTA's hover
   color) — keeps the page palette tight, no extra hue introduced. */
.closing-script {
  position: absolute;
  z-index: 2;
  top: -0.5em;
  right: -0.05em;
  font-family: 'Babylonica', 'Brush Script MT', cursive;
  font-weight: 400;
  font-size: 0.95em;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cyan, #6FE9D8);
  text-shadow: 0 2px 22px rgba(0,0,0,0.45);
  transform: rotate(-4deg);
  pointer-events: none;
  white-space: nowrap;
}
.closing-sub {
  margin: 0 0 30px 0;
  font-family: 'abcNormal';
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
  max-width: 540px;
}
.closing-ctas {
  display: inline-flex; gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
  /* User feedback (2026-05-05): footer felt disjoint from the rest;
     the radial+linear gradient stack read as "another component"
     rather than continuous with the page. New treatment mirrors the
     hero's `.nav-stage` pill — single tinted glass, identical blur
     strength, identical box-shadow recipe — so the bottom of the
     page bookends the top in the same material. */
  position: relative; z-index: 2;
  padding: 24px 8vw;
  background: rgba(18,18,22,0.52);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 10px 32px rgba(0,0,0,0.36),               /* same as nav-stage */
    inset 0 1px 0 rgba(255,255,255,0.06);       /* same inner highlight */
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: 'abcNormal';
  font-size: 13.5px;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.55);
}
.footer-brand {
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.005em;
}
/* Footer links — wrap in a pill identical to the hero nav-stage so
   the user reads "same UI element, just at the bottom". Padding,
   border, blur all match the upper pill. */
.footer-links {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(28,28,32,0.62);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.footer-links a {
  padding: 7px 14px;
  border-radius: 999px;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  transition: color 0.22s, background 0.22s;
}
.footer-links a:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.footer-copy { color: rgba(255,255,255,0.42); font-size: 13.5px; }

/* ============================================================
   Reel fullscreen lightbox
   ============================================================ */

.reel-lb {
  position: fixed; inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.96);
  display: none;
  align-items: center; justify-content: center;
  cursor: none;
}
.reel-lb[data-open="true"] { display: flex; animation: lbFade 0.3s ease; }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.reel-lb-vid {
  width: min(90vw, 1400px);
  max-height: 86vh;
  background: #000;
  outline: none;
}
.reel-lb-close {
  position: absolute; top: 28px; right: 32px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 22px;
  font-family: 'abcNormal';
  font-weight: 300;
  cursor: none;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.reel-lb-close:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.45); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1100px) {
  .flow { grid-template-columns: repeat(8, 1fr); }
  .flow .tag { grid-column: 1 / 9; padding-left: 0; margin-bottom: 6px; }
  .flow .tag::before { display: none; }
  .prose, .reel-wrap, .perk-cards, .award-list, .extras,
  .flow-tracks .tracks-deck, .jurors,
  .crit-list, .steps, .big-cta,
  .flow-faq .faq-stack { grid-column: 1 / 9; }
  .perk-cards { grid-template-columns: 1fr 1fr; }
  .flow-awards .award-cards { grid-template-columns: 1fr 1fr; }
  .flow-extras .extras { grid-template-columns: repeat(2, 1fr); }
  .flow-extras .extras li:nth-child(3n) { border-right: 1px solid rgba(255,255,255,0.10); padding-right: 24px; }
  .flow-extras .extras li:nth-child(2n) { border-right: none; padding-right: 0; }
  .flow-awards .tag,
  .flow-extras .tag,
  .flow-awards .award-cards,
  .flow-extras .extras,
  .flow-awards > .prose,
  .flow-extras > .prose,
  .flow-perks .tag,
  .flow-perks > .prose,
  .perk-cards,
  .flow-awards .fineprint { grid-column: 1 / 9; }
  .crit-list li, .steps li { grid-template-columns: 56px 1fr; }
  .crit-list li p, .steps li p { grid-column: 2; }
  .flow-timeline { min-height: auto !important; }
  .flow-timeline .tl-pin { position: static; height: auto; padding: 8vh 5vw; }
  .flow-timeline .tl-track { overflow-x: auto; }
  .flow-timeline .tl-rail { transform: none !important; }
  .footer-inner { flex-wrap: wrap; }
  .tk-row { flex-wrap: wrap; height: auto; }
  .tk-card { flex: 1 1 calc(50% - 5px); height: 320px; }
  #trk-1:checked ~ .tk-row .tk-card[data-card="1"],
  #trk-2:checked ~ .tk-row .tk-card[data-card="2"],
  #trk-3:checked ~ .tk-row .tk-card[data-card="3"],
  #trk-4:checked ~ .tk-row .tk-card[data-card="4"] { flex: 1 1 100%; height: 580px; }
}
@media (max-width: 700px) {
  .reel { width: 86vw; }
  .flow-awards .award-cards { grid-template-columns: 1fr; }
  .award-card[data-tier="grand"] { grid-column: 1; }
  .flow-extras .extras { grid-template-columns: 1fr; }
  .flow-extras .extras li { border-right: none !important; padding: 14px 0; }
  .perk-cards { grid-template-columns: 1fr !important; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .tk-card { height: 280px; }
}
/* 滚动中临时削弱 backdrop-filter，停止滚动后恢复 */
body.is-scrolling .glass-surface,
body.is-scrolling .flow-judges .judges-panel-fill,
body.is-scrolling .flow-faq .faq-panel,
body.is-scrolling .flow-submit .submit-panel,
body.is-scrolling .tk-detail {
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  transition: backdrop-filter 0.3s ease;
}
/* 不在视口内的 section 跳过布局和渲染计算 */
.flow {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}
/* 但 timeline 需要特殊处理，因为它有 pin 效果 */
.flow-timeline {
  content-visibility: visible;
}

.award-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 2;
}




/* ================================================================
   UNIFIED 5-COLOR SCHEME SYSTEM
   5 schemes: A=Cyan / B=Lilac / C=Amber / D=Pink / E=Green
   All cards: pure color vars + blur + opacity. No masks, no dilution.
   ================================================================ */

/* ---------- Scheme A (Cyan) — Vertical Tide + Rotational Swirl ---------- */
@keyframes schATideIdle { 0%,100%{transform:translateY(-4%)} 50%{transform:translateY(4%)} }
@keyframes schASwirlIdle { 0%{transform:rotate(0)scale(1)} 100%{transform:rotate(360deg)scale(1.04)} }
@keyframes schATideHover { 0%,100%{transform:translateY(-22%)scale(1)} 50%{transform:translateY(22%)scale(1.1)} }
@keyframes schASwirlHover { 0%{transform:rotate(0)scale(1.08)} 100%{transform:rotate(-360deg)scale(0.95)} }

/* ---------- Scheme B (Lilac) — Bloom Pulse ---------- */
@keyframes schBBloomIdle { 0%,100%{transform:scale(0.97)translate(0,0)} 50%{transform:scale(1.06)translate(2%,-2%)} }
@keyframes schBBloomIdleB { 0%,100%{transform:scale(1.04)translate(2%,3%)} 50%{transform:scale(0.95)translate(-3%,-2%)} }
@keyframes schBBloomHover { 0%,100%{transform:scale(0.85)translate(0,0)} 50%{transform:scale(1.3)translate(6%,-8%)} }
@keyframes schBBloomHoverB { 0%,100%{transform:scale(1.2)translate(4%,6%)} 50%{transform:scale(0.78)translate(-8%,-6%)} }

/* ---------- Scheme C (Amber) — Diagonal Sweep ---------- */
@keyframes schCSweepIdle { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes schCSweepIdleB { 0%,100%{transform:rotate(0)scale(1)} 50%{transform:rotate(-12deg)scale(1.06)} }
@keyframes schCSweepHover { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes schCSweepHoverB { 0%,100%{transform:rotate(0)scale(1)} 50%{transform:rotate(-30deg)scale(1.18)} }

/* ---------- Scheme D (Pink) — Rose Glow Breathe + Drift ---------- */
@keyframes schDRoseIdle { 0%,100%{transform:scale(1)translate(0,0)} 33%{transform:scale(1.05)translate(2%,-1%)} 66%{transform:scale(0.96)translate(-1%,2%)} }
@keyframes schDRoseIdleB { 0%,100%{transform:scale(1.02)translate(0,0)rotate(0)} 50%{transform:scale(0.94)translate(-3%,3%)rotate(8deg)} }
@keyframes schDRoseHover { 0%,100%{transform:scale(0.88)translate(0,0)} 50%{transform:scale(1.22)translate(5%,-5%)} }
@keyframes schDRoseHoverB { 0%,100%{transform:scale(1.12)translate(0,0)rotate(0)} 50%{transform:scale(0.8)translate(-6%,5%)rotate(-15deg)} }

/* ---------- Scheme E (Green) — Meadow Wave + Rotating Glow ---------- */
@keyframes schEWaveIdle { 0%,100%{transform:translate(0,0)scale(1)} 25%{transform:translate(5%,-3%)scale(1.04)} 50%{transform:translate(-2%,4%)scale(0.96)} 75%{transform:translate(-4%,-2%)scale(1.03)} }
@keyframes schEGlowIdle { 0%{transform:rotate(0)scale(1)} 100%{transform:rotate(-360deg)scale(1.05)} }
@keyframes schEWaveHover { 0%,100%{transform:translate(0,0)scale(1)} 33%{transform:translate(12%,-8%)scale(1.1)} 66%{transform:translate(-8%,10%)scale(0.92)} }
@keyframes schEGlowHover { 0%{transform:rotate(0)scale(1.08)} 100%{transform:rotate(360deg)scale(0.94)} }

/* ================================================================
   AWARD CARDS — schemes A/B/C/D  (NO black shadow mask)
   ================================================================ */
.award-card[data-tier="grand"] { --sch-deep:#053E3A; --sch-mid:#1FA29A; --sch-bright:#80DFD5; --sch-bleed:#C1AEEB; --sch-warm:#FFB6E3; --base:#051410; }
.award-card[data-tier="gold"] { --sch-deep:#1B0A40; --sch-mid:#6F4FCC; --sch-bright:#C1AEEB; --sch-bleed:#FE8ED7; --sch-warm:#E8D8FF; --base:#0F0420; }
.award-card[data-tier="silver"] { --sch-deep:#3A2A00; --sch-mid:#C8A020; --sch-bright:#FFD359; --sch-bleed:#FE8ED7; --sch-warm:#FFF0A0; --base:#1F1808; }
.award-card[data-tier="student"] { --sch-deep:#3D0A28; --sch-mid:#C4398A; --sch-bright:#FE8ED7; --sch-bleed:#FFD359; --sch-warm:#FFE0F0; --base:#180510; }

/*.award-card[data-tier="grand"]::before { background: radial-gradient(ellipse 120% 30% at 50% 8%,var(--sch-bright) 0%,transparent 60%),radial-gradient(ellipse 110% 28% at 50% 35%,var(--sch-bleed) 0%,transparent 62%),radial-gradient(ellipse 110% 30% at 50% 62%,var(--sch-mid) 0%,transparent 62%),radial-gradient(ellipse 110% 30% at 50% 92%,var(--sch-deep) 0%,transparent 62%); filter:blur(32px); opacity:0.92; }*/
.award-card[data-tier="gold"]::before { background: radial-gradient(circle at 38% 42%,var(--sch-warm) 0%,var(--sch-bright) 15%,var(--sch-bleed) 32%,var(--sch-mid) 55%,var(--sch-deep) 100%); filter:blur(28px); opacity:0.94; }
.award-card[data-tier="silver"]::before { background: linear-gradient(122deg,var(--sch-warm) 0%,var(--sch-bright) 22%,var(--sch-mid) 48%,var(--sch-bleed) 72%,var(--sch-deep) 100%); filter:blur(28px); opacity:0.94; }
.award-card[data-tier="student"]::before { background: radial-gradient(ellipse 90% 80% at 30% 35%,var(--sch-warm) 0%,var(--sch-bright) 18%,var(--sch-bleed) 38%,var(--sch-mid) 62%,var(--sch-deep) 100%); filter:blur(30px); opacity:0.94; }

.award-card[data-tier="grand"]::after { background: radial-gradient(ellipse 95% 95% at 50% 50%,var(--sch-mid) 0%,var(--sch-deep) 70%,transparent 100%),conic-gradient(from 200deg at 50% 50%,var(--sch-warm) 0%,var(--sch-bleed) 20%,var(--sch-bright) 45%,var(--sch-mid) 70%,var(--sch-warm) 100%); filter:blur(32px); opacity:0.50; mix-blend-mode:screen; }
.award-card[data-tier="gold"]::after { background: radial-gradient(ellipse 70% 60% at 78% 80%,var(--sch-bleed) 0%,transparent 62%),radial-gradient(ellipse 50% 45% at 22% 72%,var(--sch-mid) 0%,transparent 60%); filter:blur(36px); opacity:0.65; mix-blend-mode:soft-light; }
.award-card[data-tier="silver"]::after { background: radial-gradient(ellipse 70% 55% at 28% 30%,var(--sch-warm) 0%,transparent 60%),radial-gradient(ellipse 60% 55% at 82% 78%,var(--sch-bleed) 0%,transparent 62%); filter:blur(34px); opacity:0.55; mix-blend-mode:screen; }
.award-card[data-tier="student"]::after { background: radial-gradient(ellipse 65% 50% at 72% 68%,var(--sch-warm) 0%,transparent 58%),radial-gradient(ellipse 45% 40% at 18% 75%,var(--sch-bright) 0%,transparent 55%); filter:blur(38px); opacity:0.60; mix-blend-mode:soft-light; }

/* 默认无动画 — 跟原始设计一致 */
.award-card[data-tier="grand"]::before,
.award-card[data-tier="grand"]::after,
.award-card[data-tier="gold"]::before,
.award-card[data-tier="gold"]::after,
.award-card[data-tier="silver"]::before,
.award-card[data-tier="silver"]::after,
.award-card[data-tier="student"]::before,
.award-card[data-tier="student"]::after { animation:none; }

.award-card[data-tier="grand"]:hover::before { animation:schATideHover 3s ease-in-out infinite; } .award-card[data-tier="grand"]:hover::after { animation:schASwirlHover 4s linear infinite; }
.award-card[data-tier="gold"]:hover::before { animation:schBBloomHover 2.6s ease-in-out infinite; } .award-card[data-tier="gold"]:hover::after { animation:schBBloomHoverB 3.4s ease-in-out infinite; }
.award-card[data-tier="silver"]:hover::before { animation:schCSweepHover 5s linear infinite; } .award-card[data-tier="silver"]:hover::after { animation:schCSweepHoverB 3.5s ease-in-out infinite; }
.award-card[data-tier="student"]:hover::before { animation:schDRoseHover 3.2s ease-in-out infinite; } .award-card[data-tier="student"]:hover::after { animation:schDRoseHoverB 4s ease-in-out infinite; }

/* ================================================================
   SUBMIT GRID — schemes A/B/C/D/E  (NO color-mix dilution)
   ================================================================ */
.sg-1 { --sch-deep:#053E3A; --sch-mid:#1FA29A; --sch-bright:#80DFD5; --sch-bleed:#C1AEEB; --sch-warm:#FFB6E3; }
.sg-2 { --sch-deep:#1B0A40; --sch-mid:#6F4FCC; --sch-bright:#C1AEEB; --sch-bleed:#FE8ED7; --sch-warm:#E8D8FF; }
.sg-3 { --sch-deep:#3A2A00; --sch-mid:#C8A020; --sch-bright:#FFD359; --sch-bleed:#FE8ED7; --sch-warm:#FFF0A0; }
.sg-4 { --sch-deep:#3D0A28; --sch-mid:#C4398A; --sch-bright:#FE8ED7; --sch-bleed:#FFD359; --sch-warm:#FFE0F0; }
.sg-5 { --sch-deep:#0A3520; --sch-mid:#2E9E62; --sch-bright:#8EE6A8; --sch-bleed:#80DFD5; --sch-warm:#D4FFD8; }

.sg-1.is-active::before { background: radial-gradient(ellipse 120% 30% at 50% 8%,var(--sch-bright) 0%,transparent 60%),radial-gradient(ellipse 110% 28% at 50% 35%,var(--sch-bleed) 0%,transparent 62%),radial-gradient(ellipse 110% 30% at 50% 62%,var(--sch-mid) 0%,transparent 62%),radial-gradient(ellipse 110% 30% at 50% 92%,var(--sch-deep) 0%,transparent 62%); filter:blur(32px); opacity:0.92; }
.sg-2.is-active::before { background: radial-gradient(circle at 38% 42%,var(--sch-warm) 0%,var(--sch-bright) 15%,var(--sch-bleed) 32%,var(--sch-mid) 55%,var(--sch-deep) 100%); filter:blur(28px); opacity:0.94; }
.sg-3.is-active::before { background: linear-gradient(122deg,var(--sch-warm) 0%,var(--sch-bright) 22%,var(--sch-mid) 48%,var(--sch-bleed) 72%,var(--sch-deep) 100%); filter:blur(28px); opacity:0.94; }
.sg-4.is-active::before { background: radial-gradient(ellipse 90% 80% at 30% 35%,var(--sch-warm) 0%,var(--sch-bright) 18%,var(--sch-bleed) 38%,var(--sch-mid) 62%,var(--sch-deep) 100%); filter:blur(30px); opacity:0.94; }
.sg-5.is-active::before { background: radial-gradient(ellipse 150% 55% at 30% 40%,var(--sch-bright) 0%,transparent 55%),radial-gradient(ellipse 140% 55% at 72% 58%,var(--sch-bleed) 0%,transparent 58%),radial-gradient(ellipse 130% 60% at 50% 82%,var(--sch-mid) 0%,transparent 60%),radial-gradient(ellipse 120% 50% at 65% 22%,var(--sch-warm) 0%,transparent 55%); filter:blur(32px); opacity:0.94; }

.sg-1.is-active::after { background: radial-gradient(ellipse 95% 95% at 50% 50%,var(--sch-mid) 0%,var(--sch-deep) 70%,transparent 100%),conic-gradient(from 200deg at 50% 50%,var(--sch-warm) 0%,var(--sch-bleed) 20%,var(--sch-bright) 45%,var(--sch-mid) 70%,var(--sch-warm) 100%); filter:blur(32px); opacity:0.50; mix-blend-mode:screen; }
.sg-2.is-active::after { background: radial-gradient(ellipse 70% 60% at 78% 80%,var(--sch-bleed) 0%,transparent 62%),radial-gradient(ellipse 50% 45% at 22% 72%,var(--sch-mid) 0%,transparent 60%); filter:blur(36px); opacity:0.65; mix-blend-mode:soft-light; }
.sg-3.is-active::after { background: radial-gradient(ellipse 70% 55% at 28% 30%,var(--sch-warm) 0%,transparent 60%),radial-gradient(ellipse 60% 55% at 82% 78%,var(--sch-bleed) 0%,transparent 62%); filter:blur(34px); opacity:0.55; mix-blend-mode:screen; }
.sg-4.is-active::after { background: radial-gradient(ellipse 65% 50% at 72% 68%,var(--sch-warm) 0%,transparent 58%),radial-gradient(ellipse 45% 40% at 18% 75%,var(--sch-bright) 0%,transparent 55%); filter:blur(38px); opacity:0.60; mix-blend-mode:soft-light; }
.sg-5.is-active::after { background: radial-gradient(ellipse 55% 50% at 35% 35%,var(--sch-warm) 0%,transparent 55%),radial-gradient(circle 10% at 68% 72%,rgba(255,255,255,0.75) 0%,transparent 55%); filter:blur(26px); opacity:0.58; mix-blend-mode:screen; }

.sg-1.is-active::before { animation:schATideIdle 12s ease-in-out infinite; animation-delay:0s; } .sg-1.is-active::after { animation:schASwirlIdle 16s linear infinite; animation-delay:0s; }
.sg-2.is-active::before { animation:schBBloomIdle 9s ease-in-out infinite; animation-delay:-3s; } .sg-2.is-active::after { animation:schBBloomIdleB 13s ease-in-out infinite; animation-delay:-4s; }
.sg-3.is-active::before { animation:schCSweepIdle 14s linear infinite; animation-delay:-6s; } .sg-3.is-active::after { animation:schCSweepIdleB 18s ease-in-out infinite; animation-delay:-7s; }
.sg-4.is-active::before { animation:schDRoseIdle 11s ease-in-out infinite; animation-delay:-9s; } .sg-4.is-active::after { animation:schDRoseIdleB 15s ease-in-out infinite; animation-delay:-1s; }
.sg-5.is-active::before { animation:schEWaveIdle 13s ease-in-out infinite; animation-delay:-2s; } .sg-5.is-active::after { animation:schEGlowIdle 17s linear infinite; animation-delay:-5s; }