/* Landing page styles - extends shared.css
   Extracted from landing-v4.html during LW-DO-044.
   Keep page-specific landing rules and intentional overrides here. */

/* Shared theme tokens, resets, nav, background blobs, and base components
   come from shared.css. This file keeps landing-specific layout plus the
   intentional landing overrides that are still different. */

/* ---- Page layout ---- */
.ic{display:inline-flex;align-items:center;justify-content:center}
.ic svg{display:block}
.wrap{max-width:860px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.hero{position:relative;overflow:hidden;padding:30px 0 36px;z-index:2}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.display-xl, h1.display {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 4.75rem);
  line-height: 1.36;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--on-background);
}
h2, .headline-lg {
  font-family: var(--font-display);
  font-size: 2.125rem;
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--on-background);
}
h3, .headline-md {
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: 1.28;
  font-weight: 600;
  color: var(--on-surface);
}
.body-lg { font-size: 1.125rem; line-height: 1.65; color: var(--on-surface-variant); font-family: var(--font-sans); }
.body-md, p { font-size: 1rem; line-height: 1.55; color: var(--on-surface-variant); font-family: var(--font-sans); }
.body-sm { font-size: 0.875rem; line-height: 1.55; color: var(--on-surface-variant); font-family: var(--font-sans); }
.label-sm {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  line-height: 1.2;
  color: var(--on-surface);
  font-family: var(--font-sans);
}

/* ============================================================
   COMPONENTS
   ============================================================ */
/* .lw-logo — handled by shared.css */

.glass-panel {
  position: relative;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgb(255 253 249 / 0.82), rgb(238 222 202 / 0.46)),
    color-mix(in srgb, var(--surface-container-low) 84%, transparent);
  box-shadow:
    0 24px 64px rgba(53,31,7,0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.78),
    inset 0 -1px 0 rgb(95 62 0 / 0.12);
  backdrop-filter: blur(2.9px) brightness(1.02);
  -webkit-backdrop-filter: blur(2.9px) brightness(1.02);
  border: 1.5px solid transparent;
  background-clip: padding-box, padding-box;
}
.glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--primary-fixed-dim) 58%, transparent) 0%,
    color-mix(in srgb, var(--outline-variant) 64%, transparent) 45%,
    color-mix(in srgb, var(--warm) 34%, transparent) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

[data-theme="warm-wood"] .glass-panel {
  background:
    linear-gradient(180deg, rgb(255 252 246 / 0.70), rgb(252 246 234 / 0.55)),
    color-mix(in srgb, var(--surface-container-lowest) 40%, transparent);
  box-shadow:
    0 24px 64px rgba(53,31,7,0.16),
    0 0 28px rgba(82,48,12,0.10),
    inset 0 1px 0 rgb(255 255 255 / 0.72),
    inset 0 -1px 0 rgb(82 48 12 / 0.08);
}

.btn-primary {
  height: 52px;
  padding: 0 2rem;
  background: var(--primary);
  color: var(--on-primary);
  border: 1.5px solid color-mix(in srgb, var(--primary) 70%, var(--deep-navy));
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 30%, transparent); }
.btn-primary:active { transform: scale(0.97); box-shadow: none; transition-duration: 50ms; }

/* .btn-secondary — handled by shared.css */

.badge-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--primary-container) 22%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--primary);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* .chip — handled by shared.css */

/* ============================================================
   NAV
   ============================================================ */
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.nav-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nav-r a.login{font-size:14px;font-weight:600;color:var(--on-surface-variant)}
.nav-r a.login:hover{color:var(--primary)}
.lang{display:inline-flex;align-items:center;gap:2px;background:var(--surface-container);border-radius:9999px;padding:3px}
.lang span{font-size:12px;font-weight:700;padding:4px 9px;border-radius:9999px;color:var(--on-surface-variant);cursor:pointer;user-select:none;transition:all 0.18s}
.lang span.on{background:var(--primary);color:var(--on-primary)}
.lang span:not(.on):hover{color:var(--on-surface)}

/* .theme-toggle, .theme-toggle-track, .theme-toggle-thumb, .t-sun, .t-moon — handled by shared.css */

/* ============================================================
   HERO
   ============================================================ */
.hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%, var(--hero-glow-1), transparent 50%),
    radial-gradient(circle at 90% 10%, var(--hero-glow-2), transparent 44%);
  -webkit-mask-image:linear-gradient(to bottom,#000 22%,transparent 90%);
  mask-image:linear-gradient(to bottom,#000 22%,transparent 90%);
}
.hero-row{position:relative;display:flex;gap:36px;align-items:flex-start;flex-wrap:wrap}
.hero-left{flex:1 1 380px;min-width:300px;max-width:470px;position:relative;z-index:1}
[data-theme="warm-wood"] .hero-left::before{
  content:"";
  position:absolute;
  inset:-60px -120px -50px -100px;
  z-index:-1;
  background:radial-gradient(ellipse 130% 110% at 35% 42%,
    rgba(255,253,248,0.52) 0%,
    rgba(255,251,244,0.34) 28%,
    rgba(255,250,240,0.14) 58%,
    transparent 78%);
  filter:blur(42px);
  pointer-events:none;
}

.badge-online{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:9999px;
  background:color-mix(in srgb,var(--sage) 16%,transparent);
  border:1.5px solid color-mix(in srgb,var(--sage) 44%,transparent);
  color:var(--sage);font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
}
.badge-online .d{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulseGlow 2.2s ease-in-out infinite}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 0 currentColor}
  50%{box-shadow:0 0 0 5px transparent}
}

.hero h1{
  font-family: var(--font-display);
  font-size:clamp(34px,4.6vw,52px);
  line-height:1.12;
  letter-spacing:-0.025em;
  font-weight:700;
  background: var(--hero-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top:18px;
}
.hero .lede{font-size:17px;line-height:1.6;color:var(--on-surface-variant);max-width:420px;margin-top:18px}
.hero .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;max-width:440px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.hero .perm{font-size:13px;color:var(--outline);margin-top:14px}

.start-card{
  flex:0 1 300px;min-width:270px;padding:22px;margin-top:42px;
  animation: floatUpDown 5s ease-in-out infinite;
}
@keyframes floatUpDown {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-6px); }
}
.start-card .kicker{font-size:11px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--primary)}
.start-card h3{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--on-surface);line-height:1.22;margin-top:10px}
.start-card p{font-size:14px;line-height:1.55;color:var(--on-surface-variant);margin-top:8px}
.start-card .foot{
  display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;
  border-top:1px solid color-mix(in srgb,var(--outline-variant) 38%,transparent);
}
.ava{border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-weight:700;color:#2a1c00;border:2px solid var(--surface-container-lowest)}
.ava.sage{background:linear-gradient(135deg,#6fa093,#aec9c0);color:#13241f}
.ava.gold{background:linear-gradient(135deg,#ffba1f,#ffe0a3);color:#3a2a00}
.ava.bronze{background:linear-gradient(135deg,#cf8a4a,#f0c890);color:#3a2400}
.ava.coral{background:linear-gradient(135deg,#ff8a72,#ffc7bb);color:#4a1409}
.stack .ava{width:34px;height:34px;font-size:13px}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:38px 0}
.s-title{
  font-family:var(--font-display);
  font-size:clamp(26px,3.2vw,34px);
  font-weight:600;
  letter-spacing:-0.015em;
  color:var(--on-background);
  text-align:center;
  line-height:1.12;
}
.s-title.l{text-align:left}
.s-sub{font-size:14px;color:var(--on-surface-variant);margin-top:6px}

/* ----- shared glass base for every card on the page -----
   Same principle as .final-card: frosted translucent fill, backdrop blur,
   light inner rim + soft glow, layered drop shadow. Subtler than the CTA
   (no travelling glow) — a calm base meant to be tuned per card. */
.card{
  background:
    linear-gradient(169deg,
      rgba(255,252,246,0.68) 0%,
      rgb(255 250 240 / 0%) 55%,
      rgba(252,246,234,0.48) 100%),
    linear-gradient(202deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 0%));
  border:1px solid rgba(255,255,255,0.55);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(1.5px) brightness(1.06);
  -webkit-backdrop-filter:blur(1.5px) brightness(1.06);
  box-shadow:
    0 16px 38px -14px rgba(53,31,7,0.18),
    0 4px 12px -6px rgba(82,48,12,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.70),
    inset 0 0 22px rgba(255,255,255,0.36),
    inset 0 -16px 24px -24px rgba(82,48,12,0.08);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.card:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(155deg,
      rgba(255,252,246,0.80) 0%,
      rgba(255,250,240,0.68) 55%,
      rgba(252,246,234,0.58) 100%),
    linear-gradient(0deg, rgba(255,255,255,0.32), rgba(255,255,255,0.32));
  box-shadow:
    0 24px 52px -14px rgba(53,31,7,0.24),
    0 6px 16px -6px rgba(82,48,12,0.16),
    inset 0 0 0 1px rgba(255,255,255,0.78),
    inset 0 0 26px rgba(255,255,255,0.42),
    inset 0 -18px 26px -24px rgba(82,48,12,0.10);
}

[data-theme="warm-dark"] .card {
  /* darker glass: a flat dark tint under the sheen so the blurred backdrop
     reads darker and light text gains contrast (final-card overrides this). */
  background:
    linear-gradient(155deg,
      rgba(255,255,255,0.07) 0%,
      rgba(255,255,255,0.035) 55%,
      rgba(255,255,255,0.02) 100%),
    linear-gradient(0deg, rgba(16,11,6,0.46), rgba(16,11,6,0.46));
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px) saturate(135%) brightness(1.02);
  -webkit-backdrop-filter: blur(14px) saturate(135%) brightness(1.02);
  box-shadow:
    0 18px 40px -16px rgba(0,0,0,0.55),
    0 5px 14px -8px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.42),
    inset 0 0 26px rgba(255,255,255,0.10);
}

/* crisper text on the frosted cards — excludes the final CTA, which stays
   exactly as committed. text-shadow is inherited, so :not() is required. */
[data-theme="warm-dark"] .card:not(.final-card),
[data-theme="warm-dark"] .start-card {
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

/* trust rows */
.rows{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.trust-row{display:flex;gap:16px;align-items:flex-start;padding:20px;justify-content:flex-start;flex-wrap:nowrap}
.icon-tile{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.trust-row h3{font-size:16px;font-weight:700;color:var(--on-surface);margin-bottom:5px}
.trust-row p{font-size:14px;line-height:1.55;color:var(--on-surface-variant)}

/* how it works */
.steps{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.step-row{display:flex;gap:16px;align-items:flex-start}
.step-num{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:linear-gradient(135deg, var(--step-num-from), var(--step-num-to));
  color:var(--on-primary-fixed);
  font-family:var(--font-sans);font-weight:800;font-size:16px;
  box-shadow:0 6px 16px var(--step-shadow);
}
.step-card{flex:1;padding:16px 18px}
.step-card h3{font-size:15px;font-weight:700;color:var(--on-surface);margin-bottom:4px}
.step-card p{font-size:14px;line-height:1.55;color:var(--on-surface-variant)}

/* volunteers */
.vols{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.vol{padding:20px;display:flex;flex-direction:column;gap:14px}
.vol-head{display:flex;gap:14px;align-items:flex-start}
.vol-head>.ava{width:48px;height:48px;font-size:16px;flex:0 0 auto}
.vol-body{flex:1;min-width:0}
.vol-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.vol-name{font-size:16px;font-weight:700;color:var(--on-surface);white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:9999px}
.pill.on{background:color-mix(in srgb,var(--sage) 16%,transparent);border:1.5px solid color-mix(in srgb,var(--sage) 44%,transparent);color:var(--sage)}
.pill.off{background:color-mix(in srgb,var(--outline) 10%,transparent);border:1.5px solid color-mix(in srgb,var(--outline) 35%,transparent);color:var(--outline)}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.vol-bio{font-size:14px;line-height:1.55;color:var(--on-surface-variant);margin-top:6px}
.vol-tags{display:flex;flex-wrap:wrap;gap:6px}
.btn-disabled{
  display:flex;align-items:center;justify-content:center;width:100%;height:44px;
  border-radius:var(--radius-lg);
  background:var(--surface-container);
  color:var(--on-surface-variant);
  font-size:13px;font-weight:600;
  border:1.5px solid color-mix(in srgb,var(--outline-variant) 50%,transparent);
}

/* final cta */
.final{padding:44px 32px;text-align:center;display:flex;flex-direction:column;align-items:center}
.final .heart{color:var(--primary);margin:0 auto 12px;display:block}
.final h2{font-family:var(--font-display);font-size:clamp(28px,3.4vw,36px);font-weight:600;letter-spacing:-0.018em;color:var(--on-background)}
.final p{font-size:16px;color:var(--on-surface-variant);margin:12px auto 22px;max-width:440px;line-height:1.55}
/* Travelling warm glow lives inside the card's own inset shadow — the soft
   inner light the user committed, but each edge's colour pulses in turn so a
   warm highlight drifts CCW around the rim. Peak amber → mid → transparent
   (never a dark band), so the card always reads as one whole piece. */
@property --glow-top{    syntax:'<color>'; initial-value:transparent; inherits:false; }
@property --glow-right{  syntax:'<color>'; initial-value:transparent; inherits:false; }
@property --glow-bottom{ syntax:'<color>'; initial-value:transparent; inherits:false; }
@property --glow-left{   syntax:'<color>'; initial-value:transparent; inherits:false; }
.final-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:28px;
  background:linear-gradient(
    160deg,
    rgba(255,252,246,0.72) 0%,
    rgba(255,250,240,0.60) 45%,
    rgba(252,246,234,0.50) 100%
  );
  backdrop-filter:blur(2.9px) brightness(1.06);
  -webkit-backdrop-filter:blur(2.9px) brightness(1.06);
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:
    0 30px 60px -12px rgba(53,31,7,0.20),
    0 8px 20px -8px rgba(82,48,12,0.14),
    inset 0   28px 40px -22px var(--glow-top),
    inset 0  -28px 40px -22px var(--glow-bottom),
    inset  28px 0 40px -22px var(--glow-left),
    inset -28px 0 40px -22px var(--glow-right),
    inset 0 80px 70px -60px rgba(255,255,255,0.38),
    inset 0 -80px 70px -60px rgba(82,48,12,0.08),
    inset 70px 0 60px -55px rgba(255,255,255,0.30),
    inset -70px 0 60px -55px rgba(82,48,12,0.06),
    inset 0 0 0 1px rgba(255,255,255,0.68),
    inset 0 0 26px rgba(255,255,255,0.36),
    inset 0 0 62px rgba(255,248,238,0.18);
  animation:
    lw-glow-top    11s linear infinite,
    lw-glow-left   11s linear infinite,
    lw-glow-bottom 11s linear infinite,
    lw-glow-right  11s linear infinite;
}
@keyframes lw-glow-top{
  0%,100%{ --glow-top: rgba(169,120,48,0.60); }
  25%    { --glow-top: rgba(130,85,35,0.22); }
  50%    { --glow-top: transparent; }
  75%    { --glow-top: rgba(130,85,35,0.22); }
}
@keyframes lw-glow-left{
  0%,100%{ --glow-left: rgba(130,85,35,0.22); }
  25%    { --glow-left: rgba(169,120,48,0.60); }
  50%    { --glow-left: rgba(130,85,35,0.22); }
  75%    { --glow-left: transparent; }
}
@keyframes lw-glow-bottom{
  0%,100%{ --glow-bottom: transparent; }
  25%    { --glow-bottom: rgba(130,85,35,0.22); }
  50%    { --glow-bottom: rgba(169,120,48,0.60); }
  75%    { --glow-bottom: rgba(130,85,35,0.22); }
}
@keyframes lw-glow-right{
  0%,100%{ --glow-right: rgba(130,85,35,0.22); }
  25%    { --glow-right: transparent; }
  50%    { --glow-right: rgba(130,85,35,0.22); }
  75%    { --glow-right: rgba(169,120,48,0.60); }
}
[data-theme="warm-dark"] .final-card{
  background:linear-gradient(
    160deg,
    rgba(255,255,255,0.14) 0%,
    rgba(255,255,255,0.07) 45%,
    rgba(255,255,255,0.04) 100%
  );
  border-color:rgba(255,255,255,0.22);
  box-shadow:
    0 30px 60px -12px rgba(0,0,0,0.60),
    0 8px 20px -8px rgba(0,0,0,0.40),
    inset 0   28px 40px -22px var(--glow-top),
    inset 0  -28px 40px -22px var(--glow-bottom),
    inset  28px 0 40px -22px var(--glow-left),
    inset -28px 0 40px -22px var(--glow-right),
    inset 0 80px 70px -60px rgba(0,0,0,0.32),
    inset 0 -80px 70px -60px rgba(0,0,0,0.32),
    inset 70px 0 60px -55px rgba(0,0,0,0.20),
    inset -70px 0 60px -55px rgba(0,0,0,0.20),
    inset 0 0 0 1px rgba(255,255,255,0.70),
    inset 0 0 28px rgba(255,255,255,0.40),
    inset 0 0 70px rgba(255,255,255,0.18);
}

/* footer */
footer .fl{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:14px 0 12px}
footer .fl a{font-size:14px;color:var(--on-surface-variant)}
footer .fl a:hover{color:var(--primary)}
footer .cr{font-size:13px;color:var(--outline)}

/* ============================================================
   AURORA BUTTON — theme-aware particles
   ============================================================ */
.aurora-button-wrap{position:relative;display:inline-block;isolation:isolate}
.aurora-button-wrap .aurora-button{position:relative;z-index:3}
.aurora-particles{position:absolute;inset:-36px;z-index:1;pointer-events:none}
.aurora-particles .particle{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle, rgb(255 255 255 / 0.95) 0%, var(--particle-mid) 35%, var(--particle-edge) 70%);
  filter:blur(0.5px);
  box-shadow:0 0 8px var(--particle-glow);
  opacity:0;animation:lw-particle-float 10s ease-in-out infinite;will-change:transform,opacity;
}
.aurora-button-wrap:hover .aurora-particles .particle{animation-duration:6s}
.aurora-particles .p1 {width:7px;height:7px;top:22%;left:-4%;animation-delay:0.0s;--tx:-22px;--ty:-16px}
.aurora-particles .p2 {width:5px;height:5px;top:-8%;left:24%;animation-delay:0.7s;--tx:-8px;--ty:-26px}
.aurora-particles .p3 {width:9px;height:9px;top:-6%;left:46%;animation-delay:1.4s;--tx:14px;--ty:-30px}
.aurora-particles .p4 {width:6px;height:6px;top:28%;right:-5%;animation-delay:2.0s;--tx:22px;--ty:-10px}
.aurora-particles .p5 {width:8px;height:8px;bottom:0%;right:12%;animation-delay:0.3s;--tx:16px;--ty:22px}
.aurora-particles .p6 {width:5px;height:5px;bottom:-10%;left:50%;animation-delay:1.1s;--tx:-2px;--ty:26px}
.aurora-particles .p7 {width:7px;height:7px;bottom:-4%;left:20%;animation-delay:1.7s;--tx:-18px;--ty:18px}
.aurora-particles .p8 {width:4px;height:4px;top:52%;left:-8%;animation-delay:2.4s;--tx:-26px;--ty:0px}
.aurora-particles .p9 {width:6px;height:6px;top:10%;left:75%;animation-delay:1.5s;--tx:0px;--ty:-28px}
.aurora-particles .p10{width:5px;height:5px;top:60%;right:-2%;animation-delay:1.3s;--tx:24px;--ty:10px}
.aurora-particles .p11{width:4px;height:4px;top:8%;left:88%;animation-delay:1.8s;--tx:18px;--ty:-18px}
.aurora-particles .p12{width:6px;height:6px;bottom:-6%;left:75%;animation-delay:0.9s;--tx:12px;--ty:22px}
@keyframes lw-particle-float{
  0%{transform:translate(0,0) scale(0.5);opacity:0}
  20%{opacity:0.9}
  50%{transform:translate(var(--tx),var(--ty)) scale(1.15);opacity:1}
  80%{opacity:0.55}
  100%{transform:translate(calc(var(--tx)*1.5),calc(var(--ty)*1.5));opacity:0}
}

.aurora-button,.btn-secondary{text-transform:none;letter-spacing:0.01em}
.btn-sm{height:44px;padding:0 20px;font-size:0.9375rem}
#volunteers .aurora-button, .final-card .aurora-button{font-size:0.9375rem}

@keyframes btn-shimmer{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.aurora-button{
  background: var(--aurora-bg);
  background-size:180% 180%;
  animation:btn-shimmer 12s ease-in-out infinite;
  color:var(--on-primary-fixed);
  border:1.5px solid rgb(255 255 255 / 0.22);
  box-shadow:0 6px 22px var(--aurora-shadow);
  border-radius:var(--radius-lg);
  height:52px;padding:0 2rem;
  font-family:var(--font-sans);font-weight:700;font-size:0.8125rem;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  transition:transform 160ms ease, box-shadow 200ms ease;
}
.aurora-button:hover{
  animation-duration:8s;
  box-shadow:0 10px 32px var(--aurora-shadow-hover);
  transform:translateY(-1px);
}
.aurora-button:active { transform: scale(0.97) translateY(0); box-shadow: 0 4px 12px var(--aurora-shadow); transition-duration: 50ms; }

[data-theme="warm-dark"] .aurora-particles .particle{animation-duration:6.5s}
[data-theme="warm-dark"] .aurora-button-wrap:hover .aurora-particles .particle{animation-duration:2.4s}
[data-theme="warm-dark"] .aurora-button{
  background-size:300% 300%;
  animation-duration:6s;
}
[data-theme="warm-dark"] .aurora-button:hover{animation-duration:3s}

[data-theme="warm-wood"] .aurora-button{
  background: linear-gradient(135deg, #4a2e00, #5f3e00, #7a5000, #5f3e00, #4a2e00);
  background-size:180% 180%;
  color: #fff8ee;
  border-color: rgb(255 255 255 / 0.18);
  box-shadow: 0 6px 22px rgb(60 36 0 / 0.32);
}
[data-theme="warm-wood"] .aurora-button:hover{
  box-shadow: 0 10px 32px rgb(60 36 0 / 0.44);
}
[data-theme="warm-wood"] .btn-secondary{
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  color: var(--primary);
}
[data-theme="warm-wood"] .btn-secondary:hover{
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-color: var(--primary);
}
[data-theme="warm-wood"] .final-card .aurora-button{
  box-shadow:
    0 6px 22px rgb(196 149 40 / 0.30),
    0 0 24px rgb(240 214 138 / 0.18);
}
[data-theme="warm-wood"] .final-card .aurora-button:hover{
  box-shadow:
    0 10px 32px rgb(196 149 40 / 0.48),
    0 0 34px rgb(240 214 138 / 0.26);
}

/* icon-tile hover */
.icon-tile {
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease);
}
.card:hover .icon-tile { transform: scale(1.1); }

/* step-num pop */
.step-num {
  transition: transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast) var(--ease);
}
.step-row:hover .step-num {
  transform: scale(1.12);
  box-shadow: 0 10px 24px var(--step-shadow);
}

/* chip hover */
.chip {
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  cursor: default;
}
.chip:hover {
  background: color-mix(in srgb, var(--primary-container) 22%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--primary);
  transform: translateY(-1px);
}

/* ============================================================
   HERO ENTRANCE — staggered on page load
   ============================================================ */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideRight {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-enter { opacity: 0; animation: fadeSlideUp var(--dur-slow) var(--ease-out) both; }
.hero-enter-card { opacity: 0; animation: fadeSlideRight var(--dur-slow) var(--ease-out) both; }
.start-card.hero-enter-card {
  animation:
    fadeSlideRight var(--dur-slow) var(--ease-out) 200ms both,
    floatUpDown 5s ease-in-out 700ms infinite;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}
.card.reveal.visible:hover,
.card.reveal-scale.visible:hover {
  transform: translateY(-2px);
}

/* ============================================================
   FINAL CTA HEART PULSE
   ============================================================ */
@keyframes heartbeat {
  0%,100% { transform: scale(1); }
  40%     { transform: scale(1.14); }
  60%     { transform: scale(1.08); }
}
.heart { animation: heartbeat 3.2s ease-in-out infinite; }

/* ============================================================
   NAV ENTRANCE
   ============================================================ */
.nav { animation: fadeSlideDown var(--dur-normal) var(--ease-out) both; }

footer .fl a {
  transition: color var(--dur-fast) var(--ease);
}

@media (max-width:640px) {
  .start-card{margin-top:0}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
  .card:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .aurora-button:hover,
  .chip:hover,
  .step-row:hover .step-num {
    transition-duration: var(--dur-fast) !important;
  }
}

/* MOBILE SCROLL PERFORMANCE
   The warm-dark card override above (blur 14 px) applies to all
   cards in the default dark theme. On mobile this causes scroll
   jank when many cards are on screen. Reduce to 4 px — still
   clearly frosted, but ~12× less GPU work per frame. */
@media (max-width: 767px) {
  [data-theme="warm-dark"] .card {
    backdrop-filter: blur(4px) saturate(120%) brightness(1.02);
    -webkit-backdrop-filter: blur(4px) saturate(120%) brightness(1.02);
  }
  /* Footer: reduce from 20 px to 8 px on mobile. */
  footer {
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
  }
  /* ── SCROLL PERFORMANCE (the real cause of mobile jank) ──
     Static background + frozen ambient effects. The look is kept
     (glow blobs stay visible, just not animating). */
  body { background-attachment: scroll; }   /* stop full-viewport repaint per scroll frame */
  .blob { animation: none !important; }     /* freeze blur(64-84px) blobs (beats theme-gated rule) */
  .particle { display: none !important; }   /* drop 12 animated floating particles */
  .aurora-button, .aurora-btn { animation: none !important; } /* stop shimmer repaint */
  .final-card { animation: none !important; } /* stop rotating glow box-shadow repaint */
}