/* ==========================================================================
   WOYD — Wipe Out Your Debt
   House of Cars contest landing page.

   Contents
     01. Tokens
     02. Base & reset
     03. Utilities
     04. Atmosphere (gradients, mist, rays, bokeh, particles, skyline)
     05. Flying banknotes
     06. Header
     07. Hero & headline
     08. Script notes
     09. Stage & side cards
     10. Form shell & card
     11. Fields
     12. CTA
     13. Success state
     14. Features, tagline, footer
     15. Keyframes
     16. Responsive
     17. Reduced motion
   ========================================================================== */

/* ============================== 01. Tokens ============================== */

:root {
  /* Brand */
  --orange:       #ff5700;
  --orange-light: #ff8a45;
  --orange-deep:  #d63f00;
  --blue:         #00a8ff;
  --blue-light:   #7fd0ff;
  --navy:         #03172f;
  --dark-blue:    #061f3e;
  --white:        #ffffff;

  /* Derived surfaces */
  --edge:         rgba(122, 192, 255, .22);
  --edge-bright:  rgba(160, 214, 255, .42);

  /* Text */
  --text:         #eaf3ff;
  --text-muted:   #9db6d4;
  --text-faint:   #6f8bad;

  /* Glow */

  /* Feedback */
  --danger:       #ff6b5a;

  /* Shape */
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  34px;
  --pill:  999px;

  /* Google Sans Flex carries all live interface and campaign copy. The
     Microgramma headline remains baked into its separate 3D title model. */
  --font-display: "Google Sans Flex", system-ui, sans-serif;
  --font-body:    "Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script:  "Google Sans Flex", system-ui, sans-serif;

  /* Layout */
  --shell:     1320px;
  --form-w:    620px;
  --header-h:  58px;
}

/* ============================ 02. Base & reset =========================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--navy);
  /* The atmosphere layer is fixed, so the page must never scroll sideways. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

a { color: var(--blue-light); text-decoration: none; }

button, input, textarea { font: inherit; color: inherit; }

/* One visible focus treatment everywhere. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================= 03. Utilities ============================= */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: .85rem 1.4rem;
  background: var(--orange);
  color: var(--white);
  font-weight: 600;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* Honeypot: off-screen, not display:none — some bots skip hidden fields. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* --- Mouse parallax ---
   main.js writes --px / --py onto anything carrying data-depth. Only
   elements with no animation of their own are listed here: an ambient
   @keyframes rule replaces `transform` outright, so a layer cannot be
   driven by both at once. Animated layers bake their own offsets into
   their keyframes instead. */
.bokeh,
.particles,
.bill,
.headline {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}


/* =========================== 04. Atmosphere ============================== */

.atmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Base wash: navy, lifted slightly toward the centre so the middle of the
   screen reads as the lit area. */
.atmos__base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 8%,  #0a2c55 0%, transparent 60%),
    radial-gradient(100% 80% at 50% 100%, #04203f 0%, transparent 65%),
    linear-gradient(180deg, #041a35 0%, var(--navy) 100%);
  background-color: var(--navy);
}

/* Two big coloured lights, one cool one warm, drifting out of phase. */
.atmos__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.atmos__glow--blue {
  width: 62vw;
  height: 62vw;
  top: -18vw;
  left: -12vw;
  background: radial-gradient(circle, rgba(0, 140, 255, .5) 0%, rgba(0, 80, 190, .18) 45%, transparent 70%);
  animation: glowDriftA 26s ease-in-out infinite;
}
.atmos__glow--orange {
  width: 54vw;
  height: 54vw;
  right: -14vw;
  bottom: -16vw;
  background: radial-gradient(circle, rgba(255, 96, 20, .44) 0%, rgba(200, 60, 0, .16) 48%, transparent 72%);
  animation: glowDriftB 32s ease-in-out infinite;
}

/* Light shafts from top-centre. */
.atmos__rays {
  position: absolute;
  top: -30%;
  left: 50%;
  width: 150vw;
  height: 120vh;
  transform: translateX(-50%);
  background: repeating-conic-gradient(
    from 200deg at 50% 0%,
    rgba(150, 210, 255, .09) 0deg 2.2deg,
    transparent 2.2deg 9deg
  );
  filter: blur(22px);
  opacity: .55;
  mix-blend-mode: screen;
  animation: rayShift 40s ease-in-out infinite;
}

/* Mist: wide soft ellipses that slide horizontally. */
.atmos__mist {
  position: absolute;
  left: -25%;
  width: 150%;
  height: 46vh;
  filter: blur(48px);
  will-change: transform;
}
.atmos__mist--a {
  top: 26%;
  background:
    radial-gradient(45% 60% at 22% 50%, rgba(120, 190, 255, .16), transparent 70%),
    radial-gradient(38% 55% at 62% 45%, rgba(180, 220, 255, .12), transparent 70%),
    radial-gradient(40% 50% at 88% 60%, rgba(255, 140, 70, .10), transparent 70%);
  animation: mistDriftA 54s linear infinite;
}
.atmos__mist--b {
  bottom: 4%;
  height: 40vh;
  background:
    radial-gradient(42% 60% at 30% 50%, rgba(255, 120, 50, .13), transparent 70%),
    radial-gradient(40% 55% at 72% 55%, rgba(90, 170, 255, .14), transparent 70%);
  animation: mistDriftB 66s linear infinite;
}

/* Out-of-focus highlights. */
.bokeh { position: absolute; inset: 0; }
.bokeh__dot {
  position: absolute;
  border-radius: 50%;
  filter: blur(14px);
  opacity: .5;
  will-change: transform;
}
.bokeh__dot--1 { width: 190px; height: 190px; top: 12%; left: 14%;
  background: radial-gradient(circle, rgba(120, 200, 255, .5), transparent 68%);
  animation: floatSlow 24s ease-in-out infinite; }
.bokeh__dot--2 { width: 130px; height: 130px; top: 62%; left: 8%;
  background: radial-gradient(circle, rgba(255, 140, 60, .42), transparent 68%);
  animation: floatSlow 30s ease-in-out -8s infinite; }
.bokeh__dot--3 { width: 220px; height: 220px; top: 20%; right: 10%;
  background: radial-gradient(circle, rgba(90, 180, 255, .42), transparent 68%);
  animation: floatSlow 28s ease-in-out -14s infinite; }
.bokeh__dot--4 { width: 160px; height: 160px; bottom: 14%; right: 18%;
  background: radial-gradient(circle, rgba(255, 110, 40, .38), transparent 68%);
  animation: floatSlow 34s ease-in-out -4s infinite; }
.bokeh__dot--5 { width: 110px; height: 110px; top: 46%; left: 46%;
  background: radial-gradient(circle, rgba(180, 225, 255, .34), transparent 68%);
  animation: floatSlow 26s ease-in-out -18s infinite; }

/* Drifting motes. Cool only - the warm variant read as orange sparks
   flying across the hero and competed with the banknotes. */
.particles { position: absolute; inset: 0; }
.particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--blue-light);
  box-shadow: 0 0 10px 2px rgba(120, 200, 255, .55);
  opacity: var(--op);
  animation: moteRise var(--dur) linear var(--delay) infinite;
  will-change: transform;
}


/* ========================= 05. Flying banknotes ========================== */

.bills {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* Outer element owns position + mouse parallax; inner owns rotation, blur
   and the drift animation, so the two never fight over `transform`. */
.bill {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: var(--w);
  will-change: transform;
}

.bill__inner {
  opacity: var(--op);
  filter: blur(var(--blur)) drop-shadow(0 18px 26px rgba(0, 0, 0, .45));
  transform: rotate(var(--rot));
  animation: billDrift var(--dur) ease-in-out var(--delay) infinite;
  will-change: transform;
}

.bill svg { width: 100%; height: auto; }

/* ============================== 06. Header =============================== */

.site-header {
  position: relative;
  z-index: 20;
  padding: 1rem clamp(1rem, 3vw, 2.5rem) 0;
}

.site-header__bar {
  max-width: var(--shell);
  margin: 0 auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem clamp(.9rem, 2vw, 1.5rem);
  border-radius: var(--pill);
  background: rgba(4, 20, 42, .5);
  border: 1px solid rgba(130, 190, 255, .16);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .07) inset,
    0 18px 40px -22px rgba(0, 0, 0, .9);
}

.site-header__brand img {
  height: 34px;
  width: auto;
}

/* Pill button — orange edge, dark glass fill, glow on hover. */
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem 1.25rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(255, 87, 0, .1);
  border: 1px solid rgba(255, 110, 40, .6);
  border-radius: var(--pill);
  white-space: nowrap;
  transition: background-color .25s, box-shadow .25s, transform .2s, border-color .25s;
}
.pill-btn:hover {
  background: rgba(255, 87, 0, .22);
  border-color: var(--orange);
  box-shadow: 0 0 24px rgba(255, 87, 0, .45), 0 0 0 1px rgba(255, 140, 80, .3) inset;
  transform: translateY(-1px);
}
.pill-btn__arrow { width: 1rem; height: 1rem; transition: transform .25s; }
.pill-btn:hover .pill-btn__arrow { transform: translateX(3px); }

/* ========================= 07. Hero & headline =========================== */

.hero {
  position: relative;
  z-index: 10;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2.5rem) 0;
}

.hero__inner {
  flex: 1;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.headline {
  position: relative;   /* containing block for the script notes */
  width: 100%;
  text-align: center;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  will-change: transform;
}

.headline__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: .94;
  /* Heavy display type at this size needs tightening, not tracking. */
  letter-spacing: -.02em;
  text-transform: uppercase;
}

/* Two stacked copies of each line make the 3D read:
     · the element itself is solid dark and carries the extruded shadow stack
     · an ::after clone sits on top with the gradient clipped into the glyphs

   The clone has to be ::after rather than a negative-z ::before. Painting
   order runs background → negative-z children → inline text, so a
   `z-index:-1` pseudo lands *above* the element's own gradient background
   and hides it. A positioned ::after paints above the text instead, which
   is where the gradient needs to be. */
.headline__line {
  position: relative;
  display: block;
  font-size: clamp(2.9rem, 9.2vw, 8rem);
  color: #07172e;
  -webkit-text-fill-color: #07172e;
  text-shadow:
    0 1px 0 #0a1e3a, 0 2px 0 #0a1e3a, 0 3px 0 #091b34,
    0 4px 0 #08182f, 0 5px 0 #071529, 0 6px 0 #061224,
    0 14px 30px rgba(0, 0, 0, .6);
}

.headline__line::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-shadow: none;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  pointer-events: none;
}

.headline__line--top::after {
  background-image: linear-gradient(178deg, #ffd7b8 2%, #ff9c52 26%, var(--orange) 58%, #d33f00 100%);
  filter: drop-shadow(0 0 34px rgba(255, 87, 0, .55));
}

.headline__line--bot::after {
  background-image: linear-gradient(178deg, #ffffff 4%, #cfeaff 30%, var(--blue-light) 60%, var(--blue) 100%);
  filter: drop-shadow(0 0 34px rgba(0, 168, 255, .5));
}

.headline__kicker {
  margin-top: clamp(.9rem, 2vw, 1.35rem);
  font-size: clamp(.82rem, 1.5vw, 1rem);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .7);
}



/* Positioned to sit in the gaps the winner cards leave: the two upper notes
   ride above the top row of photos, the lower one drops below the bottom
   row and inboard of the feature strip. */


/* ========================== 09. Stage & winners ========================== */

.stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  perspective: 1500px;
}






/* --- Past-winner photo cards ---
   Same glass as the text cards, wrapped around a real photograph. One
   component, used twice: floating beside the form (.photo-card--float) and
   again in the winners wall further down the page.

   The wrapper is `display: contents` so each floating card positions itself
   against .stage rather than against this box. */
.winners { display: contents; }

.photo-card {
  margin: 0;
  padding: 10px 10px 12px;
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(14, 44, 84, .7), rgba(5, 22, 46, .8));
  border: 1px solid var(--edge);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .14) inset,
    0 28px 52px -24px rgba(0, 0, 0, .9),
    0 0 40px rgba(0, 130, 255, .16);
}

/* Only the hero copies float and rotate; the wall copies sit still. */
.photo-card--float {
  position: absolute;
  top: var(--pc-top);
  z-index: 14;
  width: var(--pc-w);
  transform: rotate(var(--pc-rot));
  animation: photoFloat 11s ease-in-out var(--pc-delay, 0s) infinite;
  will-change: transform;
}

.photo-card--left  { left: 0; }
.photo-card--right { right: 0; }

/* No fixed aspect ratio: each photo is shown whole and the frame takes
   whatever height that needs. The square 2022 shots and the portrait 2021
   ones therefore produce cards of different heights, which is the point —
   an even grid of identical rectangles reads as stock, not as a wall of
   real people. */
.photo-card__frame {
  position: relative;
  overflow: hidden;
  border-radius: 13px;
  background: var(--dark-blue);
  line-height: 0;
}

.photo-card__frame img {
  width: 100%;
  height: auto;
}

/* Warm the photos slightly so they sit inside the page's lighting rather
   than reading as pasted-in snapshots. */
.photo-card__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(3, 16, 34, .55) 100%),
    radial-gradient(80% 70% at 70% 20%, rgba(255, 120, 50, .14), transparent 70%);
  pointer-events: none;
}

.photo-card__caption {
  display: block;
  padding: .6rem .3rem 0;
}

.photo-card__year {
  display: block;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-light);
}

/* A winner from a different House of Cars contest. Marked in warm grey
   rather than the campaign blue so it does not read as a WOYD year. */
.photo-card__year--alt {
  color: #e6b48f;
  letter-spacing: .1em;
}

.photo-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .12rem;
}

.photo-card__amount {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--orange-light);
  text-shadow: 0 0 18px rgba(255, 87, 0, .5);
  font-variant-numeric: tabular-nums;
}

.photo-card__name {
  font-size: .74rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ======================= 10. Form shell & card =========================== */

.form-shell {
  position: relative;
  z-index: 15;
  width: min(100%, var(--form-w));
  transform-style: preserve-3d;
  will-change: transform;
}

/* Soft coloured bloom sitting behind the glass, which is what sells the
   "floating forward" read more than the card itself does. */
.form-shell__aura {
  position: absolute;
  inset: -12% -9%;
  z-index: -1;
  background:
    radial-gradient(58% 56% at 50% 42%, rgba(0, 150, 255, .42), transparent 70%),
    radial-gradient(46% 46% at 74% 84%, rgba(255, 87, 0, .30), transparent 72%),
    radial-gradient(40% 40% at 22% 78%, rgba(0, 190, 255, .22), transparent 74%);
  filter: blur(46px);
  pointer-events: none;
}

.form-card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--r-xl);
  background:
    linear-gradient(158deg, rgba(16, 48, 92, .74) 0%, rgba(6, 26, 54, .88) 52%, rgba(3, 18, 38, .92) 100%);
  border: 1px solid var(--edge-bright);
  backdrop-filter: blur(26px) saturate(155%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .22) inset,
    0 0 0 1px rgba(0, 168, 255, .1) inset,
    0 -1px 0 rgba(0, 0, 0, .4) inset,
    0 50px 90px -30px rgba(0, 0, 0, .9),
    0 0 70px rgba(0, 140, 255, .24),
    0 0 130px rgba(255, 87, 0, .1);
  transform: rotateX(2deg);
}

/* Thin illuminated top edge. */
.form-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190, 230, 255, .9), transparent);
  pointer-events: none;
}


.entry__alert {
  margin-bottom: 1.1rem;
  padding: .85rem 1rem;
  font-size: .85rem;
  border-radius: var(--r-sm);
  color: #ffd7d1;
  background: rgba(255, 80, 60, .12);
  border: 1px solid rgba(255, 107, 90, .45);
}

/* ============================== 11. Fields =============================== */

.entry__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.field { margin-bottom: 1rem; min-width: 0; }
.entry__row .field { margin-bottom: 0; }
.entry__row { margin-bottom: 1rem; }

.field__label {
  display: block;
  margin-bottom: .45rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field__box {
  position: relative;
  border-radius: var(--r-md);
  background: rgba(3, 16, 34, .62);
  border: 1px solid rgba(96, 160, 224, .28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset;
  transition: border-color .22s, box-shadow .22s, background-color .22s;
}

.field__box:hover { border-color: rgba(120, 190, 255, .45); }

/* Focus: cool ring plus a warm outer bloom, so the accent colour appears
   at the moment of interaction rather than sitting there statically. */
.field__box:focus-within {
  background: rgba(5, 24, 50, .78);
  border-color: rgba(0, 168, 255, .8);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .1) inset,
    0 0 0 3px rgba(0, 168, 255, .16),
    0 0 26px rgba(0, 168, 255, .28),
    0 0 46px rgba(255, 87, 0, .12);
}

.field__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--text-faint);
  transition: color .22s;
  pointer-events: none;
}
.field__icon .icon { width: 18px; height: 18px; }
.field__icon--top { top: 16px; transform: none; }
.field__box:focus-within .field__icon { color: var(--blue); }

.field__input {
  width: 100%;
  padding: .92rem 1rem .92rem 42px;
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  color: var(--white);
  font-size: .95rem;
}
.field__input:focus { outline: none; }
.field__input::placeholder { color: var(--text-faint); opacity: 1; }

/* Chrome paints its own autofill background; this keeps the glass look. */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--white);
  -webkit-box-shadow: 0 0 0 40px #061c3a inset;
  caret-color: var(--white);
}

.field__input--area {
  min-height: 128px;
  padding-top: .9rem;
  line-height: 1.6;
  resize: vertical;
}

.field__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .4rem;
}

.field__count {
  font-size: .74rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: auto;
}
.field__count--warn { color: var(--orange-light); }

.field__error {
  margin-top: .4rem;
  font-size: .78rem;
  font-weight: 500;
  color: var(--danger);
  display: none;
}
.field__error--on { display: block; }
.field__meta .field__error { margin-top: 0; }

.field__box--invalid {
  border-color: rgba(255, 107, 90, .7);
  background: rgba(60, 14, 12, .38);
}
.field__box--invalid:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 107, 90, .18), 0 0 24px rgba(255, 80, 60, .25);
}

/* =============================== 12. CTA ================================= */

.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  margin-top: 1.4rem;
  padding: 1.05rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--white);
  background: linear-gradient(135deg, #ff8340 0%, var(--orange) 46%, var(--orange-deep) 100%);
  border: 1px solid rgba(255, 168, 120, .65);
  border-radius: var(--pill);
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .4) inset,
    0 -2px 8px rgba(120, 30, 0, .4) inset,
    0 14px 34px -8px rgba(255, 87, 0, .6),
    0 0 34px rgba(255, 87, 0, .3);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s, filter .22s;
}

/* Slow pulse so the CTA breathes without flashing. */
.cta__glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 190, 150, .5), transparent 62%);
  opacity: .5;
  animation: ctaPulse 3.4s ease-in-out infinite;
  pointer-events: none;
}

.cta__label, .cta__arrow { position: relative; z-index: 1; }
.cta__arrow { width: 1.1rem; height: 1.1rem; transition: transform .22s; }

.cta:hover {
  transform: translateY(-3px) scale(1.018);
  filter: saturate(1.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .5) inset,
    0 -2px 8px rgba(120, 30, 0, .4) inset,
    0 20px 44px -8px rgba(255, 87, 0, .72),
    0 0 60px rgba(255, 87, 0, .5);
}
.cta:hover .cta__arrow { transform: translateX(4px); }
.cta:active { transform: translateY(-1px) scale(1.005); }

.cta[disabled] {
  cursor: not-allowed;
  filter: saturate(.55) brightness(.85);
  transform: none;
}
.cta[disabled] .cta__glow { animation: none; opacity: .2; }

.entry__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .95rem;
  font-size: .76rem;
  color: var(--text-faint);
}
.entry__lock { width: .95rem; height: .95rem; color: var(--blue); }

/* ========================== 13. Success state ============================ */

.entered { text-align: center; padding: 1.2rem 0 .6rem; }

.entered__check { width: 88px; height: 88px; margin: 0 auto 1.35rem; }
.entered__check svg { width: 100%; height: 100%; overflow: visible; }

.entered__circle,
.entered__tick {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.entered__circle {
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  filter: drop-shadow(0 0 10px rgba(0, 168, 255, .8));
  animation: drawCircle .7s cubic-bezier(.65, 0, .35, 1) forwards;
}
.entered__tick {
  stroke: var(--orange);
  stroke-width: 4;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  filter: drop-shadow(0 0 8px rgba(255, 87, 0, .85));
  animation: drawTick .42s cubic-bezier(.65, 0, .35, 1) .55s forwards;
}

.entered__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
  background-image: linear-gradient(178deg, #ffffff 10%, #cfeaff 50%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(0, 168, 255, .45));
}

.entered__copy {
  max-width: 30rem;
  margin: .7rem auto 0;
  color: var(--text-muted);
  line-height: 1.65;
}

.entered__ref {
  margin-top: 1.3rem;
  padding: .7rem 1rem;
  display: inline-block;
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  background: rgba(3, 16, 34, .55);
  border: 1px solid var(--edge);
}
.entered__ref strong {
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

/* ========================== 13b. Winners wall ============================ */

.wall {
  position: relative;
  width: 100%;
  margin-top: clamp(3.5rem, 8vw, 6rem);
}




.wall__head {
  max-width: 46rem;
  margin: 0 auto clamp(2.75rem, 5vw, 4rem);
  text-align: center;
}


.wall__title {
  margin-top: .7rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 3.3vw, 2.25rem);
  line-height: 1.15;
  /* Break into even lines instead of leaving one word stranded. */
  text-wrap: balance;
  letter-spacing: .02em;
  text-transform: uppercase;
  background-image: linear-gradient(178deg, #ffffff 10%, #cfeaff 52%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(0, 168, 255, .35));
}

.wall__copy {
  margin-top: 1rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Masonry via CSS columns: photos of different shapes each keep their own
   height and simply stack, with no cropping and no fixed row heights. */
.wall__grid {
  columns: 4;
  column-gap: 1.1rem;
}

.wall__grid .photo-card {
  break-inside: avoid;
  margin-bottom: 1.1rem;
  /* `break-inside` is unreliable on a flow root in some engines unless the
     item is display:inline-block or block with no float. Block is fine. */
  display: block;
  width: 100%;
}






/* ============================== 14. Footer =============================== */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem 1.6rem;
  max-width: var(--shell);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: 1.4rem 0 2rem;
  font-size: .78rem;
  color: var(--text-faint);
  border-top: 1px solid rgba(120, 180, 240, .1);
}
.site-footer a { color: var(--text-faint); transition: color .2s; }
.site-footer a:hover { color: var(--blue-light); }
.site-footer__note { opacity: .75; }

/* ============================ 15. Keyframes ============================== */

@keyframes glowDriftA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(5vw, 4vh, 0) scale(1.12); }
}
@keyframes glowDriftB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50%      { transform: translate3d(-6vw, -3vh, 0) scale(.95); }
}

@keyframes rayShift {
  0%, 100% { transform: translateX(-50%) rotate(0deg);   opacity: .5; }
  50%      { transform: translateX(-50%) rotate(3.5deg); opacity: .68; }
}

@keyframes mistDriftA {
  0%   { transform: translate3d(-8%, 0, 0); }
  50%  { transform: translate3d(8%, -2%, 0); }
  100% { transform: translate3d(-8%, 0, 0); }
}
@keyframes mistDriftB {
  0%   { transform: translate3d(7%, 0, 0); }
  50%  { transform: translate3d(-7%, 2%, 0); }
  100% { transform: translate3d(7%, 0, 0); }
}

@keyframes floatSlow {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -18px, 0); }
}

/* Motes rise, fade in at the bottom and out at the top. */
@keyframes moteRise {
  0%   { transform: translate3d(0, 0, 0);          opacity: 0; }
  12%  {                                            opacity: var(--op); }
  85%  {                                            opacity: var(--op); }
  100% { transform: translate3d(14px, -190px, 0);  opacity: 0; }
}

/* Bills keep their base rotation and add a slow drift + a few degrees of
   sway, so they read as tumbling rather than sliding. */
@keyframes billDrift {
  0%, 100% { transform: rotate(var(--rot)) translate3d(0, 0, 0); }
  50%      { transform: rotate(calc(var(--rot) + 5deg)) translate3d(12px, -42px, 0); }
}



@keyframes photoFloat {
  0%, 100% { transform: rotate(var(--pc-rot)) translate3d(0, 0, 0); }
  50%      { transform: rotate(var(--pc-rot)) translate3d(0, -13px, 0); }
}


@keyframes ctaPulse {
  0%, 100% { opacity: .34; transform: scale(.94); }
  50%      { opacity: .68; transform: scale(1.06); }
}

@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawTick   { to { stroke-dashoffset: 0; } }

/* ============================ 16. Responsive ============================= */

/* Side cards tuck in before they would collide with the form. */
/* Tablet: drop the side cards and half the money, keep the form large. */
@media (max-width: 1024px) {
  :root { --form-w: 610px; }

  .bill--hide-md { display: none; }

  
  /* The hero floats go: there is no gutter left to hold them once the side
     cards are gone. Nothing is lost — the winners wall below carries all
     seven on every screen size. */
  .winners { display: none; }

  .wall__grid { columns: 3; }

  
  }

/* Small tablet / large phone. */
@media (max-width: 760px) {
  .site-header__brand img { height: 28px; }

  .pill-btn {
    padding: .55rem 1rem;
    font-size: .7rem;
    letter-spacing: .1em;
  }

  }

/* Phone: single column, smaller headline, less decoration. */
@media (max-width: 620px) {
  .bill--hide-sm { display: none; }

  /* The survivors move to their `sm` position, out from under the headline.
     Inline styles only set the custom properties, never `top`/`left`/`width`
     themselves, so these declarations win without needing !important. */
  .bill {
    top: var(--top-sm, var(--top));
    left: var(--left-sm, var(--left));
    width: var(--w-sm, var(--w));
  }
  /* Softer too — at this size they are texture, not subject matter. */
  .bill__inner { opacity: .5; }

  .hero { padding-inline: 1rem; }

  .headline__line { font-size: clamp(2.1rem, 12vw, 3.4rem); }
  .headline__kicker { letter-spacing: .14em; }

  .entry__row { grid-template-columns: minmax(0, 1fr); }

  .form-card {
    padding: 1.35rem 1.1rem;
    border-radius: 24px;
    /* Flat on phones: a tilted card at this width just looks skewed. */
    transform: none;
  }

  
  /* The aura bleeds 9% past the form on either side, which is fine inside a
     1320px shell but pushes past the viewport edge on a phone. */
  .form-shell__aura { inset: -8% 0; }

  .wall__grid { columns: 2; column-gap: .75rem; }
  .wall__grid .photo-card { margin-bottom: .75rem; }
  .photo-card { padding: 7px 7px 9px; border-radius: 16px; }
  .photo-card__frame { border-radius: 10px; }
  .photo-card__amount { font-size: .98rem; }
  .photo-card__name { font-size: .68rem; }

  
  
  .site-footer { text-align: center; gap: .4rem 1rem; }

  /* backdrop-filter over a fixed, animated background is the single most
     expensive thing on this page; phones get a more opaque fill instead. */
  .form-card {
    background: linear-gradient(158deg, rgba(14, 42, 82, .93), rgba(3, 18, 38, .96));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

@media (max-width: 380px) {
  .site-header__bar { padding: .55rem .7rem; }
  .site-header__brand img { height: 24px; }
  .pill-btn span { display: none; }
  .pill-btn { padding: .55rem .7rem; }
}

/* Very short landscape windows: let the hero shrink rather than scroll. */
@media (max-height: 700px) and (min-width: 1024px) {
  .hero { min-height: auto; }
  .headline__line { font-size: clamp(3rem, 7.5vw, 6rem); }
}

/* ========================= 17. Reduced motion ============================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Kill the ambient loops outright rather than merely shortening them. */
  .atmos__glow,
.atmos__rays,
.atmos__mist,
.bokeh__dot,
.particle,
.bill__inner,
.form-shell,
.photo-card,
.cta__glow {
    animation: none !important;
  }

  /* The success tick still resolves, just instantly. */
  .entered__circle,
  .entered__tick {
    animation: none !important;
    stroke-dashoffset: 0;
  }

  *, *::before, *::after {
    transition-duration: .01ms !important;
  }

  .cta:hover { transform: none; }
}