/* ==========================================================================
   Novaline Systems: motion system (copied from the approved V2 design)

   - Hero entrance: runs once while <html data-motion> is present. The head
     script adds it on load; js/animations.js removes it after the sequence.
   - Scroll reveals: js/animations.js marks below-the-fold blocks
     [data-pending] and adds [data-in] when they enter the viewport. Content
     is only ever hidden by JavaScript, so it stays visible if scripts fail.
   - Everything here is disabled for visitors who prefer reduced motion.
   ========================================================================== */

@keyframes nls-spin { to { transform: rotate(360deg); } }
@keyframes nls-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes nls-front { from { opacity: 0; transform: translateY(20px) scale(.965); } }
@keyframes nls-layer { 0% { opacity: 0; transform: translate(-8.8%, 23%); } 60% { opacity: 1; } }
@keyframes nls-drift { to { transform: translate3d(-4%, 3%, 0) scale(1.06); } }
@keyframes nls-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes nls-ping {
  from { box-shadow: var(--shadow-sm), 0 0 0 0 var(--ping); }
  to { box-shadow: var(--shadow-sm), 0 0 0 10px var(--ping-0); }
}
@keyframes nls-slide { from { transform: translateY(-5px); } }
@keyframes nls-nudge {
  20% { transform: translateX(-3px); }
  45% { transform: translateX(3px); }
  70% { transform: translateX(-1.5px); }
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* Hero copy rises in, staggered */
  html[data-motion] [data-hi] { animation: nls-rise 650ms var(--ease-out) backwards; }
  html[data-motion] [data-hi="2"] { animation-delay: 70ms; }
  html[data-motion] [data-hi="3"] { animation-delay: 150ms; }
  html[data-motion] [data-hi="4"] { animation-delay: 230ms; }
  html[data-motion] [data-hi="5"] { animation-delay: 1000ms; }

  /* Hero stack: the creator's card lands first, then the four layers fan out behind it */
  html[data-motion] [data-hl="0"] { animation: nls-front 800ms var(--ease-out) 180ms backwards; }
  html[data-motion] [data-hl="1"] { animation: nls-layer 700ms var(--ease-out) 420ms backwards; }
  html[data-motion] [data-hl="2"] { animation: nls-layer 700ms var(--ease-out) 540ms backwards; }
  html[data-motion] [data-hl="3"] { animation: nls-layer 700ms var(--ease-out) 660ms backwards; }
  html[data-motion] [data-hl="4"] { animation: nls-layer 700ms var(--ease-out) 780ms backwards; }

  /* Slow ambient glow behind the hero; paused while the hero is off-screen */
  [data-ambient] { animation: nls-drift 20s ease-in-out infinite alternate; will-change: transform; }
  html[data-hero-off] [data-ambient] { animation-play-state: paused; }

  /* Scroll reveal (--rd is the per-element stagger delay set by JavaScript) */
  [data-reveal] {
    transition: opacity var(--t-reveal) var(--ease-out) var(--rd, 0ms),
      transform var(--t-reveal) var(--ease-out) var(--rd, 0ms);
  }
  [data-reveal][data-pending]:not([data-in]) { opacity: 0; transform: translateY(14px); }

  /* Process: step numbers light up and their connector lines draw in */
  [data-step-num] {
    transition: color 400ms ease calc(var(--rd, 0ms) + 150ms),
      border-color 400ms ease calc(var(--rd, 0ms) + 150ms),
      transform 500ms var(--ease-out) calc(var(--rd, 0ms) + 150ms);
  }
  [data-reveal][data-pending]:not([data-in]) [data-step-num] {
    color: var(--muted) !important;
    border-color: var(--line-strong) !important;
    transform: scale(.88);
  }
  [data-reveal][data-pending][data-in] [data-step-num] { animation: nls-ping 900ms var(--ease-out) calc(var(--rd, 0ms) + 250ms); }
  [data-step-line] { transform-origin: left center; transition: transform 800ms var(--ease-out) calc(var(--rd, 0ms) + 280ms); }
  [data-reveal][data-pending]:not([data-in]) [data-step-line] { transform: scaleX(0); }

  /* Partnership card: glow settles in and the chevron mark draws itself */
  [data-partner-glow] {
    transition: opacity 1200ms ease calc(var(--rd, 0ms) + 120ms),
      transform 1400ms var(--ease-out) calc(var(--rd, 0ms) + 120ms);
  }
  [data-reveal][data-pending]:not([data-in]) [data-partner-glow] { opacity: 0; transform: translate(10%, -12%); }
  [data-chev] { transition: stroke-dashoffset 1500ms var(--ease-io) calc(var(--rd, 0ms) + 250ms); }
  [data-reveal][data-pending]:not([data-in]) [data-chev="a"] { stroke-dashoffset: 358; }
  [data-reveal][data-pending]:not([data-in]) [data-chev="b"] { stroke-dashoffset: 179; }

  /* Form feedback */
  [data-err], [data-alert] { animation: nls-slide 240ms var(--ease-out); }
  form[data-nudge="a"] :is(input[data-field][aria-invalid="true"], textarea[data-field][aria-invalid="true"], [data-selwrap]:has([aria-invalid="true"])) {
    animation: nls-nudge 340ms var(--ease-out);
  }

  /* Smooth colour crossfade while the visitor switches theme */
  html[data-theme-anim] *,
  html[data-theme-anim] *::before,
  html[data-theme-anim] *::after {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-property: color, background-color, border-color, box-shadow, outline-color, opacity !important;
    transition-duration: 120ms !important;
    transition-delay: 0s !important;
  }
  [data-cta]:hover,
  [data-cta]:active,
  [role="group"] button:active,
  [data-svc]:hover,
  [data-svc]:hover [data-svc-icon],
  [data-hl]:hover [data-hl-card],
  [data-hl][data-tap] [data-hl-card],
  [data-arrow],
  [data-cta]:hover [data-arrow],
  [data-backtop]:hover [data-arrow],
  [data-navlink]::after { transform: none !important; }
  [data-hl] { translate: none !important; }
  [data-navlink]::after { opacity: 0; }
  [data-navlink]:hover::after,
  [data-navlink]:focus-visible::after { opacity: 1; }
}

@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}