/* ============================================================
   HOME PAGE
   ============================================================ */

/* ————— HERO ————— */
.hero{
  position:relative;
  min-height:100dvh;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  color:#F7F3EA;overflow:hidden;
  padding-bottom:clamp(5rem,10vw,10rem);
}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media img,
.hero-media video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 55%;
  transform-origin:center 45%;
  filter:contrast(1.05) saturate(.95);
  will-change:transform;
}
/* Ken Burns drift — slow, cinematic, always on unless reduced-motion */
.hero-media img.hero-bg{
  animation:heroKenBurns 32s ease-in-out infinite alternate;
}
@keyframes heroKenBurns{
  0%   { transform:scale(1.05) translate3d(0,0,0); }
  100% { transform:scale(1.14) translate3d(-1.5%,-1%,0); }
}
@media (prefers-reduced-motion:reduce){
  .hero-media img.hero-bg{animation:none;transform:scale(1.02)}
}
/* When a video track is loaded, hide the still */
.hero-media.has-video img.hero-bg{opacity:0;transition:opacity 1.6s ease}
.hero-media video{opacity:0;transition:opacity 1.6s ease}
.hero-media.has-video video.loaded{opacity:1}

/* Particle overlay — drifting embers/spray */
.hero-particles{
  position:absolute;top:0;left:0;z-index:1;pointer-events:none;
  display:block;
  width:100%;height:100%;
  mix-blend-mode:screen;opacity:.55;
}
@media (prefers-reduced-motion:reduce){.hero-particles{display:none}}

/* Brass shimmer sweep — countdown milestone celebration */
.hero-shimmer{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 30%,rgba(212,169,74,.28) 48%,rgba(255,224,150,.55) 50%,rgba(212,169,74,.28) 52%,transparent 70%);
  transform:translateX(-100%);
}
.hero-shimmer.sweep{
  animation:heroShimmerSweep 2.2s cubic-bezier(.35,.1,.25,1) 1;
}
@keyframes heroShimmerSweep{
  0%   { transform:translateX(-100%); opacity:0 }
  20%  { opacity:1 }
  100% { transform:translateX(100%); opacity:0 }
}

.hero-media .hero-scrim{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg,rgba(11,30,46,.45) 0%,rgba(11,30,46,.15) 30%,rgba(11,30,46,.25) 55%,rgba(11,30,46,.9) 100%),
    radial-gradient(ellipse at 30% 40%, rgba(11,30,46,0) 0%, rgba(11,30,46,.35) 70%);
}
.hero-content{
  position:relative;z-index:1;
  width:100%;
  padding-inline:clamp(1.5rem,5vw,4rem);
  padding-top:6rem;
  margin-inline:auto;
}
.hero-eyebrow{margin-bottom:1.5rem}
.hero-eyebrow .eyebrow{color:var(--color-accent-bright)}
.hero-eyebrow .eyebrow::before{background:var(--color-accent-bright)}

.hero-title{
  font-family:var(--font-display);
  font-size:clamp(2.8rem,7.5vw,7.5rem);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.035em;
  color:#F7F3EA;
  max-width:16ch;
}
.hero-title span{display:block}
.hero-title .italic-line em{
  font-style:italic;font-weight:300;
  color:var(--color-accent-bright);
}

.hero-lead{
  max-width:34em;margin-top:1.75rem;
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  color:rgba(247,243,234,.86);
  line-height:1.55;
}
.hero-cta{
  margin-top:2.5rem;
  display:flex;gap:1rem;flex-wrap:wrap;
}
.hero-scroll{
  position:absolute;
  right:clamp(1.5rem,5vw,4rem);bottom:1rem;
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(247,243,234,.6);
  writing-mode:vertical-rl;transform:rotate(180deg);
}
.hero-scroll .scroll-line{
  width:1px;height:60px;background:rgba(247,243,234,.4);
  animation:scrollTick 2.4s ease-in-out infinite;
  transform-origin:top;
}
@keyframes scrollTick{
  0%,100%{transform:scaleY(0.2)}
  50%{transform:scaleY(1)}
}
@media (max-width:700px){.hero-scroll{display:none}}

/* ————— COUNTDOWN ————— */
.countdown-section{
  padding-block:clamp(3rem,5vw,5rem);
  background:var(--color-surface);
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}
.countdown-grid{
  display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-8);
  align-items:center;
}
@media (max-width:900px){.countdown-grid{grid-template-columns:1fr;gap:2rem;text-align:center}}
.countdown-context .countdown-label{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:400;line-height:1.1;
  margin-top:.75rem;
}
.countdown-meta{
  margin-top:1rem;color:var(--color-text-muted);
  font-size:.95rem;
}
.countdown-meta [data-countdown-date]{font-weight:600;color:var(--color-text)}

.countdown-timer{
  display:flex;align-items:center;justify-content:flex-end;gap:.5rem;
  font-variant-numeric:tabular-nums lining-nums;
}
@media (max-width:900px){.countdown-timer{justify-content:center}}
.cd-unit{
  display:flex;flex-direction:column;align-items:center;
  padding:1rem 1rem .8rem;
  min-width:78px;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}
.cd-num{
  font-family:var(--font-display);
  font-size:clamp(2rem,3.5vw,3rem);
  font-weight:400;color:var(--color-accent);
  line-height:1;
  letter-spacing:-.02em;
}
.cd-lbl{
  margin-top:.5rem;
  font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--color-text-muted);
}
.cd-sep{
  font-family:var(--font-display);
  font-size:2rem;color:var(--color-text-faint);
  padding-inline:.25rem;
}
@media (max-width:500px){
  .cd-unit{min-width:60px;padding:.75rem .5rem .6rem}
  .cd-sep{display:none}
  .countdown-timer{gap:.5rem}
}

/* ————— STORY TEASER ————— */
.story-teaser-grid{
  display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(3rem,6vw,6rem);
  align-items:center;
}
@media (max-width:900px){.story-teaser-grid{grid-template-columns:1fr;gap:3rem}}
.story-teaser em{color:var(--color-accent)}
.portrait-frame{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.portrait-frame img{aspect-ratio:3/4;object-fit:cover;width:100%}
.portrait-frame figcaption{
  position:absolute;bottom:0;left:0;right:0;
  padding:1.25rem 1.5rem;
  background:linear-gradient(180deg,transparent 0%,rgba(11,30,46,.9) 100%);
  color:#EDE5CE;font-size:.85rem;
  font-family:var(--font-body);
}
.portrait-frame figcaption strong{color:var(--color-accent-bright)}

/* ————— SPONSORSHIP TEASER ————— */
.sponsorship-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,6rem);
  align-items:center;
}
@media (max-width:900px){.sponsorship-grid{grid-template-columns:1fr}}
.tier-preview{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.tier-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 1.5rem;
  border-bottom:1px solid var(--color-divider);
  transition:background var(--transition-interactive);
}
.tier-row:last-child{border-bottom:none}
.tier-row:hover{background:var(--color-surface-2)}
.tier-name{font-family:var(--font-display);font-size:1.15rem;font-weight:400}
.tier-amount{font-family:var(--font-body);font-weight:600;color:var(--color-accent);font-variant-numeric:tabular-nums}
.tier-row.highlighted{background:linear-gradient(90deg,transparent, color-mix(in oklab,var(--color-accent) 12%,transparent))}
.tier-row.highlighted .tier-name{color:var(--color-accent)}

/* ————— DONOR WALL ————— */
.donor-wall-section{
  padding-block:6rem 5rem;
  background:var(--color-surface-offset);
  overflow:hidden;
}
.donor-wall{
  width:100%;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
}
.donor-track{
  display:inline-flex;align-items:center;gap:2.5rem;
  padding-block:1.5rem;
  animation:donorScroll 55s linear infinite;
  white-space:nowrap;
}
@keyframes donorScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.donor-track:hover{animation-play-state:paused}
.donor-name{
  font-family:var(--font-display);
  font-size:clamp(1.25rem,2.2vw,1.8rem);
  font-weight:300;
  color:var(--color-text);
  letter-spacing:-.01em;
}
.donor-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--color-accent);flex-shrink:0;
}