/* ── Motion ────────────────────────────────────────────────────────────────
   Restrained: a slow settle on the hero, the chart drawing itself when you
   reach it, quiet scroll reveals, and the cyan track on interaction.

   Everything animates from a `backwards` fill rather than an explicit
   `opacity: 0` base rule. That matters — with `backwards` the hidden state
   exists only while the animation is pending, so if animations never run
   (old engine, blocked stylesheet, reduced-motion override) the content is
   simply visible instead of stuck invisible. Same reasoning for `.reveal`,
   which stays visible until reveal.js proves it is running.
   ------------------------------------------------------------------------ */

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

  /* Hero — settles once, on load. ------------------------------------------
     Note what is NOT animated here: the two headline lines get opacity only.
     Their `transform` belongs to the scroll choreography in expand.css, and an
     animation on the same property would win and freeze them mid-stage. */
  .js .expand__bg { animation: settle 2s var(--ease-out) backwards; }

  .js .expand__top,
  .js .expand__eyebrow,
  .js .expand__cue { animation: rise 1s var(--ease-out) backwards; }

  .js .expand__line { animation: fade-in 1s var(--ease-out) backwards; }

  .js .expand__top      { animation-delay: 0.2s; }
  .js .expand__eyebrow  { animation-delay: 0.45s; }
  .js .expand__line--a  { animation-delay: 0.6s; }
  .js .expand__line--b  { animation-delay: 0.74s; }
  .js .expand__cue      { animation-delay: 1.1s; }
  .js .expand__cue-line { animation: stretch 2.6s var(--ease) 2.4s infinite; }

  /* Chart ----------------------------------------------------------------- */
  /* Held back until the section is on screen — chart.js adds .is-drawing. */
  .js .chart.is-drawing .chart__land path {
    stroke-dasharray: 1;
    animation:
      chart-draw 1.8s var(--ease-out) 0.05s backwards,
      chart-fill 1.2s var(--ease) 0.8s backwards;
  }
  .js .chart.is-drawing .chart__water     { animation: fade-in 1.2s var(--ease) 0.7s backwards; }
  .js .chart.is-drawing .chart__contours  { animation: fade-in 1s var(--ease) 1s backwards; }
  .js .chart.is-drawing .chart__soundings { animation: fade-in 1s var(--ease) 1.25s backwards; }
  .js .chart.is-drawing .chart__home      { animation: fade-in 0.7s var(--ease) 0.55s backwards; }
  .js .chart.is-drawing .chart__rose,
  .js .chart.is-drawing .chart__scale     { animation: fade-in 0.9s var(--ease) 1.5s backwards; }
  .js .chart.is-drawing .chart__home-pulse { animation: ping 2.8s var(--ease-out) 1.3s 3; }

  .js .chart.is-drawing .chart__place { animation: fade-in 0.6s var(--ease) backwards; }
  .js .chart.is-drawing .chart__place:nth-child(1) { animation-delay: 1.30s; }
  .js .chart.is-drawing .chart__place:nth-child(2) { animation-delay: 1.42s; }
  .js .chart.is-drawing .chart__place:nth-child(3) { animation-delay: 1.54s; }
  .js .chart.is-drawing .chart__place:nth-child(4) { animation-delay: 1.66s; }
  .js .chart.is-drawing .chart__place:nth-child(5) { animation-delay: 1.78s; }
  .js .chart.is-drawing .chart__place:nth-child(6) { animation-delay: 1.90s; }

  /* Scroll reveals -------------------------------------------------------- */
  .reveals-armed .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }
  .reveals-armed .reveal.is-in { opacity: 1; transform: none; }
}

@keyframes settle     { from { transform: scale(1.06); } to { transform: none; } }
@keyframes chart-draw { from { stroke-dashoffset: 1; }  to { stroke-dashoffset: 0; } }
@keyframes chart-fill { from { fill-opacity: 0; }       to { fill-opacity: 0.13; } }
@keyframes fade-in    { from { opacity: 0; }            to { opacity: 1; } }
@keyframes rise       { from { opacity: 0; transform: translateY(20px); }
                        to   { opacity: 1; transform: none; } }
@keyframes stretch    { 0%, 100% { transform: scaleX(1); }
                        50%      { transform: scaleX(0.4); } }
@keyframes ping       { 0%   { opacity: 0.6; transform: scale(1); }
                        70%  { opacity: 0;   transform: scale(2.6); }
                        100% { opacity: 0;   transform: scale(2.6); } }

/* Honour the system setting: everything lands in its final state at once. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}