/* ==========================================================
   Animation system
   Initial hidden states only apply when JS is running (.js)
   and the visitor has not asked for reduced motion.
   ========================================================== */

@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes scroll-cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes point-in { from { opacity: 0; } to { opacity: 0.9; } }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Generic reveals ---------- */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out),
                filter var(--dur-reveal) var(--ease-out), clip-path 1s var(--ease-out);
  }
  .js [data-reveal="blur"] { transform: translateY(12px); filter: blur(12px); }
  .js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round var(--radius-lg)); }
  .js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
  .js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round var(--radius-lg)); }

  .js [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out),
                border-color var(--dur-base), background-color var(--dur-base);
    transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0ms, 0ms;
  }
  .js [data-reveal-group].is-in > * { opacity: 1; transform: none; }

  /* ---------- Split headline (word level, keeps Arabic shaping intact) ---------- */
  .word { display: inline-block; }
  .js [data-split] .word {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(0.35em);
    transition: opacity 700ms var(--ease-out), filter 700ms var(--ease-out), transform 800ms var(--ease-out);
    transition-delay: calc(200ms + var(--w, 0) * 110ms);
  }
  .is-loaded [data-split] .word { opacity: 1; filter: none; transform: none; }

  /* Scroll-lit words (vision quote, contact title) */
  .js [data-split-scroll] .word { opacity: 0.18; transition: opacity 400ms var(--ease-out); }
  .js [data-split-scroll] .word.is-lit { opacity: 1; }

  /* ---------- Hero load sequence ---------- */
  .js [data-hero-item] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  }
  .js .hero__lede[data-hero-item] { transition-delay: 650ms; }
  .js .hero__actions[data-hero-item] { transition-delay: 780ms; }
  .js .hero__links[data-hero-item] { transition-delay: 900ms; }
  .is-loaded [data-hero-item] { opacity: 1; transform: none; }

  .js .hero__photo { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); transition: clip-path 1.2s var(--ease-out) 150ms; }
  .is-loaded .hero__photo { clip-path: var(--octagon); }
  .js .hero__photo img { transform: scale(1.25); transition: transform 1.8s var(--ease-out) 150ms; }
  .is-loaded .hero__photo img { transform: scale(1.08); }

  .js .hero__emblem .seg, .js .hero__emblem .core {
    opacity: 0;
    transform-origin: 100px 100px;
    transform: scale(1.35) rotate(-20deg);
    transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-spring);
  }
  .js .hero__emblem .seg:nth-child(1) { transition-delay: 500ms; }
  .js .hero__emblem .seg:nth-child(2) { transition-delay: 560ms; }
  .js .hero__emblem .seg:nth-child(3) { transition-delay: 620ms; }
  .js .hero__emblem .seg:nth-child(4) { transition-delay: 680ms; }
  .js .hero__emblem .seg:nth-child(5) { transition-delay: 740ms; }
  .js .hero__emblem .seg:nth-child(6) { transition-delay: 800ms; }
  .js .hero__emblem .seg:nth-child(7) { transition-delay: 860ms; }
  .js .hero__emblem .seg:nth-child(8) { transition-delay: 920ms; }
  .js .hero__emblem .core { transition-delay: 1000ms; transform: scale(0.2); }
  .is-loaded .hero__emblem .seg, .is-loaded .hero__emblem .core { opacity: 1; transform: none; }

  .is-loaded .plan__route { animation: draw-line 2.4s var(--ease-in-out) 600ms forwards; }
  .is-loaded .plan__points { animation: point-in 600ms var(--ease-out) 2.4s forwards; }
  .is-loaded .plan__rider { animation: point-in 600ms var(--ease-out) 2.8s forwards; }

  .hero__scroll-line { animation: scroll-cue 2.4s var(--ease-in-out) 3s infinite; }

  /* ---------- Operations art ---------- */
  .bento.is-in .ring-fg { transition: stroke-dashoffset 1.6s var(--ease-out) 400ms; stroke-dashoffset: 22; }
  .bento.is-in .art-route { animation: draw-line 1.4s var(--ease-in-out) 600ms forwards; }
  .bento.is-in .art-chip--on { animation: point-in 400ms var(--ease-out) 900ms both; }
}

/* ---------- Reduced motion: static but complete ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .plan__route { stroke-dashoffset: 0; }
  .plan__points { opacity: 0.9; }
  .plan__rider { display: none; }
  .ring-fg { stroke-dashoffset: 22; }
  .art-route { stroke-dashoffset: 0; }
  .start__line path { stroke-dashoffset: 0; }
  .values-map__links line.is-active { stroke-dashoffset: 0; }
  .cursor { display: none; }
}