/* ============================================================
   MERCE & IAN - THE SCENE  (shared)
   Enchanted forest · living dusk mesh · god-rays · fog · parallax
   plant layers · ferns · flowering vines · fireflies · grain · frame.

   Loaded by index.html (and by the Coming Soon page until launch),
   so the forest is tuned in exactly one place. Extracted verbatim from
   coming-soon.css - no values were changed.

   Depends on: tokens.css   ·   motion driven by js/scene.js (GSAP optional)
   Owns the prefers-reduced-motion rules for its own selectors (see bottom).
   ============================================================ */
/* ============================================================
   THE SCENE - everything GSAP scales on entrance (walk into the woods)
   ============================================================ */
.scene{position:absolute;inset:0;z-index:0;transform-origin:50% 58%;will-change:transform,filter}

/* ---- living dusk mesh (recolored "gurade" flow → forest tones) ---- */
/* BACKUP (v1 - static mesh, kept in case the flowier version is too much):
.cs-gradient{position:absolute;inset:-8%;z-index:0;
  background-color:var(--espresso);
  background-image:
    radial-gradient(at 22% 24%, rgba(201,162,75,0.55) 0px, transparent 60%),
    radial-gradient(at 80% 20%, rgba(47,58,36,0.90) 0px, transparent 62%),
    radial-gradient(at 74% 82%, rgba(110,36,54,0.55) 0px, transparent 60%),
    radial-gradient(at 24% 78%, rgba(85,103,47,0.75) 0px, transparent 62%);
}
   To revert: delete the v2 block below and uncomment this one. */

/* v2 - flowing mesh: the radials live on ::before and slowly drift/scale/rotate
   (transform-based = smooth), closer to the WebGL "gurade" flow. */
.cs-gradient{position:absolute;inset:0;z-index:0;overflow:hidden;background-color:var(--espresso)}
.cs-gradient::before{content:"";position:absolute;inset:-45%;z-index:-1;will-change:transform;
  background-image:
    radial-gradient(46% 52% at 22% 26%, rgba(201,162,75,0.5) 0, transparent 72%),    /* gold shaft  */
    radial-gradient(52% 58% at 82% 18%, rgba(47,58,36,0.92) 0, transparent 74%),      /* deep canopy */
    radial-gradient(50% 56% at 76% 84%, rgba(110,36,54,0.5) 0, transparent 72%),      /* burgundy    */
    radial-gradient(54% 60% at 22% 80%, rgba(85,103,47,0.72) 0, transparent 74%),     /* olive floor */
    radial-gradient(36% 42% at 52% 50%, rgba(139,154,91,0.26) 0, transparent 76%);    /* moss centre */
  animation:meshFlow 42s ease-in-out infinite}
@keyframes meshFlow{
  0%,100%{transform:scale(1.06) rotate(0deg) translate(0,0)}
  33%{transform:scale(1.22) rotate(6deg) translate(-3%,2%)}
  66%{transform:scale(1.12) rotate(-5deg) translate(3%,-2%)}}
.glow{position:absolute;border-radius:50%;filter:blur(72px);mix-blend-mode:screen;will-change:transform,opacity;pointer-events:none}
.glow-1{width:60vmax;height:60vmax;top:-16%;left:8%;opacity:.55;
  background:radial-gradient(circle,#c9a24b 0%,rgba(201,162,75,0) 62%);animation:drift1 28s ease-in-out infinite}
.glow-2{width:52vmax;height:52vmax;bottom:-22%;right:-10%;opacity:.5;
  background:radial-gradient(circle,#8b9a5b 0%,rgba(139,154,91,0) 62%);animation:drift2 34s ease-in-out infinite}
.glow-3{width:46vmax;height:46vmax;top:34%;left:44%;opacity:.4;
  background:radial-gradient(circle,#6e2436 0%,rgba(110,36,54,0) 60%);animation:drift3 30s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,4vh) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-5vh) scale(1.15)}}
@keyframes drift3{0%,100%{transform:translate(-50%,0) scale(1);opacity:.26}50%{transform:translate(-42%,6vh) scale(1.2);opacity:.48}}

/* ---- couple photo, washed duotone (their faces behind the woods) ----
   Knobs to taste: --photo-wash (opacity), the mask focus point, and the
   ::after tint gradient. soft-light melds it into the mesh without overpowering. */
.cs-photo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  --photo-wash:.62;opacity:var(--photo-wash);mix-blend-mode:soft-light;
  -webkit-mask-image:radial-gradient(135% 105% at 50% 32%, #000 0%, #000 34%, transparent 70%);
          mask-image:radial-gradient(135% 105% at 50% 32%, #000 0%, #000 34%, transparent 70%)}
.cs-photo::before{content:"";position:absolute;inset:0;
  background:url("../assets/bg-couple.jpg") center 30% / cover no-repeat;
  filter:grayscale(1) contrast(1.08) brightness(.96)}
.cs-photo::after{content:"";position:absolute;inset:0;mix-blend-mode:color;
  background:linear-gradient(152deg, var(--burgundy) 0%, var(--olive) 52%, var(--gold) 100%)}

/* ---- god-rays: soft light shafts through the canopy ---- */
.cs-rays{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.32;mix-blend-mode:screen;
  background:
    linear-gradient(102deg, transparent 40%, rgba(201,162,75,0.20) 46%, transparent 52%),
    linear-gradient(96deg,  transparent 58%, rgba(231,220,198,0.14) 63%, transparent 68%),
    linear-gradient(110deg, transparent 20%, rgba(201,162,75,0.12) 26%, transparent 33%);
  animation:rays 14s ease-in-out infinite}
@keyframes rays{0%,100%{opacity:.24;transform:translateX(-1%)}50%{opacity:.4;transform:translateX(1%)}}

/* ---- fog banks ---- */
.fog{position:absolute;left:-10%;right:-10%;height:46%;z-index:2;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 90% at 50% 100%, rgba(185,194,154,0.5) 0%, rgba(185,194,154,0) 70%);
  filter:blur(6px)}
.fog-far{bottom:14%;opacity:.28;animation:fogDrift 46s ease-in-out infinite}
.fog-near{bottom:-6%;height:56%;opacity:.5;animation:fogDrift 34s ease-in-out infinite reverse}
@keyframes fogDrift{0%,100%{transform:translateX(-3%)}50%{transform:translateX(3%)}}

/* ---- parallax plant layers ---- */
.layer{position:absolute;left:50%;bottom:0;width:118%;transform:translateX(-50%);
  z-index:3;pointer-events:none;will-change:transform}
.layer svg{display:block;width:100%;height:auto}
.layer-far{opacity:.55;filter:blur(1.5px) brightness(.5)}
.layer-mid{opacity:.8;filter:brightness(.66)}
.layer-near{z-index:6;filter:brightness(.34)}
.layer-far svg,.layer-mid svg{fill:var(--forest)}
.layer-near svg{fill:var(--forest-deep)}

/* corner ferns frame the content */
.fern{position:absolute;bottom:-2%;width:min(32vw,340px);z-index:7;pointer-events:none;
  opacity:.9;filter:brightness(.4) drop-shadow(0 6px 20px rgba(0,0,0,.4));will-change:transform}
.fern svg{display:block;width:100%;height:auto;fill:var(--forest-deep)}
.fern-l{left:-4%}
.fern-r{right:-5%;width:min(26vw,280px)}   /* faces the other way (no mirror) + smaller */

/* ---- gentle wind sway (very subtle) ---- */
.sway{transform-box:fill-box;transform-origin:50% 100%;
  animation:windSway var(--sw,6.5s) ease-in-out infinite var(--swd,0s);will-change:transform}
.sway-hang{transform-box:fill-box;transform-origin:50% 0%;   /* vines pivot from where they hang */
  animation:windSway var(--sw,7.5s) ease-in-out infinite var(--swd,0s);will-change:transform}
@keyframes windSway{0%,100%{transform:rotate(-0.7deg)}50%{transform:rotate(0.7deg)}}

/* ---- flowering vines (spirea-like white blossoms) framing the sides ---- */
.vine{position:absolute;top:-3%;z-index:6;pointer-events:none;
  width:clamp(132px,19vw,258px);height:auto;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.35));will-change:transform}
.vine svg{display:block;width:100%;height:auto}
.vine-l{left:-2.5%}
.vine-r{right:-2.5%;transform:scaleX(-1);transform-origin:center}
.vine .stem{fill:none;stroke:#5c6b34;stroke-width:2.2;stroke-linecap:round}
.vine .leaf{fill:#6f7f42}
.vine .petal{fill:#fbf5e6}
.vine .pollen{fill:#e6c979}
/* gentle interval twinkle - steady most of the cycle, a brief sparkle.
   opacity/glow only (NOT transform - that would override the <use> position). */
.bloom-tw{animation:bloomTw 8s ease-in-out infinite var(--td,0s)}
@keyframes bloomTw{
  0%,86%,100%{opacity:.82;filter:none}
  92%{opacity:1;filter:drop-shadow(0 0 5px rgba(255,248,225,0.95))}}
/* desync the right side so both vines don't sparkle in lockstep */
.vine-r .bloom-tw{animation-direction:reverse}
@media (max-width:640px){.vine{width:32vw;opacity:.92}}

/* ---- fireflies / spores canvas ---- */
/* width/height are load-bearing: scene.js sizes the backing store from this
   element's own box, and an absolutely-positioned <canvas> with width:auto
   falls back to its 300x150 intrinsic size instead of stretching. */
.cs-fireflies{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}

/* ---- film grain + vignette ---- */
.cs-grain{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cs-vignette{position:absolute;inset:0;z-index:8;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 40%,transparent 40%,rgba(15,11,8,0.72) 100%)}

/* ---- shimmering frame ---- */
.cs-frame{position:absolute;inset:22px;z-index:9;pointer-events:none;border:1px solid rgba(201,162,75,0.4);animation:shimmer 6s ease-in-out infinite}
@keyframes shimmer{0%,100%{border-color:rgba(201,162,75,0.26)}50%{border-color:rgba(201,162,75,0.6)}}

/* ---- reduced motion: this file's selectors only ---- */
@media (prefers-reduced-motion:reduce){
  .glow,.cs-frame,.cs-rays,.fog,.layer,.fern{animation:none}
  .cs-gradient::before,.bloom-tw,.sway,.sway-hang{animation:none}
  .scene{transform:none!important;filter:none!important}
}
@media (max-width:480px){
  .cs-frame{inset:12px}
  .fern-l{width:42vw}
  .fern-r{width:30vw}
}