/* ══════════════════════════════════════════════════════════════
   PLASMAVAC IMMERSION LAYER v7  ·  shared across all pages
   Depth, atmosphere and scroll-driven storytelling. Uses native
   scroll-timeline where supported (progressive enhancement) and
   falls back silently everywhere else. Fully disabled under
   prefers-reduced-motion.
══════════════════════════════════════════════════════════════ */

/* ── 1. AMBIENT AURORA — a slow living gradient behind the whole page ── */
.aurora {
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(48% 42% at 18% 22%, color-mix(in srgb, var(--d-pvd) 22%, transparent), transparent 60%),
    radial-gradient(46% 40% at 82% 30%, color-mix(in srgb, var(--d-glass) 20%, transparent), transparent 60%),
    radial-gradient(52% 46% at 50% 88%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%);
  filter:blur(38px) saturate(120%);
  animation:auroraDrift 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes auroraDrift {
  0%   { transform:translate3d(-3%,-2%,0) scale(1.05) rotate(0deg) }
  50%  { transform:translate3d(3%,2%,0)   scale(1.12) rotate(3deg) }
  100% { transform:translate3d(-2%,3%,0)  scale(1.05) rotate(-2deg) }
}
/* keep real content above the aurora */
body > nav, body > header, body > section, body > div, body > footer { position:relative; z-index:1 }
body > .aurora, body > .grain, body > .spotlight { z-index:0 }

/* ── 2. FILM GRAIN — a whisper of texture so the black isn't flat ── */
.grain {
  position:fixed; inset:-200%; z-index:0; pointer-events:none; opacity:.028;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.1s steps(4) infinite;
}
@keyframes grainShift {
  0%{transform:translate(0,0)} 25%{transform:translate(-4%,2%)}
  50%{transform:translate(3%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(2%,3%)}
}

/* ── 3. SCROLL PROGRESS RING on the WhatsApp button surround ── */
.wa-ring { position:fixed; z-index:989; bottom:max(14px,env(safe-area-inset-bottom)); right:max(14px,env(safe-area-inset-right));
  width:64px; height:64px; pointer-events:none; transform:rotate(-90deg) }
.wa-ring circle { fill:none; stroke-width:3; }
.wa-ring .track { stroke:rgba(255,255,255,.08) }
.wa-ring .fill  { stroke:var(--accent); stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .1s linear }

/* ── 4. SCROLL-DRIVEN section entrances (native scroll-timeline) ── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* headline sections rise + settle as they enter the viewport */
    .divisions-header, .plants-header, .cta-band > .eyebrow,
    .stats-grid, .divisions-grid {
      animation:immRise linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 32%;
    }
    @keyframes immRise {
      from { opacity:0; transform:translateY(46px) scale(.985); filter:blur(4px) }
      to   { opacity:1; transform:none; filter:none }
    }
    /* showcase rows: image slides in with depth, text with it */
    .show-media { animation:immMediaIn linear both; animation-timeline:view(); animation-range:entry 0% cover 40% }
    @keyframes immMediaIn {
      from { opacity:0; transform:perspective(1200px) rotateY(9deg) translateX(-40px) }
      to   { opacity:1; transform:perspective(1200px) rotateY(0) translateX(0) }
    }
    .show-content { animation:immContentIn linear both; animation-timeline:view(); animation-range:entry 4% cover 42% }
    @keyframes immContentIn { from{opacity:0; transform:translateX(34px)} to{opacity:1; transform:none} }
    /* hero content gently parallaxes + fades as you scroll past it */
    .hero-body { animation:immHeroPar linear both; animation-timeline:view(); animation-range:exit 0% exit 90% }
    @keyframes immHeroPar { to { opacity:.35; transform:translateY(-8%) scale(.985) } }
    /* marquee reveals as a strip */
    .marquee { animation:immStrip linear both; animation-timeline:view(); animation-range:entry 0% entry 90% }
    @keyframes immStrip { from{opacity:0; clip-path:inset(0 40% 0 40%)} to{opacity:1; clip-path:inset(0 0 0 0)} }
    /* stat cards pop individually */
    .stat { animation:immPop linear both; animation-timeline:view(); animation-range:entry 0% cover 30% }
    @keyframes immPop { from{opacity:0; transform:translateY(28px) scale(.94)} to{opacity:1; transform:none} }
    /* division + plant cards rise in a subtle cascade via nth-child range offset */
    .div-card, .plant-card {
      animation:immCard linear both; animation-timeline:view(); animation-range:entry 0% cover 34%;
    }
    @keyframes immCard { from{opacity:0; transform:translateY(40px) scale(.97)} to{opacity:1; transform:none} }
  }
}

/* ── 5. RICHER HOVER TRANSITIONS ── */
/* division cards tilt toward depth on hover */
.div-card { transition:background .3s var(--ease), transform .5s var(--out), box-shadow .5s var(--out) }
.div-card:hover {
  transform:translateY(-6px);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb, var(--dc) 30%, transparent);
}
.div-icon { transition:transform .5s var(--spring), background .4s var(--ease), box-shadow .4s var(--ease) }
.div-card:hover .div-icon { box-shadow:0 8px 24px color-mix(in srgb, var(--dc) 35%, transparent) }

/* plant cards deepen */
.plant-card:hover { box-shadow:0 24px 60px -22px rgba(0,0,0,.75) }

/* spec items get an accent left-edge that grows on row hover */
.spec-item { position:relative; overflow:hidden }
.spec-item::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--rc, var(--accent)); transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--out);
}
.show-row:hover .spec-item::before { transform:scaleY(1) }

/* eyebrow dot radiates a ring on hover of its section */
.eyebrow:hover .eyebrow-dot { box-shadow:0 0 0 4px var(--accent-bg) }

/* links get an animated trailing underline */
.show-link, .div-link { position:relative }

/* ── 6. HERO: slides get a slow drift (living background) ── */
.slide.active img { animation:kenburns 8s var(--ease) forwards, heroFloat 18s ease-in-out 8s infinite alternate }
@keyframes heroFloat { from{transform:scale(1) translate(0,0)} to{transform:scale(1.05) translate(-1.5%,-1%)} }

/* ── 7. TEXT: hero headline letters settle in (handled by JS split) ── */
.split-char { display:inline-block; opacity:0; transform:translateY(0.5em) rotateX(-40deg);
  transition:opacity .6s var(--out), transform .6s var(--out) }
.split-char.in { opacity:1; transform:none }

/* ── 8. Buttons: ripple origin on click ── */
.btn { --rip:0 }
.btn::marker { content:'' }

/* ── 9. Section separators that glow ── */
.showcase .show-row + .show-row { position:relative }
.showcase .show-row + .show-row::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:0; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference){
    .showcase .show-row + .show-row::before { animation:immSep linear both; animation-timeline:view(); animation-range:entry 0% entry 60% }
    @keyframes immSep { from{width:0;opacity:0} to{width:70%;opacity:1} }
  }
}

/* ── Reduced motion / touch guards ── */
@media (prefers-reduced-motion:reduce){
  .aurora,.grain { display:none !important }
  .slide.active img { animation:none }
  .split-char { opacity:1 !important; transform:none !important }
}