/* ===========================================================================
   motion.css — reveal utilities, custom cursor, keyframes
   =========================================================================== */

/* ---------- reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* staggered — applies incremental delays when inside .reveal-group */
.reveal-group > .reveal { transition-delay: 0ms; }
.reveal-group > .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-group > .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-group > .reveal:nth-child(4) { transition-delay: 240ms; }
.reveal-group > .reveal:nth-child(5) { transition-delay: 320ms; }
.reveal-group > .reveal:nth-child(6) { transition-delay: 400ms; }
.reveal-group > .reveal:nth-child(7) { transition-delay: 480ms; }
.reveal-group > .reveal:nth-child(8) { transition-delay: 560ms; }
.reveal-group > .reveal:nth-child(9) { transition-delay: 640ms; }

/* Reveal variants */
.reveal--left {
  transform: translateX(-30px);
}
.reveal--left.is-visible { transform: translateX(0); }

.reveal--right {
  transform: translateX(30px);
}
.reveal--right.is-visible { transform: translateX(0); }

.reveal--scale {
  transform: scale(0.96);
}
.reveal--scale.is-visible { transform: scale(1); }

.reveal--mask {
  clip-path: inset(0 100% 0 0);
  transform: none;
  opacity: 1;
  transition: clip-path 1100ms var(--ease-out);
}
.reveal--mask.is-visible { clip-path: inset(0 0 0 0); }

/* ---------- custom cursor ---------- */

.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
}

.cursor__dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 5px; height: 5px;
  background: var(--accent-red-hot);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent-red-hot);
}

.cursor__ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(213, 43, 30, 0.55);
  border-radius: 50%;
  transition: transform 260ms var(--ease-out), border-color 260ms var(--ease-out);
}

.cursor.is-ready { opacity: 1; }

.cursor.is-hover .cursor__ring {
  transform: scale(1.8);
  border-color: var(--accent-red);
}

html.no-cursor,
html.no-cursor * { cursor: none !important; }

/* ---------- sheen/shine on hover (buttons, cards) ---------- */

@keyframes sheen {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ---------- global entrance — fades page in once fonts settle ---------- */

html.is-booting body { opacity: 0; }
html:not(.is-booting) body {
  opacity: 1;
  transition: opacity 300ms var(--ease-out);
}

/* ---------- reduced motion overrides ---------- */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal--mask {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .cursor { display: none !important; }
  .hero__line,
  .hero__sub,
  .hero__cta,
  .hero__side,
  .hero__scroll,
  .hero__ticker,
  .hero__accent-line {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__accent-line { width: min(420px, 70vw); }
  .site-nav__logo { animation: none !important; }
}