/* ==========================================================
   /VegasForAthletes: QR code landing page
   ========================================================== */
.cause-body { background: #0b1124; color: #e8ecf7; }
/* Header stays hidden over the dark section, then slides in (white, fixed)
   once the white section reaches the top. Toggled by js/main.js. */
.cause-body .nav {
  position: fixed; top: 0; left: 0; right: 0;
  background: #fff; border-bottom-color: var(--line);
  transform: translateY(-100%); visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}
.cause-body .nav.show {
  transform: none; visibility: visible;
  transition: transform .3s ease, visibility 0s;
  box-shadow: 0 4px 20px rgba(22, 32, 58, .06);
}

/* Hero */
.awful {
  min-height: 100svh;
  display: grid; place-items: start center; text-align: center;
  padding: clamp(56px, 15vh, 170px) 0 96px; position: relative; overflow: hidden;
  background: radial-gradient(700px 420px at 50% 40%, rgba(223, 52, 48, .22), transparent 70%);
}
.awful h1 {
  font-family: var(--brush); font-weight: 400; letter-spacing: 0;
  font-size: clamp(38px, 7.5vw, 92px); line-height: .98; color: #fff;
  text-shadow: 0 6px 40px rgba(223, 52, 48, .35);
  will-change: transform; /* own layer: its blurry glow isn't repainted while the heartbeat animates */
}
.awful .pulse { will-change: transform; }
/* Top heartbeat path is longer than 900 units, so it needs a longer dash to draw in fully */
.awful .pulse path { stroke-dasharray: 1300; stroke-dashoffset: 1300; animation-name: trace-long; }
@keyframes trace-long { 0% { stroke-dashoffset: 1300; } 55% { stroke-dashoffset: 0; } 75% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } /* heartbeat on its own layer so only it redraws each frame */
.awful h1 span { color: var(--red); display: block; font-size: clamp(83px, 17.6vw, 211px); line-height: .95; margin-top: .05em; }
.awful .lede { font-size: clamp(18px, 2.4vw, 22px); color: #b9c2dc; max-width: 620px; margin: 28px auto 36px; }
.pulse {
  width: 100%; max-width: 1000px; height: 70px; margin: 0 auto 30px; color: var(--red);
  overflow: visible; /* the tallest spike rises just above the drawing area */
}
.pulse path {
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: trace 3.2s ease-in-out infinite;
}
@keyframes trace { 0% { stroke-dashoffset: 900; } 55% { stroke-dashoffset: 0; } 75% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.awful .scroll-cue, .stats-cue { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); }
.stats-lede { text-align: center; max-width: 860px; margin: 40px auto 0; color: #fff; font-weight: 700; line-height: 1.4; font-size: clamp(22px, 3.2vw, 32px); }
.scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; color: #8d97b5; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.scroll-cue svg { width: 22px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* Flatline under the fact boxes (animation lives in the SVG itself) */
.pulse.flatline { display: block; margin: 0 auto; overflow: visible; }
.pulse.flatline path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }

/* Stats */
.stats { position: relative; padding: 40px 0 180px; scroll-margin-top: 24px; }
.stats-label { text-align: center; margin: 0 auto 36px; }
.stats-label .eyebrow { color: var(--red); }
.stats-label h2 { font-size: clamp(30px, 4.4vw, 46px); color: #fff; margin-top: 10px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; gap: 20px; margin-bottom: 72px; }
.stat {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--radius); padding: 30px;
}
.stat.feature { grid-column: span 3; display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; padding: 40px; border-color: rgba(223, 52, 48, .35); background: linear-gradient(135deg, rgba(223, 52, 48, .16), rgba(255, 255, 255, .02)); }
.stat .n { white-space: nowrap; font-size: clamp(34px, 4.2vw, 56px); font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.stat.feature .n { font-size: clamp(64px, 11vw, 120px); color: var(--red); }
.stat .t { color: #c7cee3; margin-top: 12px; font-size: 16.5px; }
.stat.feature .t { margin-top: 0; font-size: clamp(18px, 2.2vw, 22px); color: #e8ecf7; }
.stat sup { font-size: 11px; color: #7f89a8; font-weight: 600; margin-left: 2px; }
.stat sup a { color: inherit; text-decoration: none; }

/* Fact boxes grow when hovered (mouse/trackpad only) */
@media (hover: hover) {
  .stat.reveal.in { transition: opacity .7s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .stat.reveal.in:hover {
    transform: scale(1.05); position: relative; z-index: 1;
    border-color: rgba(255, 255, 255, .25);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  }
  .stat.feature.reveal.in:hover { transform: scale(1.03); border-color: rgba(223, 52, 48, .6); }
  .pledge > div.reveal.in { transition: opacity .7s ease, transform .25s ease, box-shadow .25s ease; }
  .pledge > div.reveal.in:hover {
    transform: scale(1.05); position: relative; z-index: 1;
    box-shadow: 0 18px 44px rgba(27, 69, 160, .16);
  }
}

/* Good news / pledge */
.turn { overflow: hidden; scroll-margin-top: 0; background: #fff; color: var(--ink); padding: 140px 0 130px; text-align: center; }
.turn h2 { font-size: clamp(34px, 5vw, 56px); max-width: 820px; margin: 0 auto 44px; color: #0b1124; }
.turn h2 em { font-style: normal; color: var(--red); }
.turn .lead { max-width: 640px; margin: 0 auto; color: var(--ink-2); font-size: 19px; line-height: 1.65; }
/* Big logo: a yellow glow radiating outward from the logo's OUTER outline only,
   reaching toward the edges of the page. It flares when the logo first scrolls into
   view, then fades away for good (until the page is reloaded).
   - images/logo-hull.png is one smooth filled shape around the whole logo (letters,
     heart and bottom text merged, all gaps filled).
   - .halo layers: that shape, blurred at three sizes (blur sits on the outer span;
     the inner <i> is cut to the shape with a mask).
   - .halo-cover: the same shape in solid white on top of the glow, so nothing glows
     inside the logo or between its parts. */
/* everything else in this section sits above the glow */
.turn .wrap > * { position: relative; z-index: 1; }
.turn .wrap > .logo-aura { z-index: 0; }
.logo-aura { position: relative; isolation: isolate; width: min(500px, 85%); margin: 96px auto 0; }
.logo-aura .logo { position: relative; }
/* the outline image has 60px of room around the logo (1154x741 vs 1034x621), so extend the layers to match */
.halo, .halo-cover { position: absolute; inset: -9.6618% -5.8027%; z-index: -1; pointer-events: none; }
.halo { opacity: 0; }
.halo i, .halo-cover {
  -webkit-mask: url("/images/logo-hull.png?v=1791913775") center / 100% 100% no-repeat;
          mask: url("/images/logo-hull.png?v=1791913775") center / 100% 100% no-repeat;
}
.halo i { position: absolute; inset: 0; }
.halo-cover { background: #fff; filter: blur(6px); }
.halo-far  { filter: blur(110px); transform: scale(1.7, 1.45); }
.halo-far i  { background: #ffd84a; }
.halo-mid  { filter: blur(40px); transform: scale(1.12); }
.halo-mid i  { background: #ffd23f; }
.halo-near { filter: blur(12px); transform: scale(1.02); }
.halo-near i { background: #ffdc55; }
/* plays once, when .reveal adds .in as the logo scrolls into view */
.logo-aura.in .halo { animation: aura-flare 5.5s ease-out .3s forwards; }
.logo-aura.in .halo-mid { animation-delay: .4s; }
.logo-aura.in .halo-far { animation-delay: .5s; }
@keyframes aura-flare {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  30%  { opacity: .8; }
  45%  { opacity: 1; }
  60%  { opacity: .9; }
  100% { opacity: 0; }
}

.turn img.logo { width: 100%; margin: 0; }
.pitch { max-width: 880px; margin: 80px auto 0; }
.pitch h3 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.pitch h3 span { color: var(--red); display: block; }
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 52px 0 44px; }
.reason {
  border: 2px solid var(--line); border-radius: var(--radius); padding: 30px 26px;
  text-align: center; display: flex; flex-direction: column; gap: 10px;
}
@media (hover: hover) {
  .reason { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; background: #fff; }
  .reason:hover { transform: scale(1.05); position: relative; z-index: 1; border-color: transparent; box-shadow: 0 18px 44px rgba(27, 69, 160, .16); }
}
.reason strong { font-size: clamp(32px, 4vw, 42px); font-weight: 800; color: var(--blue); letter-spacing: -0.03em; line-height: 1; }
.reason span strong.em { font-size: inherit; font-weight: 800; color: var(--ink); letter-spacing: 0; line-height: inherit; }
.reason span { color: var(--ink-2); font-size: 15.5px; line-height: 1.45; }
.reason sup { font-size: 11px; color: var(--ink-3); font-weight: 600; margin-left: 2px; }
.reason sup a { color: inherit; text-decoration: none; }
.zero { display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: fit-content; gap: 6px; margin: 0 auto 40px; font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: 0; }
.zero strong { font-weight: 800; letter-spacing: .02em; }
.pitch-btn { gap: 24px; line-height: 1.25; font-size: 26px; padding: 24px 46px 24px 58px; animation: nudge 2.6s ease-in-out infinite; }
@keyframes nudge { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(1.05); } 94% { transform: scale(.99); } }
.pb-text { display: flex; flex-direction: column; gap: 10px; }
.pb-arrow { font-size: 34px; line-height: 1; }
.pitch-micro { margin-top: 60px; color: var(--ink-3); font-size: 14px; font-weight: 600; letter-spacing: .04em; }
@media (max-width: 700px) {
  .reasons { grid-template-columns: 1fr; gap: 10px; }
  .reason { flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 16px 18px; }
  .reason strong { flex: none; min-width: 108px; font-size: 30px; }
  .pitch-btn { width: 100%; font-size: 22px; padding: 22px 20px; }
}
.pledge { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; text-align: left; }
.pledge div { background: var(--blue-tint); border-radius: var(--radius); padding: 28px; }
.pledge strong { display: block; font-size: 36px; color: var(--blue); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 8px; }
.pledge p { color: var(--ink-2); }

/* Charity link */

/* Sources */
.sources { background: #0b1124; padding: 56px 0 24px; color: #8d97b5; font-size: 13px; }
.sources h3 { color: #cfd6ea; font-size: 15px; margin-bottom: 14px; letter-spacing: 0; }
.sources ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.sources a { color: #aab7dc; }
.sources .note { margin-top: 16px; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .pledge { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .stat-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .stat.feature { grid-column: span 1; grid-template-columns: 1fr; gap: 12px; padding: 30px; }
  .turn, .charity { padding: 72px 0; }
}