/* ============================================================================
   HAYES COUNTRY CLUB — animations.css

   Restraint is the entire brief. Things fade up a short distance and settle.
   Photographs relax from a hair over-scale to true size. A section's gold rule
   draws outward from its centre. Nothing bounces, spins, glows or pulses.

   The last block in this file removes all of it for anyone who has asked their
   computer to reduce motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SCROLL REVEALS
   -------------------------------------------------------------------------- */
.js [data-reveal],
.js [data-reveal-child] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal][data-revealed="true"],
.js [data-reveal-child][data-revealed="true"] {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* A group's children are staggered individually, so the group itself never
   fades — otherwise the two effects stack and the whole block reads as sluggish. */
.js [data-reveal][data-reveal-group] { opacity: 1; transform: none; transition: none; }

/* --------------------------------------------------------------------------
   THE EYEBROW RULE — draws outward from the centre.
   -------------------------------------------------------------------------- */
[data-reveal] .tracked--rule::before,
[data-reveal] .tracked--rule::after,
[data-reveal-child] .tracked--rule::before,
[data-reveal-child] .tracked--rule::after {
  transform: scaleX(0);
  transition: transform 800ms var(--ease) 120ms;
}
[data-reveal] .tracked--rule::before { transform-origin: right; }
[data-reveal] .tracked--rule::after { transform-origin: left; }
[data-reveal-child] .tracked--rule::before { transform-origin: right; }
[data-reveal-child] .tracked--rule::after { transform-origin: left; }
[data-revealed="true"] .tracked--rule::before,
[data-revealed="true"] .tracked--rule::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   PHOTOGRAPHS — settle from 1.06 to true size as they arrive.
   -------------------------------------------------------------------------- */
/* Only frames that actually take part in a scroll reveal start hidden. A frame
   without data-reveal (the hero, the full-bleed bands) is visible immediately —
   it must never be left stranded at zero opacity. */
.js [data-image-reveal][data-reveal] .shot__img,
.js [data-image-reveal][data-reveal] .plaque {
  transform: scale(1.06);
  opacity: 0;
  transition: transform 1200ms var(--ease), opacity 900ms var(--ease);
}
.js [data-image-reveal][data-reveal][data-revealed="true"] .shot__img,
.js [data-image-reveal][data-reveal][data-revealed="true"] .plaque {
  transform: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   THE HERO SCROLL CUE — a hairline that draws downward, once every 2.4s.
   -------------------------------------------------------------------------- */
@keyframes cue-draw {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(150%); }
  100% { transform: translateY(150%); }
}

/* The flagstick settling into the cup while a reservation is confirmed. */
@keyframes flag-plant {
  0%   { transform: translateY(-4px); opacity: 0.55; }
  50%  { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-4px); opacity: 0.55; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   One query, and every transform and transition on the site stops. Everything
   that reveals is shown in its finished state immediately.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal-child],
  .js [data-reveal],
  .js [data-reveal-child],
  [data-reveal][data-revealed="true"],
  [data-reveal-child][data-revealed="true"] {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-image-reveal] .shot__img,
  [data-image-reveal] .plaque,
  [data-image-reveal][data-reveal] .shot__img,
  [data-image-reveal][data-reveal] .plaque {
    transform: none !important;
    opacity: 1 !important;
  }
  .tracked--rule::before,
  .tracked--rule::after { transform: scaleX(1) !important; }
  .scrollcue__line::after { animation: none !important; transform: translateY(0) !important; }
  .confirming__flag .orn--flag { animation: none !important; }
  [data-parallax] { transform: none !important; }
}