/* Portada provisional (teaser): pila de fotos al centre, estil gp.works, en fosc. */
:root{ --bg:#0a0a0a; --card:#161616; --text:#f3f1ec; --text-muted:#9b9a95; --font-title:'PP Kyoto',Georgia,'Times New Roman',serif; --pad:24px; }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body.teaser{ background:var(--bg); color:var(--text); font-family:var(--font-title); font-weight:100; overflow:hidden; -webkit-font-smoothing:antialiased; }

/* logotip: sempre visible, a dalt a l'esquerra (mateixa font que el web) */
.ts-logo{
  position:fixed; top:23px; left:var(--pad); z-index:300;
  font-family:'Neue Plak Narrow Black',var(--font-title); font-weight:900;
  font-size:30px; line-height:1; letter-spacing:.01em; text-transform:uppercase;
  color:var(--text); text-decoration:none;
}

/* escenari + pila */
.ts-stage{ position:fixed; inset:0; z-index:10; }
.ts-stage.is-done{ pointer-events:none; }
.ts-stack{ list-style:none; margin:0; padding:0; position:absolute; inset:0; }
.ts-item{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .22s ease, transform .32s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.ts-item.is-in{ opacity:1; transform:none; }
.ts-item.is-top{ pointer-events:auto; }
.ts-item.is-out{ opacity:0; transform:translateY(-10px) scale(.97); transition:opacity .2s ease, transform .26s ease; }
/* la foto: fins a 80% d'alçada i 86% d'amplada, proporció natural */
/* marcs fixos i de la MATEIXA MIDA (girada): costat llarg L i costat curt 0,8·L.
   vertical = 0,8L × L (4:5) · horitzontal = L × 0,8L (5:4). La foto omple el marc (cover). */
.ts-stage{ --L:min(80vh, 86vw); }
.ts-fig{ margin:0; position:relative; border-radius:6px; overflow:hidden; background:var(--card); }
.ts-item--v .ts-fig{ width:calc(var(--L) * .8); height:var(--L); }
.ts-item--h .ts-fig{ width:var(--L); height:calc(var(--L) * .8); }
/* X visible a la cantonada de la foto de sobre: en hover (escriptori) o sempre (tàctil) */
.ts-x{
  position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,.72); color:#f3f1ec; border:0; padding:0; cursor:inherit;
  opacity:0; transform:scale(.9); transition:opacity .18s ease, transform .18s ease;
}
@media (hover:none){ .ts-item.is-top .ts-x{ opacity:1; transform:none; } }
.ts-fig img{ display:block; width:100%; height:100%; object-fit:cover; user-select:none; }
/* X que segueix el ratolí quan ets sobre la foto de dalt (el cursor natiu s'amaga) */
.ts-item.is-top .ts-fig{ cursor:none; }
.ts-cursor{
  position:fixed; left:0; top:0; z-index:400; pointer-events:none;
  width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%;
  background:rgba(10,10,10,.78); color:#f3f1ec;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.8); transition:opacity .15s ease, transform .15s ease;
}
.ts-cursor.is-on{ opacity:1; transform:none; }
@media (hover:none){ .ts-cursor{ display:none; } .ts-item.is-top .ts-fig{ cursor:pointer; } }

/* comptador discret a baix a l'esquerra */
.ts-counter{
  position:fixed; left:var(--pad); bottom:28px; z-index:300;
  font-size:19px; line-height:1; color:var(--text-muted); letter-spacing:.02em;
  opacity:0; transition:opacity .3s ease;
}
.ts-stage.is-live .ts-counter{ opacity:1; }
.ts-stage.is-done .ts-counter{ opacity:0; }

/* final: frase + enllaços, petits i AL CENTRE, quan la pila és buida */
.ts-end{
  position:fixed; inset:0; z-index:200; padding:var(--pad);
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:22px;
  opacity:0; transform:translateY(8px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.ts-end[hidden]{ display:none; }
.ts-end:not(.is-in){ pointer-events:none; }
.ts-end.is-in{ opacity:1; transform:none; }
.ts-frase{ margin:0; font-size:clamp(20px,1.7vw,26px); line-height:1.3; max-width:34ch; letter-spacing:0; }
.ts-links{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.ts-pill{
  display:inline-block; padding:10px 20px; border-radius:999px;
  background:var(--card); color:var(--text); text-decoration:none;
  font-size:17px; line-height:1; transition:background .2s ease, color .2s ease;
}
.ts-pill:hover{ background:var(--text); color:var(--bg); }
.ts-again{
  position:absolute; right:var(--pad); bottom:28px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-title); font-weight:100; font-size:16px; color:var(--text-muted);
  transition:color .2s ease;
}
.ts-again:hover{ color:var(--text); }

@media (max-width:760px){
  :root{ --pad:16px; }
  .ts-logo{ font-size:22px; top:18px; }
  .ts-stage{ --L:min(70vh, 88vw); }
  .ts-counter{ bottom:20px; font-size:16px; }
  .ts-end{ gap:18px; }
  .ts-frase{ font-size:20px; max-width:none; }
  .ts-x{ width:36px; height:36px; top:10px; right:10px; }
  .ts-pill{ font-size:16px; padding:9px 16px; }
  .ts-again{ bottom:20px; font-size:15px; }
}
@media (prefers-reduced-motion:reduce){ .ts-item, .ts-end{ transition:none; } }