/* =========================================================
   NOVIBU.COM — Animations
   Keyframes + reveal-on-scroll states
   ========================================================= */

/* ---------------------------------------------------------
   Scroll reveal — base state / revealed state
   --------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

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

/* Hero title lines animate their inner span, not the wrapper,
   so the overflow-hidden clip creates a rising-mask effect */
.reveal-line .reveal-line__inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.9s var(--ease-out), opacity 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

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

/* Stagger children of grids automatically via inline custom property
   set in app.js, falls back gracefully without JS */
.why-card, .fit-card, .feature, .process-step {
  transition-delay: var(--reveal-delay, 0s);
}

/* ---------------------------------------------------------
   Aurora drift
   --------------------------------------------------------- */
@keyframes auroraDriftA {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4vw, 6vh, 0) scale(1.08); }
  100% { transform: translate3d(-3vw, -4vh, 0) scale(0.98); }
}

@keyframes auroraDriftB {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-5vw, 4vh, 0) scale(1.05); }
  100% { transform: translate3d(3vw, -6vh, 0) scale(0.95); }
}

@keyframes auroraDriftC {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3vw, -5vh, 0) scale(1.1); }
  100% { transform: translate3d(-4vw, 3vh, 0) scale(0.96); }
}

/* Plate conic sheen rotation */
@keyframes plateSheen {
  to { transform: rotate(360deg); }
}

/* Scroll hint line travel */
@keyframes scrollLine {
  0%   { top: -100%; }
  100% { top: 100%; }
}

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

/* Success check draw */
@keyframes drawCircle {
  to { stroke-dashoffset: 0; }
}
@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

/* Success panel entrance */
@keyframes successPop {
  0%   { opacity: 0; transform: scale(0.94) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.offer-success.is-visible {
  animation: successPop 0.5s var(--ease-out) forwards;
}

/* Field shake for validation errors */
@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.field.is-shaking { animation: fieldShake 0.4s var(--ease-in-out); }

/* Fade page in on load to avoid flash of unstyled positions */
body {
  animation: pageFade 0.6s var(--ease-out);
}

@keyframes pageFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------------------------------------------------------
   Reduced motion — respect user preference throughout
   --------------------------------------------------------- */
@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;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  .reveal-line .reveal-line__inner {
    opacity: 1 !important;
    transform: none !important;
  }

  .aurora__blob { animation: none !important; }
  .cursor-glow { display: none !important; }
}