/* ==========================================================================
   KPRS FOODS — ANIMATION SYSTEM
   One deliberate reveal pattern (not per-section fade-up spam) driven by
   an IntersectionObserver in main.js, plus purposeful hover/focus feedback
   already defined alongside each component. Fully respects
   prefers-reduced-motion via the global guard in base.css.
   ========================================================================== */

/* Elements opt in with [data-reveal]. JS adds .is-visible when in view. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children of a reveal group (product grid, pillar cards) via a CSS
   var set inline by JS: style="--reveal-delay: 60ms" */
[data-reveal] { transition-delay: var(--reveal-delay, 0ms); }

/* ---- Direction-aware reveal variants -------------------------------------
   Different sections deserve different entrances; each stays within a small,
   corporate movement budget (no bounce, no overshoot, no rotation). */
[data-reveal="left"]  { transform: translate3d(-26px, 0, 0); }
[data-reveal="right"] { transform: translate3d(26px, 0, 0); }
[data-reveal="scale"] { transform: scale(0.965) translate3d(0, 14px, 0); }
[data-reveal="mask"] {
  transform: none;
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 900ms var(--ease-standard);
}
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible,
[data-reveal="scale"].is-visible { transform: none; }
[data-reveal="mask"].is-visible { clip-path: inset(0 0 0 0); }

/* Slower, more cinematic timing for large media blocks */
[data-reveal="scale"],
[data-reveal="left"],
[data-reveal="right"] {
  transition-duration: 760ms;
}

/* ---- Parallax ------------------------------------------------------------
   JS writes --pxy on [data-parallax] elements from a single rAF loop.
   Composited on transform only; disabled on small screens and under
   reduced-motion (both handled in main.js). */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--pxy, 0px), 0);
}
@media (prefers-reduced-motion: reduce) {
  [data-parallax] { transform: none !important; }
  [data-reveal="mask"] { clip-path: none; transition: none; }
  [data-reveal="left"],
  [data-reveal="right"],
  [data-reveal="scale"] { transform: none; }
}

/* ---- Slow cinematic drift for the hero's background photography ---------- */
@keyframes hero-drift {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  100% { transform: scale(1.14) translate3d(0, -1.5%, 0); }
}

/* If JS fails to load or IO is unsupported, content must still be visible */
.no-js [data-reveal],
[data-reveal].reveal-fallback {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Subtle image movement on hover where useful (hero image, feature imagery) */
.media-hover {
  overflow: hidden;
}
.media-hover img {
  transition: transform var(--duration-slow) var(--ease-standard);
}
.media-hover:hover img {
  transform: scale(1.045);
}
@media (prefers-reduced-motion: reduce) {
  .media-hover:hover img { transform: none; }
}


/* ==========================================================================
   AMBIENT BACKGROUND — site-wide premium light movement
   A single fixed, non-interactive layer behind all content: two very large,
   very low-opacity brand-tone light pools drifting slowly, plus a barely
   perceptible grain. Pure CSS (no canvas, no JS, no images), composited on
   transform/opacity only. Fully disabled under prefers-reduced-motion.
   ========================================================================== */
.bg-ambient {
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 18% 22%, rgba(20, 184, 196, 0.075), transparent 62%),
    radial-gradient(42vmax 42vmax at 82% 78%, rgba(30, 63, 115, 0.070), transparent 64%);
  animation: ambient-drift 68s var(--ease-standard) infinite alternate;
  will-change: transform;
}
.bg-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: radial-gradient(rgba(16, 32, 47, 0.055) 1px, transparent 1px);
  background-size: 3px 3px;
  animation: ambient-grain 24s steps(6, end) infinite;
}

@keyframes ambient-drift {
  0%   { transform: translate3d(-1.4%, -1%, 0) scale(1); }
  50%  { transform: translate3d(1.2%, 1.6%, 0) scale(1.045); }
  100% { transform: translate3d(-0.6%, 2.2%, 0) scale(1.02); }
}
@keyframes ambient-grain {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33%      { transform: translate3d(-1px, 1px, 0); }
  66%      { transform: translate3d(1px, -1px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-ambient { animation: none; }
  .bg-ambient::after { animation: none; opacity: 0.3; }
}