/* ─────────────────────────────────────────────────────────────────────────
   Site-wide visual effects (public pages). Loaded from includes/nav.php,
   driven by assets/js/effects.js. Everything here switches off for visitors
   who ask their device for reduced motion.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Smooth page transitions (View Transitions API) ───────────────────────
   Chrome, Edge and Safari 18+ crossfade between pages instead of flashing
   white. Other browsers ignore the rule and navigate as normal. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .32s; }

/* ── Scroll reveals for headings / intros ─────────────────────────────── */
.fx-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.fx-reveal.fx-in { opacity: 1; transform: none; }

/* ── Count-up stats: stop the width jittering while digits change ────── */
.fx-count { font-variant-numeric: tabular-nums; }

/* ── Shine sweep across the pink "&" in headlines ────────────────────── */
.fx-shine {
  background: linear-gradient(110deg, currentColor 0%, currentColor 40%, #fff6fa 50%, currentColor 60%, currentColor 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fxShine 6s ease-in-out 1.2s infinite;
}
@keyframes fxShine {
  0%, 70%  { background-position: 100% 0; }
  100%     { background-position: -50% 0; }
}

/* ── Glint across primary buttons on hover ───────────────────────────── */
.fx-glint { overflow: hidden; }
.fx-glint::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}
.fx-glint:hover::before,
.fx-glint:focus-visible::before { animation: fxGlint .75s ease-out; }
@keyframes fxGlint {
  0%   { left: -60%; opacity: 1; }
  100% { left: 130%; opacity: 1; }
}

/* ── Sparkle burst on click ──────────────────────────────────────────── */
.fx-spark {
  position: fixed;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  pointer-events: none;
  z-index: 99999;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 3px #ef82af);
  animation: fxSpark .6s ease-out forwards;
}
@keyframes fxSpark {
  0%   { transform: translate(0,0) scale(.4) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(90deg); opacity: 0; }
}

/* ── Service-card tilt (mouse only; JS sets the angles) ──────────────── */
.fx-tilt { transform-style: preserve-3d; will-change: transform; }
.fx-tilt.fx-tilting { transition: transform .12s ease-out, box-shadow .28s ease !important; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .fx-reveal { opacity: 1; transform: none; transition: none; }
  .fx-shine { animation: none; }
  .fx-glint::before, .fx-spark { display: none; }
}