/* site-effects.css — scroll / section-transition / click / text colour effects.
   Progressive enhancement only: all rules are scoped to [data-fx] / .fx-*
   classes that site-effects.js adds at runtime. If JS is disabled the site
   looks exactly as before. Respects prefers-reduced-motion. */

@media (prefers-reduced-motion: reduce) {
  [data-fx], .fx-shimmer { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}

/* ---- scroll reveal + section-to-section transitions ----
   Top-level sections fly/slide in from alternating sides with a slight
   3D tilt, so moving between sections feels animated like a 3D site. ---- */
[data-fx] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
[data-fx="left"]  { transform: translateX(-28px); }
[data-fx="right"] { transform: translateX(28px); }
[data-fx="zoom"]  { transform: scale(.96); }
/* Even sections: rise + settle with a subtle 3D tilt. */
[data-fx="section"] {
  transform: translateY(56px) perspective(1100px) rotateX(5deg) scale(.985);
  transition-duration: .7s;
  filter: saturate(.88) brightness(.94);
}
/* Odd sections: sweep in from the side with a 3D yaw, alternating the motion. */
[data-fx="section-alt"] {
  transform: translateX(68px) perspective(1100px) rotateY(-7deg) scale(.985);
  transition-duration: .7s;
  filter: saturate(.88) brightness(.94);
}
[data-fx].fx-in   { opacity: 1; transform: none; filter: none; }
/* Active section in the viewport gently lifts above the 3D field. */
.fx-active {
  filter: drop-shadow(0 12px 24px rgba(56, 189, 248, 0.10));
}

/* ---- text colour effect: shimmering gradient headlines ---- */
.fx-shimmer {
  background-size: 200% auto;
  animation: fx-shimmer 8s linear infinite;
}
@keyframes fx-shimmer { to { background-position: 200% center; } }

/* ---- click ripple ---- */
.fx-ripple-host { position: relative; overflow: hidden; }
.fx-ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: radial-gradient(circle, rgba(56,189,248,.45) 0%, rgba(129,140,248,.25) 60%, transparent 70%);
  animation: fx-ripple .65s ease-out forwards; pointer-events: none;
}
@keyframes fx-ripple { to { transform: scale(3.2); opacity: 0; } }

/* ---- button press feedback ---- */
.fx-press { transition: transform .12s ease; }
.fx-press:active { transform: scale(.96); }