/* === Reset & Base === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; --scroll-progress: 0; }
body {
    background: #0a0a0a;
    color: #b8a882;
    /* palette: #2a2520 smoke, #5c3a1a ember, #d4a855 leaf-gold */
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.8;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

/* === Progress Bar === */
#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: #c9a84c;
    z-index: 9999;
    transform-origin: left;
    transform: scaleX(var(--scroll-progress));
    width: 100%;
    pointer-events: none;
}

/* === Ripple Container === */
#ripple-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

.ripple-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(201, 168, 76, 0.6);
    pointer-events: none;
    animation: ripple-expand 1.5s ease-out forwards;
}
@keyframes ripple-expand {
    0% { width: 0; height: 0; opacity: 0.6; }
    100% { width: 300px; height: 300px; opacity: 0; }
}

/* === Particle Canvas === */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* === Section Base === */
.section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* === Hero === */
#hero {
    background: #0a0a0a;
    overflow: hidden;
}
#hero-tree {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}
.hero-title {
    font-family: 'Libre Bodoni', serif;
    font-weight: 400;
    font-size: clamp(4rem, 10vw, 9rem);
    letter-spacing: 0.06em;
    color: #c9a84c;
    margin-bottom: 1.5rem;
}
.hero-tagline {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    color: #8a7d5a;
    letter-spacing: 0.03em;
    min-height: 1.5em;
}
.hero-tagline .char {
    display: inline-block;
    opacity: 0;
    animation: char-appear 0.4s ease forwards;
}
@keyframes char-appear {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* === Manifest Panel === */
#manifest {
    background: #0a0a0a;
    overflow: hidden;
}
.manifest-inner {
    position: relative;
    width: clamp(280px, 40vw, 500px);
    height: clamp(280px, 40vw, 500px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.blob {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(212,168,85,0.15), rgba(212,168,85,0.04)); /* #d4a855 leaf gold */
    border: 1px solid rgba(201,168,76,0.3);
    animation: blob-morph 20s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
@keyframes blob-morph {
    0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    25%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    50%  { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
    75%  { border-radius: 60% 30% 60% 40% / 70% 50% 40% 60%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
.blob:hover {
    border-color: #d4a855;
}
.blob-ticker {
    font-family: 'Space Mono', monospace;
    font-size: clamp(0.75rem, 0.9vw, 0.9rem);
    color: #8a7d5a;
    letter-spacing: 0.04em;
    text-shadow: 0 0 12px rgba(201, 168, 76, 0.4);
    text-align: center;
    line-height: 2;
    animation: ticker-scroll 30s linear infinite;
    white-space: pre-line;
}
@keyframes ticker-scroll {
    0% { transform: translateY(50%); }
    100% { transform: translateY(-100%); }
}

/* Ripple rings */
.ripple-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(201, 168, 76, 0.12);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ring-pulse 6s ease-in-out infinite;
}
.ring-1 { width: 350px; height: 350px; animation-delay: 0s; }
.ring-2 { width: 500px; height: 500px; animation-delay: 1.5s; }
.ring-3 { width: 650px; height: 650px; animation-delay: 3s; }
.ring-4 { width: 800px; height: 800px; animation-delay: 4.5s; }
@keyframes ring-pulse {
    0%, 100% { opacity: 0.1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.3; transform: translate(-50%, -50%) scale(1.05); }
}

/* === Transparency Corridor === */
.section-corridor {
    position: relative;
    z-index: 1;
    padding: 20vh 0;
    background: linear-gradient(to bottom, #0a0a0a, #1a1510 30%, #2a2520 50%, #1a1510 70%, #0a0a0a);
}
.corridor-fragment {
    min-height: 50vh;
    display: flex;
    align-items: center;
    padding: 0 10vw;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.corridor-fragment.revealed {
    opacity: 1;
    transform: translateY(0);
}
.corridor-fragment:nth-child(even) {
    justify-content: flex-end;
}
.fragment-text {
    font-family: 'Libre Bodoni', serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.5rem);
    color: #c9a84c;
    max-width: 16em;
}

/* === Dependency River === */
.section-river {
    position: relative;
    z-index: 1;
    height: 150vh;
    background: #0a0a0a;
}
#river-tree {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#river-tree path {
    fill: none;
    stroke: #c9a84c;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease-out;
}
#river-tree circle {
    fill: #c9a84c;
}

/* === Seal === */
#seal {
    background: #0a0a0a;
    flex-direction: column;
}
.seal-content {
    text-align: center;
}
#enso-svg {
    filter: drop-shadow(0 0 8px rgba(201, 168, 76, 0.4));
}
#enso-path {
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dashoffset 1.5s ease-in-out;
}
.seal-verified {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    fill: #b8a882;
    letter-spacing: 0.1em;
}
.seal-domain {
    font-family: 'Libre Bodoni', serif;
    font-weight: 400;
    font-size: 1.2rem;
    color: #c9a84c;
    margin-top: 2rem;
    letter-spacing: 0.06em;
    text-shadow: 0 0 20px rgba(92, 58, 26, 0.5); /* #5c3a1a ember glow */
}

/* === Hero tree lines === */
#hero-tree line {
    stroke: #c9a84c;
    stroke-linecap: round;
}
#hero-tree circle {
    fill: #c9a84c;
}