/* ============================================================
   saram.ai — Crystalline Intelligence Observatory
   Hexagonal-Honeycomb Layout | Isometric | Serif-Revival
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
    --obsidian-void: #0A0A0F;
    --deep-graphite: #161620;
    --charcoal-facet: #1E1E2A;
    --molten-amber: #D4A03C;
    --verdigris: #6B8F71;
    --oxidized-rose: #8C4A5E;
    --bone-ivory: #F0E6D3;
    --warm-stone: #C4B8A4;
    --electric-white: #FAFAF5;
    --abyss-blue: #06060C;

    --hex-size: clamp(90px, 12vw, 150px);
    --hex-gap: clamp(4px, 0.6vw, 8px);
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: var(--obsidian-void);
    color: var(--bone-ivory);
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

/* --- Stratum (Full-viewport sections) --- */
.stratum {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* --- Organic Blobs Layer --- */
.blobs-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.blob {
    position: absolute;
    border-radius: 40% 60% 70% 30% / 60% 30% 70% 40%;
    filter: blur(80px);
    opacity: 0.06;
    will-change: transform;
}

.blob-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(ellipse at 30% 40%, var(--oxidized-rose), transparent 70%);
    top: 10%;
    left: -5%;
    animation: blob-drift-1 75s ease-in-out infinite alternate;
}

.blob-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(ellipse at 60% 50%, var(--molten-amber), transparent 70%);
    top: 40%;
    right: -10%;
    animation: blob-drift-2 85s ease-in-out infinite alternate;
}

.blob-3 {
    width: 700px;
    height: 700px;
    background: radial-gradient(ellipse at 50% 60%, var(--oxidized-rose), transparent 60%);
    bottom: 5%;
    left: 20%;
    animation: blob-drift-3 65s ease-in-out infinite alternate;
}

@keyframes blob-drift-1 {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(80px, 120px) rotate(15deg); }
    66% { transform: translate(-60px, 60px) rotate(-10deg); }
    100% { transform: translate(40px, -80px) rotate(20deg); }
}

@keyframes blob-drift-2 {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-100px, 80px) rotate(-20deg); }
    100% { transform: translate(60px, -100px) rotate(15deg); }
}

@keyframes blob-drift-3 {
    0% { transform: translate(0, 0) rotate(0deg); }
    40% { transform: translate(70px, -90px) rotate(10deg); }
    100% { transform: translate(-50px, 70px) rotate(-15deg); }
}

/* --- Hexagonal Cell Base --- */
.hex-cell {
    position: absolute;
    width: var(--hex-size);
    height: calc(var(--hex-size) * 1.1547);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: opacity 0.6s ease, transform 0.6s ease, filter 0.3s ease;
}

.hex-inner {
    width: 100%;
    height: 100%;
    background: var(--deep-graphite);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    border: none;
    padding: 10px;
}

/* Hex border via box-shadow on a pseudo element */
.hex-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(135deg, rgba(212, 160, 60, 0.3), rgba(212, 160, 60, 0.15));
    z-index: -1;
    transition: background 0.3s ease;
}

.hex-cell:hover::before {
    background: linear-gradient(135deg, rgba(212, 160, 60, 0.8), rgba(212, 160, 60, 0.4));
}

.hex-cell:hover .hex-inner {
    background: var(--charcoal-facet);
}

/* --- Hex Text Styles --- */
.hex-text {
    display: block;
    user-select: none;
}

.title-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--bone-ivory);
}

.surround-text {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 600;
    font-size: clamp(0.6rem, 1vw, 0.9rem);
    color: var(--warm-stone);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mid-text {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    font-size: clamp(0.55rem, 0.85vw, 0.8rem);
    color: var(--warm-stone);
    line-height: 1.3;
}

/* --- Glitch Effect on Text --- */
.glitch-text {
    position: relative;
}

.glitch-text.glitching::before,
.glitch-text.glitching::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.glitch-text.glitching::before {
    color: var(--molten-amber);
    clip-path: inset(0 0 50% 0);
    transform: translateX(3px);
    animation: glitch-shift-1 0.3s steps(2) forwards;
}

.glitch-text.glitching::after {
    color: var(--verdigris);
    clip-path: inset(50% 0 0 0);
    transform: translateX(-3px);
    animation: glitch-shift-2 0.3s steps(2) forwards;
}

@keyframes glitch-shift-1 {
    0% { transform: translateX(3px); opacity: 0.8; }
    50% { transform: translateX(-2px); opacity: 0.6; }
    100% { transform: translateX(0); opacity: 0; }
}

@keyframes glitch-shift-2 {
    0% { transform: translateX(-3px); opacity: 0.8; }
    50% { transform: translateX(4px); opacity: 0.6; }
    100% { transform: translateX(0); opacity: 0; }
}

/* Permanent glitch shimmer for Stratum V */
.glitch-shimmer {
    position: relative;
}

.glitch-shimmer::before,
.glitch-shimmer::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.glitch-shimmer::before {
    color: var(--molten-amber);
    clip-path: inset(0 0 60% 0);
    animation: shimmer-1 2s ease-in-out infinite;
}

.glitch-shimmer::after {
    color: var(--verdigris);
    clip-path: inset(60% 0 0 0);
    animation: shimmer-2 2s ease-in-out infinite;
}

@keyframes shimmer-1 {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(1px); }
    75% { transform: translateX(-1px); }
}

@keyframes shimmer-2 {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    75% { transform: translateX(1px); }
}

/* --- Scan Lines (glitch) --- */
.hex-cell.glitching .hex-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(140, 74, 94, 0.15) 2px,
        rgba(140, 74, 94, 0.15) 3px
    );
    animation: scanline-sweep 0.3s linear forwards;
    pointer-events: none;
}

@keyframes scanline-sweep {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

.hex-cell.glitching {
    animation: hex-border-flicker 0.3s steps(3) forwards;
}

@keyframes hex-border-flicker {
    0% { filter: brightness(1); }
    33% { filter: brightness(1.8); }
    66% { filter: brightness(0.8); }
    100% { filter: brightness(1); }
}


/* ==========================================================
   STRATUM I -- The Surface
   ========================================================== */
.stratum-surface {
    z-index: 1;
}

.cluster-7 {
    position: relative;
    width: calc(var(--hex-size) * 3.5);
    height: calc(var(--hex-size) * 3.5);
}

/* Center hex */
.cluster-7 .hex-center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 2;
}

/* Surrounding hexagons positioned around center */
.cluster-7 .hex-surround {
    opacity: 0;
    z-index: 1;
}

/* Position the 6 surrounding hexes in a ring */
.cluster-7 .hex-surround[data-index="1"] {
    left: 50%;
    top: 0%;
    transform: translate(-50%, 0%);
}
.cluster-7 .hex-surround[data-index="2"] {
    right: 0%;
    top: 18%;
    transform: translate(0%, 0%);
}
.cluster-7 .hex-surround[data-index="3"] {
    right: 0%;
    bottom: 18%;
    transform: translate(0%, 0%);
}
.cluster-7 .hex-surround[data-index="4"] {
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, 0%);
}
.cluster-7 .hex-surround[data-index="5"] {
    left: 0%;
    bottom: 18%;
    transform: translate(0%, 0%);
}
.cluster-7 .hex-surround[data-index="6"] {
    left: 0%;
    top: 18%;
    transform: translate(0%, 0%);
}

/* Animations: bloom in */
.cluster-7 .hex-center.visible {
    opacity: 1;
    transition: opacity 0.6s ease;
}

.cluster-7 .hex-surround.visible {
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Tagline */
.tagline {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.65rem, 0.9vw, 0.8rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--verdigris);
    margin-top: 3rem;
    opacity: 0;
    transition: opacity 0.8s ease;
    overflow: hidden;
    white-space: nowrap;
}

.tagline.visible {
    opacity: 1;
}


/* ==========================================================
   STRATUM II -- The Pattern
   ========================================================== */
.stratum-pattern {
    z-index: 1;
}

.cluster-19 {
    position: relative;
    width: clamp(400px, 70vw, 800px);
    height: clamp(400px, 60vh, 700px);
}

/* Center hex of cluster-19 */
.cluster-19 .hex-center-2 {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

/* Middle ring (6 around center) */
.cluster-19 .hex-mid-ring[data-index="1"] { left: 50%; top: 8%; transform: translate(-50%, 0); }
.cluster-19 .hex-mid-ring[data-index="2"] { right: 15%; top: 22%; transform: translate(0, 0); }
.cluster-19 .hex-mid-ring[data-index="3"] { right: 15%; bottom: 22%; transform: translate(0, 0); }
.cluster-19 .hex-mid-ring[data-index="4"] { left: 50%; bottom: 8%; transform: translate(-50%, 0); }
.cluster-19 .hex-mid-ring[data-index="5"] { left: 15%; bottom: 22%; transform: translate(0, 0); }
.cluster-19 .hex-mid-ring[data-index="6"] { left: 15%; top: 22%; transform: translate(0, 0); }

/* Outer ring (12 around middle ring) */
.cluster-19 .hex-outer-ring[data-index="7"] { left: 50%; top: -5%; transform: translate(-50%, 0); }
.cluster-19 .hex-outer-ring[data-index="8"] { right: 3%; top: 8%; transform: translate(0, 0); }
.cluster-19 .hex-outer-ring[data-index="9"] { right: -5%; top: 35%; transform: translate(0, 0); }
.cluster-19 .hex-outer-ring[data-index="10"] { right: 3%; bottom: 12%; transform: translate(0, 0); }
.cluster-19 .hex-outer-ring[data-index="11"] { right: 18%; bottom: -2%; transform: translate(0, 0); }
.cluster-19 .hex-outer-ring[data-index="12"] { left: 50%; bottom: -5%; transform: translate(-50%, 0); }
.cluster-19 .hex-outer-ring[data-index="13"] { left: 18%; bottom: -2%; transform: translate(0, 0); }
.cluster-19 .hex-outer-ring[data-index="14"] { left: -5%; bottom: 12%; transform: translate(0, 0); }
.cluster-19 .hex-outer-ring[data-index="15"] { left: -5%; top: 35%; transform: translate(0, 0); }
.cluster-19 .hex-outer-ring[data-index="16"] { left: 3%; top: 8%; transform: translate(0, 0); }
.cluster-19 .hex-outer-ring[data-index="17"] { left: 30%; top: -5%; transform: translate(0, 0); }
.cluster-19 .hex-outer-ring[data-index="18"] { right: 30%; top: -5%; transform: translate(0, 0); }

/* Wireframe octahedron rotation */
.octahedron-svg {
    width: 80%;
    height: 80%;
    animation: iso-rotate 30s linear infinite;
}

@keyframes iso-rotate {
    0% { transform: rotate(0deg) skewX(0deg); }
    25% { transform: rotate(90deg) skewX(5deg); }
    50% { transform: rotate(180deg) skewX(0deg); }
    75% { transform: rotate(270deg) skewX(-5deg); }
    100% { transform: rotate(360deg) skewX(0deg); }
}

/* Glitch-art noise patterns */
.noise-pattern {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.np-1 {
    background:
        repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(107, 143, 113, 0.3) 3px, rgba(107, 143, 113, 0.3) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(212, 160, 60, 0.2) 7px, rgba(212, 160, 60, 0.2) 8px);
}
.np-2 {
    background:
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(140, 74, 94, 0.25) 2px, rgba(140, 74, 94, 0.25) 3px),
        repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(107, 143, 113, 0.2) 5px, rgba(107, 143, 113, 0.2) 6px);
}
.np-3 {
    background:
        repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(212, 160, 60, 0.15) 1px, rgba(212, 160, 60, 0.15) 2px),
        linear-gradient(180deg, rgba(140, 74, 94, 0.2) 0%, transparent 50%, rgba(107, 143, 113, 0.15) 100%);
}
.np-4 {
    background:
        repeating-linear-gradient(60deg, transparent, transparent 4px, rgba(107, 143, 113, 0.3) 4px, rgba(107, 143, 113, 0.3) 5px),
        repeating-linear-gradient(120deg, transparent, transparent 6px, rgba(212, 160, 60, 0.15) 6px, rgba(212, 160, 60, 0.15) 7px);
}
.np-5 {
    background:
        repeating-linear-gradient(0deg, transparent 0%, rgba(140, 74, 94, 0.2) 20%, transparent 20.5%, transparent 40%, rgba(212, 160, 60, 0.15) 60%, transparent 60.5%);
}
.np-6 {
    background:
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(107, 143, 113, 0.25) 2px, rgba(107, 143, 113, 0.25) 3px),
        repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(140, 74, 94, 0.15) 8px, rgba(140, 74, 94, 0.15) 9px);
}
.np-7 {
    background:
        repeating-linear-gradient(30deg, transparent, transparent 3px, rgba(212, 160, 60, 0.2) 3px, rgba(212, 160, 60, 0.2) 4px),
        repeating-linear-gradient(150deg, transparent, transparent 5px, rgba(107, 143, 113, 0.2) 5px, rgba(107, 143, 113, 0.2) 6px);
}
.np-8 {
    background:
        linear-gradient(135deg, rgba(140, 74, 94, 0.25) 0%, transparent 40%, rgba(212, 160, 60, 0.15) 70%, transparent 100%),
        repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(107, 143, 113, 0.1) 1px, rgba(107, 143, 113, 0.1) 2px);
}
.np-9 {
    background:
        repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(212, 160, 60, 0.2) 5px, rgba(212, 160, 60, 0.2) 6px),
        repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(140, 74, 94, 0.2) 3px, rgba(140, 74, 94, 0.2) 4px);
}
.np-10 {
    background:
        repeating-linear-gradient(75deg, transparent, transparent 2px, rgba(107, 143, 113, 0.3) 2px, rgba(107, 143, 113, 0.3) 3px),
        repeating-linear-gradient(165deg, transparent, transparent 7px, rgba(212, 160, 60, 0.1) 7px, rgba(212, 160, 60, 0.1) 8px);
}
.np-11 {
    background:
        linear-gradient(0deg, rgba(140, 74, 94, 0.2) 0%, transparent 30%),
        repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(107, 143, 113, 0.15) 4px, rgba(107, 143, 113, 0.15) 5px);
}
.np-12 {
    background:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(212, 160, 60, 0.25) 2px, rgba(212, 160, 60, 0.25) 3px),
        repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(140, 74, 94, 0.1) 10px, rgba(140, 74, 94, 0.1) 11px);
}

/* Stratum II entrance transition */
.stratum-pattern .hex-cell {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.stratum-pattern.in-view .hex-cell {
    opacity: 1;
    transform: scale(1);
}

.stratum-pattern.in-view .hex-mid-ring { transition-delay: 0.2s; }
.stratum-pattern.in-view .hex-outer-ring { transition-delay: 0.4s; }


/* ==========================================================
   STRATUM III -- The Network
   ========================================================== */
.stratum-network {
    z-index: 1;
}

.stratum-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 5rem);
    letter-spacing: 0.5em;
    line-height: 1.05;
    color: var(--bone-ivory);
    text-transform: uppercase;
    margin-bottom: 3rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.6s ease, letter-spacing 0.6s ease;
}

.stratum-network.in-view .stratum-heading {
    opacity: 1;
    letter-spacing: -0.02em;
}

.cluster-network {
    position: relative;
    width: clamp(350px, 60vw, 700px);
    height: clamp(350px, 50vh, 600px);
}

.filament-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.filament-svg line {
    stroke: var(--verdigris);
    stroke-width: 0.5;
    opacity: 0;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1.5s ease, opacity 0.5s ease;
}

.stratum-network.in-view .filament-svg line {
    stroke-dashoffset: 0;
    opacity: 0.6;
}

/* Network node hexagons */
.hex-node {
    z-index: 2;
}

.hex-node[data-node="0"] { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.hex-node[data-node="1"] { left: 50%; top: 8%; transform: translate(-50%, 0); }
.hex-node[data-node="2"] { right: 10%; top: 25%; transform: translate(0, 0); }
.hex-node[data-node="3"] { right: 10%; bottom: 25%; transform: translate(0, 0); }
.hex-node[data-node="4"] { left: 50%; bottom: 8%; transform: translate(-50%, 0); }
.hex-node[data-node="5"] { left: 10%; bottom: 25%; transform: translate(0, 0); }
.hex-node[data-node="6"] { left: 10%; top: 25%; transform: translate(0, 0); }

.node-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--molten-amber);
    box-shadow: 0 0 12px var(--molten-amber), 0 0 24px rgba(212, 160, 60, 0.3);
    animation: node-glow 3s ease-in-out infinite;
}

@keyframes node-glow {
    0%, 100% { box-shadow: 0 0 8px var(--molten-amber), 0 0 16px rgba(212, 160, 60, 0.2); transform: scale(1); }
    50% { box-shadow: 0 0 16px var(--molten-amber), 0 0 32px rgba(212, 160, 60, 0.4); transform: scale(1.3); }
}

/* Network hex border brightening */
.stratum-network.in-view .hex-node::before {
    background: linear-gradient(135deg, rgba(212, 160, 60, 0.9), rgba(212, 160, 60, 0.5));
}

.stratum-network.in-view .hex-node .hex-inner {
    background: var(--charcoal-facet);
}

.stratum-network .hex-cell {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.stratum-network.in-view .hex-cell {
    opacity: 1;
}


/* ==========================================================
   STRATUM IV -- The Core
   ========================================================== */
.stratum-core {
    z-index: 1;
}

.mega-hexagon {
    width: clamp(280px, 40vw, 500px);
    height: calc(clamp(280px, 40vw, 500px) * 1.1547);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    position: relative;
    z-index: 3;
}

.mega-hex-inner {
    background: var(--deep-graphite);
    border: none;
    position: relative;
}

.mega-hexagon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(135deg, rgba(212, 160, 60, 0.8), rgba(212, 160, 60, 0.4));
    z-index: -1;
}

.core-text-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
}

.core-word {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: clamp(1.2rem, 3vw, 2.5rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--bone-ivory);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.stratum-core.in-view .core-word {
    opacity: 1;
    transform: translateY(0);
}

.stratum-core.in-view .core-word[data-delay="0"] { transition-delay: 0s; }
.stratum-core.in-view .core-word[data-delay="1"] { transition-delay: 0.2s; }
.stratum-core.in-view .core-word[data-delay="2"] { transition-delay: 0.4s; }
.stratum-core.in-view .core-word[data-delay="3"] { transition-delay: 0.6s; }

/* Core hex fragments */
.core-hex-fragments {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.core-frag {
    --hex-size: clamp(60px, 8vw, 100px);
    opacity: 0.4;
    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease;
}

.core-frag::before {
    background: linear-gradient(135deg, rgba(212, 160, 60, 1), rgba(212, 160, 60, 0.6));
}

.core-frag[data-frag="0"] { top: 15%; left: 20%; }
.core-frag[data-frag="1"] { top: 10%; right: 20%; }
.core-frag[data-frag="2"] { top: 45%; right: 10%; }
.core-frag[data-frag="3"] { bottom: 15%; right: 20%; }
.core-frag[data-frag="4"] { bottom: 10%; left: 20%; }
.core-frag[data-frag="5"] { top: 45%; left: 10%; }

/* Core intense glitch */
.stratum-core.in-view .mega-hexagon {
    animation: core-pulse 5s ease-in-out infinite;
}

@keyframes core-pulse {
    0%, 85%, 100% { filter: brightness(1); }
    87% { filter: brightness(1.5); }
    89% { filter: brightness(0.7); }
    91% { filter: brightness(1.3); }
}


/* ==========================================================
   STRATUM V -- The Emergence
   ========================================================== */
.stratum-emergence {
    z-index: 1;
    perspective: 800px;
}

.infinite-grid {
    position: absolute;
    top: 0;
    left: -20%;
    width: 140%;
    height: 100%;
    background:
        linear-gradient(60deg, transparent 48.5%, rgba(212, 160, 60, 0.08) 49%, rgba(212, 160, 60, 0.08) 49.5%, transparent 50%),
        linear-gradient(-60deg, transparent 48.5%, rgba(212, 160, 60, 0.08) 49%, rgba(212, 160, 60, 0.08) 49.5%, transparent 50%),
        linear-gradient(0deg, transparent 48.5%, rgba(212, 160, 60, 0.08) 49%, rgba(212, 160, 60, 0.08) 49.5%, transparent 50%);
    background-size: 60px 104px;
    transform: perspective(800px) rotateX(35deg);
    transform-origin: center 60%;
    opacity: 0;
    transition: opacity 1s ease;
}

.stratum-emergence.in-view .infinite-grid {
    opacity: 1;
}

.emergence-content {
    position: relative;
    z-index: 2;
    text-align: center;
    opacity: 0;
    transition: opacity 1s ease 0.5s;
}

.stratum-emergence.in-view .emergence-content {
    opacity: 1;
}

.emergence-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: clamp(5rem, 12vw, 10rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--bone-ivory);
    margin-bottom: 1rem;
}

.emergence-subtitle {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    color: var(--warm-stone);
}

/* Shatter fragments */
.shatter-fragments {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.shard {
    position: absolute;
    width: 80px;
    height: 93px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--deep-graphite);
    border: 1px solid var(--molten-amber);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.6s ease;
}

.shard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(135deg, rgba(212, 160, 60, 0.4), rgba(212, 160, 60, 0.1));
}

/* Initial position: all centered */
.shard { left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* When shattering, fly outward */
.stratum-emergence.in-view .shard-0 { opacity: 0.6; transform: translate(-300%, -250%) rotate(-30deg); }
.stratum-emergence.in-view .shard-1 { opacity: 0.5; transform: translate(200%, -280%) rotate(25deg); }
.stratum-emergence.in-view .shard-2 { opacity: 0.7; transform: translate(350%, 50%) rotate(40deg); }
.stratum-emergence.in-view .shard-3 { opacity: 0.5; transform: translate(150%, 300%) rotate(-20deg); }
.stratum-emergence.in-view .shard-4 { opacity: 0.6; transform: translate(-250%, 280%) rotate(35deg); }
.stratum-emergence.in-view .shard-5 { opacity: 0.4; transform: translate(-380%, -30%) rotate(-45deg); }

/* Fade out after shatter */
.stratum-emergence.in-view .shard {
    animation: shard-fade 0.8s ease 0.6s forwards;
}

@keyframes shard-fade {
    to { opacity: 0; }
}


/* ==========================================================
   COMPASS ROSE NAVIGATION
   ========================================================== */
.compass-rose {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.8rem;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.compass-rose.visible {
    opacity: 1;
}

.compass-segment {
    position: relative;
    width: 36px;
    height: 36px;
    cursor: pointer;
    color: rgba(212, 160, 60, 0.3);
    transition: color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compass-segment:hover {
    color: var(--molten-amber);
    transform: scale(1.15);
}

.compass-segment.active {
    color: var(--molten-amber);
}

.compass-segment svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.compass-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.05em;
    color: inherit;
    position: relative;
    z-index: 1;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 768px) {
    :root {
        --hex-size: 70px;
    }

    .cluster-7 {
        width: calc(var(--hex-size) * 3.2);
        height: calc(var(--hex-size) * 3.2);
    }

    .cluster-19 {
        width: 90vw;
        height: 80vh;
    }

    .cluster-network {
        width: 90vw;
        height: 70vh;
    }

    .stratum-heading {
        font-size: clamp(1.5rem, 5vw, 3rem);
        letter-spacing: 0.3em;
    }

    .emergence-title {
        font-size: clamp(3rem, 10vw, 6rem);
    }

    .core-word {
        font-size: clamp(1rem, 4vw, 2rem);
    }
}

@media (max-width: 480px) {
    :root {
        --hex-size: 55px;
    }

    .compass-rose {
        bottom: 1rem;
        gap: 0.5rem;
    }

    .compass-segment {
        width: 28px;
        height: 28px;
    }
}