*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#F5EDE0;color:#2C2420;font-family:'EB Garamond',serif;font-weight:400;font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.75;overflow-x:hidden}

/* Equation watermarks */
.watermark{position:fixed;font-family:'Cormorant Garamond',serif;font-weight:300;color:#6B1D2A;pointer-events:none;z-index:0;animation:wmDrift 120s linear infinite}
.wm-1{font-size:10rem;top:10%;left:5%;opacity:0.05}
.wm-2{font-size:8rem;top:50%;right:8%;opacity:0.04}
.wm-3{font-size:12rem;bottom:5%;left:40%;opacity:0.06}
@keyframes wmDrift{0%{transform:translateY(0)}50%{transform:translateY(-30px)}100%{transform:translateY(0)}}

/* Compass navigation */
.compass-btn{position:fixed;top:24px;right:24px;z-index:200;background:none;border:none;cursor:pointer;opacity:0.7;transition:opacity 0.3s ease}
.compass-btn:hover{opacity:1}
.compass-menu{position:fixed;top:24px;right:24px;z-index:199;display:none}
.compass-menu.open{display:block}
.compass-item{position:absolute;display:block;font-family:'Alegreya Sans',sans-serif;font-weight:500;font-size:0.85rem;letter-spacing:0.06em;text-transform:uppercase;color:#6B1D2A;text-decoration:none;white-space:nowrap;transform-origin:right center;transition:color 0.3s ease}
.compass-item:hover{color:#C4727E}
.compass-item:nth-child(1){top:-10px;right:60px}
.compass-item:nth-child(2){top:15px;right:70px}
.compass-item:nth-child(3){top:40px;right:72px}
.compass-item:nth-child(4){top:65px;right:68px}
.compass-item:nth-child(5){top:90px;right:58px}

/* Scenes */
.scene{position:relative;z-index:1;overflow:hidden}

/* Particle zones */
.particle-zone{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}

/* Particle types */
.particle{position:absolute;border-radius:50%;pointer-events:none}
.particle-firefly{background:#C6993A;animation:fireflyFloat var(--dur,10s) ease-in-out infinite,fireflyBlink var(--blink,3s) ease-in-out infinite}
.particle-seed{background:#E8B4B8;animation:seedRise var(--dur,12s) linear infinite}
.particle-dust{background:#D4C8B6;animation:dustDrift var(--dur,20s) ease-in-out infinite}

@keyframes fireflyFloat{0%{transform:translate(0,0)}25%{transform:translate(var(--fx1,15px),var(--fy1,-40px))}50%{transform:translate(var(--fx2,-10px),var(--fy2,-80px))}75%{transform:translate(var(--fx3,20px),var(--fy3,-120px))}100%{transform:translate(0,0)}}
@keyframes fireflyBlink{0%,100%{opacity:0.3}50%{opacity:0.9}}
@keyframes seedRise{0%{transform:translate(0,0);opacity:var(--p-opacity,0.6)}80%{opacity:var(--p-opacity,0.6)}100%{transform:translate(var(--sx,10px),-200px);opacity:0}}
@keyframes dustDrift{0%{transform:translate(0,0)}33%{transform:translate(var(--dx1,8px),var(--dy1,5px))}66%{transform:translate(var(--dx2,-6px),var(--dy2,-3px))}100%{transform:translate(0,0)}}

/* Scene 1: Meadow */
.scene-meadow{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#F5EDE0 0%,#EDE3D1 100%)}
.rose-cluster{position:absolute;inset:0;pointer-events:none;z-index:1}
.grav-rose{position:absolute}
.rose-1{width:clamp(200px,30vw,300px);top:15%;left:10%;animation:roseBloom 1s cubic-bezier(0.34,1.56,0.64,1) 0.2s both}
.rose-2{width:clamp(140px,20vw,200px);top:25%;right:15%;animation:roseBloom 1s cubic-bezier(0.34,1.56,0.64,1) 0.4s both}
.rose-3{width:clamp(100px,15vw,160px);bottom:30%;left:25%;animation:roseBloom 1s cubic-bezier(0.34,1.56,0.64,1) 0.6s both}
.rose-4{width:clamp(80px,12vw,120px);bottom:20%;right:30%;animation:roseBloom 1s cubic-bezier(0.34,1.56,0.64,1) 0.8s both}
.rose-5{width:clamp(120px,18vw,180px);top:50%;left:55%;animation:roseBloom 1s cubic-bezier(0.34,1.56,0.64,1) 1s both}
@keyframes roseBloom{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}

.meadow-text{position:relative;z-index:10;text-align:center}
.meadow-title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(2rem,5vw,4rem);color:#6B1D2A;letter-spacing:0.03em;line-height:1.2}
.meadow-title .char{display:inline-block;opacity:0;animation:charFade 0.15s ease forwards}
.meadow-sub{font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(1rem,2vw,1.3rem);color:#5C4A3E;margin-top:12px}

@keyframes charFade{to{opacity:1}}

/* Scene 2: Garden Grid */
.scene-garden{padding:clamp(40px,6vw,80px) clamp(24px,5vw,80px);max-width:1280px;margin:0 auto}
.garden-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.garden-grid::before{content:'';position:absolute;inset:0;background:radial-gradient(circle,#D4C8B6 1px,transparent 1px);background-size:32px 32px;opacity:0.08;pointer-events:none}

/* Card flip */
.flip-card{perspective:1200px;cursor:pointer}
.flip-inner{width:100%;height:100%;position:relative;transition:transform 0.7s cubic-bezier(0.25,0.8,0.25,1),box-shadow 0.7s ease;transform-style:preserve-3d}
.flip-card:hover .flip-inner,.flip-card.flipped .flip-inner{transform:rotateY(180deg);box-shadow:0 8px 32px rgba(107,29,42,0.15)}
.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:4px;overflow:hidden}
.flip-back{transform:rotateY(180deg)}

.garden-card{min-height:320px;border:1px solid rgba(120,30,42,0.15)}
.garden-card-tall{min-height:480px}
.flip-front{background:#F5EDE0;background-image:repeating-linear-gradient(45deg,transparent,transparent 11px,rgba(212,200,182,0.12) 11px,rgba(212,200,182,0.12) 12px);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:flex-end}
.flip-front h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(1.4rem,3vw,2rem);color:#6B1D2A;letter-spacing:0.03em;line-height:1.2}
.card-shape{position:absolute;top:clamp(16px,2vw,32px);right:clamp(16px,2vw,32px);width:clamp(80px,10vw,120px)}

.flip-back{background:#EDE3D1;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:center}
.flip-back h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(1.2rem,2.5vw,1.6rem);color:#6B1D2A;margin-bottom:8px}
.flip-back p{color:#2C2420;max-width:38ch}
.card-divider{width:60px;height:1px;background:#8C3A4A;margin:12px 0;position:relative}
.card-divider::after{content:'';position:absolute;top:-3px;left:28px;width:6px;height:6px;border:1px solid #8C3A4A;transform:rotate(45deg);background:#EDE3D1}

/* Scene 3: Sundial */
.scene-sundial{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#F5EDE0;padding:clamp(40px,6vw,80px)}
.sundial-face{position:relative;width:clamp(300px,50vw,600px);height:clamp(300px,50vw,600px)}
.sundial-svg{width:100%;height:100%}
.sundial-minute{transform-origin:200px 200px;animation:minuteHand 60s linear infinite}
@keyframes minuteHand{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.sundial-quote{font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(1rem,2vw,1.3rem);color:#5C4A3E;text-align:center;max-width:42ch;margin-top:clamp(24px,4vw,48px)}

/* Scene 4: Herbarium */
.scene-herbarium{padding:clamp(40px,6vw,80px) clamp(24px,5vw,80px);background:#EDE3D1}
.herbarium-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:32px;max-width:1280px;margin:0 auto}

.herb-card{background:#EDE3D1;padding:clamp(28px,4vw,48px);position:relative;clip-path:polygon(0% 4px,3% 0%,8% 3px,14% 1px,20% 5px,27% 0%,35% 2px,42% 4px,50% 1px,58% 3px,65% 0%,72% 5px,80% 2px,88% 0%,94% 3px,100% 1px,100% 100%,0% 100%);border:1px solid rgba(120,30,42,0.12)}
.herb-card h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(1.4rem,3vw,2.2rem);color:#6B1D2A;margin-bottom:8px}
.herb-card p{color:#2C2420;max-width:50ch}
.herb-accent{position:absolute;bottom:16px;right:16px;width:60px;height:60px;opacity:0.5}

.herb-rot-1{transform:rotate(-0.5deg)}
.herb-rot-2{transform:rotate(1deg)}
.herb-rot-3{transform:rotate(-1deg)}
.herb-rot-4{transform:rotate(0.8deg)}

/* Scene 5: Dusk */
.scene-dusk{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#EDE3D1 0%,#6B1D2A 40%,#2E0E16 100%);padding:clamp(40px,6vw,80px);text-align:center}
.dusk-line{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(1.2rem,2.5vw,2rem);color:#E8B4B8;letter-spacing:0.05em;max-width:30ch;line-height:1.4}
.dusk-brand{font-family:'Alegreya Sans',sans-serif;font-weight:500;font-size:0.75rem;letter-spacing:0.06em;color:#C4727E;margin-top:clamp(32px,6vw,64px)}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 0.6s ease,transform 0.6s ease}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:768px){
.herbarium-grid{grid-template-columns:1fr}
.garden-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.compass-btn{top:16px;right:16px}
.wm-1,.wm-2,.wm-3{display:none}
}
@media(max-width:480px){
.garden-grid{grid-template-columns:1fr}
.garden-card-tall{min-height:360px}
}