/* RRIPPL.com -- Concentric Ring Emanation
   Ocean-deep palette, sonar-driven motion, pure CSS+SVG visual language. */

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

:root {
    /* Primary palette -- ocean-deep, layered opacity */
    --abyss:      #060E1A;
    --deep:       #0A1628;
    --indigo:     #1B3A5C;
    --steel:      #4A7C9B;
    --teal:       #007B6E;
    --cyan:       #00D4AA;
    --gold:       #D4A84B;
    --mist:       #E0F2F1;

    /* RGB triples for opacity stacking */
    --cyan-rgb:   0, 212, 170;
    --indigo-rgb: 27, 58, 92;
    --teal-rgb:   0, 123, 110;
    --steel-rgb:  74, 124, 155;
    --mist-rgb:   224, 242, 241;
    --gold-rgb:   212, 168, 75;
    --abyss-rgb:  6, 14, 26;

    /* Origin point for concentric animations */
    --ripple-origin-x: 50%;
    --ripple-origin-y: 50%;

    /* Scroll depth (0 -> 1) updated via JS */
    --scroll-depth: 0;

    /* Type families */
    --font-display: 'Outfit', 'Space Grotesk', 'Inter', sans-serif;
    --font-body:    'Libre Franklin', 'Inter', sans-serif;
    --font-mono:    'Inconsolata', 'Inter', monospace;
}

html {
    scroll-behavior: smooth;
    background: var(--abyss);
    color: var(--mist);
}

body {
    font-family: var(--font-body);
    background: var(--abyss);
    color: var(--mist);
    overflow-x: hidden;
    min-height: 100vh;
    line-height: 1.7;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   MAIN STAGE -- 3D perspective for parallax depth layers
   ============================================================ */
.rings {
    position: relative;
    z-index: 2;
    perspective: 1200px;
    transform-style: preserve-3d;
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
}
.rings::-webkit-scrollbar { display: none; }

/* ============================================================
   DEPTH STAGE -- persistent 3-layer background
   ============================================================ */
.depth-stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    perspective: 1000px;
    transform-style: preserve-3d;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 40%, #0E2238 0%, var(--deep) 35%, var(--abyss) 75%, #04080F 100%);
}

.layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.layer-back {
    transform: translateZ(-200px) scale(1.25);
}

.layer-particles {
    transform: translateZ(100px);
    z-index: 3;
}

/* Background concentric rings */
.bg-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(180vmax, 2400px);
    height: min(180vmax, 2400px);
    transform: translate(-50%, calc(-50% + var(--scroll-depth, 0) * -120px));
    opacity: 0.5;
}
.bg-rings circle {
    fill: none;
    stroke: var(--indigo);
    stroke-width: 0.6;
    opacity: 0.55;
}
.bg-ring-group {
    transform-origin: 0 0;
    animation: bgPulse 22s ease-in-out infinite;
}
.bg-ring-group.secondary {
    animation: bgPulse 28s ease-in-out infinite reverse;
}
.bg-ring-group.secondary circle {
    stroke: var(--teal);
    opacity: 0.35;
}
@keyframes bgPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.06); opacity: 0.7; }
}

.sonar-sweep {
    stroke: var(--cyan);
    stroke-width: 1;
    opacity: 0.55;
    transform-origin: 0 0;
    animation: sonarSweep 12s linear infinite;
    filter: drop-shadow(0 0 6px rgba(var(--cyan-rgb), 0.6));
}
@keyframes sonarSweep {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Cymatic gradient field */
.cymatic-field {
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(circle at 50% 50%, transparent 0,   transparent 80px,  rgba(var(--teal-rgb), 0.08) 81px,  transparent 96px),
        radial-gradient(circle at 50% 50%, transparent 0,   transparent 160px, rgba(var(--cyan-rgb), 0.07) 161px, transparent 178px),
        radial-gradient(circle at 50% 50%, transparent 0,   transparent 260px, rgba(var(--indigo-rgb), 0.12) 261px, transparent 282px),
        radial-gradient(circle at 50% 50%, transparent 0,   transparent 380px, rgba(var(--teal-rgb), 0.06) 381px,  transparent 402px),
        radial-gradient(circle at 50% 50%, transparent 0,   transparent 520px, rgba(var(--cyan-rgb), 0.05) 521px,  transparent 540px),
        radial-gradient(circle at 50% 50%, transparent 0,   transparent 700px, rgba(var(--indigo-rgb), 0.08) 701px, transparent 720px);
    mix-blend-mode: screen;
    opacity: 0.85;
    transform: translateY(calc(var(--scroll-depth, 0) * -60px));
}

/* Depth fog -- intensifies with scroll */
.depth-fog {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(var(--abyss-rgb), 0.4) 70%, rgba(var(--abyss-rgb), 0.85) 100%);
    opacity: calc(0.4 + var(--scroll-depth, 0) * 0.55);
    transition: opacity 0.4s linear;
}

/* Bioluminescent particles (JS-injected) */
.bio-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(var(--cyan-rgb), 0.45);
    box-shadow:
        0 0 8px rgba(var(--cyan-rgb), 0.55),
        0 0 18px rgba(var(--cyan-rgb), 0.25);
    animation-name: bioFloat;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}
@keyframes bioFloat {
    0%   { transform: translate3d(0, 8vh, 0)   scale(0.85); opacity: 0; }
    8%   { opacity: 0.55; }
    25%  { transform: translate3d(8px, -22vh, 0)  scale(1); opacity: 0.6; }
    50%  { transform: translate3d(-12px, -52vh, 0) scale(1.05); opacity: 0.75; }
    75%  { transform: translate3d(10px, -82vh, 0)  scale(0.95); opacity: 0.5; }
    100% { transform: translate3d(-6px, -110vh, 0) scale(0.7); opacity: 0; }
}

/* ============================================================
   RADIAL NAVIGATION -- arc of nav points along top
   ============================================================ */
.radial-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    pointer-events: none;
    height: 110px;
}

.nav-toggle {
    position: absolute;
    top: 22px;
    left: 28px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(var(--cyan-rgb), 0.4);
    background: rgba(var(--abyss-rgb), 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    pointer-events: auto;
    display: grid;
    place-items: center;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.nav-toggle:hover { border-color: var(--cyan); transform: scale(1.06); }
.nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 12px rgba(var(--cyan-rgb), 0.7);
    position: relative;
    z-index: 2;
}
.nav-pulse {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1px solid rgba(var(--cyan-rgb), 0.5);
    animation: navPulse 2.4s ease-out infinite;
}
@keyframes navPulse {
    0%   { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(2.2); opacity: 0; }
}

.nav-arc {
    list-style: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.nav-arc li {
    position: absolute;
    top: 28px;
    left: 50%;
    /* arrange along a downward arc */
    --arc-step: 7vw;
    --arc-base: -2.5;
    --arc-x: calc((var(--arc-i) - 2.5) * var(--arc-step));
    --arc-y: calc(pow((var(--arc-i) - 2.5), 2) * 1.5px);
    transform: translate(var(--arc-x), var(--arc-y));
    pointer-events: auto;
}
/* fallback for browsers without pow() -- explicit y per index */
.nav-arc li[style*="--arc-i:0"] { transform: translate(calc(-2.5 * 7vw), 18px); }
.nav-arc li[style*="--arc-i:1"] { transform: translate(calc(-1.5 * 7vw), 8px);  }
.nav-arc li[style*="--arc-i:2"] { transform: translate(calc(-0.5 * 7vw), 2px);  }
.nav-arc li[style*="--arc-i:3"] { transform: translate(calc( 0.5 * 7vw), 2px);  }
.nav-arc li[style*="--arc-i:4"] { transform: translate(calc( 1.5 * 7vw), 8px);  }
.nav-arc li[style*="--arc-i:5"] { transform: translate(calc( 2.5 * 7vw), 18px); }

.nav-arc a {
    text-decoration: none;
    color: var(--steel);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    position: relative;
}
.nav-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--indigo);
    border: 1px solid rgba(var(--steel-rgb), 0.6);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}
.nav-marker::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1px solid var(--cyan);
    opacity: 0;
    transform: scale(0.6);
    transition: transform 0.7s ease, opacity 0.7s ease;
}
.nav-arc a:hover .nav-marker,
.nav-arc a.active .nav-marker {
    background: var(--cyan);
    box-shadow: 0 0 14px rgba(var(--cyan-rgb), 0.7);
    transform: scale(1.15);
}
.nav-arc a:hover .nav-marker::after,
.nav-arc a.active .nav-marker::after {
    opacity: 1;
    transform: scale(2.4);
    opacity: 0;
}
.nav-label {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    color: var(--mist);
    pointer-events: none;
}
.nav-arc a:hover .nav-label,
.nav-arc a.active .nav-label { opacity: 0.9; transform: translateY(0); }

/* Mobile collapsed nav */
@media (max-width: 720px) {
    .nav-arc { opacity: 0; transform: scale(0.7); transform-origin: 28px 40px; transition: opacity 0.4s ease, transform 0.4s ease; }
    .radial-nav.open .nav-arc { opacity: 1; transform: scale(1); }
    .nav-arc li {
        top: 80px !important;
        left: 28px !important;
        transform: none !important;
    }
    .nav-arc li[style*="--arc-i:0"] { transform: translateY(0)   !important; }
    .nav-arc li[style*="--arc-i:1"] { transform: translateY(36px)  !important; }
    .nav-arc li[style*="--arc-i:2"] { transform: translateY(72px)  !important; }
    .nav-arc li[style*="--arc-i:3"] { transform: translateY(108px) !important; }
    .nav-arc li[style*="--arc-i:4"] { transform: translateY(144px) !important; }
    .nav-arc li[style*="--arc-i:5"] { transform: translateY(180px) !important; }
    .nav-arc a { flex-direction: row; gap: 12px; }
    .nav-label { opacity: 1; transform: none; }
}

/* ============================================================
   SONAR HUD (top-right instrument readout)
   ============================================================ */
.hud {
    position: fixed;
    top: 26px;
    right: 28px;
    z-index: 30;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--steel);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: right;
    padding: 10px 14px;
    border: 1px solid rgba(var(--steel-rgb), 0.25);
    border-radius: 2px;
    background: rgba(var(--abyss-rgb), 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    line-height: 1.7;
    pointer-events: none;
    min-width: 168px;
}
.hud-line { display: flex; justify-content: space-between; gap: 16px; }
.hud-key { color: var(--teal); }
.hud-val { color: var(--mist); }

@media (max-width: 720px) { .hud { display: none; } }

/* ============================================================
   RING SECTIONS
   ============================================================ */
.ring-section {
    min-height: 100vh;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8vw;
    overflow: hidden;
}

/* Radial clip-path reveal (triggered via .visible class) */
.ring-section .ring-frame,
.ring-section .hero-stage {
    clip-path: circle(0% at var(--ripple-origin-x) var(--ripple-origin-y));
    opacity: 0;
    transition: clip-path 900ms ease-out, opacity 700ms ease-out;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ring-section.visible .ring-frame,
.ring-section.visible .hero-stage {
    clip-path: circle(85% at var(--ripple-origin-x) var(--ripple-origin-y));
    opacity: 1;
}

/* Ring depth tinting -- slightly deeper background for each successive ring */
.ring-1 { background: linear-gradient(180deg, rgba(var(--abyss-rgb), 0.2), rgba(var(--abyss-rgb), 0.45)); }
.ring-2 { background: linear-gradient(180deg, rgba(var(--abyss-rgb), 0.3), rgba(var(--abyss-rgb), 0.55)); }
.ring-3 { background: linear-gradient(180deg, rgba(var(--abyss-rgb), 0.4), rgba(var(--abyss-rgb), 0.65)); }
.ring-4 { background: linear-gradient(180deg, rgba(var(--abyss-rgb), 0.5), rgba(var(--abyss-rgb), 0.75)); }
.ring-5 { background: linear-gradient(180deg, rgba(var(--abyss-rgb), 0.6), rgba(var(--abyss-rgb), 0.85)); }

/* ============================================================
   HERO (epicenter)
   ============================================================ */
.ring-hero { padding: 0; }

.hero-stage {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(120vmin, 1100px);
    height: min(120vmin, 1100px);
    pointer-events: none;
}
.hero-ring {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 1;
    transform-origin: 0 0;
    opacity: 0;
    animation: heroRing 4.8s cubic-bezier(0.16, 0.84, 0.4, 1) infinite;
    filter: drop-shadow(0 0 6px rgba(var(--cyan-rgb), 0.45));
}
.hero-ring.h1 { animation-delay: 0s; }
.hero-ring.h2 { animation-delay: 0.8s; }
.hero-ring.h3 { animation-delay: 1.6s; }
.hero-ring.h4 { animation-delay: 2.4s; stroke: var(--teal); }
@keyframes heroRing {
    0%   { transform: scale(0.05); opacity: 0; }
    8%   { opacity: 0.85; }
    100% { transform: scale(8); opacity: 0; }
}

.origin-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 12px rgba(var(--gold-rgb), 0.9),
        0 0 28px rgba(var(--gold-rgb), 0.45);
    animation: originPulse 3.2s ease-in-out infinite;
    z-index: 3;
}
@keyframes originPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.5); }
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 4;
    width: min(90vw, 900px);
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: 28px;
    opacity: 0.85;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(4rem, 11vw, 8rem);
    letter-spacing: 0.04em;
    color: var(--mist);
    line-height: 0.95;
    margin: 0;
    text-shadow: 0 0 40px rgba(var(--cyan-rgb), 0.25);
}
.hero-title .ch {
    display: inline-block;
    opacity: 0;
    transform: translateY(24px);
    animation: charRise 900ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes charRise {
    to { opacity: 1; transform: translateY(0); }
}

.hero-sub {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.05rem, 1.6vw, 1.45rem);
    color: var(--mist);
    margin-top: 22px;
    letter-spacing: 0.08em;
    opacity: 0.92;
}

.hero-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--teal);
    margin-top: 18px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.75;
}

.scroll-indicator {
    position: absolute;
    bottom: 6vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--steel);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 5;
    opacity: 0.8;
}
.scroll-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 10px rgba(var(--cyan-rgb), 0.6);
    animation: scrollDot 2.4s ease-in-out infinite;
}
@keyframes scrollDot {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50%      { transform: translateY(10px); opacity: 1; }
}

/* ============================================================
   WAVEFORM DIVIDERS
   ============================================================ */
.waveform-divider {
    position: relative;
    width: 100%;
    height: 60px;
    margin: 0;
    pointer-events: none;
    background: transparent;
    z-index: 5;
    margin-top: -60px;
}
.waveform-divider svg {
    width: 100%;
    height: 100%;
    display: block;
}
.wave-path {
    fill: none;
    stroke: var(--teal);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    transition: stroke-dashoffset 1.6s ease-out;
    opacity: 0.6;
}
.waveform-divider.visible .wave-path {
    stroke-dashoffset: 0;
}

/* ============================================================
   GENERIC RING FRAMES
   ============================================================ */
.ring-frame {
    width: 100%;
    max-width: 1280px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 8vw;
    align-items: center;
    position: relative;
    padding: 12vh 0;
}
.ring-frame.centered {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
}
.ring-frame.final { gap: 3rem; }

@media (max-width: 900px) {
    .ring-frame { grid-template-columns: 1fr; gap: 3rem; padding: 14vh 0 6vh; }
}

.ring-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 540px;
}
.ring-content.offset-left  { justify-self: start; transform: translateX(-3%); }
.ring-content.offset-right { justify-self: end;   transform: translateX(3%); order: 2; }
@media (max-width: 900px) {
    .ring-content.offset-left,
    .ring-content.offset-right { transform: none; justify-self: center; order: 0; }
}

.ring-tag {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cyan);
    opacity: 0.85;
}

.ring-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    line-height: 0.98;
    color: var(--mist);
    letter-spacing: -0.01em;
    margin: 4px 0 8px;
    text-shadow: 0 0 24px rgba(var(--cyan-rgb), 0.12);
}

.ring-body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--steel);
}
.ring-body strong { color: var(--mist); font-weight: 600; }

/* Reveal staggering inside a section */
.ring-section .ring-tag,
.ring-section .ring-title,
.ring-section .ring-body,
.ring-section .ring-stats,
.ring-section .biolume-list,
.ring-section .ring-visual,
.ring-section .cymatic-grid,
.ring-section .perimeter-rings,
.ring-section .quote-attrib,
.ring-section .return-link,
.ring-section .center-tag,
.ring-section .quote-title,
.ring-section .centered-title,
.ring-section .center-body {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.ring-section.visible .ring-tag       { opacity: 1; transform: none; transition-delay: 0ms; }
.ring-section.visible .ring-title,
.ring-section.visible .quote-title,
.ring-section.visible .centered-title,
.ring-section.visible .center-tag     { opacity: 1; transform: none; transition-delay: 80ms; }
.ring-section.visible .ring-body,
.ring-section.visible .center-body    { opacity: 1; transform: none; transition-delay: 220ms; }
.ring-section.visible .ring-stats,
.ring-section.visible .biolume-list   { opacity: 1; transform: none; transition-delay: 320ms; }
.ring-section.visible .ring-visual,
.ring-section.visible .cymatic-grid,
.ring-section.visible .perimeter-rings,
.ring-section.visible .quote-attrib,
.ring-section.visible .return-link    { opacity: 1; transform: none; transition-delay: 420ms; }

/* ============================================================
   RING 01 :: Stats & Visual
   ============================================================ */
.ring-stats {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    border-left: 1px solid rgba(var(--teal-rgb), 0.45);
    padding-left: 18px;
}
.ring-stats li {
    display: flex;
    gap: 18px;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.stat-key { color: var(--teal); min-width: 88px; }
.stat-val { color: var(--mist); }

.ring-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 520px;
    justify-self: center;
    display: grid;
    place-items: center;
}
.ring-svg, .interference-svg {
    width: 100%;
    height: 100%;
}
.rs {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 0.8;
    transform-origin: 0 0;
    opacity: 0;
    animation: rsPulse 4s ease-out infinite;
    filter: drop-shadow(0 0 4px rgba(var(--cyan-rgb), 0.4));
}
.r-a { animation-delay: 0s; }
.r-b { animation-delay: 0.5s; stroke: var(--teal); }
.r-c { animation-delay: 1s; }
.r-d { animation-delay: 1.5s; stroke: var(--indigo); }
@keyframes rsPulse {
    0%   { transform: scale(0.4); opacity: 0; }
    15%  { opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}
.amber-dot {
    fill: var(--gold);
    filter: drop-shadow(0 0 8px rgba(var(--gold-rgb), 0.85));
}

/* ============================================================
   RING 02 :: Interference
   ============================================================ */
.if-group circle {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 0.7;
    opacity: 0.45;
    transform-box: fill-box;
    transform-origin: center;
}
.if-group.if-left circle  { animation: ifPulseL 5s ease-in-out infinite; }
.if-group.if-right circle { stroke: var(--teal); animation: ifPulseR 5s ease-in-out infinite; }
.if-group circle:nth-child(1) { animation-delay: 0s; }
.if-group circle:nth-child(2) { animation-delay: 0.4s; }
.if-group circle:nth-child(3) { animation-delay: 0.8s; }
.if-group circle:nth-child(4) { animation-delay: 1.2s; }
.if-group circle:nth-child(5) { animation-delay: 1.6s; }
@keyframes ifPulseL {
    0%, 100% { opacity: 0.15; }
    50%      { opacity: 0.7; }
}
@keyframes ifPulseR {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 0.15; }
}
.interference-svg {
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 4px rgba(var(--cyan-rgb), 0.25));
}

/* ============================================================
   RING 03 :: Cymatics grid
   ============================================================ */
.center-tag        { display: inline-block; }
.centered-title,
.quote-title       { font-family: var(--font-display); font-weight: 700; color: var(--mist); }
.centered-title    { font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1.0; margin: 6px 0 30px; }
.center-body       { max-width: 720px; margin: 26px auto 0; color: var(--steel); }

.cymatic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    width: 100%;
    max-width: 920px;
    margin: 18px auto 0;
}
@media (max-width: 720px) { .cymatic-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }

.cym-card {
    border: 1px solid rgba(var(--teal-rgb), 0.35);
    padding: 22px 14px 16px;
    background: rgba(var(--indigo-rgb), 0.18);
    position: relative;
    overflow: hidden;
}
.cym-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(var(--cyan-rgb), 0.06), transparent 70%);
    pointer-events: none;
}
.cym-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    margin: 0 auto;
    display: grid;
    place-items: center;
}
.cym-visual span {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid var(--cyan);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
}
.cym-1 span:nth-child(1) { width: 18%; height: 18%; opacity: 0.85; border-color: var(--gold); }
.cym-1 span:nth-child(2) { width: 42%; height: 42%; }
.cym-1 span:nth-child(3) { width: 70%; height: 70%; opacity: 0.4; }
.cym-1 span:nth-child(4) { width: 96%; height: 96%; opacity: 0.25; border-color: var(--teal); }

.cym-2 span {
    border-radius: 0;
    border-color: var(--cyan);
    transform: translate(-50%, -50%) rotate(0deg);
}
.cym-2 span:nth-child(1) { width: 92%; height: 92%; opacity: 0.25; transform: translate(-50%, -50%) rotate(0deg); }
.cym-2 span:nth-child(2) { width: 92%; height: 92%; opacity: 0.25; transform: translate(-50%, -50%) rotate(60deg); }
.cym-2 span:nth-child(3) { width: 92%; height: 92%; opacity: 0.25; transform: translate(-50%, -50%) rotate(120deg); }
.cym-2 span:nth-child(4) { width: 50%; height: 50%; opacity: 0.55; border-radius: 50%; }
.cym-2 span:nth-child(5) { width: 24%; height: 24%; opacity: 0.85; border-radius: 50%; border-color: var(--gold); }
.cym-2 span:nth-child(6) { width: 70%; height: 70%; opacity: 0.35; border-radius: 50%; border-color: var(--teal); }

.cym-3 span {
    border-radius: 50%;
    border-color: var(--cyan);
    opacity: 0.45;
    width: 16%;
    height: 16%;
}
.cym-3 span:nth-child(1) { transform: translate(-50%, -50%); width: 22%; height: 22%; opacity: 0.9; border-color: var(--gold); }
.cym-3 span:nth-child(2) { transform: translate(calc(-50% + 36px), calc(-50% - 10px)); }
.cym-3 span:nth-child(3) { transform: translate(calc(-50% - 36px), calc(-50% - 10px)); }
.cym-3 span:nth-child(4) { transform: translate(calc(-50% + 22px), calc(-50% + 30px)); }
.cym-3 span:nth-child(5) { transform: translate(calc(-50% - 22px), calc(-50% + 30px)); }
.cym-3 span:nth-child(6) { transform: translate(-50%, calc(-50% - 44px)); }
.cym-3 span:nth-child(7) { transform: translate(-50%, calc(-50% + 44px)); }
.cym-3 span:nth-child(8) { width: 92%; height: 92%; opacity: 0.2; border-color: var(--teal); }

.cym-4 span {
    border-radius: 50%;
    border-color: var(--cyan);
    width: 14%;
    height: 14%;
    opacity: 0.55;
}
.cym-4 span:nth-child(1)  { transform: translate(-50%, -50%); width: 16%; height: 16%; border-color: var(--gold); opacity: 0.9; }
.cym-4 span:nth-child(2)  { transform: translate(calc(-50% + 32px), calc(-50% - 16px)); }
.cym-4 span:nth-child(3)  { transform: translate(calc(-50% + 16px), calc(-50% - 32px)); }
.cym-4 span:nth-child(4)  { transform: translate(calc(-50% - 16px), calc(-50% - 32px)); }
.cym-4 span:nth-child(5)  { transform: translate(calc(-50% - 32px), calc(-50% - 16px)); }
.cym-4 span:nth-child(6)  { transform: translate(calc(-50% - 32px), calc(-50% + 16px)); }
.cym-4 span:nth-child(7)  { transform: translate(calc(-50% - 16px), calc(-50% + 32px)); }
.cym-4 span:nth-child(8)  { transform: translate(calc(-50% + 16px), calc(-50% + 32px)); }
.cym-4 span:nth-child(9)  { transform: translate(calc(-50% + 32px), calc(-50% + 16px)); }
.cym-4 span:nth-child(10) { width: 96%; height: 96%; opacity: 0.2; border-color: var(--teal); }

.cym-card figcaption {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.cym-freq { color: var(--cyan); }
.cym-name { color: var(--steel); }

/* Cymatics card hover/animate */
.cym-card { transition: transform 0.6s ease, border-color 0.6s ease; }
.cym-card:hover {
    transform: translateY(-3px);
    border-color: var(--cyan);
}
.cym-visual span { animation: cymBreathe 6s ease-in-out infinite; transform-origin: center; }
.cym-1 span:nth-child(2) { animation-delay: 0.3s; }
.cym-1 span:nth-child(3) { animation-delay: 0.6s; }
.cym-1 span:nth-child(4) { animation-delay: 0.9s; }
@keyframes cymBreathe {
    0%, 100% { opacity: var(--from-op, 0.5); }
    50%      { opacity: 0.9; }
}

/* ============================================================
   RING 04 :: Bioluminescence
   ============================================================ */
.biolume-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding-left: 18px;
    border-left: 1px solid rgba(var(--teal-rgb), 0.45);
}
.biolume-row {
    display: flex;
    gap: 18px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.b-key { color: var(--teal); min-width: 130px; }
.b-val { color: var(--mist); }

.biolume-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 480px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(var(--cyan-rgb), 0.08) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, transparent 38%, rgba(var(--teal-rgb), 0.18) 39%, transparent 41%),
        radial-gradient(circle at 50% 50%, transparent 58%, rgba(var(--cyan-rgb), 0.18) 59%, transparent 61%),
        radial-gradient(circle at 50% 50%, transparent 78%, rgba(var(--indigo-rgb), 0.35) 79%, transparent 82%);
    overflow: hidden;
    border: 1px solid rgba(var(--teal-rgb), 0.4);
}
.biolume-dot {
    position: absolute;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow:
        0 0 12px rgba(var(--cyan-rgb), 0.8),
        0 0 28px rgba(var(--cyan-rgb), 0.4);
    animation: biolumeBlink 4s ease-in-out infinite;
}
.bd1 { width: 9px;  height: 9px;  top: 22%; left: 30%; animation-delay: 0s;   }
.bd2 { width: 6px;  height: 6px;  top: 40%; left: 70%; animation-delay: 0.6s; background: var(--gold); box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.7); }
.bd3 { width: 8px;  height: 8px;  top: 60%; left: 22%; animation-delay: 1.2s; }
.bd4 { width: 5px;  height: 5px;  top: 75%; left: 60%; animation-delay: 1.8s; }
.bd5 { width: 11px; height: 11px; top: 30%; left: 55%; animation-delay: 0.3s; }
.bd6 { width: 7px;  height: 7px;  top: 55%; left: 45%; animation-delay: 0.9s; }
.bd7 { width: 5px;  height: 5px;  top: 18%; left: 65%; animation-delay: 1.5s; }
.bd8 { width: 9px;  height: 9px;  top: 70%; left: 78%; animation-delay: 2.1s; }
@keyframes biolumeBlink {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 1; transform: scale(1.15); }
}

.biolume-trail {
    position: absolute;
    width: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--cyan-rgb), 0.7), transparent);
    top: 50%;
    left: 25%;
    transform-origin: 50% 50%;
    animation: biolumeTrail 7s linear infinite;
    opacity: 0.55;
}
@keyframes biolumeTrail {
    0%   { transform: translateY(-30%) rotate(-12deg); opacity: 0; }
    50%  { opacity: 0.7; }
    100% { transform: translateY(60%)  rotate( 8deg);  opacity: 0; }
}

/* ============================================================
   RING 05 :: Perimeter / Quote
   ============================================================ */
.quote-title {
    font-size: clamp(1.8rem, 4.2vw, 3.6rem);
    line-height: 1.18;
    color: var(--gold);
    margin: 8px auto 12px;
    max-width: 920px;
    letter-spacing: -0.005em;
    font-weight: 300;
    text-shadow: 0 0 22px rgba(var(--gold-rgb), 0.18);
}
.quote-attrib {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: 38px;
}

.perimeter-rings {
    position: relative;
    width: min(70vmin, 480px);
    aspect-ratio: 1 / 1;
    margin: 14px auto 24px;
}
.pr {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--teal);
    border-radius: 50%;
    opacity: 0.5;
}
.pr1 { width: 12%;  height: 12%; border-color: var(--gold); opacity: 0.95; }
.pr2 { width: 28%;  height: 28%; border-color: var(--cyan); }
.pr3 { width: 46%;  height: 46%; }
.pr4 { width: 64%;  height: 64%; opacity: 0.4; }
.pr5 { width: 82%;  height: 82%; opacity: 0.3; border-color: var(--steel); }
.pr6 { width: 100%; height: 100%; opacity: 0.18; border-color: var(--indigo); }

.return-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    border: 1px solid rgba(var(--cyan-rgb), 0.4);
    padding: 14px 22px;
    margin-top: 8px;
    transition: border-color 0.4s ease, background 0.4s ease, color 0.4s ease;
    background: rgba(var(--abyss-rgb), 0.4);
    position: relative;
    overflow: hidden;
}
.return-link:hover { border-color: var(--cyan); background: rgba(var(--cyan-rgb), 0.06); color: var(--mist); }
.return-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 10px rgba(var(--cyan-rgb), 0.7);
}

/* ============================================================
   FOOTER
   ============================================================ */
.ring-footer {
    scroll-snap-align: start;
    padding: 60px 8vw 50px;
    border-top: 1px solid rgba(var(--teal-rgb), 0.25);
    background: linear-gradient(180deg, rgba(var(--abyss-rgb), 0.7), var(--abyss));
    position: relative;
    z-index: 5;
}
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 28px;
    max-width: 1280px;
    margin: 0 auto;
}
.footer-brand { display: flex; flex-direction: column; gap: 6px; }
.brand-mark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    color: var(--mist);
}
.brand-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--steel);
}
.footer-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.footer-line { display: flex; gap: 14px; }
.f-k { color: var(--teal); min-width: 60px; }
.f-v { color: var(--mist); }
.footer-credit {
    margin-top: 32px;
    text-align: center;
    color: var(--steel);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    opacity: 0.6;
}

/* ============================================================
   CURSOR RIPPLES (mousedown emanation)
   ============================================================ */
.cursor-ripples {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
}
.cursor-ripple {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(var(--cyan-rgb), 0.7);
    transform: translate(-50%, -50%);
    animation: cursorRipple 1.1s ease-out forwards;
    pointer-events: none;
}
@keyframes cursorRipple {
    0%   { width: 12px;  height: 12px;  opacity: 0.7; }
    100% { width: 160px; height: 160px; opacity: 0; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}