/* ============================================
   mujun.xyz - Generative Digital Terrarium
   ============================================ */
:root {
    --abyssal-green: #050E09;
    --deep-moss: #0B3D2E;
    --forest-heartwood: #1B4D3E;
    --fern-glow: #6BBF8A;
    --bioluminescent-cyan: #4FD1C5;
    --canopy-light: #A8D5BA;
    --lichen-white: #E8F5E9;
    --deep-parchment: #F1F8E9;
    --bark-shadow: #2C1810;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    background: var(--abyssal-green);
    color: var(--lichen-white);
    font-family: 'Commissioner', sans-serif;
    font-weight: 350;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.75;
    letter-spacing: 0.015em;
    overflow-x: hidden;
}

/* --- Generative Background --- */
.gen-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(27, 77, 62, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(11, 61, 46, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(44, 24, 16, 0.15) 0%, transparent 40%),
        var(--abyssal-green);
    animation: genShift 120s ease-in-out infinite alternate;
}
@keyframes genShift {
    0% { background-position: 0% 0%, 100% 100%, 50% 50%; }
    50% { background-position: 20% 30%, 80% 70%, 40% 60%; }
    100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
}

/* --- Scan Lines --- */
.scan-lines {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 3px,
        rgba(168, 213, 186, 0.03) 3px,
        rgba(168, 213, 186, 0.03) 4px
    );
}

/* --- Hexagonal Undertone --- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.04;
    background-image:
        repeating-conic-gradient(from 30deg, var(--forest-heartwood) 0deg 60deg, transparent 60deg 120deg);
    background-size: 50px 50px;
}

/* --- Data Rain --- */
.data-rain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.rain-drop {
    position: absolute;
    top: -80px;
    width: 0.5px;
    background: var(--fern-glow);
    opacity: 0.08;
    animation: rainFall linear infinite;
}
@keyframes rainFall {
    from { transform: translateY(-100px); }
    to { transform: translateY(calc(100vh + 100px)); }
}

/* --- Section Labels --- */
.section-label {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fern-glow);
    display: block;
    text-align: center;
    margin-bottom: 2rem;
    opacity: 0;
    transition: opacity 0.8s ease;
}
.section-label.visible { opacity: 1; }

/* --- Stratum Base --- */
.stratum {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 4vw, 4rem);
}

/* --- Column Corridor --- */
.column-corridor {
    position: relative;
    z-index: 10;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 5vw, 3rem);
    background: linear-gradient(
        180deg,
        rgba(8, 18, 12, 0.85) 0%,
        rgba(8, 18, 12, 0.88) 50%,
        rgba(8, 18, 12, 0.95) 100%
    );
    mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}

/* ============================
   SECTION 1: CANOPY OPENING
   ============================ */
.stratum-canopy {
    min-height: 100vh;
    display: grid;
    place-items: center;
    z-index: 5;
    position: relative;
    overflow: hidden;
}
.flow-field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.canopy-title {
    font-family: 'Commissioner', sans-serif;
    font-weight: 200;
    font-size: clamp(2.8rem, 7vw, 6rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--canopy-light);
    opacity: 0.9;
    z-index: 2;
    position: relative;
}
.canopy-title span {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.canopy-title span.visible {
    opacity: 1;
}

/* --- Transition gradient into corridor --- */
.stratum-canopy::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    max-width: 100%;
    height: 200px;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 18, 12, 0.85) 100%);
    z-index: 6;
    pointer-events: none;
}

/* ============================
   CARD-FLIP SYSTEM
   ============================ */
.flip-card {
    perspective: 1200px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.flip-card.visible {
    opacity: 1;
    transform: translateY(0);
}
.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.flip-card.flipped .flip-inner {
    transform: rotateY(180deg);
}
.flip-front, .flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
}
.flip-front {
    background: linear-gradient(145deg, rgba(11, 61, 46, 0.6), rgba(5, 14, 9, 0.8));
    border: 1px solid rgba(107, 191, 138, 0.12);
}
.flip-back {
    background: var(--deep-moss);
    border: 1px solid rgba(107, 191, 138, 0.3);
    transform: rotateY(180deg);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    flex-direction: column;
    gap: 1rem;
}
.shape-composition {
    width: 80%;
    height: 80%;
}
.card-text {
    font-family: 'Commissioner', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    line-height: 1.65;
    color: var(--deep-parchment);
    text-align: center;
}
.card-label {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fern-glow);
    opacity: 0.6;
}

/* Card hover glow */
.flip-card:hover .flip-front::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(79, 209, 197, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

/* --- Large Card (Section 2) --- */
.flip-card--large {
    width: min(80%, 500px);
    aspect-ratio: 3 / 4;
    margin: 0 auto;
}

/* --- Serpentine Cards (Section 3) --- */
.flip-card--serpentine {
    width: min(85%, 450px);
    aspect-ratio: 7 / 5;
    margin-bottom: 2rem;
}
.flip-card--left { margin-left: -2vw; margin-right: auto; }
.flip-card--right { margin-right: -2vw; margin-left: auto; }
.flip-card--center { margin-left: -1vw; margin-right: auto; }

/* --- Circular Cards (Section 5) --- */
.spore-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    width: min(90%, 450px);
    margin: 0 auto;
}
.flip-card--circular {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}
.flip-card--circular .flip-front,
.flip-card--circular .flip-back {
    border-radius: 50%;
}

/* Spore particles */
.flip-card--circular.flipped::before,
.flip-card--circular.flipped::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--fern-glow);
    animation: sporeFloat 2.5s ease-out forwards;
    pointer-events: none;
    z-index: 100;
}
.flip-card--circular.flipped::before {
    top: 20%;
    left: 50%;
    animation-delay: 0.1s;
}
.flip-card--circular.flipped::after {
    top: 50%;
    right: 10%;
    background: var(--bioluminescent-cyan);
    animation-delay: 0.3s;
}
@keyframes sporeFloat {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--sx, 15px), -120px) scale(0.3); }
}

/* --- Final Card (Section 6) --- */
.flip-card--final {
    width: min(90%, 600px);
    aspect-ratio: 3 / 2;
    margin: 0 auto 3rem;
}

/* ============================
   SECTION 4: MYCELIUM
   ============================ */
.stratum-mycelium {
    min-height: 100vh;
    position: relative;
}
.mycelium-network {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 6 / 5;
    margin: 0 auto;
    position: relative;
}
#myceliumSvg {
    width: 100%;
    height: 100%;
}
.mycelium-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}
.mycelium-text.visible { opacity: 1; }
.overlay-text {
    font-family: 'Commissioner', sans-serif;
    font-weight: 100;
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: var(--bioluminescent-cyan);
    opacity: 0.6;
    line-height: 1.3;
}
.overlay-text--sub {
    font-size: clamp(1rem, 2.5vw, 2rem);
    opacity: 0.4;
}

/* ============================
   SECTION 6: FOREST FLOOR
   ============================ */
.stratum-floor {
    min-height: 80vh;
    padding-bottom: clamp(4rem, 8vw, 8rem);
}
.closure-line {
    width: 0;
    height: 0.3px;
    background: var(--canopy-light);
    margin: 3rem auto 0;
    transition: width 1.5s ease-out;
}
.closure-line.visible {
    width: 60%;
}

/* ============================
   REVEAL SYSTEM
   ============================ */
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
[data-reveal].visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 768px) {
    .column-corridor {
        max-width: 100%;
        padding: 0 5vw;
    }
    .stratum-canopy::after {
        width: 100%;
    }
    .flip-card--left,
    .flip-card--right,
    .flip-card--center {
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .flip-card { opacity: 1; transform: none; }
    .flip-inner { transform: rotateY(180deg); }
    .gen-bg { animation: none; }
    .rain-drop { animation: none; display: none; }
}