/* === RESET & BASE === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --sky-top: #74b9ff;
    --cerulean: #0099cc;
    --teal: #00b894;
    --coral: #e17055;
    --glass: #f0f7fa;
    --crystal: #dfe6e9;
    --deep-ocean: #2d3436;
    --mist: #636e72;
    --cyan: #00cec9;
    --verdant: #55efc4;
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Source Sans 3', sans-serif;
    color: var(--deep-ocean);
    overflow-x: hidden;
    background: var(--glass);
}

/* === NAV PILL === */
.nav-pill {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1000;
    width: 52px;
    height: 52px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(240,247,250,0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 300ms ease-out, box-shadow 300ms ease-out;
}
.nav-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,153,204,0.2);
}

/* === NAV OVERLAY === */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,153,204,0.85);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
}
.nav-overlay.active { opacity: 1; pointer-events: all; }

.nav-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-links {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}
.nav-link {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: #f0f7fa;
    text-decoration: none;
    transition: color 300ms ease, transform 300ms var(--spring);
}
.nav-link:hover { color: var(--verdant); transform: scale(1.05); }

.nav-wave {
    position: absolute;
    left: 20%;
    top: 0;
    height: 100%;
    width: 60px;
    opacity: 0.3;
}

/* === GLASS PANEL === */
.glass-panel {
    background: rgba(240,247,250,0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.4);
    transition: transform 300ms ease-out, box-shadow 300ms ease-out;
}
.glass-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,153,204,0.15);
}

/* === PANEL 1: STRATOSPHERE === */
.stratosphere {
    position: relative;
    width: 100%;
    height: 100vh;
    background: linear-gradient(180deg, #74b9ff 0%, #0099cc 40%, #f0f7fa 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(3rem, 10vw, 8rem);
    font-variation-settings: 'wght' 300;
    color: var(--deep-ocean);
    margin-top: 15vh;
    opacity: 0;
    transition: font-variation-settings 800ms var(--spring), opacity 600ms ease;
    letter-spacing: -0.02em;
}
.hero-title.visible {
    font-variation-settings: 'wght' 700;
    opacity: 1;
}

.tagline-panel {
    margin-top: 3vh;
    padding: 20px 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease 400ms, transform 600ms var(--spring) 400ms;
}
.tagline-panel.visible {
    opacity: 1;
    transform: translateY(0);
}

.tagline {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--deep-ocean);
    text-align: center;
}

/* Dew Drops */
.dew-drop {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.9), transparent 70%);
    pointer-events: none;
}

/* Lens Flares */
.lens-flare {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(116,185,255,0.15) 0%, transparent 70%);
    pointer-events: none;
}

/* Hero Waves */
.hero-waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    pointer-events: none;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    filter: drop-shadow(0 0 6px currentColor);
}
.wave-1 { animation: waveMove 8s linear infinite; color: #0099cc; }
.wave-2 { animation: waveMove 12s linear infinite; color: #00b894; bottom: 10%; }
.wave-3 { animation: waveMove 16s linear infinite; color: #55efc4; bottom: 20%; }

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

/* === PANEL 2: CLOUDLINE === */
.cloudline {
    position: relative;
    width: 100%;
    min-height: 150vh;
    background: linear-gradient(180deg, #f0f7fa 0%, #ffffff 50%, #f0f7fa 100%);
    padding: 10vh 0;
}

.cloud-band {
    position: absolute;
    top: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(180deg, rgba(240,247,250,1), transparent);
    pointer-events: none;
}

.feature-strip {
    display: flex;
    align-items: center;
    padding: 6vh 8vw;
    opacity: 0;
    transition: opacity 700ms ease, transform 700ms var(--spring);
}
.feature-strip--left {
    flex-direction: row;
    transform: translateX(-60px);
}
.feature-strip--right {
    flex-direction: row;
    transform: translateX(60px);
}
.feature-strip.visible {
    opacity: 1;
    transform: translateX(0);
}

.feature-icons {
    flex-shrink: 0;
    margin: 0 4vw;
}
.feature-icon { display: block; }

.pulse-ring {
    animation: pulse 3s infinite;
    transform-origin: center;
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 0.3; }
    100% { transform: scale(2.5); opacity: 0; }
}

.feature-heading {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 3rem);
    color: var(--deep-ocean);
    margin-bottom: 12px;
}
.feature-desc {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.7;
    color: var(--mist);
    max-width: 520px;
    letter-spacing: 0.01em;
}

/* Wave Dividers */
.wave-divider {
    width: 100%;
    height: 60px;
    margin: 2vh 0;
}
.wave-divider svg { width: 100%; height: 100%; }

.morph-wave {
    transition: d 800ms var(--spring);
}
.wave-divider.visible .morph-wave {
    d: path("M0,30 C120,5 240,55 360,30 C480,5 600,55 720,30 C840,5 960,55 1080,30 C1200,5 1320,55 1440,30");
}

/* === PANEL 3: CANOPY === */
.canopy {
    position: relative;
    width: 100%;
    min-height: 200vh;
    background: var(--glass);
    padding: 10vh 0;
    overflow: hidden;
}

.canopy-waves {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.canopy-wave {
    position: absolute;
    width: 200%;
    height: 80px;
}
.cw-1 { top: 10%; animation: waveMove 20s linear infinite; }
.cw-2 { top: 28%; animation: waveMove 25s linear infinite reverse; }
.cw-3 { top: 46%; animation: waveMove 18s linear infinite; }
.cw-4 { top: 64%; animation: waveMove 22s linear infinite reverse; }
.cw-5 { top: 82%; animation: waveMove 30s linear infinite; }

.story-cards {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding: 8vh 6vw;
}

.story-card {
    width: 320px;
    min-height: 200px;
    background: rgba(240,247,250,0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.4);
    padding: 28px;
    position: relative;
    overflow: hidden;
    transform: translateY(calc(40px + var(--card-offset, 0px)));
    opacity: 0;
    transition: transform 700ms var(--spring), opacity 600ms ease, box-shadow 300ms ease-out;
}
.story-card.visible {
    transform: translateY(var(--card-offset, 0px));
    opacity: 1;
}
.story-card:hover {
    transform: translateY(calc(var(--card-offset, 0px) - 8px));
    box-shadow: 0 16px 48px rgba(0,206,201,0.2);
    border-color: var(--cyan);
}

.card-wave-bg {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 40px,
        rgba(0,153,204,0.3) 40px,
        rgba(0,153,204,0.3) 41px
    );
    animation: waveMove 30s linear infinite;
    pointer-events: none;
}

.card-icon { margin-bottom: 16px; display: block; }

.card-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--deep-ocean);
    margin-bottom: 8px;
}
.card-excerpt {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--mist);
}

/* === PANEL 4: GROUND === */
.ground {
    position: relative;
    width: 100%;
    min-height: 150vh;
    background: linear-gradient(180deg, #f0f7fa 0%, #00b894 50%, #55efc4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10vh 24px;
}

.deep-dive {
    max-width: 680px;
    width: 100%;
}
.deep-dive-heading {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    color: var(--cerulean);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 3vh;
}
.deep-dive-content p {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--deep-ocean);
    margin-bottom: 2em;
}

.drop-cap {
    float: left;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 4rem;
    line-height: 0.8;
    color: var(--cerulean);
    margin-right: 8px;
    margin-top: 6px;
    text-shadow: 0 0 20px rgba(0,153,204,0.3);
}

.inline-icon {
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px;
}

.highlight-phrase {
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-image: linear-gradient(var(--coral), var(--coral));
    transition: background-size 500ms ease;
    padding-bottom: 2px;
}
.highlight-phrase.active {
    background-size: 100% 2px;
}

/* === PANEL 5: REFLECTION === */
.reflection {
    position: relative;
    width: 100%;
    min-height: 80vh;
    background: linear-gradient(180deg, #55efc4 0%, #0099cc 60%, #74b9ff 100%);
    padding: 8vh 6vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.water-surface {
    width: 100%;
    margin-bottom: 4vh;
}
.surface-wave {
    width: 100%;
    height: 30px;
    animation: waveMove 10s linear infinite;
}

.footer-panels {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
}

.footer-card {
    flex: 1;
    min-width: 260px;
    max-width: 360px;
    padding: 32px;
    background: rgba(240,247,250,0.2);
    border: 1px solid rgba(255,255,255,0.25);
}
.footer-card:hover {
    background: rgba(240,247,250,0.3);
}

.footer-heading {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    color: #f0f7fa;
    margin-bottom: 16px;
}

.footer-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-list a {
    color: rgba(240,247,250,0.85);
    text-decoration: none;
    font-size: 1rem;
    transition: color 200ms ease;
}
.footer-list a:hover { color: #fff; }

.footer-sub-text {
    color: rgba(240,247,250,0.8);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.footer-form {
    display: flex;
    gap: 8px;
}
.footer-input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 12px;
    background: rgba(255,255,255,0.15);
    color: #f0f7fa;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.95rem;
    outline: none;
}
.footer-input::placeholder { color: rgba(240,247,250,0.5); }
.footer-input:focus { border-color: rgba(255,255,255,0.6); }

.footer-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    background: rgba(240,247,250,0.25);
    color: #f0f7fa;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 200ms ease;
}
.footer-btn:hover { background: rgba(240,247,250,0.4); }

.footer-bottom {
    margin-top: auto;
    padding-top: 4vh;
    text-align: center;
    width: 100%;
}
.bottom-wave {
    width: 100%;
    height: 40px;
    animation: waveMove 14s linear infinite;
    margin-bottom: 16px;
}
.footer-copy {
    color: rgba(240,247,250,0.7);
    font-size: 0.9rem;
}
.space-mono {
    font-family: 'Space Mono', monospace;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .feature-strip { flex-direction: column !important; text-align: center; }
    .feature-strip--left, .feature-strip--right { transform: translateY(40px); }
    .feature-strip.visible { transform: translateY(0); }
    .feature-icons { margin: 0 0 2vh 0; }
    .feature-desc { max-width: 100%; }
    .story-cards { padding: 4vh 4vw; }
    .story-card { width: 100%; max-width: 400px; }
    .footer-panels { flex-direction: column; align-items: center; }
    .footer-card { max-width: 100%; }
}