/* ══════════════════════════════════════════════════════════════
   PLASMAVAC PREMIUM LAYER v8
   Signature, high-craft product moments. Fewer effects, more
   intention — the goal is "expensive to handle", not "busy".
   Retires film grain; adds showroom lighting + material reveals.
══════════════════════════════════════════════════════════════ */

/* Retire the grain — premium surfaces are clean, not noisy */
.grain { display:none !important }

/* Soften the aurora further so product imagery is the hero */
.aurora { opacity:.34 !important; filter:blur(46px) saturate(115%) !important }

/* ── 1. SHOWROOM GLARE — a slow specular sweep across product media,
       as if a gallery spotlight is passing over a display piece ── */
.show-media { position:relative; overflow:hidden }
.show-media::before {
  content:''; position:absolute; top:-60%; left:-30%; width:60%; height:220%;
  z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 20%, rgba(255,255,255,.10) 42%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.10) 58%, transparent 80%);
  transform:translateX(-40%) rotate(8deg); opacity:0;
}
.show-media.glare::before { animation:glareSweep 1.4s cubic-bezier(.5,0,.2,1) }
@keyframes glareSweep {
  0%   { opacity:0; transform:translateX(-40%) rotate(8deg) }
  35%  { opacity:1 }
  100% { opacity:0; transform:translateX(320%) rotate(8deg) }
}

/* ── 2. MATERIAL UNVEIL — product image is revealed by a wipe with a
       bright leading edge, like a curtain drawing back on a product ── */
.show-media img { transform:scale(1.06); transition:transform .9s var(--out) }
.reveal-mask {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:var(--bg); transform-origin:right;
}
.reveal-mask::after {
  content:''; position:absolute; top:0; right:0; bottom:0; width:2px;
  background:linear-gradient(180deg, transparent, var(--rc, var(--accent)), transparent);
  box-shadow:0 0 24px 4px color-mix(in srgb, var(--rc, var(--accent)) 60%, transparent);
  opacity:0;
}
.show-media.unveil .reveal-mask { animation:unveilWipe 1.1s cubic-bezier(.76,0,.24,1) forwards }
.show-media.unveil .reveal-mask::after { animation:unveilEdge 1.1s cubic-bezier(.76,0,.24,1) forwards }
.show-media.unveil img { transform:scale(1) }
@keyframes unveilWipe { from { transform:scaleX(1) } to { transform:scaleX(0) } }
@keyframes unveilEdge { 0%{opacity:0} 20%,80%{opacity:1} 100%{opacity:0} }

/* ── 3. SPEC READOUT — specs animate in sequence like an instrument
       panel powering up, with a value that settles ── */
.show-specs .spec-item { opacity:0; transform:translateY(14px) }
.show-specs.readout .spec-item { animation:specIn .55s var(--out) forwards }
.show-specs.readout .spec-item:nth-child(1){ animation-delay:.05s }
.show-specs.readout .spec-item:nth-child(2){ animation-delay:.15s }
.show-specs.readout .spec-item:nth-child(3){ animation-delay:.25s }
.show-specs.readout .spec-item:nth-child(4){ animation-delay:.35s }
@keyframes specIn { to { opacity:1; transform:none } }
.spec-val { position:relative }
.show-specs.readout .spec-val::after {
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--rc, var(--accent)); transform:scaleX(0); transform-origin:left;
  animation:specUnderline .5s var(--out) forwards;
}
.show-specs.readout .spec-item:nth-child(1) .spec-val::after{ animation-delay:.35s }
.show-specs.readout .spec-item:nth-child(2) .spec-val::after{ animation-delay:.45s }
.show-specs.readout .spec-item:nth-child(3) .spec-val::after{ animation-delay:.55s }
.show-specs.readout .spec-item:nth-child(4) .spec-val::after{ animation-delay:.65s }
@keyframes specUnderline { to { transform:scaleX(1) } }

/* ── 4. PRODUCT BADGE — settles in with a slight overshoot ── */
.show-badge { transition:transform .5s var(--spring), box-shadow .4s var(--ease) }
.show-media:hover .show-badge {
  transform:translateY(-2px);
  box-shadow:0 8px 24px color-mix(in srgb, var(--rc) 40%, transparent);
}

/* ── 5. TITLE — premium line-reveal (clip up) on entry ── */
.title.line-rise { }
.title.line-rise .lr-inner { display:inline-block; transform:translateY(100%); opacity:0;
  transition:transform .8s var(--out), opacity .8s var(--out) }
.title.line-rise.in .lr-inner { transform:none; opacity:1 }

/* ── 6. Refined divisions cards — a "lift into light" on hover ── */
.div-card { transition:transform .55s var(--out), background .35s var(--ease), box-shadow .55s var(--out) }
.div-card:hover {
  transform:translateY(-8px) scale(1.012);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.8), 0 0 0 1px color-mix(in srgb, var(--dc) 34%, transparent),
             0 0 60px -20px color-mix(in srgb, var(--dc) 45%, transparent);
}

/* ── 7. Marquee tiles — glass-card treatment for a premium feel ── */
.mq-item img { transition:transform .4s var(--spring), box-shadow .4s var(--ease), filter .4s var(--ease) }
.mq-item:hover img { filter:brightness(1.08) }

/* ── 8. Buttons — quiet inner-glow depth instead of flat fill ── */
.btn-filled { box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 12px rgba(0,0,0,.3) }

/* ── 9. Section titles get a subtle tracking-in ── */
.divisions-header .headline, .plants-header .headline { }

/* ── Reduced motion: everything static, content fully visible ── */
@media(prefers-reduced-motion:reduce){
  .show-media::before,.reveal-mask { display:none !important }
  .show-media img { transform:none !important }
  .show-specs .spec-item { opacity:1 !important; transform:none !important }
  .title.line-rise .lr-inner { transform:none !important; opacity:1 !important }
}