/* ==========================================================================
   Motion
   Everything here animates transform / opacity only, and everything is
   disabled under prefers-reduced-motion at the bottom of this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Entrance - driven by one shared IntersectionObserver in animations.js
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--t-enter) var(--ease-out),
              transform var(--t-enter) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

[data-reveal="left"]  { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }

/* Side entrances would widen the document on narrow screens, where these
   sections stack anyway - fall back to the vertical rise. */
@media (max-width: 1023px) {
  [data-reveal="left"],
  [data-reveal="right"] { transform: translateY(26px); }
}
[data-reveal="scale"] { transform: scale(.955); }
[data-reveal="mask"]  { transform: translateY(100%); }

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

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

.mask-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--t-hero) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}

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

/* Rule that draws left to right. */
.rule-draw {
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 900ms var(--ease-out);
}

.rule-draw.is-in { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes float-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(28px, -38px, 0) scale(1.07); }
}

@keyframes float-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-34px, 30px, 0) scale(1.1); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

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

@keyframes ticker-in {
  0%   { opacity: 0; transform: translateY(8px); }
  12%  { opacity: 1; transform: translateY(0); }
  88%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes scroll-hint {
  0%   { transform: translateY(0); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Floating orbs behind dark sections
   -------------------------------------------------------------------------- */

.orbs {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

.orb--gold {
  width: 460px; height: 460px;
  top: -14%; right: -8%;
  background: radial-gradient(circle, rgba(201, 164, 76, .30), transparent 68%);
  animation: float-a 19s var(--ease-io) infinite;
}

.orb--slate {
  width: 400px; height: 400px;
  bottom: -18%; left: -10%;
  background: radial-gradient(circle, rgba(122, 148, 167, .22), transparent 68%);
  animation: float-b 23s var(--ease-io) infinite;
}

.orb--small {
  width: 250px; height: 250px;
  top: 46%; left: 52%;
  background: radial-gradient(circle, rgba(201, 164, 76, .16), transparent 66%);
  animation: float-a 15s var(--ease-io) infinite reverse;
}

.bob { animation: bob 6s var(--ease-io) infinite; }

/* --------------------------------------------------------------------------
   Parallax - depth planes read --scroll-y set by one rAF loop
   -------------------------------------------------------------------------- */

[data-parallax] {
  will-change: transform;
  transform: translate3d(0, calc(var(--py, 0px)), 0);
}

/* --------------------------------------------------------------------------
   Counters
   -------------------------------------------------------------------------- */

.stat__value { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Reduced motion - hard stop
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  .mask-line > span { transform: none; }
  .rule-draw { transform: scaleX(1); }
  [data-parallax] { transform: none !important; }
  .orb { animation: none; }
  .bob { animation: none; }
  .tilt { transform: none !important; }
  .hero__canvas { display: none; }
  .hero__static { opacity: 1; }
}