/* ==========================================================================
   Scroll reveals, entrance sequence, reduced-motion guard
   ========================================================================== */

/* ---- Scroll reveal variants --------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--t-entrance) var(--ease-out),
    transform var(--t-entrance) var(--ease-out),
    clip-path var(--t-entrance) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, transform;
}

[data-reveal="up"]    { transform: translate3d(0, 34px, 0); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="left"]  { transform: translate3d(-34px, 0, 0); }
[data-reveal="right"] { transform: translate3d(34px, 0, 0); }
[data-reveal="mask"]  { clip-path: inset(0 0 100% 0); transform: translate3d(0, 20px, 0); }

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* ---- Line-mask headline reveal ------------------------------------------- */

.mask-line {
  display: block;
  overflow: hidden;
}

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

.is-loaded .mask-line > span,
.is-in .mask-line > span { transform: none; }

/* ---- Page entrance sequence ----------------------------------------------- */

.header .brand,
.header .nav__item,
.header__actions {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--t-std) var(--ease-out), transform var(--t-std) var(--ease-out);
}

.is-loaded .header .brand,
.is-loaded .header .nav__item,
.is-loaded .header__actions {
  opacity: 1;
  transform: none;
}

.is-loaded .header .brand { transition-delay: 60ms; }
.is-loaded .header .nav__item { transition-delay: calc(var(--i, 0) * 60ms + 140ms); }
.is-loaded .header__actions { transition-delay: 420ms; }

.hero__cards .float-card {
  opacity: 0;
  transition: opacity var(--t-entrance) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 140ms + 620ms);
}

.is-loaded .hero__cards .float-card { opacity: 1; }

/* ---- Magnetic button ------------------------------------------------------- */

.magnetic { transition: transform var(--t-micro) var(--ease-out); }

/* ---- Ripple ---------------------------------------------------------------- */

.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  animation: ripple 620ms var(--ease-out) forwards;
}

@keyframes ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* ---- Marquee trust line ------------------------------------------------------ */

.rotator { position: relative; display: inline-grid; }

.rotator__item {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-std) var(--ease-out), transform var(--t-std) var(--ease-out);
}

.rotator__item.is-active { opacity: 1; transform: none; }

/* ==========================================================================
   Reduced motion — disable every transform, parallax and looping animation
   ========================================================================== */

@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="up"],
  [data-reveal="scale"],
  [data-reveal="left"],
  [data-reveal="right"],
  [data-reveal="mask"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

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

  .header .brand,
  .header .nav__item,
  .header__actions,
  .hero__cards .float-card { opacity: 1 !important; transform: none !important; }

  .hero__media img,
  .float-card,
  .hero__cue-line { animation: none !important; transform: none !important; }

  .hero__media { transform: none !important; }

  .process__line { stroke-dashoffset: 0 !important; }

  .tilt { transform: none !important; }
}