/* SunSetup — Base, Sky & Sun Animations */

:root {
  --sky-top: #0369a1;
  --sky-mid: #38bdf8;
  --sky-bot: #bae6fd;
  --sky-pale: #e0f2fe;
  --bg: #f0f9ff;
  --card: #ffffff;
  --card-hover: #f8fafc;
  --border: rgba(0,0,0,0.08);
  --border-focus: rgba(245,158,11,0.5);
  --border-error: #ef4444;
  --gold: #f59e0b;
  --gold-light: #fbbf24;
  --gold-dark: #d97706;
  --orange: #f97316;
  --text: #0f172a;
  --text-m: #475569;
  --text-d: #94a3b8;
  --success: #22c55e;
  --error: #ef4444;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-d: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px;
}

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

/* Visually hidden but available to screen readers. Lives here, not in quiz.css,
   because every page loads styles.css. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* === SKY BACKGROUND === */
.sky { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.sky-gradient {
  position:absolute; inset:0;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 35%, var(--sky-bot) 70%, var(--sky-pale) 100%);
  animation: skyShift 20s ease-in-out infinite alternate;
}
@keyframes skyShift {
  0%   { filter: brightness(1) saturate(1); }
  50%  { filter: brightness(1.05) saturate(1.08); }
  100% { filter: brightness(0.97) saturate(1.04); }
}

/* === CLOUDS === */
.cloud {
  position: absolute;
  background: #fff;
  border-radius: 100px;
  opacity: 0.85;
  filter: blur(1px);
}
.cloud::before, .cloud::after {
  content:''; position:absolute; background:#fff; border-radius:50%;
}
.cloud--1 { width:180px; height:50px; top:12%; left:-200px; animation: cloudDrift 45s linear infinite; }
.cloud--1::before { width:70px; height:70px; top:-35px; left:30px; }
.cloud--1::after  { width:90px; height:60px; top:-25px; left:70px; }

.cloud--2 { width:140px; height:40px; top:22%; left:-160px; opacity:0.6; animation: cloudDrift 60s 8s linear infinite; }
.cloud--2::before { width:55px; height:55px; top:-28px; left:25px; }
.cloud--2::after  { width:70px; height:50px; top:-22px; left:55px; }

.cloud--3 { width:200px; height:55px; top:8%; left:-220px; animation: cloudDrift 55s 15s linear infinite; }
.cloud--3::before { width:80px; height:80px; top:-40px; left:35px; }
.cloud--3::after  { width:100px; height:65px; top:-28px; left:80px; }

.cloud--4 { width:120px; height:35px; top:30%; left:-140px; opacity:0.5; animation: cloudDrift 70s 5s linear infinite; }
.cloud--4::before { width:50px; height:50px; top:-25px; left:20px; }
.cloud--4::after  { width:60px; height:45px; top:-18px; left:50px; }

.cloud--5 { width:160px; height:45px; top:18%; left:-180px; opacity:0.7; animation: cloudDrift 50s 22s linear infinite; }
.cloud--5::before { width:65px; height:65px; top:-32px; left:30px; }
.cloud--5::after  { width:80px; height:55px; top:-24px; left:65px; }

.cloud--6 { width:100px; height:30px; top:35%; left:-120px; opacity:0.4; animation: cloudDrift 80s 30s linear infinite; }
.cloud--6::before { width:40px; height:40px; top:-20px; left:15px; }
.cloud--6::after  { width:50px; height:38px; top:-16px; left:40px; }

@keyframes cloudDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 400px)); }
}

/* === BIRDS === */
.bird { position:absolute; width:24px; height:10px; opacity:0.4; }
.bird--1 { top:15%; left:-30px; animation: birdFly 18s 2s linear infinite; }
.bird--2 { top:10%; left:-30px; animation: birdFly 22s 7s linear infinite; transform:scale(0.7); }
.bird--3 { top:20%; left:-30px; animation: birdFly 25s 14s linear infinite; transform:scale(0.5); opacity:0.25; }
@keyframes birdFly {
  0%   { transform: translateX(0) translateY(0); }
  25%  { transform: translateX(25vw) translateY(-12px); }
  50%  { transform: translateX(50vw) translateY(5px); }
  75%  { transform: translateX(75vw) translateY(-8px); }
  100% { transform: translateX(105vw) translateY(0); }
}

/* === SECTIONS === */
.section {
  position:fixed; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:1; opacity:0; visibility:hidden;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  /* Fade through rather than cross-dissolve. Two full-viewport frosted cards
     dissolving into each other for half a second is a muddy double-image; the
     outgoing one clears first, then the incoming arrives. Durations come from
     the motion block in quiz.css so JS and CSS can't disagree. */
  transition: opacity var(--t-exit, 190ms) ease,
              visibility var(--t-exit, 190ms) ease;
}
.section--active {
  opacity:1; visibility:visible; z-index:2;
  transition: opacity var(--t-enter, 300ms) ease var(--t-exit, 190ms),
              visibility 0s;
}

/* `margin:auto` on the single flex child keeps content optically centred while
   still allowing both scroll edges to be reached when the viewport is short. */
.section > .hero-content,
.section > .result-container { margin:auto; }

/* === SUN SYSTEM === */
.sun-system { position:relative; display:flex; align-items:center; justify-content:center; }
.sun-system--hero { width:220px; height:220px; margin:0 auto 8px; }
.sun-system--mini { width:48px; height:48px; }
/* margin-inline:auto — the sun is a block-level flex box, so `text-align:center`
   on .result-container does not centre it. */
.sun-system--result { width:90px; height:90px; margin:0 auto 20px; }

.sun-glow {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:220%; height:220%; border-radius:50%;
  background: radial-gradient(circle, rgba(251,191,36,0.35), rgba(251,191,36,0.08) 50%, transparent 70%);
  animation: pulseGlow 4s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%,100% { transform:translate(-50%,-50%) scale(1); opacity:0.7; }
  50%     { transform:translate(-50%,-50%) scale(1.2); opacity:1; }
}

/* Sun Beams (hero only) */
.sun-beams {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:500px; height:500px; animation: spinSlow 80s linear infinite;
}
.sun-beam {
  position:absolute; top:0; left:50%; width:3px; height:50%;
  transform-origin: bottom center; transform: translateX(-50%) rotate(var(--angle));
  background: linear-gradient(to top, rgba(251,191,36,0.22), transparent 80%);
  border-radius: 3px;
  animation: beamPulse 4s ease-in-out infinite alternate;
}
.sun-beam:nth-child(odd) { animation-delay: -2s; width:2px; }
@keyframes beamPulse {
  0%   { opacity:0.3; height:45%; }
  100% { opacity:0.7; height:55%; }
}

/* Sun Rays (conic gradient rings) */
.sun-rays { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; }
.sun-rays--outer {
  width:170%; height:170%;
  background: repeating-conic-gradient(from 0deg, rgba(251,191,36,0.22) 0deg 6deg, transparent 6deg 30deg);
  animation: spinSlow 25s linear infinite;
}
.sun-rays--inner {
  width:140%; height:140%;
  background: repeating-conic-gradient(from 15deg, rgba(249,115,22,0.14) 0deg 4deg, transparent 4deg 24deg);
  animation: spinSlow 18s linear infinite reverse;
}
@keyframes spinSlow { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* Sun Body */
.sun-body {
  position:relative; width:50%; height:50%; border-radius:50%; z-index:2;
  background: radial-gradient(circle at 35% 35%, #fef3c7, var(--gold-light) 40%, var(--gold) 70%, var(--gold-dark));
  box-shadow: 0 0 30px rgba(251,191,36,0.7), 0 0 80px rgba(251,191,36,0.3), inset 0 -4px 10px rgba(217,119,6,0.35);
  animation: sunBreathe 4s ease-in-out infinite;
}
@keyframes sunBreathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }

/* Sun Face */
.sun-face { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60%; height:60%; }
.sun-eye { position:absolute; top:28%; width:8px; height:8px; border-radius:50%; background:#92400e; animation:blink 4s ease-in-out infinite; }
.sun-eye--left { left:22%; }
.sun-eye--right { right:22%; }
.sun-eye--happy { height:4px; border-radius:0 0 8px 8px; top:30%; }
@keyframes blink { 0%,95%,100%{transform:scaleY(1)} 97%{transform:scaleY(0.1)} }

.sun-smile { position:absolute; bottom:22%; left:50%; transform:translateX(-50%); width:20px; height:10px; border-radius:0 0 20px 20px; border-bottom:2.5px solid #92400e; border-left:2.5px solid #92400e; border-right:2.5px solid #92400e; }
.sun-smile--big { width:26px; height:14px; border-width:3px; }
.sun-frown { position:absolute; bottom:18%; left:50%; transform:translateX(-50%); width:18px; height:8px; border-radius:20px 20px 0 0; border-top:2.5px solid #92400e; border-left:2.5px solid #92400e; border-right:2.5px solid #92400e; }

/* Sun Flare */
.sun-flare {
  position:absolute; top:20%; left:60%; width:30px; height:30px; border-radius:50%; z-index:3;
  background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0.2) 40%, transparent 70%);
  animation: flarePulse 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes flarePulse { 0%,100%{opacity:0.5;transform:scale(0.8)} 50%{opacity:1;transform:scale(1.1)} }

/* Sun Particles */
.sun-particles { position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%,-50%); pointer-events:none; }
.sun-particle {
  position:absolute; border-radius:50%; background:var(--gold-light); opacity:0;
  animation: floatParticle var(--duration) var(--delay) ease-out infinite;
}
@keyframes floatParticle {
  0%  { opacity:0; transform:translate(0,0) scale(0.5); }
  15% { opacity:0.9; }
  100%{ opacity:0; transform:translate(var(--tx), var(--ty)) scale(0); }
}

/* Mini sun tweaks */
.sun-system--mini .sun-body { width:55%; height:55%; }
.sun-system--mini .sun-eye { width:4px; height:4px; }
.sun-system--mini .sun-smile { width:10px; height:5px; border-width:1.5px; bottom:20%; }
.sun-system--mini .sun-rays--outer { width:160%; height:160%; }

/* Celebration */
.sun-system--celebration .sun-body { animation: sunBreathe 2s ease-in-out infinite, celebrateWobble 0.8s ease-in-out 3; }
@keyframes celebrateWobble { 0%,100%{transform:scale(1) rotate(0)} 25%{transform:scale(1.12) rotate(-5deg)} 75%{transform:scale(1.12) rotate(5deg)} }

.sun-system--sad .sun-glow { background: radial-gradient(circle, rgba(148,163,184,0.15), transparent 70%); }

/* Confetti */
.confetti-piece {
  position:absolute; width:8px; height:8px; border-radius:2px; opacity:0;
  animation: confettiFall var(--duration) var(--delay) ease-out forwards;
}
@keyframes confettiFall {
  0%   { opacity:1; transform:translate(0,0) rotate(0) scale(1); }
  100% { opacity:0; transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(0.3); }
}

/* === WAVE DIVIDER === */
.wave-divider { position:absolute; bottom:0; left:0; width:100%; line-height:0; }
.wave-divider svg { width:100%; height:60px; }

/* === ANALYTICS CONSENT BANNER ===
   Only rendered when analytics.requireConsent is on and no choice is stored.
   Lives in styles.css so every page can show it. */
.consent-banner {
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  z-index: 60; margin: 0 auto; max-width: 620px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 14px 18px;
  background: #0f172a; color: rgba(255,255,255,0.92);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 44px rgba(3,30,56,0.4);
  font-size: 0.85rem; line-height: 1.5;
  animation: consentIn 0.35s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes consentIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.consent-banner p { flex: 1 1 260px; margin: 0; }
.consent-banner a { color: var(--gold-light); font-weight: 600; }
.consent-banner__actions { display: flex; gap: 8px; margin-left: auto; }
.consent-banner__btn {
  padding: 9px 18px; min-height: 40px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #1a1a2e; font-family: var(--font); font-size: 0.85rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.consent-banner__btn--ghost {
  background: transparent; color: rgba(255,255,255,0.86);
  border: 1px solid rgba(255,255,255,0.3);
}
.consent-banner__btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

@media (max-width: 520px) {
  .consent-banner { font-size: 0.8rem; padding: 13px 15px; }
  .consent-banner__actions { width: 100%; margin-left: 0; }
  .consent-banner__btn { flex: 1; }
}

/* === ACCESSIBILITY ===
   styles.css is the base sheet — the sky shift, drifting clouds and flying birds
   all live here, and all of them loop forever. It is always loaded alongside
   quiz.css or page.css, which carry the same block, but relying on a sibling
   stylesheet to suppress your own animations is exactly how the customer portal
   ended up animating for people who had asked it not to. Each sheet covers
   itself. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}