/* Moviment compartit de l'EPK, amb el llenguatge d'Equilibrio:
   easing "ease", micro 220 ms (160 ms en tàctil), canvis d'estat 420 ms, aparicions 680 ms, desplaçament 22 px.
   Regla: res no queda amagat sense JS. Les aparicions només s'activen amb html.mo (ho posa motion.js)
   i només per a elements que encara són sota la pantalla. L'entrada de la portada és CSS pur i acaba visible.
   Fem servir translate/scale/rotate individuals perquè no trepitgin les rotacions pròpies de cada versió. */
:root{
  --mo-ease:ease;
  --mo-out:cubic-bezier(.2,.7,.2,1);
  --mo-micro:220ms;
  --mo-state:420ms;
  --mo-reveal:680ms;
  --mo-shift:22px;
  --mo-step:70ms;
}
@media (pointer:coarse){:root{--mo-micro:160ms;--mo-reveal:560ms;--mo-shift:14px}}

/* Desplaçament suau als enllaços del menú sense que la barra tapi els títols */
html{scroll-padding-top:76px}

/* 1 · Entrada orquestrada de la portada (CSS pur, acaba visible) */
@keyframes mo-up{from{opacity:0;translate:0 24px}to{opacity:1;translate:none}}
@keyframes mo-drop{from{opacity:0;translate:0 -18px;scale:1.04}to{opacity:1;translate:none;scale:none}}
@keyframes mo-pop{0%{opacity:0;scale:.6}70%{opacity:1;scale:1.06}100%{opacity:1;scale:none}}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}
.hero h1:not(:has(.w)){animation:mo-up .9s var(--mo-out) .08s backwards}
.hero h1:not(:has(.w)) .the{animation:mo-up .7s var(--mo-out) backwards}
.hero .eyebrow{animation:mo-fade .7s var(--mo-ease) backwards}
.hero :is(.tag,.tagline){animation:mo-up .7s var(--mo-out) .32s backwards}
.hero .lede{animation:mo-up .7s var(--mo-out) .44s backwards}
.hero .ctas{animation:mo-up .7s var(--mo-out) .56s backwards}
.hero > .wrap > figure{animation:mo-fade 1s var(--mo-ease) .2s backwards}
.hero .board .pola{animation:mo-drop .8s var(--mo-out) backwards}
.hero .board .p1{animation-delay:.3s}
.hero .board .p2{animation-delay:.18s}
.hero .board .p3{animation-delay:.42s}
.hero .stamp{animation:mo-pop .7s var(--mo-out) .75s backwards}
.hero .credit{animation:mo-fade 1.2s var(--mo-ease) .9s backwards}

/* 2 · Aparició de seccions en fer scroll (només amb JS i sota la pantalla) */
.mo .mo-rv{opacity:0;translate:0 var(--mo-shift);transition:opacity var(--mo-reveal) var(--mo-ease),translate var(--mo-reveal) var(--mo-ease);transition-delay:var(--mo-d,0ms)}
.mo .mo-rv.mo-in{opacity:1;translate:none}

/* 3 · Micro-interaccions */
.btn,.card a,.card button,.langs button{transition:translate var(--mo-micro) var(--mo-ease),background-color var(--mo-micro) var(--mo-ease),color var(--mo-micro) var(--mo-ease),border-color var(--mo-micro) var(--mo-ease),box-shadow var(--mo-micro) var(--mo-ease),scale var(--mo-micro) var(--mo-ease)}
.btn:active,.card a:active,.card button:active,.langs button:active{scale:.96}
.fmt,.card,.venues li,.band .av{transition:translate var(--mo-state) var(--mo-ease),box-shadow var(--mo-state) var(--mo-ease),scale var(--mo-state) var(--mo-ease)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{box-shadow:0 10px 28px -12px rgba(0,0,0,.55)}
  .card a:hover,.card button:hover,.langs button:hover{translate:0 -1px}
  .fmt:hover{translate:0 -4px}
  .card:hover{translate:0 -3px}
  .venues li:hover{translate:0 -2px}
  .band li:hover .av{scale:1.08}
  .pola{transition:translate var(--mo-state) var(--mo-ease),scale var(--mo-state) var(--mo-ease),box-shadow var(--mo-state) var(--mo-ease)}
  .pola:hover{translate:0 -6px;scale:1.02;z-index:4}
  .mosaic img{transition:scale .9s var(--mo-ease)}
  .mosaic > :hover img{scale:1.04}
  .mosaic > *{overflow:hidden}
}

/* Canvi d'idioma: el text nou entra amb un fos curt */
.mo-lang [data-t]{animation:mo-fade .32s var(--mo-ease)}

/* 4 · Parallax lleuger a les fotos a sang (només escriptori; ho activa motion.js) */
.mo-px .split .pic{overflow:hidden}
.mo-px :is(.hero .photo img,.hero .photo video,.scene .bg img,.split .pic img){scale:1.1;will-change:translate}

/* 5 · Manglars vius: balanceig molt lent de les copes i reflexos a l'aigua (GPU, sense redibuixar el canvas) */
@keyframes mo-sway{from{transform:skewX(-.7deg)}to{transform:skewX(.7deg)}}
@keyframes mo-shimmer{from{transform:translateX(0)}to{transform:translateX(-120px)}}
.mo #mangrove{transform-origin:50% 100%;animation:mo-sway 9s ease-in-out infinite alternate}
.mo-water{position:absolute;left:0;right:0;bottom:0;height:46px;overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%,#000 70%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 40%,#000 70%,transparent)}
.mo-water::before{content:"";position:absolute;inset:0 -120px 0 0;opacity:.6;
  background:repeating-linear-gradient(90deg,transparent 0 22px,currentColor 22px 34px,transparent 34px 61px,currentColor 61px 66px,transparent 66px 120px);
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 1px,transparent 1px 6px);mask-image:repeating-linear-gradient(180deg,#000 0 1px,transparent 1px 6px);
  animation:mo-shimmer 14s linear infinite}
.mo-water::after{content:"";position:absolute;inset:0 0 0 -120px;opacity:.35;
  background:repeating-linear-gradient(90deg,transparent 0 40px,currentColor 40px 48px,transparent 48px 120px);
  -webkit-mask-image:repeating-linear-gradient(180deg,transparent 0 3px,#000 3px 4px,transparent 4px 6px);mask-image:repeating-linear-gradient(180deg,transparent 0 3px,#000 3px 4px,transparent 4px 6px);
  animation:mo-shimmer 22s linear infinite reverse}

/* Pausa quan la pestanya o la portada no es veuen (com Equilibrio) */
.mo-paused *,.mo-paused *::before,.mo-paused *::after,.mo-off #mangrove,.mo-off .mo-water::before,.mo-off .mo-water::after,.mo-off .stamp svg{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero *,.mo #mangrove,.mo-water::before,.mo-water::after,.mo-lang [data-t]{animation:none!important}
  .mo .mo-rv{opacity:1;translate:none;transition:none}
  .btn,.card,.fmt,.pola,.venues li,.band .av,.mosaic img{transition:none!important}
}