/* Abertura em tela cheia (js/starth-abertura.js): preto, branco e o lime da marca; laranja no ESGOTADO.
   Etapas (data-etapa): glitch → crt → boot →
     lançamento: warp → bigbang → titulo → preco → nota → saida (portal que abre do centro)
     espera:     carimbo → contagem → saida-glitch
   A página embaixo nunca fica escondida para sempre: prazo final no JS e Pular/Esc. */
@property --edu-ab-r { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

html.is-abrindo-travado, html.is-abrindo-travado body { overflow: hidden; }
html.is-abrindo main { animation: edu-ab-shake 650ms steps(1) both; }
@keyframes edu-ab-shake {
  0% { transform: none; } 12% { transform: translate(-6px, 2px); } 24% { transform: translate(5px, -3px) skewX(-2deg); }
  36% { transform: translate(-3px, 0); } 48% { transform: translate(8px, 2px); } 60% { transform: none; }
  72% { transform: translate(-10px, -2px) skewX(3deg); } 84% { transform: translate(4px, 1px); } 100% { transform: none; }
}

.edu-ab {
  --ab-lime: #D1FB00; --ab-white: #ffffff; --ab-black: #000000; --ab-space: #030406; --ab-dim: #ffffff8c;
  --ab-orange: #ff6b2c; --ab-orange-glow: #ff6b2c66; --ab-lime-glow: #D1FB0059;
  --ab-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ab-spring: cubic-bezier(.16, 1, .3, 1);
  position: fixed; inset: 0; z-index: 1000; overflow: hidden; color: var(--ab-white);
  font-family: Archivo, Arial, sans-serif; -webkit-font-smoothing: antialiased;
}

/* ---------- Glitch: faixas que rasgam a página de verdade ---------- */
.edu-ab-bands { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: none; }
.edu-ab:is([data-etapa="glitch"], [data-etapa="saida-glitch"]) .edu-ab-bands { display: block; }
.edu-ab-bands i { position: absolute; left: -10%; right: -10%; mix-blend-mode: difference; background: var(--ab-white); animation: edu-ab-band 150ms steps(1) infinite; }
.edu-ab-bands i:nth-child(1) { top: 6%; height: 3%; animation-duration: 110ms; }
.edu-ab-bands i:nth-child(2) { top: 17%; height: 9%; background: var(--ab-lime); animation-duration: 170ms; }
.edu-ab-bands i:nth-child(3) { top: 33%; height: 1.2%; animation-duration: 90ms; }
.edu-ab-bands i:nth-child(4) { top: 44%; height: 14%; animation-duration: 210ms; animation-direction: reverse; }
.edu-ab-bands i:nth-child(5) { top: 63%; height: 2.4%; background: var(--ab-lime); animation-duration: 130ms; }
.edu-ab-bands i:nth-child(6) { top: 74%; height: 7%; animation-duration: 160ms; animation-direction: reverse; }
.edu-ab-bands i:nth-child(7) { top: 90%; height: 1.6%; background: var(--ab-lime); animation-duration: 100ms; }
.edu-ab[data-fase="espera"] .edu-ab-bands i:nth-child(2n) { background: var(--ab-orange); }
@keyframes edu-ab-band {
  0% { transform: translateX(-4%); opacity: 1; } 25% { transform: translateX(6%) scaleY(1.9); opacity: .2; }
  50% { transform: translateX(-9%); opacity: 1; } 75% { transform: translateX(2%) scaleY(.4); opacity: 0; } 100% { transform: translateX(0); opacity: 1; }
}

/* ---------- Tela ---------- */
.edu-ab-screen { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: transparent; }
.edu-ab:not([data-etapa="glitch"]) .edu-ab-screen { background: var(--ab-black); }
.edu-ab[data-fase="base"]:not([data-etapa="glitch"]):not([data-etapa="crt"]):not([data-etapa="boot"]) .edu-ab-screen { background: var(--ab-space); }
.edu-ab-screen::before, .edu-ab-screen::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.edu-ab-screen::before { background: repeating-linear-gradient(0deg, #ffffff0d 0 1px, transparent 1px 3px); }
.edu-ab-screen::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: edu-ab-noise 360ms steps(3) infinite;
}
.edu-ab:not([data-etapa="glitch"]):not([data-etapa="crt"]) .edu-ab-screen::before { opacity: 1; }
.edu-ab:not([data-etapa="glitch"]):not([data-etapa="crt"]) .edu-ab-screen::after { opacity: .07; }
.edu-ab[data-fase="base"]:is([data-etapa="titulo"], [data-etapa="preco"], [data-etapa="nota"], [data-etapa="saida"]) .edu-ab-screen::before { opacity: .45; }
@keyframes edu-ab-noise { 0% { background-position: 0 0; } 33% { background-position: -60px 40px; } 66% { background-position: 50px -30px; } 100% { background-position: 0 0; } }

/* Apagão de tubo: branco na tela toda → uma linha → um ponto. */
.edu-ab-line { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--ab-white); opacity: 0; }
.edu-ab[data-etapa="crt"] .edu-ab-line { animation: edu-ab-crt 440ms cubic-bezier(.7, 0, .3, 1) both; }
@keyframes edu-ab-crt {
  0% { opacity: .95; transform: scale(1, 1); } 45% { opacity: 1; transform: scale(1, .004); }
  75% { opacity: 1; transform: scale(.02, .004); box-shadow: 0 0 40px 10px var(--ab-lime); } 100% { opacity: 0; transform: scale(0, 0); }
}

/* ---------- Cosmos (canvas) e clarão ---------- */
.edu-ab-cosmos { position: absolute; inset: 0; z-index: 1; display: none; width: 100%; height: 100%; }
.edu-ab[data-fase="base"]:is([data-etapa="warp"], [data-etapa="bigbang"], [data-etapa="titulo"], [data-etapa="preco"], [data-etapa="nota"], [data-etapa="saida"]) .edu-ab-cosmos { display: block; }
.edu-ab-flash {
  position: absolute; inset: -20%; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, var(--ab-white) 0%, #f6ffd0 22%, var(--ab-lime) 42%, #D1FB0000 70%);
}
.edu-ab[data-fase="base"]:is([data-etapa="bigbang"], [data-etapa="titulo"], [data-etapa="preco"], [data-etapa="nota"], [data-etapa="saida"]) .edu-ab-flash { animation: edu-ab-flash 1100ms var(--ab-spring) both; }
@keyframes edu-ab-flash { 0% { opacity: 0; transform: scale(.15); } 10% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.5); } }

/* ---------- Conteúdo ---------- */
.edu-ab-content { position: relative; z-index: 4; display: grid; justify-items: center; width: min(1120px, 100% - 48px); text-align: center; }
.edu-ab-content > * { display: none; margin: 0; }
.edu-ab-boot { justify-self: center; font-family: var(--ab-mono); font-size: clamp(13px, 1.4vw, 16px); color: var(--ab-lime); letter-spacing: .04em; white-space: pre; }
.edu-ab[data-fase="espera"] .edu-ab-boot { color: var(--ab-orange); }
.edu-ab-cursor { animation: edu-ab-blink 700ms steps(1) infinite; }
@keyframes edu-ab-blink { 50% { opacity: 0; } }
.edu-ab-meter { position: relative; width: min(440px, 100%); height: 8px; margin-top: 14px; background: repeating-linear-gradient(90deg, #D1FB0026 0 calc(100% / 24 - 3px), transparent 0 calc(100% / 24)); }
.edu-ab-meter::after { content: ''; position: absolute; inset: 0; clip-path: inset(0 100% 0 0); background: repeating-linear-gradient(90deg, var(--ab-lime) 0 calc(100% / 24 - 3px), transparent 0 calc(100% / 24)); }
.edu-ab[data-fase="espera"] .edu-ab-meter::after { background: repeating-linear-gradient(90deg, var(--ab-orange) 0 calc(100% / 24 - 3px), transparent 0 calc(100% / 24)); }
.edu-ab.is-metering .edu-ab-meter::after { animation: edu-ab-fill 480ms steps(24) forwards; }
@keyframes edu-ab-fill { to { clip-path: inset(0 0 0 0); } }
.edu-ab[data-etapa="boot"] :is(.edu-ab-boot, .edu-ab-meter) { display: block; }

/* Marca que acende no centro da galáxia. */
.edu-ab-mark { width: clamp(54px, 7vw, 92px); margin-bottom: clamp(14px, 3vh, 30px); }
.edu-ab-mark svg { display: block; width: 100%; height: auto; overflow: visible; fill: var(--ab-lime); filter: drop-shadow(0 0 22px var(--ab-lime-glow)); }
.edu-ab[data-fase="base"]:is([data-etapa="titulo"], [data-etapa="preco"], [data-etapa="nota"], [data-etapa="saida"]) .edu-ab-mark { display: block; animation: edu-ab-mark 900ms var(--ab-spring) both; }
@keyframes edu-ab-mark { from { opacity: 0; transform: scale(.3) rotate(-12deg); } to { opacity: 1; transform: none; } }

.edu-ab-kicker {
  align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid #D1FB0055; border-radius: 999px; background: #0a0d05b3;
  color: var(--ab-lime); font-size: clamp(11px, 1.1vw, 13px); font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
}
.edu-ab-kicker-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ab-orange); box-shadow: 0 0 12px var(--ab-orange); }
.edu-ab-kicker-dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--ab-orange); animation: edu-ab-ping 1.6s ease-out infinite; }
@keyframes edu-ab-ping { 0% { transform: scale(.4); opacity: .9; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
.edu-ab[data-fase="base"]:is([data-etapa="titulo"], [data-etapa="preco"], [data-etapa="nota"], [data-etapa="saida"]) .edu-ab-kicker,
.edu-ab[data-fase="espera"]:is([data-etapa="carimbo"], [data-etapa="contagem"], [data-etapa="saida-glitch"]) .edu-ab-kicker { display: inline-flex; animation: edu-ab-rise 600ms var(--ab-spring) both; }
.edu-ab[data-fase="espera"] .edu-ab-kicker { border-color: #ff6b2c66; color: var(--ab-white); background: #140803b3; }
.edu-ab[data-fase="espera"] .edu-ab-kicker-dot::after { animation: none; opacity: 0; }

.edu-ab-title {
  max-width: 14ch; margin-top: clamp(16px, 3vh, 30px) !important; font-size: clamp(46px, 9vw, 150px); line-height: .92; letter-spacing: -.055em; font-weight: 650;
  text-shadow: 0 0 60px #D1FB0040; text-wrap: balance;
}
.edu-ab-title span { display: inline-block; margin: 0 .12em; animation: edu-ab-word 820ms var(--ab-spring) calc(var(--i, 0) * 110ms) both; }
.edu-ab-title span:last-child { color: var(--ab-lime); }
@keyframes edu-ab-word { from { opacity: 0; transform: translateY(.55em) scale(1.08); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.edu-ab[data-fase="base"]:is([data-etapa="titulo"], [data-etapa="preco"], [data-etapa="nota"], [data-etapa="saida"]) .edu-ab-title { display: block; }
.edu-ab[data-fase="base"]:is([data-etapa="preco"], [data-etapa="nota"], [data-etapa="saida"]) .edu-ab-title { font-size: clamp(36px, 6vw, 96px); transition: font-size 600ms var(--ab-spring); }

.edu-ab-lead { margin-top: clamp(18px, 3vh, 30px) !important; font-family: var(--ab-mono); font-size: clamp(13px, 1.5vw, 18px); color: var(--ab-dim); letter-spacing: .06em; text-transform: uppercase; }
.edu-ab[data-fase="base"]:is([data-etapa="preco"], [data-etapa="nota"], [data-etapa="saida"]) .edu-ab-lead,
.edu-ab[data-fase="espera"]:is([data-etapa="contagem"], [data-etapa="saida-glitch"]) .edu-ab-lead { display: block; }

.edu-ab-value {
  position: relative; display: block; color: var(--ab-lime); font-size: clamp(76px, 14vw, 200px); line-height: .9; font-weight: 650; letter-spacing: -.06em;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 70px var(--ab-lime-glow);
}
.edu-ab.is-price-glitch .edu-ab-value { animation: edu-ab-jitter 120ms steps(1) infinite; }
@keyframes edu-ab-jitter { 0% { transform: translate(0, 0); } 33% { transform: translate(-4px, 2px) skewX(-6deg); } 66% { transform: translate(5px, -1px); } }
.edu-ab[data-fase="base"]:is([data-etapa="preco"], [data-etapa="nota"], [data-etapa="saida"]) .edu-ab-price { display: block; margin-top: 4px !important; }

.edu-ab-note { max-width: 46ch; margin-top: 14px !important; color: var(--ab-white); font-size: clamp(14px, 1.4vw, 17px); line-height: 1.5; }
.edu-ab[data-fase="base"]:is([data-etapa="nota"], [data-etapa="saida"]) .edu-ab-note,
.edu-ab[data-fase="espera"]:is([data-etapa="contagem"], [data-etapa="saida-glitch"]) .edu-ab-note { display: block; animation: edu-ab-rise 600ms var(--ab-spring) both; }
@keyframes edu-ab-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Espera: o carimbo e a contagem ---------- */
.edu-ab-stamp {
  margin-top: clamp(22px, 4vh, 44px) !important; padding: .1em .32em .06em; border: clamp(5px, .7vw, 9px) solid var(--ab-orange); border-radius: .12em;
  color: var(--ab-orange); font-size: clamp(42px, 12.5vw, 210px); font-weight: 800; letter-spacing: .02em; line-height: .95; text-transform: uppercase;
  text-shadow: 0 0 40px var(--ab-orange-glow); box-shadow: 0 0 60px -10px var(--ab-orange-glow), inset 0 0 40px -16px var(--ab-orange-glow);
  transform: rotate(-7deg);
}
.edu-ab[data-fase="espera"]:is([data-etapa="carimbo"], [data-etapa="contagem"], [data-etapa="saida-glitch"]) .edu-ab-stamp { display: block; animation: edu-ab-stamp 520ms cubic-bezier(.3, 1.5, .5, 1) both; }
.edu-ab[data-fase="espera"]:is([data-etapa="contagem"], [data-etapa="saida-glitch"]) .edu-ab-stamp { font-size: clamp(30px, 7vw, 110px); margin-top: clamp(14px, 2.4vh, 26px) !important; transition: font-size 500ms var(--ab-spring); }
@keyframes edu-ab-stamp { 0% { opacity: 0; transform: rotate(-16deg) scale(3.2); } 60% { opacity: 1; transform: rotate(-6deg) scale(.94); } 100% { transform: rotate(-7deg) scale(1); } }
.edu-ab[data-fase="espera"][data-etapa="carimbo"] .edu-ab-screen { animation: edu-ab-hit 420ms steps(1) 320ms both; }
@keyframes edu-ab-hit { 0% { transform: translate(-9px, 6px); } 25% { transform: translate(8px, -5px); } 50% { transform: translate(-5px, 2px); } 75% { transform: translate(3px, -1px); } 100% { transform: none; } }

.edu-ab-clock { gap: clamp(14px, 3vw, 40px); justify-content: center; margin-top: 6px !important; }
.edu-ab[data-fase="espera"]:is([data-etapa="contagem"], [data-etapa="saida-glitch"]) .edu-ab-clock { display: flex; animation: edu-ab-rise 700ms var(--ab-spring) both; }
.edu-ab-clock-unit { display: grid; justify-items: center; gap: 8px; }
.edu-ab-clock-unit b { font-size: clamp(54px, 10vw, 150px); font-weight: 650; line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.edu-ab-clock-unit:last-child b { color: var(--ab-lime); text-shadow: 0 0 50px var(--ab-lime-glow); }
.edu-ab-clock-unit small { font-family: var(--ab-mono); font-size: clamp(10px, 1vw, 13px); color: var(--ab-dim); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- Saídas ---------- */
/* Lançamento: um portal se abre do centro e devolve a página já no checkout. */
.edu-ab[data-fase="base"][data-etapa="saida"] {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--edu-ab-r), #000 calc(var(--edu-ab-r) + 2%));
  mask-image: radial-gradient(circle at 50% 50%, transparent var(--edu-ab-r), #000 calc(var(--edu-ab-r) + 2%));
  animation: edu-ab-portal 900ms cubic-bezier(.7, 0, .2, 1) forwards;
}
@keyframes edu-ab-portal { 0% { --edu-ab-r: 0%; opacity: 1; } 75% { opacity: 1; } 100% { --edu-ab-r: 160%; opacity: 0; } }
/* Espera: a tela preta se rasga e some, como entrou. */
.edu-ab[data-etapa="saida-glitch"] .edu-ab-screen { animation: edu-ab-out 560ms steps(6) forwards; }
@keyframes edu-ab-out {
  0% { clip-path: inset(0 0 0 0); } 30% { clip-path: inset(12% 0 18% 0); transform: translateX(-10px); }
  60% { clip-path: inset(38% 0 41% 0); transform: translateX(14px); } 85% { clip-path: inset(49.5% 0 49.5% 0); opacity: 1; } 100% { clip-path: inset(50% 0 50% 0); opacity: 0; }
}

/* ---------- Controles ---------- */
.edu-ab-controls { position: absolute; z-index: 6; top: max(16px, env(safe-area-inset-top)); right: 16px; display: flex; gap: 8px; }
.edu-ab[data-etapa="glitch"] .edu-ab-controls { opacity: 0; }
.edu-ab-sound, .edu-ab-skip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 0; cursor: pointer;
  font-family: var(--ab-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.edu-ab-sound { border: 1px solid var(--ab-lime); background: var(--ab-lime); color: var(--ab-black); font-weight: 700; animation: edu-ab-blink 1.1s steps(1) infinite; }
.edu-ab-sound[hidden] { display: none; }
.edu-ab-skip { border: 1px solid #ffffff40; background: #000000b3; color: var(--ab-white); }
.edu-ab-skip:hover { border-color: var(--ab-lime); color: var(--ab-lime); }
.edu-ab-sound:focus-visible, .edu-ab-skip:focus-visible { outline: 2px solid var(--ab-lime); outline-offset: 3px; }

@media (max-width: 600px) {
  .edu-ab-content { width: calc(100% - 32px); }
  .edu-ab-boot { white-space: normal; }
  .edu-ab-title { max-width: 9ch; }
  .edu-ab-clock-unit b { font-size: clamp(44px, 15vw, 72px); }
}
@media (prefers-reduced-motion: reduce) { .edu-ab { display: none; } }