/* ============================================
   IRIA STAGE · contenidor 16:9 per als clips
   de la demo escenificada (pupitre + pissarra)
   ============================================ */

.iria-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--cream-2);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 5px 5px 0 rgba(30, 30, 30, .12);
  isolation: isolate;
}

/* Vídeo principal · ocupa tota la stage */
.iria-stage-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent; /* evita el flash crema mentre carrega el nou clip */
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 1;
}

/* Pòster d'IRIA en repòs · es veu quan no hi ha clip reproduint-se */
.iria-stage-idle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity .35s ease;
  z-index: 0;
}

/* Quan el mòdul marca la stage com a "clip en marxa": mostra vídeo, amaga idle */
.iria-stage.is-clip-playing .iria-stage-video {
  opacity: 1;
}
.iria-stage.is-clip-playing .iria-stage-idle {
  opacity: 0;
}

/* ============================================
   IRIA BACKDROP · clip escenificat a pantalla completa,
   amb el mòbil + panell flotant per sobre (desktop)
   ============================================ */

/* Imatge de l'escena per a la part DRETA (darrere el mòbil i el panell).
   Imatge neta (sense difuminat) que continua l'aula del clip.
   Afina --bg-pos si vols moure l'enquadrament del fons. */
.scene-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  /* Imatge de fons 16:9 ajustada per ALÇADA, ancorada a l'esquerra.
     A sobre, un degradat cap a la DRETA fins al color de la paret, perquè
     la imatge es fongui agressivament i NO es noti on acaba per la dreta.
     --right-fade-start: on comença el difuminat · --right-fade-end: on és
     ja tot color de paret. */
  --scene-img: url(../assets/img/iria-bg.webp); /* imatge de l'escena (es canvia al tancament) */
  --bg-size: auto 100%;
  --bg-pos: -1px center;   /* fons dret · negatiu en X = cap a l'ESQUERRA */
  --right-fade-start: 42%;
  --right-fade-end: 72%;
  --wall: #C8A074;         /* color de la paret/franja dreta · puja cap a blanc per aclarir */
  --wall-0: rgba(200, 160, 116, 0); /* mateix to amb alpha 0 (inici del degradat) */
  background:
    linear-gradient(to right,
      var(--wall-0) var(--right-fade-start),
      var(--wall) var(--right-fade-end)),
    var(--scene-img) var(--bg-pos) / var(--bg-size) no-repeat,
    var(--wall);
}

/* Quan IRIA NO parla (idle), el fons de la dreta va 2px més a la DRETA
   (l'enquadrament de l'idle difereix lleugerament dels clips parlant). */
body.iria-resting .scene-backdrop {
  --bg-pos: -7px center;
}

/* TANCAMENT (screen-18) · mostra l'aula BUIDA dins la MATEIXA caixa del clip
   (mateix enquadrament que els clips d'IRIA) → transició sense diferència.
   Només queda la IRIA de dins del mòbil. */
.iria-stage-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* mateix enquadrament que el clip, però 8px a l'esquerra i 1px avall */
  object-position: calc(0% - 8px) calc(50% + 1px);
  opacity: 0;
  z-index: 2;
}
body.on-closing .iria-stage-still { opacity: 1; }
body.on-closing .iria-stage-video,
body.on-closing .iria-stage-idle { opacity: 0; }

/* Frase de guix sobre la pissarra de l'aula buida (tancament). Va FORA de la
   .iria-stage (sense màscara) i per sobre, posicionada en % del viewport sobre
   la zona verda. Afina amb les variables --cb-*. */
.iria-backdrop .closing-board {
  position: absolute;
  left: var(--cb-left, calc(35% - 120px));
  top: var(--cb-top, 22%);
  width: var(--cb-width, 18%);
  height: var(--cb-height, 22%);
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity .5s ease .3s;
  z-index: 3;
  pointer-events: none;
}
body.on-closing .closing-board { opacity: 1; }

/* ============================================
   START GATE · pantalla d'entrada (desbloqueig del so)
   ============================================ */
.start-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(181,82,58,.30), transparent 55%),
    rgba(47, 79, 79, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.start-gate.is-hidden { display: none; }
.start-gate-card {
  text-align: center;
  color: var(--cream);
  max-width: 440px;
  padding: 36px 28px;
}
.start-gate-eyebrow {
  font-family: 'Bebas Neue';
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--mustard);
}
.start-gate-title {
  font-family: 'Bebas Neue';
  font-size: 72px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--cream);
  margin: 6px 0 14px;
}
.start-gate-sub {
  font-size: 14px;
  line-height: 1.55;
  color: #EBDDCB;
  margin: 0 auto 26px;
  max-width: 360px;
}
.start-gate-btn {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--cream);
  background: var(--rust);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 15px 34px;
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(30, 30, 30, .28);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.start-gate-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 7px 7px 0 rgba(30, 30, 30, .32);
}
.start-gate-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 3px 3px 0 rgba(30, 30, 30, .28);
}

.iria-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;

  /* ===== AJUSTOS DEL CLIP · afina mirant-ho al monitor ===== */
  --idle-x: 0px;           /* moviment de l'idle per CSS · 0 = no es mou (l'encaix es fa a la composició del vídeo) */
  --clip-width: 56%;       /* amplada del clip a l'esquerra */
  --clip-pos: 0% 50%;      /* enquadrament dins el clip (x y) · 0% = comença per l'inici esquerre */
  --clip-fade: 78%;        /* on comença l'esvaïment dret del clip cap a la imatge de fons */

  /* Sòlid unificador · capa de color subtil sobre el clip per homogeneïtzar
     les petites diferències cromàtiques entre clips (i fondre cap al beig de
     l'escena). Apuja l'alpha si vols més unificació; baixa'l si tapa massa. */
  --clip-tint: rgba(186, 144, 100, 0.12);   /* beig de l'escena (#BA9064) al 12% */
  --clip-tint-blend: normal;                /* prova 'soft-light' per un to més natural */
}

/* El clip d'IRIA · enganxat a l'esquerra del tot, a TOTA l'alçada.
   La vora dreta es difumina (d'esquerra a dreta) per fondre's amb la
   imatge de fons sense línia de tall. Ajusta --clip-fade per moure on
   comença l'esvaïment. */
.iria-backdrop .iria-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--clip-width);
  height: 100%;
  aspect-ratio: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  -webkit-mask-image: linear-gradient(to right, #000 var(--clip-fade), transparent 100%);
  mask-image: linear-gradient(to right, #000 var(--clip-fade), transparent 100%);
}
.iria-backdrop .iria-stage-video,
.iria-backdrop .iria-stage-idle {
  object-fit: cover;
  object-position: var(--clip-pos);
}
/* Sòlid unificador · per sobre del vídeo/idle/still, per sota de la pissarra.
   Hereta la màscara del clip (.iria-stage) → s'esvaeix igual a la vora dreta. */
.iria-backdrop .iria-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--clip-tint);
  mix-blend-mode: var(--clip-tint-blend, normal);
}
/* Moure NOMÉS l'idle (IRIA en repòs) uns píxels · controlat per --idle-x */
.iria-backdrop .iria-stage-idle {
  transform: translateX(var(--idle-x));
}

/* Pissarra · sobre la zona de pissarra del clip (dalt a la dreta) · afina */
.iria-backdrop .blackboard-overlay {
  top: 14%;
  left: 58%;   /* una mica més a la dreta (afecta totes les correccions) */
  right: 2%;
  bottom: 36%;
  width: auto;
  z-index: 4;  /* per sobre del sòlid unificador (text nítid) */
}

/* Desktop · el mòbil i el panell floten per sobre del clip, a la dreta */
@media (min-width: 981px) {
  .app-stage {
    position: relative;
    z-index: 2;
    max-width: none;
    width: 100%;
    justify-content: flex-end;
    gap: 28px;
    padding: 0 max(3vw, 24px);
  }
  /* Panell dret SENSE targeta · text directament sobre el beig de la paret */
  .side-panel {
    max-width: 340px;
  }
  /* Contrast sobre el beig (#BA9064) per als textos més clars */
  .side-panel .side-lead,
  .side-panel .side-meta,
  .side-panel .nav-progress-label {
    color: #3A2E20;
  }
  .side-panel .side-eyebrow {
    color: #8F3C2A;
  }
}

/* Mòbil · només el mòbil a pantalla completa, fons del clip amagat */
@media (max-width: 980px) {
  .scene-backdrop,
  .iria-backdrop {
    display: none !important;
  }
}

/* Poster · cremos amb pissarra estilitzada (mentre no hi ha clip) */
.iria-stage-poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px;
  background:
    radial-gradient(circle at 70% 30%, rgba(227,168,87,.14), transparent 50%),
    linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%);
  text-align: center;
}

.iria-stage-poster .ic {
  font-size: 32px;
  line-height: 1;
}

.iria-stage-poster .lab {
  font-family: 'Bebas Neue';
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--rust);
}

.iria-stage-poster .title {
  font-family: 'Fraunces';
  font-size: 18px;
  font-weight: 520;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.2;
  max-width: 80%;
}

.iria-stage-poster .meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .05em;
}

/* PISSARRA OVERLAY · text dinàmic sobre el vídeo */
.blackboard-overlay {
  position: absolute;
  /* Ajustat al frame 3:2 dels clips Magnific · la pissarra
     ocupa la meitat dreta darrere d'IRIA. Afina aquests % si cal. */
  top: 12%;
  left: 47%;
  right: 4%;
  bottom: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  pointer-events: none;
  z-index: 2;
}

.blackboard-overlay.is-hidden {
  display: none;
}

/* Frases manuscrites (PNG/WebP sense fons) sobre la pissarra · s'ajusten a la
   zona mantenint la proporció, centrades. Substitueixen el text bb-line. */
.blackboard-overlay .bb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.bb-line {
  font-family: 'Fraunces';
  font-size: 16px;
  font-weight: 500;
  color: #F8EDD8;
  letter-spacing: -.005em;
  line-height: 1.3;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
}

.bb-line.bb-error {
  color: #F5C4B8;
  text-decoration: line-through;
  text-decoration-color: rgba(245, 196, 184, .65);
  font-style: italic;
}

.bb-line.bb-ok {
  color: #C5E8C8;
  font-weight: 700;
}

.bb-line.bb-ipa {
  font-family: 'Geist Mono', 'Courier New', monospace;
  font-size: 14px;
  color: #F0DAB4;
  background: rgba(0, 0, 0, .25);
  padding: 3px 8px;
  border-radius: 6px;
  align-self: flex-start;
}

.bb-line.bb-metric {
  font-family: 'Bebas Neue';
  font-size: 18px;
  letter-spacing: .08em;
  color: #F0DAB4;
}

.bb-line.bb-metric strong {
  color: #FFFFFF;
  font-weight: 900;
}

/* DESKTOP · clip 16:9 prominent (trenca el frame) */
@media (min-width: 980px) {
  .stage-screen {
    --stage-overflow: 280px;
  }

  .stage-screen .iria-stage {
    aspect-ratio: 3 / 2;
    max-width: 100%;
    margin: 12px 0;
  }

  /* opció avançada · sortir del frame mòbil en desktop */
  .stage-screen .iria-stage.is-immersive {
    position: absolute;
    left: calc(-1 * var(--stage-overflow));
    right: calc(-1 * var(--stage-overflow));
    width: auto;
    z-index: 4;
    box-shadow: 12px 14px 0 rgba(30, 30, 30, .18);
  }
}

/* MÒBIL · clip 16:9 dins del frame, sense desbordament */
@media (max-width: 979px) {
  .stage-screen .iria-stage {
    aspect-ratio: 3 / 2;
    max-width: 100%;
    margin: 8px 0;
  }
  .stage-screen .iria-stage.is-immersive {
    /* En mòbil no s'expandeix · es queda dins */
    position: relative;
    left: 0;
    right: 0;
    width: 100%;
  }
}

/* Lightning prompt indicator · per a saber quin clip va aquí */
.iria-stage[data-clip] .iria-stage-poster .meta::before {
  content: "Espera clip: ";
  color: var(--rust);
}