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

html {
    scroll-behavior: smooth;
}

body {
    background-color: #E8E4EF;
    color: #4A4259;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.7;
    overflow-x: hidden;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, .zone-heading {
    font-family: 'Outfit', sans-serif;
    color: #4A4259;
    letter-spacing: -0.02em;
}

h2, .zone-heading {
    font-size: 36px;
    font-weight: 700;
}

.pill-heading {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0em;
    margin-bottom: 12px;
    color: #4A4259;
}

p {
    color: #6B6480;
}

.tile-label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: #8A82A0;
    text-transform: uppercase;
}

/* ===== ZONES (general) ===== */
.zone {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr min(680px, 90vw) 1fr;
    align-items: center;
    padding: 48px;
    position: relative;
}

.zone-content {
    grid-column: 2;
}

/* ===== FLOATING ORBS ===== */
.floating-orbs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.orb {
    position: absolute;
    border-radius: 50%;
    background: #E8E4EF;
    box-shadow: 8px 8px 16px #C5BFD4, -8px -8px 16px #F5F2FA;
}

@media (prefers-reduced-motion: no-preference) {
    .orb {
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
}

.orb-1 {
    width: 80px;
    height: 80px;
    top: 12%;
    left: 6%;
    animation-name: orbFloat1;
    animation-duration: 22s;
}

.orb-2 {
    width: 120px;
    height: 120px;
    top: 35%;
    right: 5%;
    animation-name: orbFloat2;
    animation-duration: 28s;
}

.orb-3 {
    width: 50px;
    height: 50px;
    top: 58%;
    left: 4%;
    animation-name: orbFloat3;
    animation-duration: 20s;
}

.orb-4 {
    width: 100px;
    height: 100px;
    top: 75%;
    right: 7%;
    animation-name: orbFloat4;
    animation-duration: 25s;
}

.orb-5 {
    width: 40px;
    height: 40px;
    top: 90%;
    left: 8%;
    animation-name: orbFloat5;
    animation-duration: 30s;
}

@keyframes orbFloat1 {
    from { transform: translateY(0); }
    to { transform: translateY(-12px); }
}
@keyframes orbFloat2 {
    from { transform: translateY(0); }
    to { transform: translateY(15px); }
}
@keyframes orbFloat3 {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}
@keyframes orbFloat4 {
    from { transform: translateY(0); }
    to { transform: translateY(14px); }
}
@keyframes orbFloat5 {
    from { transform: translateY(0); }
    to { transform: translateY(-11px); }
}

/* ===== SCROLL INDICATOR ===== */
.scroll-indicator {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #5B3FBF;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.scroll-indicator.visible {
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .scroll-indicator.pulsing {
        animation: indicatorPulse 2s infinite;
    }
}

@keyframes indicatorPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(91, 63, 191, 0.4);
    }
    100% {
        box-shadow: 0 0 0 12px rgba(91, 63, 191, 0);
    }
}

/* ===== ZONE 1: EMERGENCE ===== */
.zone-1 {
    min-height: 100vh;
}

.zone-1 .zone-content {
    text-align: center;
}

.site-title {
    font-family: 'Outfit', sans-serif;
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #4A4259;
    display: inline-block;
    padding: 24px 48px;
    border-radius: 24px;
    background: #E8E4EF;
    box-shadow: 0 0 0 #C5BFD4, 0 0 0 #F5F2FA;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1),
                box-shadow 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.site-title.emerged {
    opacity: 1;
    box-shadow: 8px 8px 16px #C5BFD4, -8px -8px 16px #F5F2FA;
}

.subtitle-container {
    margin-top: 40px;
    padding: 24px 32px;
    border-radius: 24px;
    background: #D8D2E3;
    box-shadow: inset 0 0 0 #C5BFD4, inset 0 0 0 #F5F2FA;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s,
                box-shadow 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s;
}

.subtitle-container.emerged {
    opacity: 1;
    box-shadow: inset 6px 6px 12px #C5BFD4, inset -6px -6px 12px #F5F2FA;
}

.subtitle {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: #6B6480;
}

/* ===== ZONE 2: TOPOGRAPHY ===== */
.zone-2 {
    min-height: 100vh;
}

.zone-2 .zone-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.pill {
    padding: 36px 40px;
    border-radius: 48px;
    background: #E8E4EF;
    box-shadow: 0 0 0 #C5BFD4, 0 0 0 #F5F2FA;
    transition: box-shadow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pill.emerged {
    box-shadow: 8px 8px 16px #C5BFD4, -8px -8px 16px #F5F2FA;
}

.pill-1 {
    align-self: flex-start;
    max-width: 85%;
}

.pill-2 {
    align-self: flex-end;
    max-width: 85%;
    margin-top: -12px;
}

.pill-3 {
    align-self: flex-start;
    max-width: 85%;
    margin-top: -12px;
}

.pill-text {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: #6B6480;
}

/* ===== ZONE 3: PULSE ===== */
.zone-3 {
    min-height: 100vh;
}

.zone-3-layout {
    display: flex;
    align-items: center;
    gap: 48px;
    position: relative;
}

/* Floated shape-outside element for text wrapping around dial on desktop */
.dial-float {
    display: none;
}

@media (min-width: 769px) {
    .dial-float {
        display: block;
        float: left;
        width: 320px;
        height: 320px;
        shape-outside: circle(160px at 160px 160px);
        margin-right: 32px;
    }

    .zone-3-layout {
        display: block;
    }

    .dial-wrapper {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
}

.dial-wrapper {
    flex-shrink: 0;
}

.dial {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: #E8E4EF;
    box-shadow: 8px 8px 16px #C5BFD4, -8px -8px 16px #F5F2FA;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Concentric rings with Fibonacci-like spacing:
   Outer ring gap: 32px from dial edge -> 216px diameter
   Next gap: 20px -> 176px
   Next gap: 12px -> 152px
   Next gap: 8px -> 136px
   Next gap: 4px -> 128px (center area) */
.ring {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #E8E4EF;
}

.ring-1 {
    width: 216px;
    height: 216px;
    box-shadow: 0 0 0 #C5BFD4, 0 0 0 #F5F2FA;
    transition: box-shadow 0.8s ease;
    transition-delay: 0ms;
}
.ring-1.emerged {
    box-shadow: inset 4px 4px 8px #C5BFD4, inset -4px -4px 8px #F5F2FA;
}

.ring-2 {
    width: 176px;
    height: 176px;
    box-shadow: 0 0 0 #C5BFD4, 0 0 0 #F5F2FA;
    transition: box-shadow 0.8s ease;
    transition-delay: 150ms;
}
.ring-2.emerged {
    box-shadow: 4px 4px 8px #C5BFD4, -4px -4px 8px #F5F2FA;
}

.ring-3 {
    width: 152px;
    height: 152px;
    box-shadow: 0 0 0 #C5BFD4, 0 0 0 #F5F2FA;
    transition: box-shadow 0.8s ease;
    transition-delay: 300ms;
}
.ring-3.emerged {
    box-shadow: inset 4px 4px 8px #C5BFD4, inset -4px -4px 8px #F5F2FA;
}

.ring-4 {
    width: 136px;
    height: 136px;
    box-shadow: 0 0 0 #C5BFD4, 0 0 0 #F5F2FA;
    transition: box-shadow 0.8s ease;
    transition-delay: 450ms;
}
.ring-4.emerged {
    box-shadow: 4px 4px 8px #C5BFD4, -4px -4px 8px #F5F2FA;
}

.ring-5 {
    width: 128px;
    height: 128px;
    box-shadow: 0 0 0 #C5BFD4, 0 0 0 #F5F2FA;
    transition: box-shadow 0.8s ease;
    transition-delay: 600ms;
}
.ring-5.emerged {
    box-shadow: inset 4px 4px 8px #C5BFD4, inset -4px -4px 8px #F5F2FA;
}

.dial-center {
    position: relative;
    z-index: 2;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #D8D2E3;
    box-shadow: inset 4px 4px 8px #C5BFD4, inset -4px -4px 8px #F5F2FA;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dial-value {
    font-family: 'Fira Code', monospace;
    font-weight: 400;
    font-size: 13px;
    color: #5B3FBF;
}

.dial-text-wrap {
    flex: 1;
}

.dial-text-wrap .zone-heading {
    margin-bottom: 20px;
}

.dial-description {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: #6B6480;
}

/* ===== ZONE 4: RESONANCE ===== */
.zone-4 {
    min-height: 100vh;
}

.zone-4-heading {
    text-align: center;
    margin-bottom: 48px;
}

.tiles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 480px;
    margin: 0 auto;
}

.tile {
    aspect-ratio: 1;
    border-radius: 24px;
    background: #E8E4EF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    cursor: default;
    box-shadow: inset 6px 6px 12px #C5BFD4, inset -6px -6px 12px #F5F2FA;
    transition: box-shadow 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.tile.emerged {
    box-shadow: 8px 8px 16px #C5BFD4, -8px -8px 16px #F5F2FA;
}

@media (prefers-reduced-motion: no-preference) {
    .tile.emerged {
        transition: box-shadow 0.3s ease;
    }

    .tile.emerged:hover {
        box-shadow: inset 6px 6px 12px #C5BFD4, inset -6px -6px 12px #F5F2FA,
                    0 0 0 2px #5B3FBF;
    }

    .tile.emerged:hover .tile-label {
        color: #7B5FDF;
    }
}

.tile-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #D8D2E3;
    box-shadow: inset 4px 4px 8px #C5BFD4, inset -4px -4px 8px #F5F2FA;
}

/* ===== ZONE 5: STILLNESS ===== */
.zone-5 {
    min-height: 100vh;
    padding-bottom: 120px;
}

.zone-5-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.footer-ridge {
    width: 0%;
    height: 2px;
    background: #E8E4EF;
    box-shadow: 2px 2px 4px #C5BFD4, -2px -2px 4px #F5F2FA;
    border-radius: 2px;
    transition: width 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.footer-ridge.emerged {
    width: 60%;
}

.footer-domain {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #8A82A0;
    padding: 12px 24px;
    border-radius: 16px;
    background: #E8E4EF;
    box-shadow: inset 0 0 0 #C5BFD4, inset 0 0 0 #F5F2FA;
    opacity: 0;
    transition: opacity 2s ease, box-shadow 2s ease;
}

.footer-domain.emerged {
    opacity: 1;
    box-shadow: inset 4px 4px 8px #C5BFD4, inset -4px -4px 8px #F5F2FA;
}

/* ===== GUTTER CRATERS (decorative) ===== */
.zone::before,
.zone-2::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: #E8E4EF;
    box-shadow: inset 6px 6px 12px #C5BFD4, inset -6px -6px 12px #F5F2FA;
    pointer-events: none;
}

.zone-1::before {
    width: 100px;
    height: 100px;
    right: 8%;
    top: 20%;
}

.zone-2::after {
    width: 80px;
    height: 80px;
    left: 5%;
    bottom: 15%;
}

.zone-4::before {
    width: 120px;
    height: 120px;
    left: 4%;
    top: 30%;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .site-title {
        font-size: 36px;
        padding: 18px 32px;
    }

    h2, .zone-heading {
        font-size: 28px;
    }

    .zone-3-layout {
        flex-direction: column;
        display: flex;
    }

    .dial-float {
        display: none;
    }

    .dial-wrapper {
        position: static;
        transform: none;
    }

    .dial {
        width: 220px;
        height: 220px;
    }

    .ring-1 { width: 172px; height: 172px; }
    .ring-2 { width: 140px; height: 140px; }
    .ring-3 { width: 120px; height: 120px; }
    .ring-4 { width: 108px; height: 108px; }
    .ring-5 { width: 102px; height: 102px; }

    .dial-center {
        width: 60px;
        height: 60px;
    }

    .tiles-grid {
        gap: 24px;
        max-width: 320px;
    }

    .pill-1, .pill-2, .pill-3 {
        max-width: 100%;
    }

    .zone {
        padding: 48px 24px;
    }

    .orb-2, .orb-4 {
        display: none;
    }

    .zone::before,
    .zone-2::after,
    .zone-4::before {
        display: none;
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .orb {
        animation: none;
    }

    .site-title,
    .subtitle-container,
    .pill,
    .ring,
    .tile,
    .footer-ridge,
    .footer-domain {
        transition: none;
    }

    .site-title {
        opacity: 1;
        box-shadow: 8px 8px 16px #C5BFD4, -8px -8px 16px #F5F2FA;
    }

    .subtitle-container {
        opacity: 1;
        box-shadow: inset 6px 6px 12px #C5BFD4, inset -6px -6px 12px #F5F2FA;
    }

    .pill {
        box-shadow: 8px 8px 16px #C5BFD4, -8px -8px 16px #F5F2FA;
    }

    .ring-1 { box-shadow: inset 4px 4px 8px #C5BFD4, inset -4px -4px 8px #F5F2FA; }
    .ring-2 { box-shadow: 4px 4px 8px #C5BFD4, -4px -4px 8px #F5F2FA; }
    .ring-3 { box-shadow: inset 4px 4px 8px #C5BFD4, inset -4px -4px 8px #F5F2FA; }
    .ring-4 { box-shadow: 4px 4px 8px #C5BFD4, -4px -4px 8px #F5F2FA; }
    .ring-5 { box-shadow: inset 4px 4px 8px #C5BFD4, inset -4px -4px 8px #F5F2FA; }

    .tile {
        box-shadow: 8px 8px 16px #C5BFD4, -8px -8px 16px #F5F2FA;
    }

    .footer-ridge {
        width: 60%;
    }

    .footer-domain {
        opacity: 1;
        box-shadow: inset 4px 4px 8px #C5BFD4, inset -4px -4px 8px #F5F2FA;
    }

    .scroll-indicator {
        opacity: 1;
    }
}