/* VivaLaSONG · motion layer (27 oct 2026): crossfade · shared element · magnification · blur
   Everything lives here and in fx.js; site.css / site.js are untouched. Off with "reduce motion". */

/* ---------- LAYOUT · full width (27 oct 2026): content uses the whole screen, edge to edge ----------
   Before: every section was capped at 1440px and centered. Now only the side padding (--pad) limits it,
   so it scales with the screen. Reading blocks (FAQ, legal text, team, paragraphs in ch) keep their own limits. */
.wrap,.page-hero .in,.home-hero .in,.ch-hero .in,.page-hero.grad .in{max-width:none}
.player .bar{max-width:none}
@media(min-width:900px){:root{--pad:clamp(32px,4vw,80px)}}

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

  /* ---------- 1 · CROSSFADE (+ blur) between pages ---------- */
  @view-transition{navigation:auto}
  ::view-transition-group(*){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
  html.vt-page::view-transition-old(root){animation:vlsBlurOut .32s cubic-bezier(.4,0,1,1) both}
  html.vt-page::view-transition-new(root){animation:vlsBlurIn .42s cubic-bezier(.2,.8,.2,1) .06s both}

  /* ---------- 2 · SHARED ELEMENT ---------- */
  /* header and player bar stay put while the page changes underneath */
  .hdr{view-transition-name:vls-hdr}
  .player{view-transition-name:vls-player}
  /* channel logo travels from the home "station" card to the channel hero (set by fx.js) */
  ::view-transition-group(vls-chlogo){animation-duration:.55s}
  /* active pill glides between tabs / filters (set by fx.js) */
  ::view-transition-group(vls-pill){animation-duration:.38s;animation-timing-function:cubic-bezier(.3,1.3,.5,1)}
  ::view-transition-old(vls-pill),::view-transition-new(vls-pill){height:100%;animation-duration:.22s}
  /* mini-player thumbnail grows into the floating video (set by fx.js) */
  ::view-transition-group(vls-video){animation-duration:.45s}
  ::view-transition-old(vls-video),::view-transition-new(vls-video){height:100%;object-fit:cover}

  /* ---------- 4 · BLUR: hero FAITH ⇄ FLOW copy and cover swap ---------- */
  .home-hero .col[data-hv]{view-transition-name:vls-herotxt}
  .home-hero .cover[data-hv]{view-transition-name:vls-cover}
  ::view-transition-old(vls-herotxt){animation:vlsBlurOut .22s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(vls-herotxt){animation:vlsBlurIn .38s cubic-bezier(.2,.8,.2,1) .08s both}
  ::view-transition-old(vls-cover),::view-transition-new(vls-cover){animation-duration:.4s}
  ::view-transition-new(vls-cover){animation:vlsBlurIn .45s cubic-bezier(.2,.8,.2,1) both}

  /* blur-in on scroll reveal (on top of the existing fade + rise) */
  .rv{filter:blur(6px)}
  .rv.rv-in{filter:blur(0);transition:opacity .55s var(--ease),transform .55s var(--ease),filter .6s var(--ease);transition-delay:var(--d,0ms)}

  /* focus: hovering one track / release blurs the rest */
  @media (hover:hover) and (pointer:fine){
    .tl li,.rail>.rel:not(.rv){transition:filter .25s var(--ease),opacity .25s var(--ease)}
    .tl:hover li:not(:hover){filter:blur(1.5px);opacity:.5}
    .rail:has(>.rel:hover)>.rel:not(:hover){filter:blur(2px);opacity:.6}

    /* ---------- 3 · MAGNIFICATION (dock) ---------- */
    .fx-dock>*{scale:var(--mag,1);transform-origin:50% 100%;transition:scale .18s cubic-bezier(.2,.8,.2,1),transform .2s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),box-shadow .2s var(--ease)}
    .fx-dock.fx-live>*{transition-duration:.08s,.2s,.25s,.25s,.25s,.2s}
  }
}

@keyframes vlsBlurOut{to{opacity:0;filter:blur(8px)}}
@keyframes vlsBlurIn{from{opacity:0;filter:blur(8px)}}