/* ══════════════════════════════════════════════════════════════
   PLASMAVAC MOTION LAYER v6  ·  shared across all pages
   Premium, restrained interaction. Everything degrades gracefully
   and is disabled under prefers-reduced-motion.
══════════════════════════════════════════════════════════════ */

/* ── Cursor spotlight: a soft accent glow follows the pointer ── */
.spotlight {
  position:fixed; top:0; left:0; width:520px; height:520px; z-index:1; pointer-events:none;
  border-radius:50%; opacity:0; transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--accent-bg) 0%, transparent 62%);
  transition:opacity .5s var(--ease); mix-blend-mode:screen; will-change:transform;
}
body:hover .spotlight { opacity:.6 }

/* ── Magnetic / tilt targets get GPU hints ── */
.magnetic, .tilt { will-change:transform; transform:translate3d(0,0,0) }
.tilt { transform-style:preserve-3d; transition:transform .4s var(--out) }
.tilt-inner { transform:translateZ(30px) }

/* ── Animated gradient sweep on the primary accent word ── */
.accent-text.shimmer, .slide-h em {
  background:linear-gradient(100deg, var(--accent) 20%, var(--accent-l) 40%, #fff 50%, var(--accent-l) 60%, var(--accent) 80%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shimmerText 6s linear infinite;
}
@keyframes shimmerText { to { background-position:-220% center } }

/* ── Reveal: add a clip-path wipe variant + blur-rise already present ── */
[data-anim="wipe"] { opacity:0; clip-path:inset(0 100% 0 0); transform:none; filter:none;
  transition:clip-path 1s var(--out), opacity .5s var(--out) }
[data-anim="wipe"].visible { opacity:1; clip-path:inset(0 0 0 0) }

/* section headline underline draws itself when revealed */
.draw-line { position:relative; display:inline-block }
.draw-line::after {
  content:''; position:absolute; left:0; bottom:-8px; height:3px; width:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-l)); border-radius:3px;
  transform:scaleX(0); transform-origin:left; transition:transform .9s var(--out) .2s;
}
.draw-line.visible::after { transform:scaleX(1) }

/* ── Cards: pointer-tracked sheen + lift (division & plant & spec) ── */
.div-card, .plant-card, .cdet {
  position:relative;
}
.div-card::after { /* keep existing radial; add nothing that conflicts */ }
.card-sheen {
  position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  opacity:0; transition:opacity .4s var(--ease);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.06), transparent 60%);
}
.div-card:hover .card-sheen, .plant-card:hover .card-sheen { opacity:1 }

/* ── Buttons: subtle idle breathing glow on primary CTAs ── */
.btn-filled { animation:none }
.btn-filled::before {
  content:''; position:absolute; inset:-2px; z-index:-2; border-radius:inherit; pointer-events:none;
  background:radial-gradient(closest-side, var(--accent), transparent);
  opacity:0; transition:opacity .4s var(--ease);
}
.btn-filled:hover::before { opacity:.45 }

/* ── Nav links: springy underline already exists; add letter lift ── */
.nav-menu a { transition:color .2s var(--ease), letter-spacing .3s var(--out) }
.nav-menu a:hover { letter-spacing:.02em }

/* ── Marquee items pop on hover ── */
.mq-item { transition:transform .3s var(--spring) }
.mq-item:hover { transform:translateY(-3px) scale(1.03) }
.mq-item:hover img { box-shadow:0 6px 18px rgba(0,0,0,.5) }

/* ── Scroll-driven parallax float for showcase media ── */
.show-media { will-change:transform }

/* ── Segment showcase specs: stagger-lift on row hover ── */
.show-row:hover .spec-item:nth-child(1){ transform:translateY(-2px) }
.show-row:hover .spec-item:nth-child(2){ transform:translateY(-2px); transition-delay:.04s }
.show-row:hover .spec-item:nth-child(3){ transform:translateY(-2px); transition-delay:.08s }
.show-row:hover .spec-item:nth-child(4){ transform:translateY(-2px); transition-delay:.12s }

/* ── Stat numbers get a subtle glow while counting ── */
.stat-number.counting { text-shadow:0 0 24px var(--accent-bg) }

/* ── Floating scroll cue on hero ── */
.scroll-cue {
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:rgba(255,255,255,.5); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  pointer-events:none; animation:cueFade 3s var(--ease) 1s both;
}
.scroll-cue svg { width:18px; height:18px; animation:cueBob 2s var(--ease) infinite }
@keyframes cueBob { 0%,100%{transform:translateY(0);opacity:.5} 50%{transform:translateY(6px);opacity:1} }
@keyframes cueFade { from{opacity:0} to{opacity:1} }

/* ── Page-load: nav + hero badge already fade; add first-paint veil lift ── */
.page-veil {
  position:fixed; inset:0; z-index:2000; background:var(--bg); pointer-events:none;
  animation:veilLift 1s var(--out) forwards;
}
@keyframes veilLift { 0%{opacity:1} 70%{opacity:1} 100%{opacity:0; visibility:hidden} }

/* ── Footer segment chips shimmer on hover ── */
.footer-div { transition:transform .3s var(--spring), box-shadow .3s var(--ease) }
.footer-div:hover { transform:translateY(-2px) }

/* ── Reduced motion: strip all of the above movement ── */
@media(prefers-reduced-motion:reduce){
  .spotlight,.scroll-cue,.page-veil { display:none !important }
  .accent-text.shimmer,.slide-h em { animation:none; -webkit-text-fill-color:var(--accent); color:var(--accent) }
  .tilt,.magnetic { transform:none !important }
  .btn-filled::before,.card-sheen { display:none }
}
@media(pointer:coarse){
  .spotlight { display:none }   /* no cursor to follow on touch */
}
