/* ─────────────────────────────────────────────────────────────────────────
   MarcoMotion · web pública — capa de moviment
   ─────────────────────────────────────────────────────────────────────────
   Fitxer ADDITIU: no toca res de site.css, només hi suma. Per desactivar-ho
   tot, treure les dues línies de motion.css i motion.js de render.js; per
   esborrar-ho, aquests dos fitxers i web/public/video/.

   Regla de tot el fitxer: si algú té «reduir moviment» activat al sistema,
   res d'això no s'executa (bloc final).
   ───────────────────────────────────────────────────────────────────────── */

/* ── 1 · La graella dels banners deriva ─────────────────────────────────
   A la portada la quadrícula ja hi era, quieta. A les pàgines interiors no
   hi havia res: el banner era un degradat pla i es notava com un buit.
   44 px cada 44 s: no es percep com a moviment, es percep com que la pàgina
   no és una captura de pantalla. */
.hero::before{animation:mm-deriva 44s linear infinite}
@keyframes mm-deriva{to{background-position:44px 44px,44px 44px}}

/* Les franges interiors reben la mateixa graella, però més tènue i amb una
   màscara més tancada: són bandes baixes i el que hi mana és el titular. */
.page-hero,.svc-hero{isolation:isolate}
.page-hero::before,.svc-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.42;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(72% 130% at 22% 15%,#000,transparent 76%);
  animation:mm-deriva-fi 52s linear infinite;
}
@keyframes mm-deriva-fi{to{background-position:38px 38px,38px 38px}}
/* El contingut per damunt de la graella i del halo. */
.page-hero .wrap,.svc-hero .wrap{position:relative;z-index:2}

/* Fotografia de fons dels banners interiors, repartida per tema.
   El primer intent posava LA MATEIXA imatge a totes les pàgines i es notava
   encara que anés al 92 % de vel. Ara n'hi ha quatre, totes del material
   propi: el taller, i tres fotogrames dels vídeos amb tres vehicles diferents.
   El vel i la imatge van a la mateixa pseudo-capa, així site.css no s'ha de
   redeclarar, i les rutes són RELATIVES a motion.css, que és el que fa que
   funcionin igual en local sota /web i en producció a l'arrel del domini. */
.page-hero[class*="mm-t-"]::after,.svc-hero[class*="mm-t-"]::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat,no-repeat;
  background-size:cover,cover;
  background-position:center,center 42%;
  /* Això és el que fa que la imatge no sembli enganxada: en comptes d'omplir
     la franja de banda a banda, es fon cap a l'esquerra i deixa el navy net
     sota el titular. La foto acaba on comença el text, sense cap vora. */
  -webkit-mask-image:linear-gradient(95deg,transparent 4%,rgba(0,0,0,.55) 34%,#000 62%);
  mask-image:linear-gradient(95deg,transparent 4%,rgba(0,0,0,.55) 34%,#000 62%);
}
/* Al mòbil el titular ocupa tota l'amplada: la imatge es fon des de baix i no
   des del costat, que és on hi ha l'espai lliure en vertical. */
@media (max-width:760px){
  .page-hero[class*="mm-t-"]::after,.svc-hero[class*="mm-t-"]::after{
    -webkit-mask-image:linear-gradient(to bottom,transparent 6%,rgba(0,0,0,.6) 46%,#000 88%);
    mask-image:linear-gradient(to bottom,transparent 6%,rgba(0,0,0,.6) 46%,#000 88%);
  }
}
/* El vel és el mateix per a totes, perquè el titular blanc mantingui sempre
   el mateix contrast tant si al darrere hi ha taller com si hi ha wireframe. */
.mm-t-taller::after{
  background-image:linear-gradient(150deg,rgba(9,22,38,.94),rgba(14,35,56,.88) 55%,rgba(9,22,38,.95)),
                   url(img/taller-obd.webp);
}
.mm-t-sedan::after{
  background-image:linear-gradient(150deg,rgba(9,22,38,.92),rgba(14,35,56,.84) 55%,rgba(9,22,38,.94)),
                   url(img/fons-sedan.webp);
}
.mm-t-crossover::after{
  background-image:linear-gradient(150deg,rgba(9,22,38,.92),rgba(14,35,56,.84) 55%,rgba(9,22,38,.94)),
                   url(img/fons-crossover.webp);
}
/* Aquesta és la més lluminosa de les tres: li cal una mica més de vel. */
.mm-t-suv::after{
  background-image:linear-gradient(150deg,rgba(9,22,38,.93),rgba(14,35,56,.87) 55%,rgba(9,22,38,.95)),
                   url(img/fons-suv.webp);
}
/* El mapa de cobertura, ja convertit a la gamma de blaus de la marca. Porta
   menys vel que la resta perquè és una imatge plana i de contrast curt: amb el
   vel dels altres es tornava una taca uniforme i no s'hi distingia el radi.
   Ancorat a la dreta, que és on cau el cercle de cobertura. */
/* Els tres vehicles amb les gràfiques, a l'índex de serveis. És l'única imatge
   CLARA del conjunt: sobre un banner navy necessita més vel que les fosques,
   no menys. Provat al 74 %, al 84 % i al 92 %: al 74 s'arribaven a llegir els
   rètols en anglès de la imatge («TCO», «Fleet efficiency») i el costat dret
   es tornava gris; al 92 desapareixia del tot. Al 84 els vehicles s'endevinen,
   el navy es manté i els rètols no es veuen.
   Ancorada a la dreta, on són els vehicles: el buit de l'esquerra ja el fa la
   màscara. */
/* ⚠ Aquestes dues van amb el selector complet perquè la posició guanyi la de
   la regla base, que té més especificitat que un `.mm-t-…` sol. I per això
   MAI es pot posar només `.page-hero`: les fitxes de servei són `.svc-hero`
   i es quedarien amb el banner buit. Ja va passar un cop. */
.page-hero.mm-t-flota::after,.svc-hero.mm-t-flota::after{
  background-image:linear-gradient(150deg,rgba(9,22,38,.90),rgba(14,35,56,.80) 55%,rgba(9,22,38,.92)),
                   url(img/fons-flota.webp);
  background-position:center,right center;
}
.page-hero.mm-t-mapa::after,.svc-hero.mm-t-mapa::after{
  background-image:linear-gradient(150deg,rgba(9,22,38,.88),rgba(14,35,56,.78) 55%,rgba(9,22,38,.90)),
                   url(img/fons-mapa.webp);
  background-position:center,right 34%;
}
/* En pantalla petita, la del taller en versió lleugera i una mica més fosca:
   el titular ocupa tota l'amplada i ha de guanyar sempre. */
@media (max-width:980px){
  .mm-t-taller::after{
    background-image:linear-gradient(150deg,rgba(9,22,38,.95),rgba(14,35,56,.90) 55%,rgba(9,22,38,.96)),
                     url(img/taller-obd-mobil.webp);
  }
  .page-hero[class*="mm-t-"]::after,.svc-hero[class*="mm-t-"]::after{background-position:center,center 46%}
}

/* Filigrana de marca als banners interiors.
   Es va provar primer amb una fotografia de fons i el problema era que TOTES
   les pàgines duien la mateixa: sota el vel es llegia com a textura, però era
   literalment la mateixa imatge quinze vegades. Amb els dibuixos de illus.js
   cada pàgina en té un del seu tema, i totes segueixen parlant el mateix idioma
   visual. A més no pesa: és SVG en línia i agafa els colors del tema.
   Va a la dreta, on hi ha l'espai buit del banner, i molt tènue: ha de ser una
   presència, no una il·lustració que competeixi amb el titular. */
.mm-marca{
  position:absolute;right:-1.5rem;top:50%;transform:translateY(-50%);
  z-index:0;pointer-events:none;
  width:min(38%,420px);opacity:.13;
  mask-image:linear-gradient(100deg,transparent,#000 42%);
}
.mm-marca .illus{width:100%;height:auto;display:block}
/* Sobre navy, els traços han d'anar en clar; els de illus.js són foscos perquè
   allà viuen damunt d'una targeta blanca. */
.mm-marca .il-line,.mm-marca .il-soft,.mm-marca .il-ring{stroke:#fff}
.mm-marca .il-grid{stroke:#fff;opacity:.35}
.mm-marca .il-mark,.mm-marca .il-gold{stroke:var(--gold-soft)}
.mm-marca .il-dot{fill:#fff}
.mm-marca .il-dot-gold{fill:var(--gold)}
.mm-marca .il-fill-soft{fill:rgba(255,255,255,.07)}
/* En pantalla petita el titular ocupa tota l'amplada i la filigrana només
   embrutaria: es queda, però molt més enrere i més petita. */
@media (max-width:760px){
  .mm-marca{width:52%;opacity:.07;right:-3rem}
}

/* ── 2 · El halo daurat respira ─────────────────────────────────────────
   El radial-gradient d'or és part del `background` del banner, i un
   background no s'anima bé. Es duplica en una capa pròpia que sí que pot. */
.hero{isolation:isolate}
.hero .mm-halo,.page-hero .mm-halo,.svc-hero .mm-halo{
  position:absolute;top:-42%;right:-6%;width:58%;aspect-ratio:1;border-radius:50%;
  pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(198,162,74,.26),transparent 64%);
  animation:mm-respira 11s ease-in-out infinite;
}
/* A les interiors, més petit i més discret: la franja fa un terç d'alçada. */
.page-hero .mm-halo,.svc-hero .mm-halo{
  top:-78%;right:-4%;width:46%;
  background:radial-gradient(circle,rgba(198,162,74,.20),transparent 66%);
  animation-duration:14s;
}
@keyframes mm-respira{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}

/* ── 3 · Vídeo de fons del hero ─────────────────────────────────────────
   Només s'insereix a pantalles grans, quan no s'ha demanat menys moviment i
   quan NO hi ha foto de portada posada des del panell (ho decideix motion.js:
   si hi ha foto, mana la foto). El pòster tapa el forat mentre carrega.
   L'escala de 1.14 amb el desplaçament treu de quadre el segell ✦ de la
   cantonada inferior dreta del fitxer original. */
.hero.mm-video{background-image:none}
.hero .mm-vid{
  position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;
  background:var(--navy-3) center/cover no-repeat;
}
.hero .mm-vid video{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.14) translate(-3.5%,-4.5%);transform-origin:center;
  opacity:0;transition:opacity 1.1s ease;
}
.hero .mm-vid video.mm-ready{opacity:1}
/* Al mòbil no hi ha vídeo, però la capa hi és igual amb el fotograma fix de
   fons: 34 KB perquè el banner no quedi buit. Es baixa una mica el contrast
   perquè en pantalla petita el titular ha de guanyar sempre. */
@media (max-width:980px){
  .hero .mm-vid{opacity:.75;background-position:58% center}
}
/* Vel fosc: el mateix que fa servir .hero.has-foto, perquè el text hi mantingui
   el contrast que ja tenia. Sense això el titular blanc no es llegeix. */
.hero.mm-video::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(150deg,rgba(9,22,38,.90),rgba(9,22,38,.66) 55%,rgba(9,22,38,.90));
}
.hero.mm-video .wrap{position:relative;z-index:2}
.hero.mm-video::before{z-index:1}

/* ── 4 · Fons fotogràfic d'una banda navy ───────────────────────────────
   La foto del taller va de fons de section.navy amb el mateix tractament:
   molt fosca, perquè és textura, no protagonista. */
.mm-foto-fons{position:relative;overflow:hidden;isolation:isolate}
.mm-foto-fons>*{position:relative;z-index:2}
.mm-foto-fons::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(150deg,rgba(9,22,38,.93),rgba(14,35,56,.86) 55%,rgba(9,22,38,.94));
}
.mm-foto-fons .mm-fons-img{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  animation:mm-kenburns 34s ease-in-out infinite alternate;
}
@keyframes mm-kenburns{from{transform:scale(1)}to{transform:scale(1.07) translate(-1.2%,-.8%)}}

/* ── 5 · Aparició en baixar ─────────────────────────────────────────────
   Les classes les posa motion.js: així, si el JS no arrenca, el contingut
   es veu igualment. Mai s'amaga res des del CSS sol. */
.mm-anim{opacity:0;transform:translateY(14px);
  transition:opacity .62s ease,transform .62s cubic-bezier(.22,.8,.3,1)}
.mm-anim.mm-vist{opacity:1;transform:none}

/* ── 6 · Una llum segueix el cursor per dins les targetes ───────────────
   Les variables --mx/--my les actualitza motion.js. Sense JS, l'::after
   queda a opacitat 0 i no es veu mai. */
.moment,.svc-card,.value,.ch,.bloc{position:relative}
.moment::after,.svc-card::after,.value::after,.ch::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  border-radius:inherit;opacity:0;transition:opacity .28s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             color-mix(in srgb,var(--gold) 15%,transparent),transparent 62%);
}
.moment:hover::after,.svc-card:hover::after,.value:hover::after,.ch:hover::after{opacity:1}
/* El contingut ha de quedar per damunt de la llum. */
.moment>*,.svc-card>*,.value>*,.ch>*{position:relative;z-index:1}

/* ── 7 · Resposta al clic ───────────────────────────────────────────────
   Abans les targetes no deien res en prémer-les. Al mòbil això es nota
   molt: toques i sembla que no hagi passat res fins que carrega. */
.moment:active,.svc-card:active,.ch:active{
  transform:translateY(-1px) scale(.988);box-shadow:var(--shadow);
}
.mm-ona{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--navy) 20%,transparent),transparent 68%);
  animation:mm-ona .62s ease-out forwards;
}
@keyframes mm-ona{from{width:0;height:0;opacity:.8}to{width:460px;height:460px;opacity:0}}

/* ── 8 · Els números del procés s'omplen ────────────────────────────────
   Substitueix el canvi de color sec de site.css per un ompliment de baix a
   dalt. El `background`/`color` originals es mantenen als estats de repòs. */
.step .num{position:relative;overflow:hidden;z-index:0}
.step .num>.mm-n{position:relative;z-index:2;transition:color .24s ease}
.step .num::after{
  content:"";position:absolute;inset:0;z-index:1;background:var(--navy);
  transform:translateY(102%);transition:transform .32s cubic-bezier(.34,.9,.3,1);
}
.step:hover .num::after{transform:translateY(0)}
.step:hover .num>.mm-n{color:var(--gold)}
/* A la banda navy el cercle ja és translúcid: l'ompliment hi ha de ser més clar. */
section.navy .step .num::after{background:rgba(255,255,255,.14)}

/* ── 10 · Escombrada de llum al botó d'or ───────────────────────────────
   Un sol reflex en entrar-hi. Va NOMÉS al botó daurat: si es posés a tots,
   la web passaria de seriosa a cridanera. El `span.shine` el posa motion.js. */
.btn-gold{position:relative;overflow:hidden;isolation:isolate}
.btn-gold>*:not(.shine){position:relative;z-index:1}
.btn .shine{
  position:absolute;top:0;bottom:0;left:-45%;width:38%;z-index:0;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);
}
.btn-gold:hover .shine{animation:mm-escombra .62s ease-out}
@keyframes mm-escombra{from{left:-45%}to{left:118%}}

/* ── Ningú no ha de patir el moviment que no vol ────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero .mm-halo,.mm-foto-fons .mm-fons-img{animation:none}
  .mm-anim{opacity:1;transform:none;transition:none}
  .mm-ona{display:none}
  .hero .mm-vid video{transition:none}
  .page-hero::before,.svc-hero::before{animation:none}
  .btn .shine{display:none}
}