/* Motion layer (js/motion.js): card→hero morphs (cross-document View Transitions), gentle scroll reveals,
   parallax on guide/story covers. Transforms and opacity only (no layout shift). Off with prefers-reduced-motion. */
@view-transition{navigation:auto}
/* the tagged card image grows into the event hero; keep it cropped (not stretched) while it morphs */
::view-transition-group(*.sola-img){animation-duration:.48s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(*.sola-img),::view-transition-new(*.sola-img){height:100%;width:100%;object-fit:cover;overflow:clip}
::view-transition-group(*.sola-title){animation-duration:.48s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(*.sola-title),::view-transition-new(*.sola-title){height:100%;width:auto;object-fit:none;object-position:left top}
.vt-ph{position:absolute!important;top:0;left:0;right:0;z-index:2;pointer-events:none;transition:opacity .25s ease}
.vt-ph.out{opacity:0}
/* scroll reveals: fade + rise ~12px, staggered by motion.js (inline transition-delay), run once */
.rv{transform:translateY(12px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.rv.in{transform:none}
.mo{opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.mo.mo-in{opacity:1;transform:none}
/* cards inside a revealed row ripple in */
.row.rv .card{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.row.rv.in .card{opacity:1;transform:none}
.row.rv.in .card:nth-child(2){transition-delay:60ms}.row.rv.in .card:nth-child(3){transition-delay:120ms}.row.rv.in .card:nth-child(4){transition-delay:180ms}
.row.rv.in .card:nth-child(5){transition-delay:240ms}.row.rv.in .card:nth-child(6){transition-delay:300ms}.row.rv.in .card:nth-child(n+7){transition-delay:340ms}
html.mo-done .row.rv.in .card{transition-delay:0ms}
/* parallax on guide and story covers (scroll-driven where supported; motion.js fallback sets --plx) */
@keyframes solaPlx{from{translate:0 0}to{translate:0 26vh}}
@supports (animation-timeline:scroll()){
  .st-hero img{animation:stKen 22s ease-out both,solaPlx linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
  .g-hero .e-bg{animation:solaPlx linear both;animation-timeline:scroll(root);animation-range:0 100vh}
}
@supports not (animation-timeline:scroll()){
  .st-hero img{translate:0 var(--plx,0px)}.g-hero .e-bg{translate:0 var(--plx,0px)}
}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .rv,.mo,.row.rv .card{opacity:1!important;transform:none!important;transition:none!important}
  .st-hero img,.g-hero .e-bg{animation:none!important;translate:none!important}
}