/* =============================================================================
   LE CIRQUE — a noite do espetáculo (contagem, campainha, ao vivo, agradecimento)
   Mesma paleta e fonte da página de ingressos (variáveis de ingressos.html): bordô de
   cortina, dourado, marfim, noite. Cortina, sanefa e luzes são CSS puro — nada de vídeo.
   ============================================================================= */

.palco {
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 70% at 50% 100%, #3a1418 0%, #1a0d10 55%, #0d0809 100%);
  color: var(--marfim);
}
/* fundo do palco atrás da cortina: a mesma textura quente da abertura da página */
.palco::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: url('/assets/fundo.jpg') center 30%/cover no-repeat; opacity: .55;
  filter: saturate(1.1);
}
.palco::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 42%, transparent 0%, rgba(13,8,9,.55) 70%, rgba(13,8,9,.9) 100%);
}

/* ---------- cortina ---------- */
.cortina {
  position: absolute; top: 0; bottom: 0; width: 51%; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 70%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(90deg,
      #4d0b17 0px, #7A1224 18px, #9b1f33 30px, #7A1224 42px, #520c18 58px, #3e0912 64px);
  box-shadow: inset 0 0 80px rgba(0,0,0,.55);
  transition: transform 2.6s cubic-bezier(.55,.05,.25,1), filter 2.6s ease;
  will-change: transform;
}
.cortina.esq { left: 0; transform-origin: left center; box-shadow: inset 0 0 80px rgba(0,0,0,.55), inset -14px 0 18px -8px rgba(0,0,0,.6); }
.cortina.dir { right: 0; transform-origin: right center; box-shadow: inset 0 0 80px rgba(0,0,0,.55), inset 14px 0 18px -8px rgba(0,0,0,.6); }
/* barra dourada (franja) no pé da cortina */
.cortina::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: repeating-linear-gradient(90deg, #C9A24B 0 3px, #8c6a28 3px 5px);
  box-shadow: 0 -2px 0 #E4C886 inset; opacity: .9;
}
.palco.aberta .cortina.esq, .palco.aberta .cortina.dir { transform: scaleX(.16); filter: brightness(.8); }
.palco.abrindo .cortina { transition-duration: 4.5s; }
@media (max-width: 640px) { .palco.aberta .cortina.esq, .palco.aberta .cortina.dir { transform: scaleX(.1); } }

/* sanefa: a faixa franzida no alto do palco, com franja dourada */
.sanefa {
  position: absolute; top: 0; left: 0; right: 0; height: 74px; z-index: 3; pointer-events: none;
  background:
    radial-gradient(60px 34px at 30px 0, #8e1a2e 0 70%, transparent 71%) 0 40px/60px 34px repeat-x,
    linear-gradient(180deg, #3e0912, #7A1224 55%, #8e1a2e);
  -webkit-mask: linear-gradient(#000 0 0) top/100% 46px no-repeat,
                radial-gradient(30px 28px at 30px 0, #000 98%, transparent) 0 46px/60px 28px repeat-x;
          mask: linear-gradient(#000 0 0) top/100% 46px no-repeat,
                radial-gradient(30px 28px at 30px 0, #000 98%, transparent) 0 46px/60px 28px repeat-x;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.6));
}
.sanefa-franja {
  position: absolute; top: 44px; left: 0; right: 0; height: 4px; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, transparent, #C9A24B 8%, #E4C886 50%, #C9A24B 92%, transparent);
  opacity: .85;
}

/* ---------- luzes ---------- */
.luzes { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.facho {
  position: absolute; top: -10%; width: 46vmax; height: 120%;
  background: linear-gradient(180deg, rgba(255,226,160,.38), rgba(255,214,140,.10) 55%, transparent 85%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen; filter: blur(6px); opacity: .0;
  transition: opacity 2s ease;
}
.facho.f1 { left: -12vmax; transform-origin: 50% 0; transform: rotate(-24deg); }
.facho.f2 { right: -12vmax; transform-origin: 50% 0; transform: rotate(24deg); }
.facho.f3 { left: calc(50% - 23vmax); transform-origin: 50% 0; }
.palco .facho.f3 { opacity: .55; }
.palco.aberta .facho, .palco.abrindo .facho { opacity: .8; }
.palco.aberta .facho.f1 { animation: varre 9s ease-in-out infinite alternate; }
.palco.aberta .facho.f2 { animation: varre2 11s ease-in-out infinite alternate; }
@keyframes varre { from { transform: rotate(-30deg); } to { transform: rotate(-8deg); } }
@keyframes varre2 { from { transform: rotate(30deg); } to { transform: rotate(10deg); } }
.brilho-chao {
  position: absolute; left: 50%; bottom: -12vmax; width: 90vmax; height: 34vmax; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,214,140,.32), transparent); filter: blur(4px);
}
.estrelinhas i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #E4C886;
  box-shadow: 0 0 8px 2px rgba(228,200,134,.7); opacity: .2; animation: pisca 3.6s ease-in-out infinite;
}
@keyframes pisca { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: .95; transform: scale(1.15); } }

/* ---------- conteúdo ---------- */
.palco-dentro {
  position: relative; z-index: 5; max-width: 1080px; margin: 0 auto;
  padding: 92px 18px 56px; min-height: 100svh;
  display: grid; align-content: center; justify-items: center; gap: 18px; text-align: center;
}
.palco .marca { width: min(440px, 80vw); height: auto; filter: drop-shadow(0 8px 26px rgba(0,0,0,.7)); }
.palco .marca.pequena { width: min(220px, 50vw); }
.palco .olho { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--ouro-claro); font-weight: 700; }
.palco h1 {
  margin: 0; font-size: clamp(28px, 6.2vw, 54px); line-height: 1.05; font-weight: 800;
  font-variation-settings: 'wdth' 116; letter-spacing: .005em; text-wrap: balance;
  text-shadow: 0 4px 24px rgba(0,0,0,.75);
}
.palco .linha-fina { color: var(--marfim-2); font-size: clamp(16px, 2.3vw, 19px); max-width: 620px; margin: 0; text-wrap: pretty; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.palco .filete { width: min(360px, 70vw); height: 1px; background: linear-gradient(90deg, transparent, var(--ouro), transparent); }

.contagem { display: flex; gap: clamp(8px, 2vw, 16px); justify-content: center; }
.contagem .bloco {
  min-width: clamp(64px, 17vw, 112px); padding: 12px 8px 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(27,18,20,.92), rgba(18,12,14,.92));
  border: 1px solid rgba(201,162,75,.55); box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(228,200,134,.25);
}
.contagem b {
  display: block; font-size: clamp(32px, 8vw, 62px); line-height: 1; font-weight: 800;
  font-variant-numeric: tabular-nums; font-variation-settings: 'wdth' 100;
  color: #EBD49A; text-shadow: 0 2px 0 rgba(140,106,40,.55), 0 6px 18px rgba(0,0,0,.6);
}
.contagem small { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--marfim-2); }
.contagem.curta .bloco { min-width: clamp(80px, 22vw, 120px); }

.sessoes-noite { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sessao-noite {
  padding: 10px 16px; border-radius: 12px; background: rgba(18,12,14,.78); border: 1px solid rgba(201,162,75,.35);
  font-size: 14.5px; color: var(--marfim-2);
}
.sessao-noite b { color: var(--marfim); font-size: 17px; }
.sessao-noite.foco { border-color: var(--ouro); }
.nota-portaria { font-size: 14px; color: var(--marfim-2); max-width: 560px; margin: 0; }
.meus { font-size: 14.5px; }
.meus a { color: var(--ouro-claro); }

/* ---------- campainha ---------- */
.sino { width: 74px; height: 74px; color: var(--ouro-claro); filter: drop-shadow(0 0 18px rgba(228,200,134,.5)); }
.sino .badalo { transform-origin: 37px 14px; }
.palco.fase-ABERTURA .sino { animation: sino 1.1s ease-in-out 0s 6; transform-origin: 50% 10%; }
@keyframes sino { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(16deg); } 75% { transform: rotate(-16deg); } }

/* ---------- ao vivo ---------- */
.ao-vivo-selo {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: rgba(201,71,63,.16); border: 1px solid rgba(255,138,122,.6); color: #ffd9d3;
  font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.ao-vivo-selo i { width: 9px; height: 9px; border-radius: 50%; background: #ff5a4a; box-shadow: 0 0 0 0 rgba(255,90,74,.7); animation: aovivo 1.6s infinite; }
@keyframes aovivo { 0% { box-shadow: 0 0 0 0 rgba(255,90,74,.7); } 70% { box-shadow: 0 0 0 12px rgba(255,90,74,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,74,0); } }

.vivo-grade { width: 100%; display: grid; gap: 22px; align-items: start; text-align: left; }
@media (min-width: 900px) { .vivo-grade { grid-template-columns: 420px 1fr; } }
.picadeiro-caixa { position: relative; display: grid; justify-items: center; padding-top: 8px; }
.picadeiro {
  position: absolute; left: 50%; bottom: 6px; width: min(380px, 92%); aspect-ratio: 3.4 / 1; transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(228,200,134,.35), transparent 70%),
    repeating-radial-gradient(closest-side, #7A1224 0 14%, #5a0d1a 14% 15.5%, #C9A24B 15.5% 17%, #7A1224 17% 30%);
  box-shadow: 0 0 0 3px rgba(201,162,75,.6), 0 18px 40px rgba(0,0,0,.6);
}
.palhaco { position: relative; z-index: 1; width: min(210px, 52vw); }
.palhaco svg { display: block; width: 100%; height: auto; overflow: visible; }
.balao {
  position: relative; z-index: 2; margin: 2px auto 0; max-width: 320px; padding: 12px 16px; border-radius: 16px;
  background: var(--marfim); color: #2a1416; font-size: 15px; line-height: 1.35; font-weight: 600; text-align: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.45); opacity: 0; transform: translateY(8px) scale(.96);
  transition: opacity .5s ease, transform .5s ease;
}
.balao::before { content: ''; position: absolute; top: -9px; left: 50%; margin-left: -9px; border: 9px solid transparent; border-top: 0; border-bottom-color: var(--marfim); }
.balao.visivel { opacity: 1; transform: none; }

.cronometro {
  margin-top: 16px; padding: 14px 18px; border-radius: 16px; text-align: center;
  background: rgba(18,12,14,.86); border: 1px solid rgba(201,162,75,.5);
}
.cronometro small { display: block; font-size: 11.5px; letter-spacing: .24em; color: var(--ouro); font-weight: 700; }
.cronometro b {
  display: block; margin-top: 4px; font-size: clamp(38px, 9vw, 58px); font-weight: 800; line-height: 1.05;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  color: #EBD49A; text-shadow: 0 2px 0 rgba(140,106,40,.55), 0 6px 18px rgba(0,0,0,.6);
}
.cronometro span { display: block; font-size: 13px; color: var(--marfim-3); margin-top: 2px; }

.programa { display: grid; gap: 12px; }
.programa h2 { margin: 0; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); }
.no-palco {
  position: relative; padding: 18px 18px 16px 72px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, rgba(122,18,36,.95), rgba(64,10,20,.95));
  border: 1px solid var(--ouro); box-shadow: 0 0 0 1px rgba(228,200,134,.25) inset, 0 14px 40px rgba(0,0,0,.55), 0 0 60px rgba(201,162,75,.18);
}
.no-palco::after {
  content: ''; position: absolute; inset: -40% -10% auto auto; width: 60%; height: 180%;
  background: radial-gradient(closest-side, rgba(255,226,160,.22), transparent); pointer-events: none;
}
.no-palco .num {
  position: absolute; left: 16px; top: 16px; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ouro); color: #1b1214; font-weight: 800; font-size: 17px;
}
.no-palco .rotulo-palco { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro-claro); font-weight: 800; }
.no-palco h3 { margin: 4px 0 4px; font-size: clamp(22px, 3.4vw, 28px); line-height: 1.12; font-variation-settings: 'wdth' 110; }
.no-palco p { margin: 0; color: var(--marfim-2); font-size: 15px; }
.no-palco .desde { margin-top: 8px; font-size: 13px; color: var(--marfim-3); }
.sem-palco { padding: 16px 18px; border-radius: 16px; border: 1px dashed rgba(201,162,75,.45); color: var(--marfim-2); background: rgba(18,12,14,.7); }

.lista-prog { list-style: none; margin: 0; padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--linha); background: rgba(18,12,14,.82); }
.lista-prog li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--linha); }
.lista-prog li:first-child { border-top: 0; }
.lista-prog .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; border: 1px solid rgba(201,162,75,.55); color: var(--ouro-claro); }
.lista-prog .t { font-weight: 600; line-height: 1.25; }
.lista-prog .q { display: block; font-size: 13px; color: var(--marfim-3); font-weight: 400; }
.lista-prog .st { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--marfim-3); white-space: nowrap; }
.lista-prog li.seguinte .st { color: var(--ouro-claro); font-weight: 700; }
.lista-prog li.feita { opacity: .55; }
.lista-prog li.feita .n { background: rgba(63,166,114,.18); border-color: rgba(63,166,114,.6); color: #8fdcb2; }
.lista-prog li.agora { background: rgba(122,18,36,.55); }
.ja-foi summary { cursor: pointer; color: var(--ouro-claro); font-size: 14px; padding: 4px 0; }

/* ---------- agradecimento ---------- */
.obrigado {
  margin: 0; font-size: clamp(56px, 15vw, 132px); line-height: .95; font-weight: 800; letter-spacing: .02em;
  font-variation-settings: 'wdth' 125;
  color: #EBD49A; text-shadow: 0 3px 0 #8c6a28, 0 10px 30px rgba(0,0,0,.75);
}
.palco.fase-ENCERRAMENTO .obrigado { animation: surge 1.6s cubic-bezier(.2,.8,.2,1) .4s both; }
@keyframes surge { from { opacity: 0; transform: scale(.86); letter-spacing: .2em; } to { opacity: 1; transform: none; } }
.frase-arte { font-size: clamp(18px, 2.6vw, 22px); color: var(--ouro-claro); font-style: italic; margin: 0; }
.btn-insta {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 999px; min-height: 54px;
  background: linear-gradient(180deg, #C6297F, #A63D5E); color: #fff; font-weight: 800; letter-spacing: .08em; text-decoration: none;
  box-shadow: 0 10px 30px rgba(198,41,127,.35), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.btn-insta:hover { filter: brightness(1.08); }
.btn-insta svg { width: 22px; height: 22px; }
.proxima-sessao {
  display: grid; gap: 8px; justify-items: center; padding: 16px 18px; border-radius: 16px;
  background: rgba(18,12,14,.82); border: 1px solid rgba(201,162,75,.45);
}
.proxima-sessao .contagem .bloco { min-width: 62px; padding: 8px 6px; }
.proxima-sessao .contagem b { font-size: 30px; }
.assinatura-cia { width: 150px; height: auto; opacity: .92; margin-top: 6px; }

.chuva i {
  position: absolute; top: -20px; width: 10px; height: 10px; z-index: 4; pointer-events: none;
  background: conic-gradient(from 45deg, #E4C886 0 25%, transparent 0 50%, #E4C886 0 75%, transparent 0);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: cai linear infinite; opacity: .8;
}
@keyframes cai { to { transform: translateY(110svh) rotate(540deg); } }

/* ---------- palhaço: entrada e saudação ---------- */
.palhaco .corpo, .palhaco .perna-e, .palhaco .perna-d, .palhaco .chapeu, .palhaco .braco-d { transform-box: view-box; }
.palhaco .perna-e { transform-origin: 96px 252px; }
.palhaco .perna-d { transform-origin: 124px 252px; }
.palhaco .chapeu { transform-origin: 120px 58px; }
.palhaco .braco-d { transform-origin: 150px 162px; }
.palhaco.entrando { animation: entra 3s cubic-bezier(.25,.75,.3,1) both; }
@keyframes entra { from { transform: translateX(-125vw); } to { transform: none; } }
.palhaco.entrando .corpo { animation: passo .3s ease-in-out 0s 10 alternate; }
@keyframes passo { from { transform: translateY(0); } to { transform: translateY(-7px); } }
.palhaco.entrando .perna-e { animation: perna .3s ease-in-out 0s 10 alternate; }
.palhaco.entrando .perna-d { animation: perna .3s ease-in-out 0s 10 alternate-reverse; }
@keyframes perna { from { transform: rotate(16deg); } to { transform: rotate(-16deg); } }
.palhaco.saudando .chapeu { animation: chapeu 1.5s ease-in-out both; }
@keyframes chapeu { 0%, 100% { transform: none; } 30%, 70% { transform: translate(-10px, -26px) rotate(-26deg); } }
.palhaco.saudando .braco-d { animation: aceno .45s ease-in-out .9s 6 alternate both; }
@keyframes aceno { from { transform: rotate(0); } to { transform: rotate(-22deg); } }
.palhaco.parado .corpo { animation: respira 3.2s ease-in-out infinite; }
@keyframes respira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------- movimento reduzido: tudo parado, cortina já no lugar ---------- */
@media (prefers-reduced-motion: reduce) {
  .cortina, .facho { transition: none !important; }
  .palco *, .palco *::before, .palco *::after { animation: none !important; }
  .balao { opacity: 1; transform: none; transition: none; }
  .chuva { display: none; }
}