/* ============================================================
   ЭТО / ETO STUDIO — EFFECTS TOKENS
   Motion, blur, transitions. The brand has almost no shadow —
   depth comes from hairlines, scrims and the living background.
   ============================================================ */

:root {
  /* ---- Easing ---- */
  --ease-out:   cubic-bezier(.16, 1, .3, 1); /* @kind other */
  --ease-std:   ease; /* @kind other */

  /* ---- Durations ---- */
  --dur-fast:   0.3s; /* @kind other */
  --dur-mid:    0.5s; /* @kind other */
  --dur-reveal: 0.9s; /* @kind other */

  /* ---- Transitions (ready-made) ---- */
  --t-hover:  background var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std),
              border-color var(--dur-fast) var(--ease-std); /* @kind other */
  --t-theme:  background var(--dur-mid) var(--ease-std),
              color var(--dur-mid) var(--ease-std); /* @kind other */
  --t-reveal: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out); /* @kind other */

  /* ---- Glass / blur (nav + modal) ---- */
  --blur-nav:   blur(18px); /* @kind other */
  --blur-modal: blur(8px); /* @kind other */

  /* ---- Shadows — used almost never. Lift is a translate, not a glow. ---- */
  --shadow-none: none;
  --lift:        translateY(-5px); /* @kind other */

  /* ---- The plasma canvas filter (background field) ---- */
  --plasma-filter: blur(5px) saturate(138%) contrast(108%); /* @kind other */
}

/* Reveal-on-scroll: start hidden+down, IntersectionObserver flips it. */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: var(--t-reveal);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}