/* INDOS ACROSS BORDERS · motion. Loaded last.
   Every movement on the site is here, apart from the logo intro (brand.css) and the globe (globe.js).
   Three rules:
   1. Motion explains something: where a thing came from (the cover you tap becomes the episode page), what changed
      (cards sliding into place when a filter applies), what comes next (each section's rule draws itself in).
   2. Content never waits for it: nothing is hidden until an animation runs, and browsers without a feature
      simply show the finished layout.
   3. "Reduce motion" in the visitor's system settings switches all of it off.
   Timing: var(--ease) everywhere (quick start, long settle); 200-550 ms for interface, ~1 s for headlines. */

/* ---------- page to page (cross-document View Transitions: Chrome and Edge 126+, Safari 18.2+) ---------- */
@view-transition { navigation: auto; }
/* the header holds still while the page underneath changes */
.hdr { view-transition-name: site-header; }
::view-transition-group(site-header) { z-index: 3; }
::view-transition-old(root) { animation: vt-out .24s ease both; }
::view-transition-new(root) { animation: vt-in .46s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* the episode cover travels: card -> episode page, and back (names are set by site.js on the card that was tapped) */
.ep-media .th { view-transition-name: ep-cover; }
::view-transition-group(ep-cover) { z-index: 2; animation-duration: .56s; animation-timing-function: var(--ease); }
::view-transition-new(ep-cover):only-child { animation: vt-in .46s var(--ease) both; }
::view-transition-old(ep-cover):only-child { animation: vt-out .24s ease both; }

/* ---------- archive: filtering and sorting (same-document View Transitions) ---------- */
[data-grid] .tk { view-transition-class: card; }
::view-transition-group(*.card) { animation-duration: .5s; animation-timing-function: var(--ease); }
::view-transition-new(*.card):only-child { animation: card-in .42s var(--ease) both; }
::view-transition-old(*.card):only-child { animation: card-out .2s ease both; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes card-out { to { opacity: 0; transform: scale(.96); } }
/* the rest of the page swaps instantly. A press while the cards move ends the animation and lands where it was
   aimed (site.js): the browser sends it to the page itself during a transition, whatever pointer-events says. */
html.vt-filter::view-transition-old(root) { animation: none; opacity: 0; }
html.vt-filter::view-transition-new(root) { animation: none; }

/* ---------- home tabs: the new set of episodes rises in, one after the other ---------- */
[role="tabpanel"].tab-in .tab-intro, [role="tabpanel"].tab-in .tk { animation: fade .5s var(--ease) backwards; }
[role="tabpanel"].tab-in .tk:nth-child(2) { animation-delay: 70ms; }
[role="tabpanel"].tab-in .tk:nth-child(3) { animation-delay: 140ms; }

/* ---------- touch feedback ---------- */
.btn:active, .chip:active, .fl:active, .nav-btn:active, .panel-x:active, .marquee-btn:active { transform: translateY(1px); }
.marquee-btn:active { translate: 0 calc(-50% + 1px); transform: none; }

/* ---------- scroll: linked to the scroll position itself, so it can never leave content hidden
   (CSS scroll-driven animations: Chrome and Edge 115+, Safari 26+; elsewhere the page is simply static) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* the thick black rule that opens each section draws itself in from the left */
    .sec + .sec, .sec-rule, .lead-split + .sec { border-top-color: transparent; position: relative; view-timeline: --sec block; }
    :is(.sec + .sec, .sec-rule, .lead-split + .sec)::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: var(--ink); transform-origin: left;
      animation: rule-draw linear both; animation-timeline: --sec; animation-range: entry 0% entry 35%; }
    /* headings, lists and cards rise a little as they arrive (not in the archive grid, which has its own motion) */
    :is(.sec-head, .qs li, .steps li, .list li, .format, .c-card, .stat, .support-list li, .tk):not([data-grid] .tk, [role="tabpanel"] .tk) {
      animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
@keyframes rule-draw { from { transform: scaleX(0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } }

/* ---------- reduced motion: no page slides, no travelling cover, no reveals ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  [role="tabpanel"].tab-in .tab-intro, [role="tabpanel"].tab-in .tk { animation: none; }
  /* the country panel and its rows appear at once; photos and play buttons no longer zoom */
  .panel, .plist li { animation: none; }
  .ig-tile img, .ep-play, .yt-play, .btn svg { transition: none; }
  .ig-tile:hover img, .ep-media:hover .ep-play, .yt-facade:hover .yt-play { transform: none; }
  /* the guest banner becomes a strip you scroll yourself, without its looping second copy */
  .marquee-track > a[aria-hidden="true"] { display: none; }
}