/* ============================================================
   Anuva Organics — scroll-cinema layer (vanta.supply style)
   Styles for scroll-scrubbed words, image clip reveals, the
   hero entrance and eyebrow tracking-settle. All hidden states
   are gated behind html.cine-motion (added by scroll-cinema.js)
   so no-JS and ?vsmotion=0 render the page fully visible.
   ============================================================ */

/* ---------- scrubbed words ---------- */
html.cine-motion .cn-w {
  display: inline-block;
  opacity: 0.18; /* baseline before the first JS frame */
}

/* ---------- image clip reveal ---------- */
html.cine-motion .cn-cine {
  will-change: clip-path, opacity;
}

/* ---------- hero cinematic entrance ---------- */
/* hidden state carries NO transition: if the browser painted the hero
   before JS booted (long progressive parse), adding .cine-motion must
   snap it hidden instantly, never fade it out. Only the reveal glides. */
html.cine-motion [data-cine-hero] {
  opacity: 0;
  transform: scale(0.94) translateY(30px);
  filter: blur(14px);
}
html.cine-motion.cine-in [data-cine-hero] {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 1.05s cubic-bezier(0.33, 1, 0.68, 1) 0.15s,
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
    filter 1.15s cubic-bezier(0.33, 1, 0.68, 1) 0.15s;
}

/* ---------- eyebrow tracking-settle ---------- */
/* letters glide together as the label comes into focus; overrides
   only the animation-name of the base .sfx-r.sfx-in reveal */
.cn-eb.sfx-in {
  animation-name: cn-eb-in;
}
@keyframes cn-eb-in {
  from {
    opacity: 0;
    letter-spacing: 0.55em;
    transform: translateY(12px);
    filter: blur(4px);
  }
}