/* ============================================
   eyes.cash - Seapunk Treasure Vault
   ============================================ */

:root {
    --abyssal-black: #0B0E17;
    --midnight-sapphire: #0F1B3D;
    --imperial-emerald: #1B7A4E;
    --blood-ruby: #9B1B30;
    --royal-amethyst: #6B2FA0;
    --burning-topaz: #D4890E;
    --frost-silver: #E8ECF4;
    --sea-glass: #8FA3B8;
    --bioluminescent-cyan: #00E5C7;
    --crystal-edge: #2A3A6B;
    --reef-shadow: #060912;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background: var(--abyssal-black);
    color: var(--frost-silver);
    font-family: 'Instrument Sans', 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.72;
    overflow-x: hidden;
}

/* --- Gem Navigation --- */
.gem-nav {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    z-index: 100;
}

.gem-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gem {
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    border: 1px solid var(--crystal-edge);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gem.diamond { background: rgba(232, 236, 244, 0.2); }
.gem.emerald { background: rgba(27, 122, 78, 0.3); }
.gem.sapphire { background: rgba(42, 58, 107, 0.3); }
.gem.ruby { background: rgba(155, 27, 48, 0.3); }
.gem.amethyst { background: rgba(107, 47, 160, 0.3); }
.gem.topaz { background: rgba(212, 137, 14, 0.3); }

.gem-btn.active .gem {
    box-shadow: 0 0 12px rgba(0, 229, 199, 0.4);
    animation: gemPulse 2s ease-in-out infinite;
}

.gem-btn.active .gem.diamond { background: var(--frost-silver); }
.gem-btn.active .gem.emerald { background: var(--imperial-emerald); }
.gem-btn.active .gem.sapphire { background: var(--crystal-edge); }
.gem-btn.active .gem.ruby { background: var(--blood-ruby); }
.gem-btn.active .gem.amethyst { background: var(--royal-amethyst); }
.gem-btn.active .gem.topaz { background: var(--burning-topaz); }

@keyframes gemPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(0, 229, 199, 0.3); transform: rotate(45deg) scale(1); }
    50% { box-shadow: 0 0 20px rgba(0, 229, 199, 0.6); transform: rotate(45deg) scale(1.15); }
}

/* --- Site Mark --- */
.site-mark {
    position: fixed;
    top: 1.5rem;
    left: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 100;
}

.mark-gem {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background: var(--imperial-emerald);
    border: 1px solid var(--bioluminescent-cyan);
}

.mark-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sea-glass);
}

/* --- Spread Base --- */
.spread {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Caustic Overlay --- */
.caustic-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.06;
    background:
        radial-gradient(ellipse 120px 100px at 20% 30%, rgba(0, 229, 199, 0.4), transparent),
        radial-gradient(ellipse 80px 140px at 60% 70%, rgba(0, 229, 199, 0.3), transparent),
        radial-gradient(ellipse 150px 80px at 80% 20%, rgba(0, 229, 199, 0.35), transparent),
        radial-gradient(ellipse 100px 120px at 40% 80%, rgba(0, 229, 199, 0.25), transparent);
    animation: causticShift 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.caustic-overlay.dim { opacity: 0.04; }
.caustic-overlay.deep { opacity: 0.02; }

@keyframes causticShift {
    0% { background-position: 0% 0%, 100% 100%, 50% 0%, 0% 50%; }
    50% { background-position: 50% 50%, 0% 0%, 100% 50%, 50% 100%; }
    100% { background-position: 0% 0%, 100% 100%, 50% 0%, 0% 50%; }
}

/* --- Corner Crystals --- */
.corner-crystals {
    position: absolute;
    z-index: 2;
    width: 80px;
    height: 80px;
}

.corner-crystals.tl {
    top: 3vw;
    left: 3vw;
}

.corner-crystals.br {
    bottom: 3vw;
    right: 3vw;
}

.corner-crystals::before,
.corner-crystals::after {
    content: '';
    position: absolute;
    transform: rotate(45deg);
    border: 1px solid var(--crystal-edge);
    opacity: 0.5;
}

.corner-crystals.tl::before {
    width: 20px;
    height: 30px;
    background: rgba(27, 122, 78, 0.15);
    top: 0;
    left: 0;
    transform: rotate(30deg);
}

.corner-crystals.tl::after {
    width: 15px;
    height: 22px;
    background: rgba(107, 47, 160, 0.15);
    top: 20px;
    left: 25px;
    transform: rotate(50deg);
}

.corner-crystals.br::before {
    width: 18px;
    height: 28px;
    background: rgba(107, 47, 160, 0.15);
    bottom: 0;
    right: 0;
    transform: rotate(35deg);
}

.corner-crystals.br::after {
    width: 14px;
    height: 20px;
    background: rgba(0, 229, 199, 0.1);
    bottom: 22px;
    right: 22px;
    transform: rotate(55deg);
}

/* ============================================
   SPREAD 1: THE SURFACE
   ============================================ */
.spread-surface {
    background: var(--abyssal-black);
    flex-direction: column;
    gap: 2rem;
}

.surface-content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Eye Motif */
.eye-motif {
    margin-bottom: 2rem;
}

.eye-diamond {
    width: 80px;
    height: 80px;
    position: relative;
    transform: rotate(45deg);
    opacity: 0;
    animation: crystalGrow 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
}

@keyframes crystalGrow {
    0% { opacity: 0; transform: rotate(45deg) scale(0); }
    60% { opacity: 0.8; transform: rotate(45deg) scale(1.1); }
    100% { opacity: 1; transform: rotate(45deg) scale(1); }
}

.eye-facet {
    position: absolute;
    border: 1px solid var(--crystal-edge);
}

.eye-facet.f1 {
    top: 0; left: 0;
    width: 50%;
    height: 50%;
    background: linear-gradient(135deg, rgba(27, 122, 78, 0.3), transparent);
    opacity: 0;
    animation: facetReveal 300ms ease-out 0.8s forwards;
}

.eye-facet.f2 {
    top: 0; right: 0;
    width: 50%;
    height: 50%;
    background: linear-gradient(225deg, rgba(107, 47, 160, 0.3), transparent);
    opacity: 0;
    animation: facetReveal 300ms ease-out 1.0s forwards;
}

.eye-facet.f3 {
    bottom: 0; left: 0;
    width: 50%;
    height: 50%;
    background: linear-gradient(45deg, rgba(0, 229, 199, 0.2), transparent);
    opacity: 0;
    animation: facetReveal 300ms ease-out 1.2s forwards;
}

.eye-facet.f4 {
    bottom: 0; right: 0;
    width: 50%;
    height: 50%;
    background: linear-gradient(315deg, rgba(155, 27, 48, 0.2), transparent);
    opacity: 0;
    animation: facetReveal 300ms ease-out 1.4s forwards;
}

@keyframes facetReveal {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.eye-iris {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--imperial-emerald), var(--bioluminescent-cyan));
    box-shadow: 0 0 20px rgba(0, 229, 199, 0.3);
}

.eye-pupil {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--abyssal-black);
    animation: pupilDilate 4s ease-in-out infinite;
}

@keyframes pupilDilate {
    0%, 100% { width: 10px; height: 10px; }
    50% { width: 16px; height: 16px; }
}

/* Hero Title */
.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(4rem, 10vw, 10rem);
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, var(--imperial-emerald), var(--royal-amethyst), var(--imperial-emerald));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientCycle 8s ease-in-out infinite;
    opacity: 0;
    animation: heroFade 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards, gradientCycle 8s ease-in-out 1.8s infinite;
}

@keyframes heroFade {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes gradientCycle {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-tagline {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 1.125rem;
    color: var(--sea-glass);
    letter-spacing: 0.06em;
    opacity: 0;
    animation: heroFade 1s cubic-bezier(0.4, 0, 0.2, 1) 2s forwards;
    max-width: 500px;
}

/* Scroll Crystal */
.scroll-crystal {
    margin-top: 3rem;
    animation: pulseAttention 2s ease-in-out infinite;
}

.crystal-arrow {
    width: 24px;
    height: 32px;
}

@keyframes pulseAttention {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
}

/* ============================================
   SPREAD 2: THE DESCENT
   ============================================ */
.spread-descent {
    background: var(--abyssal-black);
    flex-direction: column;
}

.descent-layout {
    display: flex;
    width: 100%;
    max-width: 1200px;
    gap: 4rem;
    z-index: 3;
    align-items: center;
}

/* Crystal Cluster */
.crystal-cluster {
    width: 40%;
    min-width: 300px;
    height: 400px;
    position: relative;
    flex-shrink: 0;
}

.crystal {
    position: absolute;
    border: 1px solid var(--crystal-edge);
    transform: rotate(45deg) scale(0);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s;
    opacity: 0;
    box-shadow: 0 0 40px rgba(0, 229, 199, 0.08);
    animation: crystalBreathe 6s ease-in-out infinite;
}

.crystal.visible {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.crystal.c1 { width: 80px; height: 120px; top: 10%; left: 30%; background: linear-gradient(135deg, rgba(27, 122, 78, 0.4), rgba(0, 229, 199, 0.1)); transition-delay: 0ms; }
.crystal.c2 { width: 60px; height: 90px; top: 25%; left: 55%; background: linear-gradient(135deg, rgba(107, 47, 160, 0.4), rgba(155, 27, 48, 0.1)); transition-delay: 150ms; }
.crystal.c3 { width: 50px; height: 70px; top: 5%; left: 50%; background: linear-gradient(135deg, rgba(0, 229, 199, 0.3), rgba(27, 122, 78, 0.1)); transition-delay: 300ms; }
.crystal.c4 { width: 70px; height: 100px; top: 35%; left: 20%; background: linear-gradient(135deg, rgba(155, 27, 48, 0.3), rgba(212, 137, 14, 0.1)); transition-delay: 450ms; }
.crystal.c5 { width: 45px; height: 65px; top: 50%; left: 45%; background: linear-gradient(135deg, rgba(212, 137, 14, 0.3), rgba(232, 236, 244, 0.05)); transition-delay: 600ms; }
.crystal.c6 { width: 55px; height: 80px; top: 15%; left: 10%; background: linear-gradient(135deg, rgba(107, 47, 160, 0.3), rgba(0, 229, 199, 0.1)); transition-delay: 750ms; }
.crystal.c7 { width: 40px; height: 55px; top: 45%; left: 60%; background: linear-gradient(135deg, rgba(27, 122, 78, 0.3), rgba(107, 47, 160, 0.1)); transition-delay: 900ms; }

@keyframes crystalBreathe {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 229, 199, 0.05); }
    50% { box-shadow: 0 0 40px rgba(0, 229, 199, 0.15); }
}

/* Descent Text */
.descent-text {
    max-width: 38em;
    z-index: 3;
}

.section-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: 0.06em;
    color: var(--frost-silver);
    margin-bottom: 2rem;
}

.descent-text p {
    margin-bottom: 1.5rem;
    color: var(--frost-silver);
    max-width: 38em;
}

.highlight {
    color: var(--imperial-emerald);
    font-style: normal;
    font-weight: 500;
}

/* Reef Band */
.reef-band {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 12vh;
    background: linear-gradient(to top, var(--reef-shadow), transparent);
    overflow: hidden;
    z-index: 2;
}

.reef-band::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background:
        repeating-linear-gradient(
            60deg,
            transparent 0px,
            transparent 40px,
            rgba(27, 122, 78, 0.08) 40px,
            rgba(27, 122, 78, 0.08) 42px
        ),
        repeating-linear-gradient(
            120deg,
            transparent 0px,
            transparent 35px,
            rgba(107, 47, 160, 0.06) 35px,
            rgba(107, 47, 160, 0.06) 37px
        );
    animation: reefScroll 20s linear infinite;
}

@keyframes reefScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(25%); }
}

/* ============================================
   SPREAD 3: THE VAULT
   ============================================ */
.spread-vault {
    background: var(--midnight-sapphire);
    min-height: 120vh;
}

.vault-layout {
    display: flex;
    width: 100%;
    max-width: 1200px;
    gap: 2rem;
    z-index: 3;
}

.vault-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    position: relative;
}

.vault-center {
    flex: 2;
    max-width: 38em;
    padding: 4rem 2rem;
}

.vault-center p {
    margin-bottom: 1.5rem;
    color: var(--frost-silver);
}

.vault-highlight {
    padding: 2rem;
    border-left: 2px solid var(--blood-ruby);
    background: rgba(155, 27, 48, 0.05);
    margin: 2rem 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    animation: borderPulse 3s ease-in-out infinite;
}

@keyframes borderPulse {
    0%, 100% { border-color: rgba(155, 27, 48, 0.5); }
    50% { border-color: rgba(155, 27, 48, 1); box-shadow: -2px 0 20px rgba(155, 27, 48, 0.15); }
}

.crystal-border-deco {
    width: 3px;
    height: 200px;
    background: linear-gradient(to bottom, transparent, var(--crystal-edge), transparent);
    position: relative;
}

.crystal-border-deco::before,
.crystal-border-deco::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border: 1px solid var(--crystal-edge);
}

.crystal-border-deco::before { top: -4px; background: rgba(0, 229, 199, 0.2); }
.crystal-border-deco::after { bottom: -4px; background: rgba(107, 47, 160, 0.2); }

/* Floating Eye */
.floating-eye {
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
    border: 1px solid var(--crystal-edge);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatEye 6s ease-in-out infinite;
}

.floating-eye.fe2 { animation-delay: 3s; }

.mini-iris {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--imperial-emerald), var(--bioluminescent-cyan));
    transform: rotate(-45deg);
    animation: pupilDilate 4s ease-in-out infinite;
}

@keyframes floatEye {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50% { transform: rotate(45deg) translateY(-10px); }
}

/* Orbit Gems */
.orbit-gems {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.orbit-gem {
    position: absolute;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    border: 1px solid var(--crystal-edge);
    opacity: 0.5;
}

.orbit-gem.og1 { top: 15%; left: 10%; background: rgba(27, 122, 78, 0.3); animation: slowSpin 22s linear infinite; }
.orbit-gem.og2 { top: 25%; right: 12%; background: rgba(107, 47, 160, 0.3); animation: slowSpin 28s linear infinite reverse; }
.orbit-gem.og3 { bottom: 20%; left: 15%; background: rgba(155, 27, 48, 0.3); animation: slowSpin 24s linear infinite; }
.orbit-gem.og4 { top: 60%; right: 8%; background: rgba(0, 229, 199, 0.2); animation: slowSpin 30s linear infinite reverse; }
.orbit-gem.og5 { top: 40%; left: 5%; background: rgba(212, 137, 14, 0.3); animation: slowSpin 26s linear infinite; }
.orbit-gem.og6 { bottom: 30%; right: 20%; background: rgba(232, 236, 244, 0.15); animation: slowSpin 20s linear infinite reverse; }

@keyframes slowSpin {
    0% { transform: rotate(45deg); }
    100% { transform: rotate(405deg); }
}

/* ============================================
   SPREAD 4: THE FACETS
   ============================================ */
.spread-facets {
    background: var(--abyssal-black);
}

.mega-gem {
    width: clamp(300px, 50vw, 600px);
    height: 60vh;
    position: relative;
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    z-index: 3;
}

.mega-facet {
    position: absolute;
    border: 1px solid var(--crystal-edge);
}

.mega-facet.mf-top {
    top: 0;
    left: 10%;
    width: 80%;
    height: 35%;
    background: linear-gradient(180deg, rgba(27, 122, 78, 0.3), rgba(0, 229, 199, 0.05));
    clip-path: polygon(40% 0%, 60% 0%, 95% 100%, 5% 100%);
}

.mega-facet.mf-left {
    top: 30%;
    left: 0;
    width: 45%;
    height: 45%;
    background: linear-gradient(135deg, rgba(107, 47, 160, 0.25), rgba(27, 122, 78, 0.05));
    clip-path: polygon(10% 0%, 100% 0%, 80% 100%, 0% 80%);
}

.mega-facet.mf-right {
    top: 30%;
    right: 0;
    width: 45%;
    height: 45%;
    background: linear-gradient(225deg, rgba(155, 27, 48, 0.2), rgba(107, 47, 160, 0.05));
    clip-path: polygon(0% 0%, 90% 0%, 100% 80%, 20% 100%);
}

.mega-facet.mf-bottom {
    bottom: 0;
    left: 15%;
    width: 70%;
    height: 30%;
    background: linear-gradient(0deg, rgba(0, 229, 199, 0.15), transparent);
    clip-path: polygon(0% 0%, 100% 0%, 60% 100%, 40% 100%);
}

.mega-facet.mf-center {
    top: 25%;
    left: 20%;
    width: 60%;
    height: 50%;
    background: radial-gradient(ellipse, rgba(27, 122, 78, 0.15), transparent);
    animation: refractionShift 10s ease-in-out infinite;
}

@keyframes refractionShift {
    0%, 100% { background: radial-gradient(ellipse at 40% 40%, rgba(27, 122, 78, 0.2), transparent); }
    33% { background: radial-gradient(ellipse at 60% 30%, rgba(107, 47, 160, 0.2), transparent); }
    66% { background: radial-gradient(ellipse at 50% 60%, rgba(0, 229, 199, 0.15), transparent); }
}

.gem-text {
    position: absolute;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 3rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--frost-silver);
    mix-blend-mode: screen;
    z-index: 5;
}

.gem-text.gt1 { top: 25%; left: 50%; transform: translateX(-50%); }
.gem-text.gt2 { top: 48%; left: 50%; transform: translateX(-50%); }
.gem-text.gt3 { top: 68%; left: 50%; transform: translateX(-50%); }

/* ============================================
   SPREAD 5: THE EYE
   ============================================ */
.spread-eye {
    background: var(--abyssal-black);
    flex-direction: column;
    gap: 3rem;
}

.giant-eye {
    width: clamp(250px, 50vw, 500px);
    height: clamp(250px, 50vw, 500px);
    border-radius: 50%;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--crystal-edge);
    box-shadow:
        0 0 60px rgba(0, 229, 199, 0.1),
        inset 0 0 60px rgba(0, 229, 199, 0.05);
}

.giant-iris {
    width: 65%;
    height: 65%;
    border-radius: 50%;
    background: conic-gradient(
        var(--imperial-emerald),
        var(--bioluminescent-cyan),
        var(--royal-amethyst),
        var(--blood-ruby),
        var(--burning-topaz),
        var(--imperial-emerald)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    animation: irisCycle 12s linear infinite;
    box-shadow: 0 0 40px rgba(0, 229, 199, 0.2);
}

@keyframes irisCycle {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.giant-pupil {
    width: 35%;
    height: 35%;
    border-radius: 50%;
    background: var(--abyssal-black);
    border: 1px solid var(--crystal-edge);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Eye Ring Crystals */
.eye-ring {
    position: absolute;
    width: 120%;
    height: 120%;
    animation: ringOrbit 30s linear infinite;
}

.ring-crystal {
    position: absolute;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    border: 1px solid var(--crystal-edge);
    box-shadow: 0 0 10px rgba(0, 229, 199, 0.2);
}

.ring-crystal.rc1 { top: 0; left: 50%; background: rgba(27, 122, 78, 0.5); }
.ring-crystal.rc2 { top: 14.6%; left: 85.4%; background: rgba(0, 229, 199, 0.4); }
.ring-crystal.rc3 { top: 50%; right: 0; background: rgba(107, 47, 160, 0.5); }
.ring-crystal.rc4 { bottom: 14.6%; right: 14.6%; background: rgba(155, 27, 48, 0.4); }
.ring-crystal.rc5 { bottom: 0; left: 50%; background: rgba(212, 137, 14, 0.5); }
.ring-crystal.rc6 { bottom: 14.6%; left: 14.6%; background: rgba(27, 122, 78, 0.4); }
.ring-crystal.rc7 { top: 50%; left: 0; background: rgba(107, 47, 160, 0.4); }
.ring-crystal.rc8 { top: 14.6%; left: 14.6%; background: rgba(0, 229, 199, 0.3); }

@keyframes ringOrbit {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.eye-statement {
    z-index: 3;
    text-align: center;
    max-width: 600px;
}

.display-statement {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    letter-spacing: 0.06em;
    color: var(--frost-silver);
    line-height: 1.4;
}

/* ============================================
   SPREAD 6: THE DEPTHS
   ============================================ */
.spread-depths {
    background: var(--abyssal-black);
    min-height: 60vh;
    flex-direction: column;
    gap: 1.5rem;
}

.depths-content {
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.depths-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: 0.06em;
    color: var(--frost-silver);
    margin-bottom: 1rem;
}

.depths-sub {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1rem;
    color: var(--sea-glass);
    max-width: 400px;
    margin-bottom: 3rem;
}

.final-cluster {
    position: relative;
    width: 120px;
    height: 80px;
}

.final-cluster .crystal {
    opacity: 0.5;
    transform: rotate(45deg) scale(1);
}

.final-cluster .fc1 {
    width: 25px;
    height: 40px;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(27, 122, 78, 0.3);
}

.final-cluster .fc2 {
    width: 20px;
    height: 30px;
    top: 10px;
    left: 25%;
    background: rgba(107, 47, 160, 0.3);
}

.final-cluster .fc3 {
    width: 18px;
    height: 28px;
    top: 15px;
    right: 20%;
    background: rgba(0, 229, 199, 0.2);
}

/* --- Gem Dust --- */
.gem-dust {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

/* --- Animate Sections on Scroll --- */
.spread .section-heading,
.spread .descent-text p,
.spread .vault-center p,
.spread .vault-highlight {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.spread.in-view .section-heading,
.spread.in-view .descent-text p,
.spread.in-view .vault-center p,
.spread.in-view .vault-highlight {
    opacity: 1;
    transform: translateY(0);
}

.spread.in-view .descent-text p:nth-child(2) { transition-delay: 0.1s; }
.spread.in-view .descent-text p:nth-child(3) { transition-delay: 0.2s; }
.spread.in-view .descent-text p:nth-child(4) { transition-delay: 0.3s; }

.spread.in-view .vault-center p:nth-child(2) { transition-delay: 0.1s; }
.spread.in-view .vault-center .vault-highlight { transition-delay: 0.2s; }
.spread.in-view .vault-center p:nth-child(4) { transition-delay: 0.3s; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .gem-nav {
        right: 0.5rem;
    }

    .descent-layout {
        flex-direction: column;
        padding: 2rem 1rem;
    }

    .crystal-cluster {
        width: 100%;
        min-width: unset;
        height: 250px;
    }

    .vault-layout {
        flex-direction: column;
    }

    .vault-side {
        display: none;
    }

    .vault-center {
        padding: 2rem 1rem;
    }

    .spread {
        padding: 2vw;
    }

    .mega-gem {
        height: 50vh;
    }
}