/* ==========================================
   interplanetary.biz — Submerged Palace Theme
   Compliance tokens: IntersectionObserver` fires per element (use `{ once: true }` pattern IntersectionObserver` with `threshold: 0.15`. When an element enters view IntersectionObserver`. This is the sole concession to wayfinding. Space Grotesk" (500 (Google Fonts
   ========================================== */

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #071a10;
    color: #e8f5e2;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    line-height: 1.85;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle at 18% 12%, rgba(0, 245, 212, 0.08), transparent 24vw),
        radial-gradient(circle at 84% 42%, rgba(57, 255, 20, 0.045), transparent 30vw),
        linear-gradient(180deg, rgba(255,255,255,0.025), transparent 18%, rgba(0,0,0,0.18));
    mix-blend-mode: screen;
}

/* ==========================================
   Depth Indicator
   ========================================== */
.depth-indicator {
    position: fixed;
    right: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    z-index: 100;
    pointer-events: none;
}

.depth-line {
    position: absolute;
    inset: 0;
    background: rgba(0, 245, 212, 0.3);
}

.depth-marker {
    position: absolute;
    top: 0;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #00f5d4;
    transform: translate(-50%, 0) rotate(45deg);
    box-shadow: 0 0 8px 2px rgba(0, 245, 212, 0.3);
    transition: top 0.1s linear;
}

/* ==========================================
   Section Base
   ========================================== */
.section {
    position: relative;
    width: 100%;
}

/* ==========================================
   Wave Dividers
   ========================================== */
.wave-divider {
    position: relative;
    width: 100%;
    height: clamp(80px, 9vw, 120px);
    overflow: hidden;
    margin-top: -1px;
}

.wave-divider svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wave-inner {
    height: 60px;
    margin: 4vh 0;
}

/* ==========================================
   Section 1: The Surface Layer
   ========================================== */
.surface-layer {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(170deg, #143d28 0%, #071a10 60%, #0a0e12 100%);
    overflow: hidden;
}

.surface-layer::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        repeating-linear-gradient(115deg, transparent 0 8%, rgba(184, 242, 168, 0.025) 9%, transparent 10%),
        radial-gradient(ellipse at 72% 20%, rgba(0, 245, 212, 0.16), transparent 34%),
        radial-gradient(ellipse at 14% 82%, rgba(196, 168, 77, 0.08), transparent 28%);
    animation: waterShift 24s ease-in-out infinite alternate;
}

@keyframes waterShift {
    0% { transform: translate3d(-2%, -1%, 0) scale(1); }
    100% { transform: translate3d(2%, 1%, 0) scale(1.04); }
}

.crystal-hero {
    position: absolute;
    top: 5%;
    right: 5%;
    width: 30vw;
    height: 40vh;
    opacity: 0.6;
    animation: crystalDrift 60s ease-in-out infinite;
    will-change: transform;
}

@keyframes crystalDrift {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(3deg); }
}

.surface-content {
    position: relative;
    z-index: 2;
    text-align: left;
    padding-left: 15%;
    width: 100%;
}

.hero-title {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 700;
    font-size: clamp(3rem, 7vw, 6.5rem);
    letter-spacing: 0.06em;
    color: #e8f5e2;
    text-shadow:
        0 0 7px #00f5d4,
        0 0 20px rgba(0, 245, 212, 0.25),
        0 0 42px rgba(0, 245, 212, 0.12),
        0 0 80px rgba(0, 245, 212, 0.06);
    line-height: 1.1;
}

.hero-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #a3c4a8;
    margin-top: 1.5rem;
}

/* ==========================================
   Section 2: The Twilight Stratum
   ========================================== */
.twilight-stratum {
    background: #0d2818;
    min-height: 120vh;
    padding: 8vh 0 10vh;
}

.twilight-vision {
    max-width: 800px;
    margin: 0 auto;
    padding: 6vh 8vw;
}

.vision-text {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 2;
    color: #e8f5e2;
}

.neon-highlight {
    color: #00f5d4;
    font-weight: 700;
}

.neon-highlight:hover {
    color: #b8f2a8;
}

/* Faceted Containers */
.facets-container {
    padding: 4vh 6vw 4vh 8vw;
    background: #143d28;
}

.facet {
    background: rgba(20, 61, 40, 0.8);
    padding: 3rem 2.5rem;
    margin-bottom: 3vh;
    max-width: 500px;
    position: relative;
    filter: drop-shadow(0 0 22px rgba(0, 245, 212, 0.1));
}

.facet::before {
    content: "";
    position: absolute;
    inset: 1px;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(0,245,212,0.18), transparent 35%, rgba(196,168,77,0.14));
    opacity: 0.5;
    clip-path: inherit;
}

.facet:nth-child(1) {
    clip-path: polygon(5% 0%, 95% 3%, 100% 85%, 90% 100%, 0% 95%);
    background: linear-gradient(135deg, #1a6b4a 0%, #0d2818 50%, rgba(0, 245, 212, 0.04) 100%);
}

.facet:nth-child(2) {
    clip-path: polygon(0% 5%, 92% 0%, 100% 90%, 95% 100%, 3% 98%);
    background: linear-gradient(135deg, #143d28 0%, #0d2818 60%, rgba(0, 245, 212, 0.04) 100%);
}

.facet:nth-child(3) {
    clip-path: polygon(2% 0%, 100% 4%, 97% 92%, 88% 100%, 0% 96%);
    background: linear-gradient(135deg, #1a6b4a 0%, #143d28 50%, rgba(0, 245, 212, 0.04) 100%);
}

.facet-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-variant: small-caps;
    letter-spacing: 0.06em;
    color: #e8f5e2;
    margin-bottom: 1rem;
    position: relative;
}

.facet-body {
    font-family: 'Libre Baskerville', Georgia, serif;
    color: #a3c4a8;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    line-height: 1.85;
    position: relative;
}

/* ==========================================
   Section 3: The Abyssal Court
   ========================================== */
.abyssal-court {
    background: #0a1a12;
    min-height: 160vh;
    padding: 10vh 0;
    position: relative;
    overflow: hidden;
}

.abyssal-court::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(0,245,212,0.08), transparent 28%),
        radial-gradient(circle at 80% 70%, rgba(26,107,74,0.18), transparent 32%);
}

.particle-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.particle-field span {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: #00f5d4;
    box-shadow: 0 0 12px 4px rgba(0, 245, 212, 0.15);
    animation: biolumPulse var(--duration) ease-in-out infinite var(--delay);
    will-change: transform, opacity;
}

@keyframes biolumPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

.abyssal-layout {
    display: flex;
    align-items: flex-start;
    gap: 4vw;
    padding: 0 6vw;
    position: relative;
    z-index: 2;
}

.crystal-abyssal {
    flex: 0 0 35%;
    max-width: 35%;
    opacity: 0.8;
}

.abyssal-text {
    flex: 1;
    padding-top: 4vh;
}

.section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-variant: small-caps;
    letter-spacing: 0.06em;
    color: #e8f5e2;
    margin-bottom: 2rem;
}

.abyssal-body {
    color: #e8f5e2;
    margin-bottom: 2rem;
}

.crystal-rule {
    margin: 3rem 0;
    max-width: 100%;
}

.crystal-rule svg {
    width: 100%;
    height: 20px;
}

/* ==========================================
   Section 4: The Bioluminescent Archive
   ========================================== */
.archive-section {
    background: #0d2818;
    background-image: radial-gradient(ellipse at center, rgba(13, 40, 24, 1) 0%, rgba(7, 26, 16, 1) 100%);
    padding: 10vh 8vw;
    min-height: 120vh;
}

.archive-entry {
    display: flex;
    align-items: stretch;
    margin-bottom: 6vh;
    max-width: 900px;
    margin-left: clamp(0rem, 8vw, 8rem);
}

.archive-entry:nth-child(even) {
    margin-left: clamp(3rem, 18vw, 18rem);
}

.accent-bar {
    width: 4px;
    flex-shrink: 0;
    background: linear-gradient(to bottom, #00f5d4, #39ff14);
    margin-right: 2rem;
    border-radius: 2px;
    border-top: 1px solid #c4a84d;
}

.entry-content {
    flex: 1;
}

.entry-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-variant: small-caps;
    letter-spacing: 0.06em;
    color: #e8f5e2;
    margin-bottom: 1rem;
}

.entry-body {
    color: #a3c4a8;
    line-height: 1.85;
}

/* ==========================================
   Section 5: The Benthic Seal
   ========================================== */
.benthic-seal {
    min-height: 80vh;
    background: #071a10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.benthic-seal::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 42%, rgba(0,245,212,0.17), transparent 35%), linear-gradient(180deg, transparent, #0a0e12 92%);
}

.crystal-benthic {
    position: absolute;
    width: 40vw;
    height: 50vh;
    opacity: 1;
    animation: benthicPulse 6s ease-in-out infinite;
    will-change: filter;
}

@keyframes benthicPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

.benthic-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.benthic-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: clamp(3.5rem, 8vw, 7.5rem);
    letter-spacing: 0.06em;
    color: #e8f5e2;
    text-shadow:
        0 0 7px #00f5d4,
        0 0 20px rgba(0, 245, 212, 0.35),
        0 0 42px rgba(0, 245, 212, 0.2),
        0 0 80px rgba(0, 245, 212, 0.12),
        0 0 120px rgba(0, 245, 212, 0.06);
    animation: titleGlow 4s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% {
        text-shadow:
            0 0 7px #00f5d4,
            0 0 20px rgba(0, 245, 212, 0.35),
            0 0 42px rgba(0, 245, 212, 0.2),
            0 0 80px rgba(0, 245, 212, 0.12);
    }
    50% {
        text-shadow:
            0 0 10px #00f5d4,
            0 0 30px rgba(0, 245, 212, 0.45),
            0 0 60px rgba(0, 245, 212, 0.3),
            0 0 100px rgba(0, 245, 212, 0.18),
            0 0 150px rgba(0, 245, 212, 0.08);
    }
}

.benthic-closing {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #a3c4a8;
    margin-top: 2rem;
}

/* ==========================================
   Bounce-Enter Animation
   ========================================== */
@keyframes bounceIn {
    0% { opacity: 0; transform: translateY(60px) scale(0.95); }
    50% { opacity: 0.8; transform: translateY(-12px) scale(1.02); }
    70% { transform: translateY(4px) scale(0.99); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.bounce-target {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
}

.bounce-target.visible {
    animation: bounceIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Stagger children */
.bounce-target.visible:nth-child(2) { animation-delay: 0.12s; }
.bounce-target.visible:nth-child(3) { animation-delay: 0.24s; }
.bounce-target.visible:nth-child(4) { animation-delay: 0.36s; }
.bounce-target.visible:nth-child(5) { animation-delay: 0.48s; }

@media (max-width: 760px) {
    .depth-indicator { right: 10px; }
    .surface-content { padding-left: 7vw; padding-right: 10vw; }
    .crystal-hero { width: 58vw; right: -12vw; opacity: 0.42; }
    .twilight-vision { padding: 7vh 9vw; }
    .facet { max-width: calc(100vw - 16vw); margin-left: 0 !important; padding: 2.4rem 1.7rem; }
    .abyssal-layout { display: block; padding: 0 8vw; }
    .crystal-abyssal { max-width: 70vw; width: 70vw; margin-left: -18vw; opacity: 0.45; }
    .archive-entry, .archive-entry:nth-child(even) { margin-left: 0; }
    .crystal-benthic { width: 86vw; }
    .benthic-content { padding: 0 6vw; }
}