/* =====================================================================
   03 · O Evento — p02 do plano
   Parte 1: título cromado, três parágrafos, foto real em moldura octogonal.
   Parte 2: altímetro de seis torres de LED (2022 → 2027), raio e foguete 3D.
   Tudo sob #evento.
   ===================================================================== */

#evento .ev-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------------ */
/* Parte 1 · o evento                                                  */
/* ------------------------------------------------------------------ */
#evento .ev-intro {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--hud-h) + clamp(16px, 4svh, 52px)) 0 clamp(28px, 6svh, 76px);
  overflow: clip;
}
#evento .ev-intro__wrap { position: relative; z-index: 1; }

/* Rastros de luz horizontais (como os do PDF entre o texto e a foto) */
#evento .ev-streaks {
  position: absolute; inset: 0 0 0 44%; z-index: 0; pointer-events: none; overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%);
  mask-image: linear-gradient(90deg, transparent, #000 18%);
}
#evento .ev-streaks i {
  position: absolute; left: 0; height: 2px; width: 62vw; border-radius: 2px; opacity: .55;
  background: linear-gradient(90deg, transparent, rgba(240, 0, 240, .75) 62%, #fff 93%, transparent);
  will-change: transform;
}
#evento .ev-streaks i:nth-child(1) { top: 34%; left: 6%; width: 42vw; }
#evento .ev-streaks i:nth-child(2) { top: 47%; left: 20%; width: 34vw; height: 1px; opacity: .7; background: linear-gradient(90deg, transparent, rgba(0, 216, 248, .8) 60%, #eaffff 94%, transparent); }
#evento .ev-streaks i:nth-child(3) { top: 58%; left: 0; width: 50vw; height: 3px; opacity: .35; filter: blur(2px); }
#evento .ev-streaks i:nth-child(4) { top: 66%; left: 26%; width: 30vw; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 216, 248, .7) 60%, #fff 94%, transparent); }
#evento .ev-streaks i:nth-child(5) { top: 77%; left: 10%; width: 40vw; opacity: .45; }
#evento .ev-streaks i:nth-child(6) { top: 88%; left: 30%; width: 26vw; height: 1px; opacity: .6; background: linear-gradient(90deg, transparent, rgba(120, 0, 240, .9) 55%, #f0d8ff 94%, transparent); }

#evento .ev-head { margin-bottom: clamp(18px, 3.4svh, 42px); }
#evento .ev-title {
  font-size: clamp(42px, 6.1vw, 112px);
  line-height: 1.12; margin-top: clamp(4px, 1svh, 12px);
  text-wrap: balance;
}
/* máscara das palavras (SplitText): folga para o til e a cedilha e para a inclinação do itálico */
#evento .ev-title .sw-mask,
#evento .ev-alt__title .sw-mask { padding: .24em .14em .1em; margin: -.24em -.14em -.1em; }
#evento .ev-rule {
  display: block; height: 2px; width: min(620px, 62%); margin-top: clamp(8px, 1.4svh, 16px);
  background: linear-gradient(90deg, var(--magenta), var(--violet) 38%, var(--cyan) 68%, transparent);
  box-shadow: 0 0 12px rgba(240, 0, 240, .55);
  transform-origin: 0 50%;
}

#evento .ev-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .84fr);
  gap: clamp(28px, 4.2vw, 72px); align-items: center;
}
#evento .ev-lede { max-width: 44ch; font-size: clamp(18px, .7vw + 9px, 22px); line-height: 1.5; }
#evento .ev-body { margin-top: 1.1em; max-width: 54ch; font-size: clamp(15px, .45vw + 10px, 17.5px); }
#evento .ev-lede b, #evento .ev-body b { color: #fff; font-weight: 600; }

/* Os fatos do terceiro parágrafo numa placa */
#evento .ev-facts {
  display: flex; align-items: center; flex-wrap: wrap;
  margin-top: clamp(18px, 3.2svh, 32px); max-width: 580px;
  padding: 12px clamp(14px, 1.4vw, 22px);
}
#evento .ev-fact {
  display: flex; align-items: center; gap: 12px;
  padding: 4px clamp(12px, 1.4vw, 22px);
}
#evento .ev-fact + .ev-fact { border-left: 1px solid rgba(255, 255, 255, .14); }
#evento .ev-facts > .ev-fact:first-of-type { padding-left: 4px; }
#evento .ev-fact__n {
  display: inline-block; padding-top: .06em;
  font-family: var(--f-mega); font-weight: 400; font-size: clamp(32px, 2.7vw, 48px); line-height: 1.04;
  transform: skewX(-8deg); color: var(--cyan); text-shadow: var(--glow-c);
}
#evento .ev-fact__l {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #b9b3d6; line-height: 1.4; text-align: left;
}
#evento .ev-fact--go { margin-left: auto; color: #fff; cursor: pointer; transition: color .2s; }
#evento .ev-fact--go .ev-fact__l { color: #fff; }
#evento .ev-fact--go:hover .ev-fact__l { color: var(--cyan); }
#evento .ev-fact--go:focus-visible { outline-offset: -4px; }
#evento .ev-fact__arrow { color: var(--magenta); filter: drop-shadow(0 0 6px rgba(240, 0, 240, .8)); }
#evento.ev-in .ev-fact__arrow { animation: ev-bob 1.8s ease-in-out infinite; } /* só com a Parte 1 na tela */
@keyframes ev-bob { 50% { transform: translateY(4px); } }

/* Foto real em moldura octogonal */
#evento .ev-photo { position: relative; margin: 0; }
#evento .ev-photo__tilt { position: relative; will-change: transform; }
#evento .ev-photo__glow {
  position: absolute; inset: 10% -8% -8% 12%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(120, 0, 240, .6), rgba(240, 0, 240, .18) 60%, transparent);
  filter: blur(28px);
}
#evento .ev-photo__frame { --bv: clamp(20px, 2.6vw, 46px); filter: none; }
#evento .ev-photo__win {
  position: relative; aspect-ratio: 1.16; overflow: hidden; background: #000;
  clip-path: polygon(calc(var(--bv) - 3px) 0, calc(100% - var(--bv) + 3px) 0, 100% calc(var(--bv) - 3px), 100% calc(100% - var(--bv) + 3px), calc(100% - var(--bv) + 3px) 100%, calc(var(--bv) - 3px) 100%, 0 calc(100% - var(--bv) + 3px), 0 calc(var(--bv) - 3px));
}
#evento .ev-photo__img {
  position: absolute; left: 0; top: -6%; width: 100%; height: 114%; max-width: none;
  object-fit: cover; object-position: 60% 0; transform-origin: 50% 12%; will-change: transform;
}
#evento .ev-photo__sweep {
  position: absolute; inset: -10% -40%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .3) 47%, rgba(0, 216, 248, .22) 52%, transparent 62%);
  transform: translateX(-120%);
}
#evento .ev-photo__scan {
  position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px);
}
#evento .ev-photo__c { position: absolute; width: 26px; height: 26px; border: 2px solid var(--cyan); pointer-events: none; filter: drop-shadow(0 0 6px currentColor); color: var(--cyan); }
#evento .ev-photo__c--tl { top: -12px; left: -12px; border-right: 0; border-bottom: 0; }
#evento .ev-photo__c--tr { top: -12px; right: -12px; border-left: 0; border-bottom: 0; border-color: rgba(255, 255, 255, .7); color: transparent; }
#evento .ev-photo__c--bl { bottom: -12px; left: -12px; border-right: 0; border-top: 0; border-color: rgba(255, 255, 255, .7); color: transparent; }
#evento .ev-photo__c--br { bottom: -12px; right: -12px; border-left: 0; border-top: 0; border-color: var(--magenta); color: var(--magenta); }
#evento .ev-photo__cap { position: absolute; left: clamp(28px, 3.4vw, 56px); bottom: -15px; background: rgba(5, 1, 15, .88); }

/* ------------------------------------------------------------------ */
/* Parte 2 · altímetro                                                 */
/* ------------------------------------------------------------------ */
#evento .ev-alt {
  --pitch: 12px;          /* passo do segmento de LED */
  --led: 8px;             /* altura acesa do segmento */
  --cf: 10px;             /* chanfro do topo da torre */
  --cg: clamp(8px, 1.3vw, 22px);
  --n: clamp(26px, 3vw, 52px);
  --n27: clamp(40px, 5.2vw, 90px);
  --rz: calc(9.5svh + 30px);  /* faixa do foguete acima do 6.500 */
  --lab: 58px;            /* ano + edição */
  --brk: 44px;            /* colchete */
  --cb: clamp(14px, 3svh, 34px);
  --cl: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  --H: calc(100svh - var(--hud-h) - var(--rz) - var(--n27) * 1.1 - 14px - var(--lab) - var(--brk) - var(--cb) - 6px);
  --cell: 64px;
}
#evento .ev-bg { position: absolute; inset: 0 -3%; z-index: 0; pointer-events: none; }
#evento .ev-bg::before { /* chão escuro para os rótulos + halo violeta atrás das torres */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 62% 78%, rgba(32, 0, 88, .45), transparent 70%),
    linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .35) 22%, transparent 42%);
}

/* Feixes de luz de palco */
#evento .ev-beam {
  position: absolute; top: -10%; width: 34vw; height: 128%;
  transform-origin: 50% 0; filter: blur(16px); opacity: 0; will-change: transform, opacity;
}
#evento .ev-beam > b {
  display: block; width: 100%; height: 100%;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(0, 216, 248, .5), rgba(0, 216, 248, .12) 55%, transparent 86%);
}
#evento .ev-beam--1 { left: calc(34% - 17vw); }
#evento .ev-beam--2 { left: calc(54% - 17vw); }
#evento .ev-beam--2 > b { background: linear-gradient(180deg, rgba(120, 0, 240, .6), rgba(120, 0, 240, .15) 55%, transparent 86%); }
#evento .ev-beam--3 { left: calc(70% - 17vw); }
#evento .ev-beam--m { left: calc(88% - 17vw); }
#evento .ev-beam--m > b { background: linear-gradient(180deg, rgba(240, 0, 240, .62), rgba(240, 0, 240, .16) 55%, transparent 86%); }

/* Piso em perspectiva */
#evento .ev-floor {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--cb) + var(--brk) + var(--lab));
  perspective: 380px; perspective-origin: 50% 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 100%);
}
#evento .ev-floor__plane { position: absolute; left: -40%; right: -40%; top: 0; height: 290px; transform-origin: 50% 0; transform: rotateX(64deg); }
#evento .ev-floor__grid {
  position: absolute; left: 0; right: 0; top: calc(var(--cell) * -1); bottom: 0; will-change: transform;
  background-image:
    linear-gradient(rgba(120, 0, 240, .6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 216, 248, .32) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: 50% 0;
}

/* Cabeça da cena */
#evento .ev-alt__head {
  position: absolute; z-index: 3;
  top: calc(var(--hud-h) + clamp(12px, 3.2svh, 40px)); left: var(--cl);
  max-width: min(36vw, 500px);
}
#evento .ev-alt__title { font-size: clamp(34px, 4.2vw, 78px); margin-top: .12em; }

/* Gráfico */
#evento .ev-chart {
  position: absolute; z-index: 2; left: var(--cl); right: var(--cl); bottom: var(--cb);
  display: flex; flex-direction: column;
}
#evento .ev-bolts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; pointer-events: none; }
#evento .ev-bolt { opacity: 0; }
#evento .ev-bolt__glow { fill: none; stroke: rgba(0, 216, 248, .38); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; filter: blur(3px); }
#evento .ev-bolt__core { fill: none; stroke: #e6fdff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px var(--cyan)) drop-shadow(0 0 8px rgba(0, 216, 248, .7)); }
#evento .ev-bolt--m .ev-bolt__glow { stroke: rgba(240, 0, 240, .45); }
#evento .ev-bolt--m .ev-bolt__core { stroke: url(#g-neon); stroke-width: 2.4; filter: drop-shadow(0 0 3px var(--magenta)) drop-shadow(0 0 10px rgba(240, 0, 240, .7)); }

#evento .ev-base {
  position: absolute; z-index: 2; left: -1.5%; right: -1.5%; bottom: calc(var(--brk) + var(--lab)); height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan) 8%, var(--violet) 62%, var(--magenta) 90%, transparent);
  box-shadow: 0 0 14px rgba(120, 0, 240, .8), 0 0 4px rgba(0, 216, 248, .8);
  transform-origin: 0 50%;
}

#evento .ev-towers {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.35fr);
  column-gap: var(--cg); align-items: end; margin: 0; padding: 0; list-style: none;
}
#evento .ev-tw {
  --led-hi: #d6fcff; --led-lo: #00d8f8; --led-off: rgba(0, 216, 248, .1); --halo: rgba(0, 216, 248, .42);
  display: flex; flex-direction: column; align-items: center; min-width: 0;
}
#evento .ev-tw--27 { --led-hi: #ffd9ff; --led-lo: #f000f0; --led-off: rgba(240, 0, 240, .12); --halo: rgba(240, 0, 240, .55); }

#evento .ev-tw__num {
  order: 1; position: relative; z-index: 3; margin: 0 0 12px;
  font-family: var(--f-mega); font-weight: 400; font-size: var(--n); line-height: 1.04; height: 1.08em;
  white-space: nowrap; color: #fff; transform: skewX(-8deg);
  /* brilho por filter: o text-shadow seria recortado coluna a coluna pelo odômetro */
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .95));
  transition: filter .5s, color .5s;
}
#evento .ev-tw.is-full .ev-tw__num { color: #effeff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .95)) drop-shadow(0 0 12px rgba(0, 216, 248, .75)); }
#evento .ev-tw--27 .ev-tw__num { font-size: var(--n27); color: #ffeaff; }
#evento .ev-tw--27.is-full .ev-tw__num { color: #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .95)) drop-shadow(0 0 16px rgba(240, 0, 240, .95)) drop-shadow(0 0 34px rgba(240, 0, 240, .5)); }

#evento .ev-tw__body {
  order: 2; position: relative; z-index: 1;
  width: 72%; max-width: 168px; height: calc(var(--H) * var(--v) / 6500);
  -webkit-box-reflect: below 3px linear-gradient(180deg, transparent 64%, rgba(255, 255, 255, .2));
}
#evento .ev-tw--27 .ev-tw__body { width: 60%; max-width: 210px; }
#evento .ev-tw__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 7px rgba(0, 216, 248, .22)); }
#evento .ev-tw__fill { fill: rgba(8, 4, 22, .82); }
#evento .ev-tw__edge { fill: none; stroke: url(#ev-chrome); stroke-width: 2.5; stroke-linejoin: round; }
#evento .ev-tw__fin { fill: none; stroke: url(#ev-chrome); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
#evento .ev-tw--27 .ev-tw__frame { opacity: .5; filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 10px rgba(240, 0, 240, .45)); }
#evento .ev-tw--27 .ev-tw__edge, #evento .ev-tw--27 .ev-tw__fin { stroke: url(#ev-chrome-m); }

#evento .ev-tw__panel { position: absolute; left: 6px; right: 6px; top: calc(var(--cf) + 4px); bottom: 5px; overflow: hidden; }
#evento .ev-tw__off, #evento .ev-tw__lit, #evento .ev-tw__lit > i { position: absolute; inset: 0; }
#evento .ev-tw__off {
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(5, 1, 15, .9) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(0deg, var(--led-off) 0 var(--led), transparent var(--led) var(--pitch));
}
#evento .ev-tw__lit { overflow: hidden; will-change: transform; }
#evento .ev-tw__lit > i {
  will-change: transform;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .42), transparent 24%, transparent 76%, rgba(0, 0, 0, .42)),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(5, 1, 15, .92) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(0deg, var(--led-lo) 0, var(--led-hi) calc(var(--led) * .5), var(--led-lo) var(--led), transparent var(--led) var(--pitch));
}
/* brilho que sobe pela torre acesa (só com a cena ativa) */
#evento .ev-tw__lit > i::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; opacity: 0;
  background: linear-gradient(0deg, transparent, rgba(255, 255, 255, .42) 50%, transparent);
}
#evento.ev-live .ev-tw.is-full .ev-tw__lit > i::after { animation: ev-shimmer 3.6s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: calc(var(--i, 0) * .42s); }
@keyframes ev-shimmer { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 78% { opacity: .9; } 100% { transform: translateY(-360%); opacity: 0; } }
#evento .ev-tw__body { transition: filter .35s; }
#evento .ev-tw.is-lit:hover .ev-tw__body { filter: brightness(1.25) saturate(1.1); }
#evento .ev-tw__cap {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--led); opacity: 0;
  background: #fff; box-shadow: 0 0 10px #fff, 0 0 20px var(--led-lo);
}
#evento .ev-tw__halo {
  position: absolute; left: -55%; right: -55%; bottom: -6%; height: 130%; z-index: -1;
  background: radial-gradient(50% 58% at 50% 100%, var(--halo), transparent 72%);
  transform-origin: 50% 100%; opacity: 0; pointer-events: none;
}

#evento .ev-tw__year {
  order: 3; margin-top: 10px; height: 28px; line-height: 28px;
  font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: clamp(17px, 1.5vw, 25px); letter-spacing: .02em;
  color: var(--cyan); opacity: .4; text-shadow: 0 1px 6px #000;
  transition: opacity .4s, text-shadow .4s;
}
#evento .ev-tw--27 .ev-tw__year { color: #ff5cff; }
#evento .ev-tw.is-lit .ev-tw__year { opacity: 1; text-shadow: 0 1px 6px #000, 0 0 14px rgba(0, 216, 248, .7); }
#evento .ev-tw--27.is-lit .ev-tw__year { text-shadow: 0 1px 6px #000, 0 0 16px rgba(240, 0, 240, .85); }
#evento .ev-tw__ed {
  order: 4; height: 20px; line-height: 20px; white-space: nowrap;
  font-size: 13px; color: #d9d4ee; opacity: .45; text-shadow: 0 1px 6px #000; transition: opacity .4s;
}
#evento .ev-tw.is-lit .ev-tw__ed { opacity: .92; }
#evento .ev-tw__ed-s { display: none; }

/* 2027: estouro */
#evento .ev-flash {
  position: absolute; left: 50%; top: 0; width: 64vmin; height: 64vmin; margin: -32vmin 0 0 -32vmin; z-index: 4;
  border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 130, 255, .5) 14%, rgba(240, 0, 240, .2) 36%, transparent 64%);
}
#evento .ev-ring {
  position: absolute; left: 50%; top: 0; width: 150px; height: 150px; margin: -75px 0 0 -75px; z-index: 4;
  border-radius: 50%; pointer-events: none; opacity: 0;
  border: 2px solid rgba(255, 170, 255, .95); box-shadow: 0 0 22px var(--magenta), inset 0 0 22px rgba(240, 0, 240, .7);
}
#evento .ev-sparks { position: absolute; left: 50%; top: 0; width: 0; height: 0; z-index: 4; pointer-events: none; }
#evento .ev-sparks i {
  position: absolute; left: -1.5px; top: -12px; width: 3px; height: 24px; border-radius: 3px; opacity: 0;
  background: linear-gradient(180deg, #fff, var(--magenta)); box-shadow: 0 0 8px var(--magenta);
}
#evento .ev-sparks i:nth-child(3n) { background: linear-gradient(180deg, #fff, var(--cyan)); box-shadow: 0 0 8px var(--cyan); }
#evento .ev-sparks i:nth-child(4n) { height: 12px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 18px var(--magenta); }

/* Colchetes: histórico × projeção */
#evento .ev-brk {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.35fr);
  column-gap: var(--cg); height: var(--brk); padding-top: 8px;
}
#evento .ev-brk__hist { grid-column: 1 / 6; text-align: center; }
#evento .ev-brk__proj { grid-column: 6; text-align: center; }
#evento .ev-brk__line {
  display: block; height: 9px; margin: 0 5%;
  border: 1px solid rgba(0, 216, 248, .65); border-top: 0;
  box-shadow: 0 4px 10px -6px rgba(0, 216, 248, .8);
  transform-origin: 50% 0;
}
#evento .ev-brk__proj .ev-brk__line { margin: 0 14%; border-color: rgba(240, 0, 240, .8); border-style: dashed; border-top: 0; box-shadow: 0 4px 10px -6px rgba(240, 0, 240, .8); }
#evento .ev-brk__txt {
  display: inline-block; margin-top: 7px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3;
  color: #d8fbff; text-shadow: 0 1px 6px #000, 0 0 12px rgba(0, 216, 248, .45);
}
#evento .ev-brk__proj .ev-brk__txt { color: #ffc4ff; }

/* Laços sutis só com a cena ativa */
#evento.ev-live .ev-bolts { animation: ev-flicker 3.4s steps(1, end) infinite; }
#evento.ev-live .ev-tw--27:not(.is-lit) .ev-tw__body { animation: ev-breathe 2.6s ease-in-out infinite; }
@keyframes ev-flicker { 0%, 100% { opacity: 1; } 41% { opacity: .72; } 43% { opacity: 1; } 71% { opacity: .85; } 72% { opacity: 1; } }
@keyframes ev-breathe { 50% { filter: brightness(1.5); } }

/* ------------------------------------------------------------------ */
/* Responsivo                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 820px) {
  /* folga embaixo e vão maior antes da placa: a parada da foto enquadra placa + foto
     sem linha de texto atrás do HUD e sem o palco aparecendo pela metade */
  #evento .ev-intro { min-height: 0; padding: calc(var(--hud-h) + 28px) 0 120px; }
  #evento .ev-title { font-size: clamp(38px, 11vw, 64px); }
  #evento .ev-rule { width: 78%; }
  #evento .ev-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  #evento .ev-facts { max-width: none; margin-top: calc(var(--hud-h) + 16px); } /* vão > HUD: ver a parada da foto */
  #evento .ev-fact--go { margin-left: 0; width: 100%; justify-content: space-between; border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 10px; padding: 12px 4px 4px; }
  #evento .ev-photo { margin-right: 6px; }
  #evento .ev-photo__win { aspect-ratio: 1.08; }
  #evento .ev-photo__c { width: 18px; height: 18px; }
  #evento .ev-photo__c--tl, #evento .ev-photo__c--tr { top: -8px; }
  #evento .ev-photo__c--bl, #evento .ev-photo__c--br { bottom: -8px; }
  #evento .ev-photo__c--tl, #evento .ev-photo__c--bl { left: -8px; }
  #evento .ev-photo__c--tr, #evento .ev-photo__c--br { right: -8px; }
  #evento .ev-streaks { display: none; } /* no celular o texto ocupa a largura toda: rastro cruzaria a leitura */

  #evento .ev-alt {
    --pitch: 9px; --led: 6px; --cf: 6px; --cg: 5px;
    --n: clamp(14px, 4.3vw, 19px);
    --n27: clamp(26px, 8.2vw, 34px);
    --rz: calc(7svh + 26px);
    --lab: 42px; --brk: 52px; --cb: 16px; --cell: 44px;
  }
  #evento .ev-alt__head { max-width: 70%; top: calc(var(--hud-h) + 14px); }
  #evento .ev-alt__title { font-size: clamp(30px, 9.4vw, 42px); }
  #evento .ev-tw__body { width: 80%; }
  #evento .ev-tw--27 .ev-tw__body { width: 72%; }
  #evento .ev-tw__num { margin-bottom: 8px; transform: skewX(-6deg); }
  #evento .ev-tw__year { margin-top: 6px; height: 22px; line-height: 22px; font-size: 14px; }
  #evento .ev-tw__ed { height: 14px; line-height: 14px; font-size: 10.5px; }
  #evento .ev-tw__ed-l { display: none; }
  #evento .ev-tw__ed-s { display: inline; }
  #evento .ev-brk__txt { font-size: 10px; letter-spacing: .1em; }
  #evento .ev-brk__proj .ev-brk__line { margin: 0 6%; }
  #evento .ev-flash { width: 90vmin; height: 90vmin; margin: -45vmin 0 0 -45vmin; }
  #evento .ev-ring { width: 90px; height: 90px; margin: -45px 0 0 -45px; }
  #evento .ev-tw__frame { filter: drop-shadow(0 0 1px #000); }
}
/* movimento reduzido no celular: o palco é estático e já está completo — mais folga
   embaixo da foto para a parada dela não mostrar o título do palco cortado */
@media (max-width: 820px) {
  .reduced #evento .ev-intro { padding-bottom: max(120px, calc(100svh - 620px)); }
}
@media (max-width: 820px) and (max-height: 700px) {
  #evento .ev-alt { --rz: calc(6svh + 18px); }
}

/* Movimento reduzido: sem laços */
.reduced #evento .ev-fact__arrow,
.reduced #evento.ev-live .ev-bolts,
.reduced #evento .ev-tw__lit > i::after,
.reduced #evento .ev-tw__body { animation: none !important; }
