/* cinema.css — motion design de la portada (09/10/2026). Només a index.html.
   Si el JS falla o hi ha «reduir moviment», tot queda estàtic i llegible. */

/* ─── 1. Fons viu del hero ─── */
.hero { position: relative; isolation: isolate; }
.cine-aurora { position: absolute; inset: -10% -5% 0; z-index: -1; pointer-events: none; overflow: hidden;
  transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -12px), 0); transition: transform .9s cubic-bezier(.16,1,.3,1); }
.cine-aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.cine-aurora i:nth-child(1) { width: 46vw; height: 46vw; left: 48%; top: -8%; background: radial-gradient(circle, rgba(212,173,106,.55), transparent 65%); animation: cine-drift-a 22s ease-in-out infinite alternate; }
.cine-aurora i:nth-child(2) { width: 38vw; height: 38vw; left: 70%; top: 30%; background: radial-gradient(circle, rgba(125,123,255,.45), transparent 65%); animation: cine-drift-b 27s ease-in-out infinite alternate; }
.cine-aurora i:nth-child(3) { width: 30vw; height: 30vw; left: 30%; top: 45%; background: radial-gradient(circle, rgba(53,200,192,.30), transparent 65%); animation: cine-drift-c 31s ease-in-out infinite alternate; }
@keyframes cine-drift-a { to { transform: translate(-12vw, 8vh) scale(1.15); } }
@keyframes cine-drift-b { to { transform: translate(-18vw, -10vh) scale(.9); } }
@keyframes cine-drift-c { to { transform: translate(14vw, -6vh) scale(1.2); } }
html.theme-light .cine-aurora i { opacity: .35; }

/* ─── 2. Títol del hero (11/10/2026) ───
   Un sol sistema, només CSS: el text ja és a l'HTML i l'animació arrenca al primer fotograma, sense esperar el JS.
   Cada línia puja des d'una màscara (amb un gir de 2,5° que s'endreça) i, en acabar, una línia daurada es dibuixa
   sota «criterio» i la recorre un reflex de llum, una sola vegada. Només transform i opacity (compositor, 60 fps). */
.hero h1.ht { background: none; -webkit-text-fill-color: currentColor; color: var(--text); }
.ht-l { display: block; overflow: hidden; overflow: clip; padding: .16em 0 .14em; margin: -.16em 0 -.14em; }
.ht-i { display: inline-block; transform-origin: 0 100%; animation: ht-up 1.15s cubic-bezier(.19,1,.22,1) .04s both; }
.ht-l + .ht-l .ht-i { animation-delay: .14s; }
@keyframes ht-up { from { transform: translate3d(0, 125%, 0) rotate(2.5deg); } to { transform: none; } }
.ht-key { position: relative; display: inline-block; }
.ht-rule { position: absolute; left: .02em; right: .02em; bottom: .02em; height: max(2px, .055em); border-radius: 2px; overflow: hidden;
  background: linear-gradient(90deg, var(--gold-2), var(--gold) 55%, color-mix(in srgb, var(--gold) 60%, transparent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 45%, transparent);
  transform: scaleX(0); transform-origin: 0 50%; animation: ht-rule .9s cubic-bezier(.65,0,.35,1) .78s forwards; }
.ht-rule::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 247, 225, .95), transparent);
  transform: translate3d(-120%, 0, 0); opacity: 0; animation: ht-glint 1.2s cubic-bezier(.4,0,.2,1) 1.55s forwards; }
@keyframes ht-rule { to { transform: scaleX(1); } }
@keyframes ht-glint { 0% { transform: translate3d(-120%,0,0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translate3d(290%,0,0); opacity: 0; } }

/* Coreografia de la resta del hero (abans: fx.js en carregar el JS, i es trepitjava amb el títol) */
.hero-eyebrow, .hero-lead, .hero-actions, .hero-videos, .hero-side { animation: hero-in .85s cubic-bezier(.16,1,.3,1) both; }
/* retards curts: el text gran ha de pintar-se de seguida (LCP); el moviment continua però ja es veu */
.hero-eyebrow { animation-delay: 0s; }
.hero-lead    { animation-delay: .1s; }
.hero-side    { animation-delay: .14s; }
.hero-actions { animation-delay: .2s; }
.hero-videos  { animation-delay: .28s; }
@keyframes hero-in { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }

/* ─── 3. Magnètics i targeta 3D ─── */
.cine-mag { transition: transform .5s cubic-bezier(.16,1,.3,1); will-change: transform; }
.cine-tilt { transform-style: preserve-3d; transition: transform .6s cubic-bezier(.16,1,.3,1); will-change: transform; position: relative; }
.cine-tilt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 45%, transparent 60%);
  background-size: 250% 100%; background-position: calc(100% - var(--gx, 50) * 1%) 0; opacity: var(--go, 0); transition: opacity .4s; }

/* ─── 4. Història amb scroll: «El tiempo trabaja para ti» ─── */
.cine-story { position: relative; }
.cine-stage { position: relative; padding: clamp(72px, 10vw, 128px) 0; display: grid; place-items: center; overflow: hidden; }
.cine-grid { width: min(1200px, calc(100% - 32px)); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .cine-grid { grid-template-columns: 1fr; gap: 18px; } }
.cine-copy .kicker { margin-bottom: 14px; }
.cine-copy h2 { margin: 0 0 14px; }
.cine-nums { display: grid; grid-template-columns: auto auto 1fr; gap: 26px; margin: 24px 0 8px; }
@media (max-width: 520px) { .cine-nums { grid-template-columns: auto 1fr; } .cine-num.or { grid-column: 1 / -1; } }
.cine-num small { display: block; color: var(--text-3); font-size: .8rem; margin-bottom: 4px; }
.cine-num strong { display: block; font-family: var(--sans); font-weight: 700; font-size: clamp(1.7rem, 3.3vw, 2.7rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.03em; white-space: nowrap; }
.cine-num.or strong { color: var(--gold); }
.cine-caps { position: relative; min-height: 4.8em; margin-top: 14px; }
.cine-caps p { position: absolute; inset: 0 auto auto 0; margin: 0; color: var(--text-2); max-width: 30em; line-height: 1.55;
  opacity: 0; transform: translateY(12px); transition: opacity .6s, transform .8s cubic-bezier(.16,1,.3,1); }
.cine-caps p.on { opacity: 1; transform: none; }
.cine-chart { width: 100%; height: auto; overflow: visible; }
.cine-chart .g { stroke: var(--stroke); }
.cine-chart text { fill: var(--text-3); font-size: 12px; font-family: var(--sans); }
.cine-chart .la { fill: none; stroke: var(--text-3); stroke-width: 2.5; stroke-dasharray: 5 6; }
.cine-chart .lv { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
/* 11/10: resplendor amb un traç ample i transparent en lloc de filter: drop-shadow (es repintava a cada fotograma) */
.cine-chart .lv-glow { fill: none; stroke: var(--gold); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; opacity: .14; }
.cine-chart .area { fill: url(#cine-grad); opacity: .9; }
.cine-chart .dot { fill: var(--gold); }
.cine-chart .halo { fill: var(--gold); opacity: .25; }
.cine-progress { display: none; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--stroke); }
.cine-progress i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--gold), #f6dfae); }
.cine-note { font-size: .78rem; color: var(--text-3); margin-top: 10px; }

/* ─── 5. Revelat circular del final ─── */
.cine-reveal { clip-path: circle(calc(var(--r, 1) * 75%) at 50% 60%); }
.cine-reveal .container-narrow { transform: scale(calc(.94 + var(--r, 1) * .06)); }

@media (prefers-reduced-motion: reduce) {
  .cine-aurora i, .cine-aurora i:nth-child(n) { animation: none; will-change: auto; }
  .ht-i, .hero-eyebrow, .hero-lead, .hero-actions, .hero-videos, .hero-side { animation: none; }
  .ht-rule { animation: none; transform: none; }
  .ht-rule::after { display: none; }
  .cine-story { height: auto; }
  .cine-stage { position: static; height: auto; padding: 80px 0; }
  .cine-caps p { position: static; opacity: 1; transform: none; margin-bottom: 10px; }
  .cine-reveal { clip-path: none; }
}

/* 10/10: sense paraula destacada en cursiva daurada (més professional, l'Òscar) */
.cine-reveal h2 em { font-style: normal; font-family: inherit; color: inherit; -webkit-text-fill-color: currentColor; background: none; font-weight: inherit; }

/* ═══ 09/10 nit — RENDIMENT (l'Òscar: «la part inicial va super lenta») ═══
   1) El menú tenia vidre glaçat (backdrop-filter blur 18px) sobre un fons animat: el navegador el recalculava
      a cada fotograma. Ara fons sòlid gairebé opac (mateix aspecte). 2) L'aurora ja no fa servir filter: blur
      (desenfocament de 70 px animat); els degradats radials ja són suaus. Al mòbil, quieta. */
.ib-nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: color-mix(in srgb, var(--bg) 93%, transparent) !important; }
.ib-dropdown { backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: color-mix(in srgb, var(--surface) 97%, transparent) !important; }
.cine-aurora { transform: none; transition: none; contain: strict; }
.cine-aurora i { filter: none; opacity: .5; will-change: transform; }
.cine-aurora i:nth-child(1) { background: radial-gradient(circle, rgba(212,173,106,.42), rgba(212,173,106,.12) 40%, transparent 68%); }
.cine-aurora i:nth-child(2) { background: radial-gradient(circle, rgba(125,123,255,.32), rgba(125,123,255,.08) 40%, transparent 68%); }
.cine-aurora i:nth-child(3) { background: radial-gradient(circle, rgba(53,200,192,.22), rgba(53,200,192,.05) 40%, transparent 68%); }
@media (max-width: 900px), (pointer: coarse) { .cine-aurora i, .cine-aurora i:nth-child(n) { animation: none; will-change: auto; } }   /* 11/10: abans no guanyava als :nth-child (Codex): l'aurora es movia al mòbil */
/* revelat del final: una sola vegada en entrar (abans es recalculava a cada moviment de scroll) */
.cine-reveal { transition: clip-path 1.1s cubic-bezier(.16,1,.3,1); }
.cine-reveal .container-narrow { transition: transform 1.1s cubic-bezier(.16,1,.3,1); }

/* 10/10: sense revelat circular (de vegades la part de baix de la portada quedava retallada) */
.cine-reveal { clip-path: none !important; }
.cine-reveal .container-narrow { transform: none !important; }

/* 12/10 (Qualitat + Codex, WCAG 2.2.2): el moviment automàtic ha d'acabar en ≤ 5 s si no hi ha botó de pausa.
   L'aurora fa una sola entrada suau de 5 s (de lleugerament desplaçada a la seva posició) i es queda quieta.
   Amb «reduir moviment» o al mòbil no es mou mai (regles de més amunt). */
@keyframes cine-assenta { from { transform: translate3d(4vw, -3vh, 0) scale(1.08); opacity: 0; } to { transform: none; opacity: 1; } }
.cine-aurora i:nth-child(n) { animation: cine-assenta 5s cubic-bezier(.16,1,.3,1) both; }
.cine-aurora i:nth-child(2) { animation-delay: .15s; }
.cine-aurora i:nth-child(3) { animation-delay: .3s; }
@media (max-width: 900px), (pointer: coarse) { .cine-aurora i:nth-child(n) { animation: none; } }
@media (prefers-reduced-motion: reduce) { .cine-aurora i:nth-child(n) { animation: none; } }