/* ==========================================================================
   EL HERO DE WEBS · el logo en 3D sobre el cel («Entra per l'A»). El moviment: js/full3d.js i js/full3d-webs.js.
   (Fins al 07/10 també feia el de Programes, damunt d'un taulell; ara Programes és «Tres en un», css/tres.css.)
   Sense la classe .full3d--viu és el hero quiet: una pantalla, el cel, el títol i la imatge quieta del render.
   Amb .full3d--viu el hero s'allarga i l'escenari queda enganxat (sticky, no pin de GSAP: no mou res del que hi ha
   a sota quan arrenca). Amb .full3d--llest el 3D en directe substitueix la imatge quieta.
   ========================================================================== */
.full3d{position:relative; height:100svh; min-height:600px; overflow-anchor:none;}   /* (08/10: el que hi ha a dins es mou amb l'scroll; no serveix de referència) */
.full3d--viu{height:250svh;}
.full3d-escena{position:sticky; top:0; height:100svh; min-height:600px; overflow:clip; display:flex; align-items:center;
  background:#cfe7f7 url('../assets/webs/cel-1.webp') center 34% / cover no-repeat;}
.full3d-poster,
.full3d-canvas{position:absolute; inset:0; width:100%; height:100%;}
.full3d-poster{object-fit:cover; object-position:78% 50%; transition:opacity .7s ease;}
.full3d-canvas{display:block; opacity:0; transition:opacity .7s ease;}
.full3d--llest .full3d-canvas{opacity:1;}
.full3d--llest .full3d-poster{opacity:0;}
/* EL PAS A LA PÀGINA (07/10): al final del recorregut, el fons de la secció següent tapa el 3D i hi surt el seu títol
   (una còpia, [data-traspas]; l'original es queda a la secció, amagat a la vista). Webs: el fosc de «Cinc webs»; Programes:
   el blanc de «Toca'l». El títol queda a baix, on començaria la secció: en deixar d'estar enganxat, puja amb la resta. */
.full3d-traspas{display:none;}
.full3d--viu .full3d-traspas{position:absolute; inset:0; z-index:4; display:flex; align-items:flex-end;
  padding-bottom:clamp(40px, 11vh, 130px); opacity:0; pointer-events:none; color:#f2f5f8;
  background:radial-gradient(70% 62% at 64% 30%, #141b25 0%, #0b0f15 72%);}
.full3d-traspas > *{width:100%; will-change:transform, opacity;}
.full3d-traspas .cinc-cap{padding-top:0;}
.full3d-traspas .toca-cap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px, 5vw, 44px);}

.full3d-text{position:relative; z-index:2; width:100%; will-change:transform, opacity;}
/* el nom del producte és el títol de la pàgina (petit, com a Apple); la frase gran va a sota */
.full3d-nom{font-family:var(--display); font-weight:700; font-size:clamp(1.05rem, 1.3vw, 1.3rem); letter-spacing:-.01em; line-height:1.2;
  color:var(--tinta); margin:0 0 clamp(10px, 1.2vw, 16px);}
.full3d-lema{font-family:var(--display); font-weight:900; font-size:clamp(3.2rem, 8vw, 8.6rem); line-height:.88;
  letter-spacing:-.045em; color:var(--tinta); max-width:9.5ch; text-wrap:balance;}
.full3d-lema em{font-style:normal; color:var(--blau);}
.full3d-sub{margin-top:clamp(18px, 2vw, 28px); font-size:clamp(1.12rem, 1.5vw, 1.4rem); line-height:1.45; color:#20406a; max-width:30ch;}
.full3d-text .pcap-cta{margin-top:clamp(24px, 3vw, 36px);}



@media (max-width: 899px){
  .full3d{height:auto; min-height:0;}
  .full3d-escena{position:relative; height:auto; min-height:min(100svh, 900px); align-items:flex-start;
    background-image:url('../assets/webs/cel-1-m.webp'); background-position:40% 30%;}
  .full3d-text{padding-top:calc(var(--nav-h) + 26px); padding-bottom:58vw;}
  .full3d-poster{object-position:50% 100%;}
  /* amb el 3D en directe (tauletes i finestres estretes, des del 07/10): l'escenari s'enganxa com a l'ordinador, amb el
     text a dalt i l'objecte a sota (la composició «mig» de js/full3d-escena.js) */
  .full3d.full3d--viu{height:250svh;}
  .full3d--viu .full3d-escena{position:sticky; top:0; height:100svh; min-height:480px;}
  .full3d--viu .full3d-text{padding-bottom:0;}
}

/* 08/10 · SENSE IMATGE FANTASMA. Si el 3D s'ha d'engegar (html.anima, de js/primer.js), la imatge quieta no es mostra:
   en mig segon es veien totes dues, la quieta (feta a 1920 px) i la viva (a la mida de la pantalla) amb l'A i les demos en
   llocs diferents, l'una damunt de l'altra. Ara hi ha el cel i el títol, i l'A entra amb un fos quan el 3D és a punt. Si
   al final no s'engega (.full3d--quiet: estalvi de dades, sense WebGL, ha fallat, s'ha adormit), la quieta torna. */
.anima .full3d:not(.full3d--quiet):not(.full3d--poster) .full3d-poster{opacity:0;}

/* les imatges quietes del render (?full3d=poster, poster-mig i poster-alt): només l'objecte, sobre transparent.
   Al final del fitxer perquè guanyi a qualsevol fons de les media queries amb la mateixa especificitat */
.full3d--poster .full3d-escena{background:none;}
.full3d--poster .full3d-text,
.full3d--poster .full3d-traspas,
.full3d--poster .full3d-poster{display:none;}