/* ICS home band #ics-feature ("HOAT DONG CUA ICS"): continuous float + JS scroll parallax.
   Tokens: edit here only. Cards (#fc-1..4) float with transform (keyframes) and parallax with the
   individual translate property, so the two stack. Stickers keep their existing .ics-float/.ics-wiggle
   keyframes; their parallax uses transform (free on those imgs). Band layer #hf-band is not touched. */
:root {
  --ics-fl-rot: 1.6deg;
  --ics-fl-amp-1: 16px;
  --ics-fl-amp-2: 13px;
  --ics-fl-amp-3: 18px;
  --ics-fl-amp-4: 14px;
  --ics-fl-dur-1: 5.2s;
  --ics-fl-dur-2: 6.1s;
  --ics-fl-dur-3: 7.0s;
  --ics-fl-dur-4: 5.6s;
  --ics-fl-delay-1: -0.10s;
  --ics-fl-delay-2: -0.55s;
  --ics-fl-delay-3: -1.00s;
  --ics-fl-delay-4: -0.30s;
  --ics-fl-par-range: 36px;
}

@keyframes ics-fl-drift {
  from { transform: translate3d(0, 0, 0) rotate(calc(var(--ics-fl-rot) * -1)); }
  to { transform: translate3d(0, calc(var(--ics-fl-amp) * -1), 0) rotate(var(--ics-fl-rot)); }
}

html body #ics-feature#ics-feature #fc-1 { --ics-fl-amp: var(--ics-fl-amp-1); animation: ics-fl-drift var(--ics-fl-dur-1) ease-in-out var(--ics-fl-delay-1) infinite alternate; translate: 0 var(--ics-par, 0px); will-change: transform, translate; }
html body #ics-feature#ics-feature #fc-2 { --ics-fl-amp: var(--ics-fl-amp-2); animation: ics-fl-drift var(--ics-fl-dur-2) ease-in-out var(--ics-fl-delay-2) infinite alternate; translate: 0 var(--ics-par, 0px); will-change: transform, translate; }
html body #ics-feature#ics-feature #fc-3 { --ics-fl-amp: var(--ics-fl-amp-3); animation: ics-fl-drift var(--ics-fl-dur-3) ease-in-out var(--ics-fl-delay-3) infinite alternate; translate: 0 var(--ics-par, 0px); will-change: transform, translate; }
html body #ics-feature#ics-feature #fc-4 { --ics-fl-amp: var(--ics-fl-amp-4); animation: ics-fl-drift var(--ics-fl-dur-4) ease-in-out var(--ics-fl-delay-4) infinite alternate; translate: 0 var(--ics-par, 0px); will-change: transform, translate; }

html body #ics-feature#ics-feature #fdec-clip1,
html body #ics-feature#ics-feature #fdec-illus,
html body #ics-feature#ics-feature #fdec-art { transform: translate3d(0, var(--ics-par, 0px), 0); }

/* section off-screen: JS adds .ics-fl-off, pause everything moving in the band */
html body #ics-feature#ics-feature.ics-fl-off #fc-1,
html body #ics-feature#ics-feature.ics-fl-off #fc-2,
html body #ics-feature#ics-feature.ics-fl-off #fc-3,
html body #ics-feature#ics-feature.ics-fl-off #fc-4,
html body #ics-feature#ics-feature.ics-fl-off #fdec-clip1,
html body #ics-feature#ics-feature.ics-fl-off #fdec-illus,
html body #ics-feature#ics-feature.ics-fl-off #fdec-art { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  html body #ics-feature#ics-feature #fc-1,
  html body #ics-feature#ics-feature #fc-2,
  html body #ics-feature#ics-feature #fc-3,
  html body #ics-feature#ics-feature #fc-4 { animation: none; translate: none; will-change: auto; }
  html body #ics-feature#ics-feature #fdec-clip1,
  html body #ics-feature#ics-feature #fdec-illus,
  html body #ics-feature#ics-feature #fdec-art { transform: none; }
}

/* stickers: float amplitude (existing ics-float keyframes read --ics-amp) */
html body #ics-feature#ics-feature #fdec-clip1 { --ics-amp: 8px; }
html body #ics-feature#ics-feature #fdec-art { --ics-amp: 10px; }

/* page 133 #mis-s3 cards: float the WHOLE card (white frame, photo and caption), not only the photo. translate-only (no rotate) so the photo keeps a constant offset inside its card; translate is free for hover transform. Same tokens as the band above (amp/dur/delay 1..4). The inner img's .ics-float animation is switched off for these four only. */
@keyframes ics-mis-card-float {
  from { translate: 0 0; }
  to { translate: 0 calc(var(--ics-mf-amp) * -1); }
}
html body #mis-card-a#mis-card-a { --ics-mf-amp: var(--ics-fl-amp-1); animation: ics-mis-card-float var(--ics-fl-dur-1) ease-in-out var(--ics-fl-delay-1) infinite alternate; will-change: translate; }
html body #mis-card-b#mis-card-b { --ics-mf-amp: var(--ics-fl-amp-2); animation: ics-mis-card-float var(--ics-fl-dur-2) ease-in-out var(--ics-fl-delay-2) infinite alternate; will-change: translate; }
html body #mis-card-c#mis-card-c { --ics-mf-amp: var(--ics-fl-amp-3); animation: ics-mis-card-float var(--ics-fl-dur-3) ease-in-out var(--ics-fl-delay-3) infinite alternate; will-change: translate; }
html body #mis-card-d#mis-card-d { --ics-mf-amp: var(--ics-fl-amp-4); animation: ics-mis-card-float var(--ics-fl-dur-4) ease-in-out var(--ics-fl-delay-4) infinite alternate; will-change: translate; }
html body :is(#mis-card-a-img#mis-card-a-img, #mis-card-b-img#mis-card-b-img, #mis-card-c-img#mis-card-c-img, #mis-card-d-img#mis-card-d-img) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html body :is(#mis-card-a#mis-card-a, #mis-card-b#mis-card-b, #mis-card-c#mis-card-c, #mis-card-d#mis-card-d) { animation: none; translate: none; will-change: auto; }
}