/* ppuzzle.net -- Organic Forest Floor */
:root {
    --humus: #0C1A0C;
    --dark-moss: #1A2E1A;
    --verdant: #3A5F3A;
    --fern: #5A8C5A;
    --lichen: #D4DFC4;
    --sage: #9BB08E;
    --amber: #E8C86A;
    --bark: #5C4033;
    --dew: #B8D8D0;
    --warm-green: #1E3220;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Nunito', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.85; color: var(--sage); background: var(--humus); overflow-x: hidden; }

.dappled-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 60% 30%, rgba(26,60,26,0.5) 0%, transparent 60%), radial-gradient(circle 150px at 20% 50%, rgba(58,95,58,0.08) 0%, transparent 100%), radial-gradient(circle 100px at 75% 70%, rgba(58,95,58,0.08) 0%, transparent 100%), radial-gradient(circle 200px at 45% 85%, rgba(58,95,58,0.06) 0%, transparent 100%); opacity: 0; transition: opacity 2s; }
.dappled-bg.on { opacity: 1; }

.mycelium-svg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.mycelium-thread { fill: none; stroke: var(--verdant); stroke-width: 1; opacity: 0.15; stroke-dasharray: 2000; stroke-dashoffset: 2000; transition: stroke-dashoffset 3s cubic-bezier(0.25, 0.1, 0.25, 1); }
.mycelium-thread.on { stroke-dashoffset: 0; }

.spore-field { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.spore { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--lichen); opacity: 0; animation: sporeDrift var(--dur) linear infinite; animation-delay: var(--delay); }
@keyframes sporeDrift {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: var(--op); }
    90% { opacity: var(--op); }
    100% { transform: translate(var(--dx), -200px); opacity: 0; }
}

.river-flow { position: relative; z-index: 1; padding: 0 5vw; }

.canopy-pod { width: 88vw; min-height: 70vh; margin: 0 auto; border-radius: 45% 55% 50% 50% / 48% 52% 55% 45%; background: linear-gradient(135deg, var(--dark-moss) 0%, var(--humus) 100%); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 10vh 15%; position: relative; overflow: hidden; opacity: 0; transition: opacity 1.2s 2.5s; }
.canopy-pod.on { opacity: 1; }
.growth-rings { position: absolute; inset: 0; background: radial-gradient(ellipse at 48% 52%, rgba(26,46,26,0.05) 10%, transparent 11%, transparent 20%, rgba(12,26,12,0.05) 21%, transparent 22%, transparent 32%, rgba(26,46,26,0.03) 33%, transparent 34%, transparent 44%, rgba(12,26,12,0.05) 45%, transparent 46%, transparent 58%, rgba(26,46,26,0.03) 59%, transparent 60%); }
.canopy-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 52px; color: var(--lichen); letter-spacing: 0.03em; line-height: 1.3; opacity: 0; }
.canopy-title .letter { display: inline-block; opacity: 0; transition: opacity 0.15s; }
.canopy-title .letter.on { opacity: 1; }
.canopy-sub { font-family: 'Nunito', sans-serif; font-weight: 300; font-size: 18px; color: var(--sage); margin-top: 16px; opacity: 0; transition: opacity 0.8s; }
.canopy-sub.on { opacity: 1; }

.puzzle-grove { margin-top: 120px; display: flex; flex-direction: column; gap: 80px; }
.stone-pod { width: clamp(320px, 55vw, 600px); min-height: 200px; border-radius: 50% 46% 52% 48% / 44% 56% 50% 50%; background: linear-gradient(145deg, var(--dark-moss) 0%, rgba(12,26,12,0.9) 100%); padding: 48px 40px; position: relative; transform: rotate(var(--pod-tilt, 0deg)); opacity: 0; filter: blur(4px); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s; box-shadow: 0 0 0 1px rgba(58,95,58,0.2); }
.stone-pod.visible { opacity: 1; filter: blur(0); transform: rotate(var(--pod-tilt, 0deg)) translateY(0); }
.stone-pod:hover { box-shadow: 0 0 0 1px var(--fern); }
.moss-texture { position: absolute; inset: 0; border-radius: inherit; opacity: 0.08; background: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='0.8' fill='%233A5F3A'/%3E%3Ccircle cx='3' cy='3' r='0.5' fill='%233A5F3A'/%3E%3C/svg%3E"); pointer-events: none; transition: opacity 0.4s; }
.stone-pod:hover .moss-texture { opacity: 0.14; }
.pod-left { margin-left: 5vw; }
.pod-right { margin-left: 25vw; }
.pod-center { margin-left: 15vw; }
.spore-badge { position: absolute; top: -20px; left: 40px; width: 60px; height: 60px; border-radius: 50%; background: var(--dark-moss); border: 1px solid var(--verdant); display: flex; align-items: center; justify-content: center; }
.badge-num { font-family: 'Fira Code', monospace; font-weight: 300; font-size: 18px; color: var(--amber); letter-spacing: 0.06em; }
.pod-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 28px; color: var(--lichen); letter-spacing: 0.03em; line-height: 1.3; margin-bottom: 12px; margin-top: 16px; }
.pod-text { font-family: 'Nunito', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.85; color: var(--sage); }

.fern-divider { text-align: center; margin: 80px 0; }
.fern-svg { width: 300px; height: 80px; }
.fern-path { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 2.5s cubic-bezier(0.25, 0.1, 0.25, 1); }
.fern-divider.visible .fern-path { stroke-dashoffset: 0; }

.mycelium-map { margin: 80px auto; text-align: center; }
.network-svg { width: min(80vw, 700px); height: auto; }
.net-path { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 4s cubic-bezier(0.25, 0.1, 0.25, 1); }
.mycelium-map.visible .net-path { stroke-dashoffset: 0; }
.net-node { transform-origin: center; opacity: 0; transition: opacity 0.3s, transform 0.3s; }
.mycelium-map.visible .net-node { opacity: 1; }
.net-node.solved { filter: drop-shadow(0 0 6px rgba(232,200,106,0.4)); }

.reflection-pod { width: clamp(320px, 60vw, 640px); margin: 80px auto; border-radius: 50% 48% 46% 54% / 52% 48% 50% 50%; background: var(--warm-green); padding: 60px 48px; text-align: center; opacity: 0; filter: blur(4px); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.8s; }
.reflection-pod.visible { opacity: 1; filter: blur(0); }
.reflection-text { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 22px; color: var(--lichen); line-height: 2.0; max-width: 600px; margin: 0 auto; }

.forest-footer { padding: 120px 0 60px; text-align: center; background: linear-gradient(180deg, transparent 0%, var(--humus) 100%); }
.footer-domain { font-family: 'Fira Code', monospace; font-weight: 300; font-size: 13px; color: var(--verdant); opacity: 0.4; letter-spacing: 0.06em; }

@media (max-width: 768px) {
    .canopy-pod { width: 95vw; padding: 8vh 8%; border-radius: 30% 30% 30% 30% / 30% 30% 30% 30%; }
    .canopy-title { font-size: 36px; }
    .stone-pod { width: 90vw; }
    .pod-left, .pod-right, .pod-center { margin-left: 2vw; }
    .reflection-pod { width: 92vw; padding: 40px 24px; }
}