/* ============================================================
   Anuva Organics — scroll effects layer (for-living.it style)
   Word-mask heading reveals, staggered rises, image parallax.
   Purely additive: no base design styles are altered.
   ============================================================ */

/* ---------- word heading reveal (vanta.supply blur-rise) ---------- */
/* words rise and sharpen from a soft blur instead of sliding out
   of a clip mask; padding + negative margin still reserve room for
   ascenders/descenders without shifting layout */
.sfx-word {
  display: inline-block;
  vertical-align: bottom;
  padding: 0.14em 0.06em 0.18em;
  margin: -0.14em -0.06em -0.18em;
}
.sfx-word-in {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  filter: blur(10px);
  transition:
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1),
    filter 0.85s cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: var(--sfx-d, 0s);
  will-change: transform, filter;
}
.sfx-in .sfx-word-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- staggered block reveals (auto-tagged) ---------- */
/* animations (not transitions) so existing hover transitions
   on the same elements are never overridden */
.sfx-r {
  opacity: 0;
}
.sfx-r.sfx-in {
  animation: sfx-up 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--sfx-d, 0s);
}
/* blur-to-focus rise: content "comes into focus" as you reach it */
@keyframes sfx-up {
  0% { opacity: 0; transform: translateY(44px); filter: blur(7px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}

.sfx-scale.sfx-in {
  animation-name: sfx-scale;
}
@keyframes sfx-scale {
  0% { opacity: 0; transform: translateY(30px) scale(0.93); filter: blur(9px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* directional variants: two-column content slides in from its own side */
.sfx-left.sfx-in { animation-name: sfx-left; }
@keyframes sfx-left {
  0% { opacity: 0; transform: translateX(-46px); filter: blur(7px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
.sfx-right.sfx-in { animation-name: sfx-right; }
@keyframes sfx-right {
  0% { opacity: 0; transform: translateX(46px); filter: blur(7px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* the site's own [data-reveal] cards join the same cinematic language
   (unlayered rule outranks the compiled utility; inline animation-delay
   staggers still apply) */
.animate-reveal {
  animation: sfx-reveal2 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sfx-reveal2 {
  0% { opacity: 0; transform: translateY(34px) scale(0.975); filter: blur(6px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* ---------- reading spotlight ---------- */
/* sections outside the viewport's center band rest slightly dimmed;
   the one being read is at full strength */
.sfx-dimmable {
  transition: opacity 0.7s ease;
}
.sfx-dim {
  opacity: 0.62;
}

/* ---------- scroll progress bar ---------- */
.sfx-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, oklch(82% 0.16 82), oklch(70% 0.17 65), oklch(55% 0.13 145));
  box-shadow: 0 0 12px oklch(70% 0.17 65 / 0.55);
  pointer-events: none;
  will-change: transform;
}

/* ---------- parallax images ---------- */
.sfx-px {
  will-change: transform;
}

/* Note: entrance reveals intentionally follow the site's existing
   behavior (main.js reveals and the process wheel animate for all
   users); only the smooth-scroll hijack honors reduced motion. */