/* ==========================================================================
   RGB.CSS — Red / Gold / Black identity commit (2026-07-06 meeting).

   Loaded ONLY by the main '/' landing (index-a.ejs). Variants /2 /3 /4 and
   the inner pages never load this file, so they keep the original champagne
   look untouched.

   Direction from the meeting:
     - RED is the primary action colour: the apply CTA is a big red button
       that is impossible to miss. Commit, don't sprinkle.
     - GOLD is secondary: kickers, accents, the outline "I have a code" twin.
     - BLACK stays the surface world. No white dominance.
   Wires the brand tokens that notfit-v2.css registered for the rebrand
   (--nfx-brand-red #ce201a / --nfx-brand-gold #e9c78d) — they were parked
   "NOT yet wired" there; this file is where they go live for '/'.

   Specificity note: the apply-flow overlay styles live in an inline <style>
   inside <body>, which beats a same-specificity rule from this head-loaded
   file. Every override below is therefore prefixed with .nfx-page (the
   <body> class) to win on specificity, and the one !important colour in
   the source is countered with !important here.
   ========================================================================== */

/* ---- 1. Token overrides: red goes brand, gold warms to the wordmark gold */
.nfx-page {
  --nfx-red: #ce201a;
  --nfx-red-soft: rgba(206, 32, 26, 0.16);
  --nfx-gold: #e9c78d;
  --nfx-gold-bright: #f2d9a6;
  --nfx-gold-grad: linear-gradient(180deg, #f2d9a6 0%, #ddb578 100%);
  --nfx-gold-glow: rgba(233, 199, 141, 0.5);
  --nfx-red-grad: linear-gradient(180deg, #e02c1f 0%, #ce201a 55%, #a31410 100%);
}

/* ---- 2. Primary apply CTA → THE BIG RED BUTTON ---- */
.nfx-page .nfx-apply-cta {
  color: #fff !important;
  background: linear-gradient(180deg, #e02c1f 0%, #ce201a 55%, #a31410 100%);
  box-shadow:
    0 18px 48px -14px rgba(206, 32, 26, 0.65),
    0 4px 18px rgba(206, 32, 26, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.nfx-page .nfx-apply-cta:hover {
  filter: brightness(1.08);
  box-shadow:
    0 26px 64px -16px rgba(206, 32, 26, 0.8),
    0 6px 24px rgba(206, 32, 26, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.nfx-page .nfx-apply-cta--lg {
  padding: 20px 60px;
  font-size: 18px;
  position: relative;
}

/* Attention ring: transform+opacity only (compositor-friendly), no
   box-shadow animation. Killed under reduced motion. */
.nfx-page .nfx-apply-cta--lg::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  border: 2px solid rgba(206, 32, 26, 0.55);
  pointer-events: none;
  animation: nfx-rgb-ring 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes nfx-rgb-ring {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%, 100% { transform: scale(1.16); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nfx-page .nfx-apply-cta--lg::after { animation: none; opacity: 0; }
}

/* "(Apply here)" clarity line inside the button — meeting: people are
   dumb, keep it crystal clear. */
.nfx-page .nfx-cta-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 2px;
}

/* ---- 3. Secondary "I have a code" twin: gold outline (gold = secondary) */
.nfx-page .nfx-code-cta {
  color: #e9c78d !important;
  background: rgba(233, 199, 141, 0.07);
  border-color: rgba(233, 199, 141, 0.5);
}
.nfx-page .nfx-code-cta:hover {
  background: rgba(233, 199, 141, 0.13);
  border-color: rgba(233, 199, 141, 0.75);
}

/* ---- 4. Sticky apply pill goes red ---- */
.nfx-page .nfx-sticky-apply {
  color: #fff;
  background: linear-gradient(180deg, #e02c1f 0%, #a31410 100%);
  box-shadow:
    0 18px 44px -14px rgba(0, 0, 0, 0.75),
    0 10px 30px -12px rgba(206, 32, 26, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ---- 5. Scroll-progress thread: gold → red sweep ---- */
.nfx-page .nfx-scroll-progress {
  background: linear-gradient(90deg, #e9c78d, #ce201a);
  box-shadow: 0 0 12px rgba(206, 32, 26, 0.4);
}

/* ---- 6. Application overlay primaries go red too (one identity) ---- */
.nfx-page .nfx-af-submit {
  color: #fff;
  background: linear-gradient(180deg, #e02c1f 0%, #ce201a 55%, #a31410 100%);
  box-shadow:
    0 18px 42px -16px rgba(206, 32, 26, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

/* ---- 7. Hero video layer (VTUG reel placeholder) ---- */
.nfx-page .nfx-heroC--video {
  position: relative;
  overflow: hidden;
}
.nfx-page .nfx-heroC__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
/* Dark ambience over the moving footage — deeper than the static scrim so
   copy + the red CTA stay the loudest thing on screen. */
.nfx-page .nfx-heroC--video .nfx-heroC__scrim {
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(6, 6, 6, 0.3) 0%, rgba(6, 6, 6, 0.78) 78%),
    linear-gradient(180deg, rgba(6, 6, 6, 0.55) 0%, rgba(6, 6, 6, 0.35) 42%, var(--nfx-ink, #060606) 97%);
}
/* Reduced motion / data saver: drop the video entirely — the athlete PNG
   underneath is the designed fallback. */
@media (prefers-reduced-motion: reduce) {
  .nfx-page .nfx-heroC__video { display: none; }
}
