/* Powered from Within: motion CSS (animator-owned). Loaded after styles.css.
   Everything here only applies once scene.js has armed a section (it adds the classes),
   and scene.js never runs under prefers-reduced-motion, so the static layout in
   styles.css is the reduced-motion state. Transform / opacity only, plus clip-path
   on the reserve ghost bar and the one-government line. */

/* ------------------------------------------------------------ hero parallax */
.pfw-hero__pic.is-parallax { display: block; width: 100%; height: 100%; will-change: transform; }

/* ------------------------------------------------------------ 1. meter: the felt tanker */
.pfw-sea {
  position: absolute; left: 0; right: 0; top: 10px; z-index: 0;
  height: calc(var(--pad-section) - 18px); pointer-events: none; overflow: hidden;
  --ship-w: clamp(92px, 11vw, 156px);
  --wake-x: clamp(-120px, -8vw, -64px);
}
.pfw-sea__voyage {
  position: absolute; inset: 0;
  animation: pfw-voyage 34s linear -9s infinite;
}
.pfw-sea__ship { position: absolute; right: 100%; bottom: 6px; width: var(--ship-w); }
.pfw-sea__hull {
  display: block; width: 100%; height: auto; transform-origin: 50% 90%;
  animation: pfw-bob 3.4s ease-in-out infinite alternate;
}
.pfw-sea__note {
  position: absolute; left: 10%; bottom: 46%; width: 24%; height: auto; opacity: 0;
  animation: pfw-note 3.6s var(--ease-out) infinite;
}
.pfw-sea__voyage, .pfw-sea__hull, .pfw-sea__note { animation-play-state: paused; }
.is-inview:not(.is-paused) .pfw-sea__voyage,
.is-inview:not(.is-paused) .pfw-sea__hull,
.is-inview:not(.is-paused) .pfw-sea__note { animation-play-state: running; }

@keyframes pfw-voyage {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(100% + var(--ship-w) + 40px), 0, 0); }
}
@keyframes pfw-bob {
  from { transform: translate3d(0, 0, 0) rotate(-1deg); }
  to   { transform: translate3d(0, -2px, 0) rotate(1deg); }
}
@keyframes pfw-note {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6); }
  18%  { opacity: 1; }
  72%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate3d(var(--wake-x), -34px, 0) rotate(calc(var(--drift, 1) * 150deg)) scale(1); }
}
.pfw-meter__inner { position: relative; z-index: 1; }

/* ------------------------------------------------------------ 2. reserve: pinned scrub */
@media (min-width: 901px) {
  .pfw-reserve.is-pin .pfw-reserve__track::after { content: ""; display: block; height: 110vh; }
  .pfw-reserve.is-pin .pfw-reserve__grid { position: sticky; }
  .pfw-reserve.is-pin .pfw-reserve__stage { position: static; }
}
.is-scrub .pfw-reserve__col--before { z-index: 2; }
.pfw-reserve__ghost {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--petrol) 0 14px, #d9826c 14px 28px);
  border-radius: 10px 26px 4px 4px;
  will-change: transform, clip-path, opacity;
}
.is-scrub [data-reserve-bar="after"] { opacity: 0; }
.is-scrub .pfw-reserve__col--after .pfw-reserve__collabel { opacity: 0; transition: opacity 180ms ease-out; }
.is-scrub.is-after .pfw-reserve__col--after .pfw-reserve__collabel { opacity: 1; transition-duration: 320ms; }
.is-scrub .pfw-reserve__line { transition: border-color 300ms ease, background-color 300ms ease; }
.is-scrub .is-under .pfw-reserve__line { border-color: var(--ink); background-color: rgba(245, 183, 49, 0.22); }
/* the stamp: exits fast, lands with a small overshoot. `scale` composes with the
   positioning transform in styles.css, so both layouts keep their placement */
.is-scrub .pfw-reserve__stamp {
  opacity: 0; scale: 1.6;
  transition: opacity 140ms ease-out, scale 160ms ease-out;
}
.is-scrub.is-after .pfw-reserve__stamp {
  opacity: 1; scale: 1;
  transition: opacity 120ms ease-out, scale 440ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (max-width: 767px) {
  .pfw-reserve__ghost { border-radius: 0 20px 20px 0; }
}

/* ------------------------------------------------------------ 3. flow vs stock lanes */
@media (prefers-reduced-motion: no-preference) {
  .js .pfw-flowstock__lane {
    height: 76px; margin-bottom: 16px; overflow: hidden;
  }
  .js .pfw-flowstock__lane[data-lane="flow"] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 88%, transparent);
  }
}
.is-anim .pfw-flowstock__lane .pfw-drum {
  top: auto; bottom: 7px; left: 0; width: 34px; height: 57px; object-fit: contain; opacity: 1;
  will-change: transform;
}
.pfw-belt {
  position: absolute; left: -24px; right: 0; bottom: 0; height: 5px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--petrol-dark) 0 12px, transparent 12px 24px);
  opacity: 0.2; transition: opacity 600ms ease;
}
.is-running .pfw-belt { opacity: 0.5; animation: pfw-belt 110ms linear infinite; }
@keyframes pfw-belt { to { transform: translate3d(24px, 0, 0); } }

.is-anim .pfw-flowstock__lane[data-lane="stock"] .pfw-flowstock__sprite {
  top: auto; bottom: 7px; left: 6px; width: 84px; height: auto; aspect-ratio: 675 / 550; object-fit: contain;
  opacity: 0; transform: translate3d(0, -30px, 0) rotate(-5deg);
  transition: opacity 180ms ease-out, transform 560ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.is-anim .pfw-flowstock__lane[data-lane="stock"].is-landed .pfw-flowstock__sprite { opacity: 1; transform: none; }
.pfw-ground {
  position: absolute; left: 0; bottom: 0; width: 96px; height: 5px; border-radius: 3px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--ease-out) 380ms;
}
.is-landed .pfw-ground { transform: scaleX(1); }

/* ------------------------------------------------------------ 4. one government: line draw */
.is-draw-armed .pfw-levers__connector {
  clip-path: inset(-20px 100% -20px -20px);
  transition: clip-path 1100ms cubic-bezier(0.77, 0, 0.175, 1);
}
.is-draw-armed.is-drawn .pfw-levers__connector { clip-path: inset(-20px -20px -20px -20px); }

/* ------------------------------------------------------------ timeline: "Now" pulses once */
.pfw-stop--now .pfw-stop__node::after {
  content: ""; position: absolute; inset: -3px; border: 2px solid var(--gold); border-radius: inherit;
  opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .has-scene .pfw-stop--now.vis .pfw-stop__node::after { animation: pfw-pulse 1400ms var(--ease-out) 450ms 1 both; }
}
@keyframes pfw-pulse {
  from { opacity: 0.9; transform: scale(1); }
  to   { opacity: 0; transform: scale(2.3); }
}