/* ==========================================================================
   THREE BROTHERS FENCE CO. — ANIMATION LAYER
   All motion animates transform/opacity/clip-path only.
   Every effect is disabled under prefers-reduced-motion (see end of file
   and the reduced-motion block in styles.css).
   ========================================================================== */

/* ---------- 1. SCROLL REVEAL PRIMITIVES ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 780ms var(--e-out), transform 780ms var(--e-out);
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-left  { opacity: 0; transform: translateX(-46px); transition: opacity 820ms var(--e-out), transform 820ms var(--e-out); transition-delay: var(--d, 0ms); }
.reveal-right { opacity: 0; transform: translateX(46px);  transition: opacity 820ms var(--e-out), transform 820ms var(--e-out); transition-delay: var(--d, 0ms); }
.reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* On narrow screens the horizontal entrance would push content off-canvas,
   so fall back to the vertical reveal below the tablet breakpoint. */
@media (max-width: 760px) {
  .reveal-left, .reveal-right { transform: translateY(30px); }
  .reveal-left.is-visible, .reveal-right.is-visible { transform: translateY(0); }
}

.reveal-scale { opacity: 0; transform: scale(.93); transition: opacity 760ms var(--e-out), transform 760ms var(--e-spring); transition-delay: var(--d, 0ms); }
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

/* Clip-path wipe for imagery */
.reveal-clip {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition: clip-path 1.1s var(--e-inout), transform 1.4s var(--e-out);
  transition-delay: var(--d, 0ms);
}
.reveal-clip.is-visible { clip-path: inset(0 0 0 0); transform: scale(1); }

/* Staggered children — index set inline via --i */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms var(--e-out), transform 700ms var(--e-out);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }

/* Hero word-by-word entrance */
.hero__title.is-visible .word > span {
  transform: translateY(0);
  transition: transform 1s var(--e-out);
  transition-delay: calc(var(--w, 0) * 90ms + 180ms);
}

/* ---------- 2. AMBIENT FLOATING ---------- */
@keyframes float-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(28px, -34px, 0) scale(1.07); }
}
@keyframes float-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-32px, 26px, 0) scale(.94); }
}
.float-orb--red   { animation: float-a 17s var(--e-inout) infinite; }
.float-orb--brass { animation: float-b 21s var(--e-inout) infinite; }

/* Slow drift for decorative marks */
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(2.5deg); }
}
.drift { animation: drift 8s var(--e-inout) infinite; }

/* ---------- 3. SHIMMER / METALLIC SWEEP ---------- */
@keyframes shimmer {
  0%   { transform: translateX(-140%) skewX(-18deg); }
  100% { transform: translateX(340%) skewX(-18deg); }
}
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 46%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: shimmer 4.2s var(--e-inout) infinite;
  pointer-events: none;
}

/* ---------- 4. PULSE RING (attention on CTAs) ---------- */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(216,30,40,.5); }
  70%  { box-shadow: 0 0 0 16px rgba(216,30,40,0); }
  100% { box-shadow: 0 0 0 0 rgba(216,30,40,0); }
}
.pulse { animation: pulse-ring 2.6s var(--e-out) infinite; }

/* ---------- 5. MAGNETIC BUTTON ---------- */
/* JS writes --mx/--my; the transform stays GPU-friendly */
.magnetic {
  transition: transform 380ms var(--e-spring);
  will-change: transform;
}
.magnetic.is-pulled {
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 130ms var(--e-out);
}

/* ---------- 6. 3D TILT CARD ---------- */
/* JS writes --rx/--ry from pointer position within .tilt */
.tilt__inner {
  transition: transform 420ms var(--e-out);
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt.is-tilting .tilt__inner {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 120ms linear;
}

/* Glare sheen that follows the pointer */
.tilt__glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
              rgba(255,255,255,.26), transparent 55%);
  transition: opacity 320ms var(--e-out);
}
.tilt.is-tilting .tilt__glare { opacity: 1; }

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

/* ---------- 8. FILTER RE-ENTRANCE ---------- */
@keyframes filter-in {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.filter-in { animation: filter-in 520ms var(--e-out) both; animation-delay: calc(var(--i, 0) * 60ms); }

/* ---------- 9. MARQUEE ---------- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
           mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: .9rem; padding-inline: 2.2rem;
  font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.14);
  white-space: nowrap;
}
.marquee__item svg { width: 20px; height: 20px; color: rgba(216,30,40,.55); flex: none; }

/* ---------- 10. PARALLAX HOOKS ---------- */
/* JS writes --py from scroll offset; only transform is touched */
[data-parallax] { will-change: transform; }
.parallax-y { transform: translate3d(0, var(--py, 0px), 0); }

/* ---------- 11. LOADING SPINNER (form submit) ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  animation: spin .7s linear infinite;
}

/* ---------- 12. REDUCED MOTION KILL SWITCH ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-clip, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .float-orb--red, .float-orb--brass, .drift, .shimmer::after,
  .pulse, .marquee__track, .spinner {
    animation: none !important;
  }
  .shimmer::after { display: none; }
  .tilt.is-tilting .tilt__inner { transform: none !important; }
  .tilt__glare { display: none; }
  .magnetic.is-pulled { transform: none !important; }
  .parallax-y, [data-parallax] { transform: none !important; }
  .filter-in { animation: none !important; }
}