/**
 * Berkeley Insights — abertura animada.
 *
 * Regras que valem para o arquivo inteiro:
 *  - CSP do Worker é default-src 'self': nada de fonte externa, nada de
 *    <style> inline. Toda a arte é máscara CSS sobre gradiente.
 *  - Só opacity e clip-path (e um transform curtinho no pulso) são animados.
 *    Sem filter/blur em área grande e sem backdrop-filter: a máquina de
 *    homologação tem GPU instável e esses dois são justamente os que a derrubam.
 *  - As letras são o A e o I REAIS de EDUCACIONAL, traçados do PNG do logo. O I
 *    fica parado na 7ª letra; o A desliza da 5ª para a 10ª. As duas fatias do A
 *    são idênticas, então um elemento só cobre as duas posições.
 *  - Fundo claro: o inox é escurecido para contrastar com o branco e as
 *    fantasmas do glitch usam multiply (em fundo claro, screen some).
 */

.bx-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #f7f9fa;
  opacity: 1;

  /* Inox/silício para fundo claro. A faixa mais clara para em #b3bec7 e não
     perto do branco: contra o fundo #f7f9fa, um realce claro demais some e o
     logo fica com buracos nas bandas de brilho. Com esse teto, a faixa mais
     apagada ainda tem 1,79 de contraste no fundo (1,40 no pico da varredura)
     e o metal mantém 5,2x de amplitude entre o brilho e a sombra. */
  --inox: linear-gradient(102deg,
    #74808a 0%,  #525e67 7%,  #909da6 14%, #a6b1ba 20%, #b3bec7 24%,
    #99a5ae 30%, #63707a 38%, #414c55 45%, #778992 53%, #a3aeb7 61%,
    #adb8c1 66%, #b3bec7 69%, #919da6 76%, #5c6d78 84%, #3a454d 91%,
    #6c7982 97%, #8a95a0 100%);
  --trace: #7ba6b0;
  /* Multiplicador do deslocamento do glitch nas letras. Em celular a letra tem
     8px de largura: os mesmos 3,5px de desvio virariam quase metade dela. */
  --gl: 1;
}

/* Minimalista: um sopro de teal no centro, nada de vinheta. */
.bx-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 54% at 50% 48%,
    rgba(0, 102, 120, 0.045), rgba(247, 249, 250, 0) 72%);
}

/* ------------------------------------------------------------------ palco
   O palco tem exatamente a proporção do PNG (2048x426). Tudo aqui dentro é
   percentual desse retângulo, medido no próprio arquivo. */
.bx-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(44vw, 600px);
  aspect-ratio: 2048 / 426;
  transform: translate(-50%, -50%);
}

.bx-logo { position: absolute; inset: 0; opacity: 0; }

/* Cada letra nasce na fatia que ocupa no logo. A opacidade e o deslize do A
   são comandados por intro.js — nenhuma transição daqui. */
.bx-letter { position: absolute; opacity: 0; }

/* A nasce na 5ª letra; o JS o desliza daqui até a 10ª (74.60938%). */
.bx-letter-a { left: 33.30078%; top: 86.38498%; width: 3.17383%; height: 13.38028%;
               z-index: 2; will-change: transform; }
.bx-letter-i { left: 50.24414%; top: 86.61972%; width: 1.31836%; height: 13.14554%; }

/* ------------------------------------------------------------------ faces
   Cada peça de arte tem 3 faces empilhadas e recortadas pela mesma máscara:
   a de metal e duas fantasmas (ciano/magenta) que só existem no glitch. */
.bx-face {
  position: absolute;
  inset: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
}

.bx-logo .bx-face {
  -webkit-mask-image: url("/assets/images/logo-berkeley-educacional.png");
  mask-image: url("/assets/images/logo-berkeley-educacional.png");
}
.bx-letter-a .bx-face {
  -webkit-mask-image: url("/assets/glifo-a.svg");
  mask-image: url("/assets/glifo-a.svg");
}
.bx-letter-i .bx-face {
  -webkit-mask-image: url("/assets/glifo-i.svg");
  mask-image: url("/assets/glifo-i.svg");
}

.bx-face-base { background-image: var(--inox); overflow: hidden; }

/* O metal de cada letra é a janela exata que ela ocupa no metal do logo
   inteiro: mesma escala, mesmo deslocamento. Sem isto, a letra teria um
   gradiente próprio espremido em 19px (cor quase chapada) e a entrada do logo
   por baixo dela apareceria como um degrau de tom. Os números saem da própria
   fatia: tamanho = 100/fatia, posição = fatia / (100 - fatia).

   No A a posição é animada junto com o deslize: a letra é uma janela que
   corre por cima de uma chapa de metal parada, e é isso que faz o metal dela
   coincidir com o do logo tanto na partida quanto na chegada. */
.bx-letter-a .bx-face-base { background-size: 3150.77% 747.37%; background-position: 34.3923% 99.7290%; }
.bx-letter-i .bx-face-base { background-size: 7585.19% 760.71%; background-position: 50.9154% 99.7297%; }

/* Reflexo especular que corre pelo metal no fade-in do logo. */
.bx-face-base::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 55%;
  opacity: 0;
  transform: translateX(-200%);
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 28%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.08) 72%,
    rgba(255, 255, 255, 0) 100%);
}

.bx-intro.is-sheening .bx-logo .bx-face-base::after {
  animation: bx-sheen 1500ms cubic-bezier(0.36, 0, 0.2, 1) forwards;
}

/* Na reabertura a abertura inteira dura ~2s: a varredura tem de caber nela. */
.bx-intro.is-rapida.is-sheening .bx-logo .bx-face-base::after { animation-duration: 900ms; }

@keyframes bx-sheen {
  0%   { transform: translateX(-200%); opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translateX(320%); opacity: 0; }
}

/* ----------------------------------------------------------------- glitch
   Passos discretos (steps) porque glitch interpolado vira borrão. Em fundo
   claro o modo é multiply: as fantasmas subtraem cor em vez de somar luz.

   Cores dessaturadas de propósito — ciano e magenta puros gritam demais num
   fundo quase branco e brigam com o teal da marca.

   Deslocamento em PIXELS, não em porcentagem: a letra tem 19px de largura, e
   3% dela dariam 0,6px — glitch invisível. O logo tem keyframes próprios,
   porque nele 3px seria quase nada. */
.bx-face-ghost { opacity: 0; mix-blend-mode: multiply; }
.bx-face-c { background: #8fbcc4; }
.bx-face-m { background: #bf9db3; }

.bx-intro.is-glitching .bx-letter .bx-face-c {
  animation: bx-letra-c 300ms steps(1, end) infinite;
}
.bx-intro.is-glitching .bx-letter .bx-face-m {
  animation: bx-letra-m 260ms steps(1, end) infinite;
}
.bx-intro.is-glitching .bx-logo .bx-face-c {
  animation: bx-logo-c 300ms steps(1, end) infinite;
}
.bx-intro.is-glitching .bx-logo .bx-face-m {
  animation: bx-logo-m 260ms steps(1, end) infinite;
}

@keyframes bx-letra-c {
  0%   { opacity: 0.55; transform: translate(calc(-2.5px * var(--gl)), 0);   clip-path: inset(8% 0 66% 0); }
  20%  { opacity: 0.38; transform: translate(calc(3px * var(--gl)), 1px);    clip-path: inset(54% 0 24% 0); }
  40%  { opacity: 0;    transform: translate(0, 0);        clip-path: inset(0 0 0 0); }
  60%  { opacity: 0.58; transform: translate(calc(-3.5px * var(--gl)), -1px); clip-path: inset(32% 0 46% 0); }
  80%  { opacity: 0.34; transform: translate(calc(1.5px * var(--gl)), 0);    clip-path: inset(70% 0 8% 0); }
  100% { opacity: 0;    transform: translate(0, 0);        clip-path: inset(0 0 0 0); }
}

@keyframes bx-letra-m {
  0%   { opacity: 0;    transform: translate(0, 0);        clip-path: inset(0 0 0 0); }
  18%  { opacity: 0.52; transform: translate(calc(3px * var(--gl)), -1px);   clip-path: inset(16% 0 58% 0); }
  38%  { opacity: 0.36; transform: translate(calc(-2.5px * var(--gl)), 1px); clip-path: inset(62% 0 14% 0); }
  56%  { opacity: 0;    transform: translate(0, 0);        clip-path: inset(0 0 0 0); }
  74%  { opacity: 0.56; transform: translate(calc(3.5px * var(--gl)), 0);    clip-path: inset(40% 0 36% 0); }
  90%  { opacity: 0.30; transform: translate(calc(-1.5px * var(--gl)), 0);   clip-path: inset(4% 0 78% 0); }
  100% { opacity: 0;    transform: translate(0, 0);        clip-path: inset(0 0 0 0); }
}

@keyframes bx-logo-c {
  0%   { opacity: 0.42; transform: translate(-6px, 0);     clip-path: inset(10% 0 64% 0); }
  25%  { opacity: 0.30; transform: translate(7px, 2px);    clip-path: inset(52% 0 26% 0); }
  50%  { opacity: 0;    transform: translate(0, 0);        clip-path: inset(0 0 0 0); }
  75%  { opacity: 0.46; transform: translate(-8px, -2px);  clip-path: inset(34% 0 44% 0); }
  100% { opacity: 0;    transform: translate(0, 0);        clip-path: inset(0 0 0 0); }
}

@keyframes bx-logo-m {
  0%   { opacity: 0;    transform: translate(0, 0);        clip-path: inset(0 0 0 0); }
  20%  { opacity: 0.42; transform: translate(7px, -2px);   clip-path: inset(18% 0 56% 0); }
  45%  { opacity: 0.28; transform: translate(-6px, 2px);   clip-path: inset(60% 0 16% 0); }
  70%  { opacity: 0;    transform: translate(0, 0);        clip-path: inset(0 0 0 0); }
  88%  { opacity: 0.40; transform: translate(8px, 0);      clip-path: inset(42% 0 34% 0); }
  100% { opacity: 0;    transform: translate(0, 0);        clip-path: inset(0 0 0 0); }
}

/* --------------------------------------------------------------- circuito
   Trilhas saem do logo para as bordas. A máscara radial é o "fade out para
   as bordas": quanto mais longe do logo, mais apagada fica a trilha. */
.bx-circuits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%,
    rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0.82) 26%, rgba(0, 0, 0, 0.26) 64%, rgba(0, 0, 0, 0) 92%);
  mask-image: radial-gradient(ellipse 58% 58% at 50% 50%,
    rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0.82) 26%, rgba(0, 0, 0, 0.26) 64%, rgba(0, 0, 0, 0) 92%);
}

.bx-circuits path {
  fill: none;
  stroke: var(--trace);
  stroke-width: 1.1;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.bx-circuits circle { fill: var(--trace); }

/* ------------------------------------------------------------------ pular */
.bx-skip {
  position: absolute;
  right: 20px;
  bottom: 18px;
  padding: 6px 14px;
  border: 1px solid rgba(64, 64, 65, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: rgba(64, 64, 65, 0.56);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0;
  transition: opacity 320ms ease, color 160ms ease, border-color 160ms ease;
}

.bx-intro.is-skippable .bx-skip { opacity: 1; }
.bx-skip:hover { color: #00444e; border-color: rgba(0, 68, 78, 0.4); }
.bx-skip:focus-visible { outline: 2px solid #006678; outline-offset: 2px; }

/* Trava a rolagem do dashboard enquanto a abertura roda. */
body.bx-intro-ativa { overflow: hidden; }

/* Em celular 44vw deixa o logo pequeno demais para o EDUCACIONAL ser legível. */
@media (max-width: 700px) {
  .bx-intro { --gl: 0.5; }
  .bx-stage { width: min(74vw, 600px); }
  .bx-skip { right: 12px; bottom: 12px; }
}

/* --------------------------------------------------- movimento reduzido
   Quem pediu menos movimento vê só o logo aparecer e sair. O JS também
   encurta a linha do tempo; isto aqui é a rede de segurança visual. */
@media (prefers-reduced-motion: reduce) {
  .bx-intro *,
  .bx-intro *::after { animation: none !important; }
  .bx-letter { display: none; }
}