/* ═══════════════════════════════════════════════════════════════
   CALIFORNIA HEAT — Beach / Sunset Theme
   Palette: sunset orange, ocean teal, sand, coral, golden hour
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Nunito:wght@300;400;600;700;800&family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap');

:root {
    --sand:        #fdf3e3;
    --sand-dark:   #f5e6c8;
    --sand-border: #e8d5aa;
    --ocean-deep:  #0a3d62;
    --ocean-mid:   #1a6ea8;
    --ocean-light: #5dade2;
    --ocean-foam:  #aed6f1;
    --sunset-red:  #e74c3c;
    --sunset-org:  #e67e22;
    --sunset-gold: #f39c12;
    --sunset-pink: #e91e63;
    --palm-green:  #27ae60;
    --coral:       #ff7675;
    --white:       #ffffff;
    --ink:         #1a2a3a;
    --text-mid:    #4a5568;
    --card-bg:     rgba(255,255,255,0.85);
}

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

html {
    background: var(--sand);
    color: var(--ink);
    font-family: 'Nunito', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    scroll-behavior: smooth;
}

/* ── SCROLL FADE-IN ─────────────────────────────────────────── */
.fade-in {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── HOOK BANNER ────────────────────────────────────────────── */
.hook-banner {
    background: linear-gradient(135deg, var(--sunset-pink) 0%, var(--sunset-red) 40%, var(--sunset-org) 100%);
    color: white;
    text-align: center;
    padding: 1rem 2rem;
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    position: relative;
    overflow: hidden;
}

.hook-banner::after {
    content: '🌊 🌴 ☀️ 🌴 🌊';
    display: block;
    font-size: 1.1rem;
    margin-top: 0.2rem;
    opacity: 0.7;
    letter-spacing: 0.5em;
    animation: drift 6s ease-in-out infinite;
}

@keyframes drift {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(8px); }
}

/* ── HEADER / HERO ──────────────────────────────────────────── */
header {
    position: relative;
    overflow: hidden;
    padding: 0;
    text-align: center;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Sunset sky gradient background */
.hero-sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        #0a1628 0%,
        #1a3a6e 18%,
        #2471a3 34%,
        #e67e22 58%,
        #e74c3c 72%,
        #c0392b 85%,
        #922b21 100%
    );
    z-index: 0;
}

/* Animated sun */
.hero-sun {
    position: absolute;
    width: 110px;
    height: 110px;
    background: radial-gradient(circle, #fffde7 0%, #ffeb3b 40%, #ff9800 70%, transparent 100%);
    border-radius: 50%;
    left: 50%;
    top: 22%;
    transform: translateX(-50%);
    z-index: 1;
    box-shadow: 0 0 60px 20px rgba(255,200,0,0.4), 0 0 120px 50px rgba(255,150,0,0.2);
    animation: sunPulse 4s ease-in-out infinite;
}

@keyframes sunPulse {
    0%, 100% { box-shadow: 0 0 60px 20px rgba(255,200,0,0.4), 0 0 120px 50px rgba(255,150,0,0.2); }
    50%       { box-shadow: 0 0 80px 30px rgba(255,220,0,0.55), 0 0 150px 70px rgba(255,180,0,0.3); }
}

/* Sun rays */
.hero-sun::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(255,230,0,0.12) 10deg, transparent 20deg,
        transparent 40deg, rgba(255,230,0,0.12) 50deg, transparent 60deg,
        transparent 80deg, rgba(255,230,0,0.12) 90deg, transparent 100deg,
        transparent 120deg, rgba(255,230,0,0.12) 130deg, transparent 140deg,
        transparent 160deg, rgba(255,230,0,0.12) 170deg, transparent 180deg,
        transparent 200deg, rgba(255,230,0,0.12) 210deg, transparent 220deg,
        transparent 240deg, rgba(255,230,0,0.12) 250deg, transparent 260deg,
        transparent 280deg, rgba(255,230,0,0.12) 290deg, transparent 300deg,
        transparent 320deg, rgba(255,230,0,0.12) 330deg, transparent 340deg,
        transparent 360deg
    );
    border-radius: 50%;
    animation: rotateSun 20s linear infinite;
}

@keyframes rotateSun { to { transform: rotate(360deg); } }

/* Ocean reflection */
.hero-ocean {
    position: absolute;
    bottom: 80px;
    left: 0; right: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(41,128,185,0.6) 0%, rgba(10,61,98,0.9) 100%);
    z-index: 1;
}

/* Shimmer on water */
.hero-ocean::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px, transparent 18px,
        rgba(255,255,255,0.07) 18px, rgba(255,255,255,0.07) 22px
    );
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer { to { background-position: 40px 0; } }

/* SVG wave layers */
.waves-container {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 90px;
    z-index: 2;
    overflow: hidden;
}

.wave {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 100%;
}

.wave svg { width: 100%; height: 100%; }

.wave-1 { animation: waveRoll 6s linear infinite; opacity: 0.9; }
.wave-2 { animation: waveRoll 9s linear infinite reverse; opacity: 0.6; bottom: 8px; }
.wave-3 { animation: waveRoll 12s linear infinite; opacity: 0.4; bottom: 16px; }

@keyframes waveRoll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Hero text */
.hero-content {
    position: relative;
    z-index: 3;
    padding: 1.5rem 2rem 6rem;
}

.kicker {
    font-family: 'Nunito', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,235,150,0.9);
    margin-bottom: 0.8rem;
}

h1 {
    font-family: 'Pacifico', cursive;
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 400;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0,0,0,0.5), 0 0 60px rgba(255,150,0,0.3);
    max-width: 820px;
    margin: 0 auto 1rem;
    letter-spacing: 0.01em;
}

h1 em {
    font-style: normal;
    color: #ffeb3b;
    text-shadow: 0 0 30px rgba(255,235,0,0.6), 0 2px 20px rgba(0,0,0,0.5);
}

.deck {
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    max-width: 560px;
    margin: 0 auto 1.2rem;
    font-weight: 300;
    line-height: 1.6;
}

.byline {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
}

/* ── MAIN CONTENT ───────────────────────────────────────────── */
main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
}

/* ── SECTION DIVIDERS ───────────────────────────────────────── */
.wave-divider {
    width: 100%;
    height: 40px;
    margin: 0.5rem 0;
    opacity: 0.25;
}

/* ── NARRATIVE ──────────────────────────────────────────────── */
.narrative {
    padding: 2.5rem 0;
    border-bottom: 2px dashed var(--sand-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (max-width: 700px) { .narrative { grid-template-columns: 1fr; } }

.narrative-lead {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.55;
    color: var(--ocean-deep);
}

.narrative-lead .and       { color: var(--ocean-mid); }
.narrative-lead .but       { color: var(--sunset-red); }
.narrative-lead .therefore { color: var(--palm-green); }

.narrative-body {
    font-size: 0.93rem;
    color: var(--text-mid);
    line-height: 1.78;
}

/* ── STAT CARDS ─────────────────────────────────────────────── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    padding: 2rem 0;
    border-bottom: 2px dashed var(--sand-border);
}

@media (max-width: 600px) { .stats-row { grid-template-columns: 1fr; } }

.stat-card {
    background: var(--card-bg);
    border: 2px solid var(--sand-border);
    border-top: 4px solid var(--sunset-red);
    border-radius: 16px;
    padding: 1.4rem 1.5rem;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.stat-card.blue   { border-top-color: var(--ocean-mid); }
.stat-card.orange { border-top-color: var(--sunset-org); }

.stat-number {
    font-family: 'Pacifico', cursive;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1;
    color: var(--ocean-deep);
    margin-bottom: 0.35rem;
}

.stat-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-mid);
    margin-bottom: 0.4rem;
}

.stat-desc { font-size: 0.8rem; color: var(--text-mid); line-height: 1.55; }

/* ── SECTION LABELS / H2 ────────────────────────────────────── */
.section-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--sunset-org);
    margin-bottom: 0.3rem;
}

h2 {
    font-family: 'Pacifico', cursive;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 400;
    line-height: 1.25;
    margin-bottom: 0.6rem;
    color: var(--ocean-deep);
}

.viz-intro {
    font-size: 0.9rem;
    color: var(--text-mid);
    max-width: 640px;
    margin-bottom: 1.4rem;
    line-height: 1.7;
}

/* ── VIZ / TREND SECTIONS ───────────────────────────────────── */
.viz-section,
.trend-section,
.why-care,
.takeaway,
.writeup {
    padding: 2.5rem 0;
    border-bottom: 2px dashed var(--sand-border);
}

.writeup { border-bottom: none; }

/* ── SLIDER CONTROLS ────────────────────────────────────────── */
.controls {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
    background: linear-gradient(135deg, var(--ocean-deep) 0%, var(--ocean-mid) 100%);
    padding: 10px 22px;
    border-radius: 40px;
    border: 2px solid var(--ocean-light);
    color: white;
    width: fit-content;
    box-shadow: 0 4px 20px rgba(10,61,98,0.3);
}

.controls label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ocean-foam);
    white-space: nowrap;
}

input[type="range"] {
    width: 280px;
    accent-color: var(--sunset-gold);
    cursor: pointer;
}

#year-display {
    font-family: 'Pacifico', cursive;
    font-size: 1.7rem;
    color: var(--sunset-gold);
    min-width: 65px;
    text-align: right;
    text-shadow: 0 0 12px rgba(243,156,18,0.4);
}

/* ── MAP ────────────────────────────────────────────────────── */
.map-story-grid {
    display: grid;
    grid-template-columns: 1fr 290px;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 800px) { .map-story-grid { grid-template-columns: 1fr; } }

#map-container {
    position: relative;
    background: linear-gradient(180deg, #061428 0%, #0a2a4a 60%, #0d3b6e 100%);
    border: 2px solid var(--ocean-mid);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(10,61,98,0.35);
}

#map-container svg { display: block; width: 100%; height: auto; }

.ca-fill   { fill: #1a3a5c; stroke: none; }
.ca-border { fill: none; stroke: #f39c12; stroke-width: 2.5px; pointer-events: none;
             filter: drop-shadow(0 0 4px rgba(243,156,18,0.5)); }

.grid-point { opacity: 0.88; }
.grid-point:hover {
    opacity: 1;
    stroke: #fff;
    stroke-width: 1.5px;
    cursor: crosshair;
    filter: brightness(1.2);
}

/* ── TOOLTIP ────────────────────────────────────────────────── */
.tooltip {
    position: absolute;
    background: linear-gradient(135deg, rgba(6,20,40,0.97) 0%, rgba(10,50,90,0.97) 100%);
    color: #e8f4fd;
    padding: 10px 14px;
    border-radius: 10px;
    pointer-events: none;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.15s;
    border: 1px solid var(--ocean-light);
    z-index: 10;
    line-height: 1.65;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.tooltip strong { color: var(--sunset-gold); }

.legend text      { fill: #adc8e0; font-size: 11px; font-family: 'Nunito', sans-serif; }
.legend-title     { fill: #c8dff0 !important; font-size: 10px !important; letter-spacing: 0.1em; }

/* ── STORY SIDEBAR ──────────────────────────────────────────── */
.story-sidebar { display: flex; flex-direction: column; }

.story-card {
    background: var(--card-bg);
    border: 2px solid var(--sand-border);
    border-left: 5px solid var(--sunset-org);
    border-radius: 0 14px 14px 0;
    padding: 1.25rem;
    display: none;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.story-card.active {
    display: block;
    animation: slideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(16px) scale(0.97); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

.story-year {
    font-family: 'Pacifico', cursive;
    font-size: 2rem;
    color: var(--ocean-deep);
    line-height: 1;
    margin-bottom: 0.3rem;
}

.story-headline {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.6rem;
    color: var(--ink);
}

.story-body { font-size: 0.82rem; color: var(--text-mid); line-height: 1.72; }

.story-tag {
    display: inline-block;
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.2em 0.6em;
    border-radius: 20px;
    margin-bottom: 0.5rem;
}

.tag-fire     { background: #fdecea; color: #c0392b; }
.tag-drought  { background: #fef3e2; color: #d35400; }
.tag-heat     { background: #fff8e1; color: #b7800a; }
.tag-water    { background: #e8f4fd; color: var(--ocean-mid); }
.tag-baseline { background: #eaf4fb; color: var(--ocean-deep); }

figcaption {
    font-size: 0.77rem;
    color: var(--text-mid);
    margin-top: 0.75rem;
    border-top: 1px dashed var(--sand-border);
    padding-top: 0.75rem;
    line-height: 1.6;
}

figcaption strong { color: var(--ink); }

/* ── TREND CHART ────────────────────────────────────────────── */
#trend-chart {
    background: linear-gradient(180deg, #061428 0%, #0a2a4a 100%);
    border: 2px solid var(--ocean-mid);
    border-radius: 16px;
    padding: 0.5rem;
    margin-top: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(10,61,98,0.3);
}

#trend-chart svg { display: block; width: 100%; height: auto; }

/* ── IMPACT CARDS ───────────────────────────────────────────── */
.impacts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: 1.5rem;
}

@media (max-width: 700px) { .impacts-grid { grid-template-columns: 1fr; } }

.impact-card {
    padding: 1.5rem;
    background: var(--card-bg);
    border: 2px solid var(--sand-border);
    border-radius: 16px;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.impact-card:hover {
    transform: translateY(-5px) rotate(-0.5deg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.13);
}

.impact-icon  { font-size: 2rem; margin-bottom: 0.6rem; line-height: 1; }
.impact-title { font-family: 'Pacifico', cursive; font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; color: var(--ocean-deep); }
.impact-body  { font-size: 0.81rem; color: var(--text-mid); line-height: 1.65; }

/* ── TAKEAWAY ───────────────────────────────────────────────── */
.takeaway-box {
    background: linear-gradient(135deg, var(--ocean-deep) 0%, #0d3b6e 50%, #1a6ea8 100%);
    color: white;
    border-radius: 20px;
    padding: 2.5rem;
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    box-shadow: 0 12px 50px rgba(10,61,98,0.4);
    position: relative;
    overflow: hidden;
}

/* Decorative wave inside takeaway */
.takeaway-box::before {
    content: '';
    position: absolute;
    bottom: -20px; left: -20px; right: -20px;
    height: 80px;
    background: rgba(255,255,255,0.04);
    border-radius: 50%;
    transform: scaleX(1.5);
}

@media (max-width: 700px) { .takeaway-box { grid-template-columns: 1fr; } }

.takeaway-stat {
    font-family: 'Pacifico', cursive;
    font-size: clamp(2.8rem, 7vw, 4.5rem);
    color: var(--sunset-gold);
    line-height: 1;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 30px rgba(243,156,18,0.5);
}

.takeaway-stat-label {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    font-weight: 700;
}

.takeaway-text {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.75;
}

.takeaway-text strong { color: var(--sunset-gold); }

/* ── WRITEUP ────────────────────────────────────────────────── */
.writeup p {
    max-width: 680px;
    font-size: 0.9rem;
    color: var(--text-mid);
    margin-top: 1rem;
    line-height: 1.82;
}

/* ── FOOTER ─────────────────────────────────────────────────── */
footer {
    background: linear-gradient(180deg, var(--ocean-deep) 0%, #06101e 100%);
    color: rgba(255,255,255,0.4);
    padding: 3rem 2rem 2rem;
    text-align: center;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    position: relative;
    overflow: hidden;
}

.footer-waves {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40px;
    overflow: hidden;
}

.footer-waves svg { width: 200%; animation: waveRoll 8s linear infinite; }

footer strong { color: rgba(255,255,255,0.75); }

footer .footer-sun {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.75rem;
    animation: sunPulse 3s ease-in-out infinite;
}