/* =====================================================================
   THE SWITCH — animations.css
   Keyframes, scroll reveals and ambient motion.
   Everything that moves is gated behind prefers-reduced-motion.
   ===================================================================== */

/* Functional (non-decorative) — the form spinner always runs */
@keyframes spin { to { transform: rotate(360deg); } }

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

  html { scroll-behavior: smooth; }

  /* ---------- Keyframes ---------- */
  @keyframes kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.08) translate3d(-1%, -1%, 0); }
  }
  @keyframes shimmer {
    from { background-position: 0 0, 200% 0; }
    to   { background-position: 0 0, 0% 0; }
  }
  @keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 22px rgba(201, 169, 97, .28); }
    50%      { box-shadow: 0 0 44px rgba(201, 169, 97, .5); }
  }
  @keyframes cue {
    0%   { transform: translateY(-100%); }
    60%  { transform: translateY(100%); }
    100% { transform: translateY(100%); }
  }
  @keyframes drop-fall {
    0%   { transform: translate3d(0, -12vh, 0); opacity: 0; }
    12%  { opacity: var(--o); }
    85%  { opacity: var(--o); }
    100% { transform: translate3d(var(--drift), 108vh, 0); opacity: 0; }
  }
  @keyframes fog-drift {
    0%   { transform: translate3d(-12vw, 0, 0); opacity: 0; }
    25%  { opacity: var(--o); }
    75%  { opacity: var(--o); }
    100% { transform: translate3d(14vw, 3vh, 0); opacity: 0; }
  }
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
  }
  @keyframes page-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes caret { 50% { opacity: 0; } }
  @keyframes rule-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; } }
  @keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-3%, 2%); }
    40% { transform: translate(2%, -3%); }
    60% { transform: translate(-2%, -1%); }
    80% { transform: translate(3%, 2%); }
  }
  @keyframes badge-ping {
    0%   { box-shadow: 0 0 0 0 rgba(201, 169, 97, .6); }
    80%, 100% { box-shadow: 0 0 0 9px rgba(201, 169, 97, 0); }
  }
  @keyframes modal-in {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes draw { to { stroke-dashoffset: 0; } }

  /* ---------- Page transitions (fade + 12px slide) ---------- */
  .js .page { animation: page-in .75s var(--ease-out) both; }
  .js:not(.no-preloader) .page { animation-delay: .35s; }
  .is-leaving .page,
  .is-leaving .site-footer {
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .32s var(--ease-out), transform .32s var(--ease-out);
  }

  /* ---------- Preloader ---------- */
  .preloader { animation: preloader-failsafe .01s 5s forwards; }
  .preloader__title::after { animation: caret .8s steps(1) infinite; }
  .preloader__rule { animation: rule-grow 1.1s .25s var(--ease-cinema) both; }
  .preloader__author { animation: fade-in 1s .7s both; }

  /* ---------- Hero ---------- */
  .kenburns img { animation: kenburns 20s ease-in-out infinite alternate; transform-origin: 55% 60%; }
  .shimmer { animation: shimmer 6s linear infinite; }
  .scroll-cue__line::after { animation: cue 2.4s var(--ease-cinema) infinite; }
  .hero__content > * { animation: rise-in 1.2s var(--ease-out) var(--d, 0s) both; }
  .hero__content > :nth-child(1) { --d: .25s; }
  .hero__content > :nth-child(2) { --d: .4s; }
  .hero__content > :nth-child(3) { --d: .65s; }
  .hero__content > :nth-child(4) { --d: .8s; }
  .hero__content > :nth-child(5) { --d: .95s; }
  .hero__content > :nth-child(6) { --d: 1.1s; }
  .js:not(.no-preloader) .hero__content > * { animation-delay: calc(var(--d, 0s) + 1.6s); }

  .particle--drop, .particle--streak { animation: drop-fall var(--d) linear var(--delay) infinite; }
  .particle--fog { animation: fog-drift var(--d) ease-in-out var(--delay) infinite; }

  .grain { animation: grain 1.2s steps(4) infinite; }

  /* ---------- Buttons ---------- */
  .btn--gold:hover { animation: glow-pulse 1.8s ease-in-out infinite; }
  .badge__dot { animation: badge-ping 1.8s var(--ease-out) infinite; }

  /* ---------- Book ---------- */
  .book3d { animation: float 7s ease-in-out infinite; }

  /* ---------- Modal ---------- */
  .modal[open] { animation: modal-in .55s var(--ease-out); }
  .modal[open]::backdrop { animation: fade-in .45s ease; }

  /* ---------- Scroll reveals (Intersection Observer adds .is-visible) ---------- */
  .js [data-reveal],
  .js [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(6px);
    transition:
      opacity .95s var(--ease-out) var(--reveal-delay, 0ms),
      transform .95s var(--ease-out) var(--reveal-delay, 0ms),
      filter .95s var(--ease-out) var(--reveal-delay, 0ms);
  }
  .js [data-reveal].is-visible,
  .js [data-reveal-stagger].is-visible > * {
    opacity: 1;
    transform: none;
    filter: none;
  }

  /* Journey route draws itself; pins arrive one by one */
  .js .journey__route { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3.6s var(--ease-cinema) .3s; }
  .js .journey__map.is-visible .journey__route { stroke-dashoffset: 0; }
  .js .journey__pin { opacity: 0; transition: opacity .6s var(--ease-out) calc(.8s + var(--i) * .45s); }
  .js .journey__map.is-visible .journey__pin { opacity: 1; }

  /* Signature writes itself */
  .js .signature path { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
  .js .signature.is-visible path { animation: draw 2.6s var(--ease-cinema) .3s forwards; }
  .js .signature.is-visible path:nth-child(2) { animation-delay: 1.4s; }
  .js .signature.is-visible path:nth-child(3) { animation-delay: 2.4s; animation-duration: .8s; }

  /* Nav underline draw-in (desktop link style lives in responsive.css) */
  .site-nav__link::after { transition: transform .35s var(--ease-out); }

  /* ---------- Background motifs ---------- */
  @keyframes clock-tick { to { transform: rotate(360deg); } }
  @keyframes lamp-flicker {
    0%, 100% { opacity: 1; }
    46% { opacity: .82; }
    50% { opacity: .62; }
    54% { opacity: .9; }
  }
  @keyframes train-cross {
    from { transform: translateX(-320px); }
    to   { transform: translateX(1480px); }
  }
  @keyframes rain-run {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: -40px 260px, 30px 340px, -20px 300px, 25px 380px, 0 0; }
  }
  @keyframes drift-slow {
    0%, 100% { translate: 0 -50%; }
    50%      { translate: 0 calc(-50% - 14px); }
  }
  .motif__second { transform-box: view-box; transform-origin: 100px 100px; animation: clock-tick 60s steps(60) infinite; }
  .motif__glow { animation: lamp-flicker 7s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -1.7s); }
  .motif__train { animation: train-cross 46s linear infinite; }
  .motif--rain { animation: rain-run 14s linear infinite; }
  .motif--clock { animation: drift-slow 12s ease-in-out infinite; }
}

/* Reduced motion: make sure nothing is left hidden or mid-transition */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .is-loading [type="submit"]::after { animation: spin .8s linear infinite !important; animation-duration: .8s !important; }
  .particle, .grain { display: none; }
}