/* =====================================================================
   05 · Portal 100% LED (p15) — abertura do Ato II + pórtico em WebGL.
   Sem classe: layout em fluxo (sem JS / leitura). .is-live: cena fixada,
   tudo sobreposto ao canvas. .is-static: movimento reduzido (quadro parado).
   ===================================================================== */

#portal { --pt-top: calc(var(--hud-h) + clamp(16px, 3vh, 32px)); --pt-bot: clamp(92px, 12vh, 118px); }

/* ---------- Cena ---------- */
#portal .portal__view { position: relative; height: 86vh; height: 86svh; overflow: clip; isolation: isolate; background: #000; }
#portal .portal__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#portal .portal__film { position: absolute; inset: 0; display: none; opacity: 0; }
#portal .portal__film .film { background: transparent; }
#portal.has-film .portal__film { display: block; }
#portal .portal__shade, #portal .portal__flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
#portal .portal__shade {
  background:
    radial-gradient(62% 78% at 14% 54%, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 42%, transparent 74%),
    linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 48%);
}
#portal .portal__flash { background: radial-gradient(70% 60% at 58% 40%, rgba(255, 235, 255, .8), rgba(240, 0, 240, .35) 45%, transparent 75%); mix-blend-mode: screen; }

/* Pórtico em CSS: só aparece se não houver WebGL */
#portal .portal__fallback { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(60% 50% at 50% 70%, rgba(120, 0, 240, .35), transparent 70%), #020008; }
#portal .portal__fallback i {
  width: min(52vh, 70vw); aspect-ratio: 1; margin-top: 6vh;
  background: linear-gradient(135deg, var(--cyan), var(--violet) 50%, var(--magenta));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 82% 100%, 82% 20%, 18% 20%, 18% 100%, 0 100%);
  filter: drop-shadow(0 0 30px rgba(240, 0, 240, .6));
}
#portal.has-gl .portal__fallback { display: none; }

/* ---------- Cartão de ato ---------- */
#portal .portal__act {
  position: relative; min-height: 78vh; min-height: 78svh;
  display: grid; place-content: center; justify-items: center; text-align: center; gap: clamp(8px, 1.6vh, 20px);
  padding: var(--pt-top) var(--gutter) 48px; isolation: isolate; overflow: clip;
}
#portal .portal__act-roman {
  position: absolute; left: 50%; top: 52%; z-index: -1; transform: translate(-50%, -50%) skewX(-8deg);
  font-family: var(--f-mega); font-size: min(78vh, 80vw); line-height: 1; color: transparent;
  -webkit-text-stroke: 1.5px rgba(120, 0, 240, .42); opacity: .55; pointer-events: none; user-select: none;
}
#portal .portal__act-k {
  display: inline-flex; align-items: center; gap: .9em;
  font-family: var(--f-mono); font-weight: 500; font-size: clamp(12px, .9vw + 4px, 16px); letter-spacing: .42em; text-transform: uppercase; color: var(--cyan);
}
#portal .portal__act-k::before, #portal .portal__act-k::after { content: ''; width: clamp(36px, 7vw, 110px); height: 2px; background: currentColor; box-shadow: 0 0 10px currentColor; }
#portal .portal__act-k::after { background: var(--magenta); box-shadow: 0 0 10px var(--magenta); }
#portal .portal__act-k b { color: #fff; font-weight: 700; letter-spacing: .3em; margin-right: -.3em; }
#portal .portal__act-name { font-size: clamp(84px, 16.5vw, 290px); line-height: 1.12; padding-inline: .08em; }
#portal .portal__act-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .35em 1.5em; max-width: 660px; margin-top: clamp(4px, 1vh, 12px);
  font-family: var(--f-mono); font-size: clamp(10.5px, .55vw + 5px, 13px); letter-spacing: .14em; text-transform: uppercase;
}
#portal .portal__act-list a { display: inline-flex; gap: .7em; align-items: baseline; text-decoration: none; color: var(--mute); transition: color .2s; }
#portal .portal__act-list a:hover, #portal .portal__act-list a:focus-visible { color: #fff; }
#portal .portal__act-list small { color: var(--magenta); font-size: 1em; }
#portal .portal__act-list li:first-child a { color: #fff; }

/* ---------- Texto ---------- */
#portal .portal__copy { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); padding-block: clamp(48px, 8vh, 96px); align-items: start; }
#portal .portal__b { min-width: 0; }
#portal .portal__b1 .kicker { margin-bottom: clamp(10px, 1.6vh, 18px); }
#portal .portal__title { font-size: clamp(50px, 7.2vw, 128px); line-height: 1.12; }
#portal .portal__title-2 { display: block; }
#portal .portal__lede { margin-top: clamp(12px, 2vh, 22px); max-width: 30ch; }
#portal .portal__lede2 { font-size: clamp(18px, .9vw + 8px, 23px); line-height: 1.45; color: #e6e2f5; max-width: 34ch; }
#portal .portal__hom { display: grid; justify-items: start; margin-top: clamp(16px, 2.6vh, 28px); }
#portal .portal__hom-k {
  display: inline-flex; align-items: center; gap: .8em; margin-bottom: .5em;
  font-family: var(--f-mono); font-size: clamp(11px, .6vw + 5px, 13px); letter-spacing: .18em; text-transform: uppercase; color: var(--cyan);
}
#portal .portal__hom-k::before { content: ''; width: 28px; height: 2px; background: currentColor; box-shadow: 0 0 8px currentColor; }
#portal .portal__name {
  display: block; font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(30px, 3.1vw, 46px); line-height: 1.12; letter-spacing: .005em; white-space: nowrap; /* nome nunca parte em duas linhas */
  color: #fff; transition: color .5s var(--ease-out), filter .5s var(--ease-out), transform .5s var(--ease-out);
}
#portal .portal__lc { text-transform: none; }
#portal .portal__tags { margin-top: clamp(14px, 2.4vh, 26px); font-size: clamp(15px, .9vw + 6px, 21px); }

#portal .portal__b2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(16px, 2vw, 30px); align-items: end; }
#portal .portal__lede2, #portal .portal__tags { grid-column: 1 / -1; }
#portal .portal__hom { grid-column: 1; }
#portal .portal__prev { grid-column: 2; width: clamp(150px, 13.5vw, 196px); margin-bottom: 4px; transform: rotate(-2deg); }
#portal .portal__prev-img {
  --bv: 16px; padding: 3px; aspect-ratio: 5 / 4;
  background: linear-gradient(135deg, var(--cyan), var(--violet) 50%, var(--magenta));
  clip-path: polygon(var(--bv) 0, 100% 0, 100% calc(100% - var(--bv)), calc(100% - var(--bv)) 100%, 0 100%, 0 var(--bv));
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .7)) drop-shadow(0 0 16px rgba(120, 0, 240, .45));
}
#portal .portal__prev-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 38% 30%; background: #1a0826; color: transparent; font-size: 0;
  clip-path: polygon(calc(var(--bv) - 1px) 0, 100% 0, 100% calc(100% - var(--bv) + 1px), calc(100% - var(--bv) + 1px) 100%, 0 100%, 0 calc(var(--bv) - 1px));
}
#portal .portal__prev figcaption { display: grid; gap: .25em; margin-top: 9px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
#portal .portal__prev-k { color: var(--magenta); font-weight: 700; }
#portal .portal__prev-t { color: #d9d4ee; }

#portal .portal__b3 { grid-column: 1 / -1; }
#portal .portal__still { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 18px; background: #05010f; }
#portal .portal__final {
  font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(30px, 3.6vw, 62px); line-height: 1.12; padding-top: .06em; margin-top: .3em; text-wrap: balance;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(-1.5px 0 0 rgba(0, 216, 248, .7)) drop-shadow(1.5px 0 0 rgba(240, 0, 240, .65)) drop-shadow(0 4px 14px rgba(0, 0, 0, .8));
}
#portal .portal__b3 .footnote { margin-top: 10px; }
#portal .portal__nw { white-space: nowrap; }

/* ---------- Roteiro (paradas) ---------- */
#portal .portal__cues { display: none; }

/* =====================================================================
   .is-live — cena fixada com tudo sobreposto
   ===================================================================== */
#portal.is-live .portal__stage { background: transparent; }
#portal.is-live .portal__view { position: absolute; inset: 0; height: auto; z-index: 0; background: transparent; }
#portal.is-live .portal__view::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: clamp(110px, 16vh, 150px); pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .18) 55%, transparent);
}
#portal.is-live .portal__act { position: absolute; inset: 0; z-index: 2; min-height: 0; }
#portal.is-live .portal__copy {
  position: absolute; inset: 0; z-index: 3; margin-inline: auto;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; align-items: center;
  padding-top: var(--pt-top); padding-bottom: var(--pt-bot); pointer-events: none;
}
#portal.is-live .portal__b { grid-area: 1 / 1; }
#portal.is-live .portal__b1 { width: min(600px, 46%); }
#portal.is-live .portal__b2 { width: min(600px, 46%); }
#portal.is-live .portal__b3 { align-self: end; justify-self: start; width: auto; max-width: min(680px, 62%); }
#portal.is-live .portal__b3-in {
  position: relative; padding: clamp(16px, 2.2vw, 26px) clamp(18px, 2.4vw, 30px);
  background: linear-gradient(100deg, rgba(5, 1, 15, .72), rgba(5, 1, 15, .42));
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  border-left: 2px solid var(--magenta);
}
#portal.is-live .portal__name { color: rgba(236, 232, 250, .26); }
#portal.is-live .portal__name.is-on { color: #fff; filter: drop-shadow(0 0 10px rgba(240, 0, 240, .85)) drop-shadow(0 0 2px rgba(255, 255, 255, .6)); }

#portal.is-live .portal__cues {
  display: block; position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(18px, 3.2vh, 34px);
  width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
}
#portal.is-live .portal__stage::after { /* chão próprio do roteiro sobre o asfalto aceso (por baixo do texto) */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, .74), rgba(0, 0, 0, .32) 45%, transparent);
}
#portal .portal__cues ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
#portal .portal__cues button {
  position: relative; display: flex; align-items: baseline; gap: .7em; width: 100%; padding: 12px 0 4px; text-align: left;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(214, 208, 238, .62);
  border-top: 1px solid rgba(255, 255, 255, .16); transition: color .3s;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .75);
}
#portal .portal__cues button::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(var(--f, 0));
  background: var(--neon); box-shadow: 0 0 10px rgba(240, 0, 240, .7);
}
#portal .portal__cues button b { color: var(--cyan); font-weight: 700; }
#portal .portal__cues button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#portal .portal__cues button:hover, #portal .portal__cues button[aria-current="step"] { color: #fff; }
#portal .portal__cues button[aria-current="step"] b { color: var(--magenta); }

/* =====================================================================
   .is-static — movimento reduzido: um quadro do pórtico e o texto inteiro
   ===================================================================== */
#portal.is-static .portal__stage, #portal:not(.is-live) .portal__stage { height: auto; overflow: visible; display: flex; flex-direction: column; }
#portal:not(.is-live) .portal__act { order: -1; }
#portal.is-static .portal__still:not([hidden]) {
  display: block; width: min(100%, calc((100vh - var(--hud-h) - 320px) * 16 / 9)); width: min(100%, calc((100svh - var(--hud-h) - 320px) * 16 / 9));
}
#portal.is-static .portal__name { color: #fff; }
#portal.is-static .portal__b3-in { max-width: 780px; }
/* final = uma tela inteira (foto + legenda centradas): na parada, nada de texto vizinho por trás do HUD */
#portal:not(.is-live) .portal__b3 {
  margin-top: calc(var(--hud-h) + 8px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: calc(100vh - var(--hud-h) - 12px); min-height: calc(100svh - var(--hud-h) - 12px);
}
#portal:not(.is-live) .portal__b3-in { width: 100%; }

/* ---------- Telas médias ---------- */
@media (max-width: 1100px) and (min-width: 821px) {
  #portal.is-live .portal__b1 { width: min(520px, 50%); }
  #portal.is-live .portal__b2 { width: min(470px, 46%); } /* a foto não encosta na coluna do pórtico */
  #portal .portal__prev { width: clamp(124px, 13vw, 150px); }
  #portal .portal__prev-t { display: none; }
  #portal .portal__hom-k { letter-spacing: .14em; }
  #portal .portal__hom-k::before { width: 18px; }
  #portal .portal__cues button { font-size: 10px; letter-spacing: .1em; }
}
/* roteiro estreito: só os números (rótulo com reticências é texto cortado) */
@media (max-width: 920px) and (min-width: 821px) {
  #portal .portal__cues button { justify-content: center; }
  #portal .portal__cues button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* some da tela, fica no nome acessível */
}

/* ---------- Pouca altura (projetor 1280×720) ---------- */
@media (max-height: 760px) and (min-width: 821px) {
  #portal { --pt-bot: 84px; }
  #portal .portal__title { font-size: clamp(48px, 6.4vw, 108px); }
  #portal .portal__lede { font-size: clamp(18px, 1vw + 8px, 22px); }
  #portal .portal__name { font-size: clamp(28px, 2.7vw, 44px); }
  #portal .portal__lede2 { font-size: clamp(17px, .8vw + 8px, 20px); }
  #portal .portal__prev { width: clamp(140px, 12vw, 180px); }
  #portal .portal__prev-t { display: none; }
}

/* ---------- Celular ---------- */
@media (max-width: 820px) {
  #portal { --pt-bot: 64px; }
  #portal .portal__copy { grid-template-columns: minmax(0, 1fr); }
  #portal .portal__view { height: 70vh; height: 70svh; }
  #portal .portal__act-name { font-size: clamp(76px, 24vw, 170px); }
  #portal .portal__act-list { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: .45em 1.4em; text-align: left; font-size: 10.5px; letter-spacing: .1em; }
  #portal .portal__title { font-size: clamp(46px, 13vw, 72px); }
  #portal .portal__lede { font-size: 18px; max-width: 32ch; }
  #portal .portal__lede2 { font-size: 16px; line-height: 1.42; }
  #portal .portal__name { font-size: clamp(24px, 7.2vw, 34px); }
  #portal .portal__hom { margin-top: 14px; }
  #portal .portal__hom-k { font-size: 10px; letter-spacing: .14em; }
  #portal .portal__hom-k::before { width: 18px; }
  #portal .portal__b2 { column-gap: 12px; }
  #portal .portal__tags { margin-top: 12px; }
  #portal .portal__tags { font-size: 16px; }
  #portal .portal__final { font-size: clamp(28px, 8.4vw, 40px); }

  #portal.is-live .portal__shade { background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .72) 30%, rgba(0, 0, 0, .25) 50%, transparent 62%); }
  #portal.is-live .portal__copy { align-items: end; }
  #portal.is-live .portal__b1, #portal.is-live .portal__b2 { width: 100%; }
  #portal.is-live .portal__b3 { width: 100%; max-width: none; }
  #portal .portal__prev { width: 29vw; max-width: 150px; }
  #portal .portal__prev figcaption { font-size: 9.5px; letter-spacing: .1em; margin-top: 6px; }
  #portal .portal__prev-t { display: none; }
  #portal.is-live .portal__cues { bottom: 14px; }
  #portal .portal__cues ol { gap: 5px; }
  #portal .portal__cues button { padding-top: 9px; justify-content: center; }
  #portal .portal__cues button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* some da tela, fica no nome acessível */
}
@media (max-width: 380px) {
  #portal .portal__lede { font-size: 17px; }
}