/* ==========================================================================
   ANIMATIONS — entrance, float, parallax hooks, reduced-motion contract
   Only transform + opacity are animated.
   ========================================================================== */

/* ---- Scroll entrance ---------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--d-enter) var(--ease-out),
              transform var(--d-enter) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-in { opacity: 1; transform: none; }

.reveal--left  { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--scale { transform: scale(0.955); }
.reveal--blur  { filter: blur(7px); transition-property: opacity, transform, filter; }
.reveal--blur.is-in { filter: blur(0); }

/* Masked line reveal for display headings */
.reveal-mask { overflow: hidden; display: block; }

.reveal-mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--d-enter) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-mask.is-in > span { transform: translateY(0); }

/* ---- Floating decorative elements --------------------------------------- */
.float-slow { animation: float-y 8s var(--ease-in-out) infinite alternate; }
.float-mid  { animation: float-y 6.4s var(--ease-in-out) infinite alternate; animation-delay: -1.8s; }

@keyframes float-y {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}

/* ---- WhatsApp attention pulse ------------------------------------------- */
.pulse-wa { animation: pulse-wa 8s var(--ease-in-out) infinite; }

@keyframes pulse-wa {
  0%, 88%, 100% { transform: scale(1); }
  92%           { transform: scale(1.16); }
  96%           { transform: scale(0.98); }
}

/* ---- Magnetic button ---------------------------------------------------- */
.magnetic { transition: transform var(--d-base) var(--ease-out); }

/* ---- 3D tilt ------------------------------------------------------------ */
.tilt { transition: transform var(--d-base) var(--ease-out); }
.tilt.is-tilting { transition: transform 90ms linear; }

/* ---- Counter ------------------------------------------------------------ */
.count { font-variant-numeric: tabular-nums; }

/* ---- Page transition veil ----------------------------------------------- */
.pageveil {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  background: var(--ink);
  pointer-events: none;
  opacity: 0;
  transition: opacity 340ms var(--ease-in-out);
}

.pageveil.is-out { opacity: 1; }

/* ==========================================================================
   REDUCED MOTION — hard contract.
   Everything decorative stops. Nothing becomes invisible or unusable.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal--blur {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .reveal-mask > span { transform: none !important; }

  .mobilemenu__link { opacity: 1 !important; transform: none !important; animation: none !important; }

  .hero__media,
  .cta__media,
  .pagehero__media { transform: none !important; inset: 0 !important; }

  .float-slow, .float-mid, .pulse-wa, .popup__badge i { animation: none !important; }

  .tilt, .magnetic { transform: none !important; }

  .popup__box { transform: none !important; }

  .card:hover .card__media img,
  .shot:hover img { transform: none !important; }

  .scrollbar { display: none; }
}