#intro { display: none; }
html.intro-active { overflow: hidden; }
html.intro-active #intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  color: var(--text-silver);
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
}

/* ---------- Estado inicial (antes do arranque) ---------- */
#intro :is(.intro-corner, .intro-label, .intro-hud, .intro-glow, .intro-seam, .intro-axis, .intro-skip, .intro-sweep, .intro-wipeline, .intro-scan) { opacity: 0; }
#intro:not(.intro--run) .intro-logo img { opacity: 0; }
#intro .intro-shutter::before { opacity: 0; }

/* ---------- Portões (fundo + grelha) ---------- */
.intro-shutter {
  position: absolute; left: 0; right: 0; height: 50%;
  background-color: var(--bg-primary);
  box-shadow: 0 0 30px var(--accent-orange-glow);
  transition: transform .95s var(--ease-industrial) .12s;
  will-change: transform;
}
.intro-shutter--top { top: 0; }
.intro-shutter--bottom { bottom: 0; }
.intro-shutter::before {
  content: ''; position: absolute; inset: 0;
  background-size: var(--grid-size) var(--grid-size);
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
}
.intro-shutter--bottom::before { background-position: 0 -50vh; }

/* ---------- Linhas de eixo ---------- */
.intro-seam {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-orange) 25%, var(--accent-orange) 75%, transparent);
  box-shadow: 0 0 14px var(--accent-orange-glow);
}
.intro-axis {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(148,163,184,.35) 30%, rgba(148,163,184,.35) 70%, transparent);
}
.intro-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 120px;
  background: linear-gradient(to bottom, transparent, rgba(245,165,36,.07) 70%, rgba(245,165,36,.35) 100%);
  border-bottom: 1px solid var(--accent-orange);
  transform: translateY(-120px);
}
.intro-flash { position: absolute; inset: 0; background: var(--accent-orange); opacity: 0; pointer-events: none; }

/* ---------- Cantos e etiquetas ---------- */
.intro-corner { position: absolute; width: 44px; height: 44px; border: 0 solid var(--text-metal); }
.intro-corner--tl { top: 28px; left: 28px; border-top-width: 2px; border-left-width: 2px; border-color: var(--accent-orange); transform-origin: 0 0; }
.intro-corner--tr { top: 28px; right: 28px; border-top-width: 2px; border-right-width: 2px; transform-origin: 100% 0; }
.intro-corner--bl { bottom: 28px; left: 28px; border-bottom-width: 2px; border-left-width: 2px; transform-origin: 0 100%; }
.intro-corner--br { bottom: 28px; right: 28px; border-bottom-width: 2px; border-right-width: 2px; border-color: var(--accent-orange); transform-origin: 100% 100%; }
.intro-label { position: absolute; font-size: 10px; letter-spacing: .18em; color: var(--text-metal); }

/* ---------- Núcleo: glow, logo, HUD ---------- */
.intro-core { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.intro-glow {
  position: absolute; left: 50%; top: 50%;
  width: clamp(420px, 72vw, 900px); height: clamp(420px, 72vw, 900px);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--accent-orange-glow), transparent);
}
.intro-logo { position: relative; width: clamp(260px, 42vw, 520px); aspect-ratio: 1 / 1; overflow: hidden; }
.intro-logo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  
}
.intro-sweepmask {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: var(--logo-mask); mask-image: var(--logo-mask);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.intro-sweep {
  position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.8) 50%, transparent 100%);
  transform: translateX(-120%) skewX(-18deg);
}
.intro-wipeline {
  position: absolute; top: 18%; bottom: 18%; left: 0; width: 2px;
  background: var(--accent-orange); box-shadow: 0 0 16px 2px var(--accent-orange-glow);
}
.intro-hud { position: absolute; left: 50%; top: calc(50% + clamp(64px, 9vw, 112px)); width: clamp(240px, 36vw, 420px); transform: translateX(-50%); }
.intro-hud-row { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-metal); }
.intro-hud-row b { color: var(--accent-orange); font-weight: 700; font-variant-numeric: tabular-nums; }
.intro-bar { height: 2px; background: var(--border-steel); margin-top: 8px; }
.intro-bar i { display: block; height: 100%; background: var(--accent-orange); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 10px var(--accent-orange-glow); }

.intro-skip {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  font: 10px 'JetBrains Mono', monospace; letter-spacing: .2em; color: var(--text-metal);
  background: transparent; border: 1px solid var(--border-steel); padding: 6px 12px; cursor: pointer;
}
.intro-skip:hover { color: var(--accent-orange); border-color: var(--accent-orange); }

/* ---------- ARRANQUE (.intro--run) ---------- */
#intro.intro--run :is(.intro-corner, .intro-label, .intro-hud, .intro-glow, .intro-seam, .intro-axis, .intro-skip) { opacity: 1; }
#intro.intro--run .intro-shutter::before { opacity: 1; animation: introFade 1s ease .1s both; }
#intro.intro--run .intro-seam   { animation: introSeam 1.1s var(--ease-industrial) .1s both; }
#intro.intro--run .intro-axis   { animation: introAxis 1.1s var(--ease-industrial) .2s both; }
#intro.intro--run .intro-corner { animation: introCorner .7s var(--ease-industrial) .25s both; }
#intro.intro--run .intro-label  { animation: introFade .6s ease .6s both; }
#intro.intro--run .intro-scan   { animation: introScan 1.4s linear .45s both; }
#intro.intro--run .intro-glow   { animation: introGlow 1.2s var(--ease-industrial) .5s both; }
#intro.intro--run .intro-hud    { animation: introFade .5s ease .45s both; }
#intro.intro--run .intro-skip   { animation: introFade .5s ease 1s both; }
#intro.intro--run .intro-logo img { animation: introLogo 1s var(--ease-industrial) .4s both; }
#intro.intro--run .intro-wipeline { animation: introWipeLine 1s var(--ease-industrial) .4s both; }
#intro.intro--run .intro-sweep  { animation: introSweep .8s cubic-bezier(.4,0,.2,1) 1.15s both; }

/* ---------- PUNCH ---------- */
#intro.intro--punch .intro-logo img { animation: introPunch .4s linear both; }
#intro.intro--punch .intro-flash { animation: introFlash .5s ease-out both; }
#intro.intro--punch .intro-glow { animation: introGlowPulse .5s ease-out both; }

/* ---------- SAÍDA ---------- */
#intro.intro--exit :is(.intro-corner, .intro-label, .intro-hud, .intro-glow, .intro-seam, .intro-axis, .intro-skip) { animation: introOut .35s ease both; }
#intro.intro--exit .intro-logo img { animation: introLogoOut .55s cubic-bezier(.7,0,.84,0) both; }
#intro.intro--exit .intro-shutter--top    { transform: translateY(-101%); }
#intro.intro--exit .intro-shutter--bottom { transform: translateY(101%); }

/* ---------- Keyframes ---------- */
@keyframes introFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes introOut    { to   { opacity: 0; } }
@keyframes introSeam   { from { opacity: 1; transform: scaleX(0); } to { opacity: .55; transform: scaleX(1); } }
@keyframes introAxis   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes introCorner { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes introScan   { from { opacity: 1; transform: translateY(-120px); } to { opacity: 1; transform: translateY(100vh); } }
@keyframes introGlow   { from { opacity: 0; transform: translate(-50%,-50%) scale(.5); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes introGlowPulse { 0% { transform: translate(-50%,-50%) scale(1); } 30% { transform: translate(-50%,-50%) scale(1.25); } 100% { transform: translate(-50%,-50%) scale(1); } }
@keyframes introLogo {
  from { clip-path: inset(0 100% 0 0); transform: scale(1.12); filter: blur(6px) brightness(1.8); }
  to   { clip-path: inset(0 0 0 0);    transform: scale(1);    filter: blur(0) brightness(1); }
}
@keyframes introWipeLine { from { left: 0; opacity: 1; } 85% { opacity: 1; } to { left: 100%; opacity: 0; } }
@keyframes introSweep {
  from { opacity: 1; transform: translateX(-120%) skewX(-18deg); }
  to   { opacity: 1; transform: translateX(320%) skewX(-18deg); }
}
@keyframes introPunch {
  0%   { transform: translateX(0) scale(1); filter: brightness(1); }
  20%  { transform: translateX(-6px) scale(1.035); filter: brightness(1.7) drop-shadow(0 0 16px rgba(245,165,36,.8)); }
  40%  { transform: translateX(5px) scale(1.02); filter: brightness(1.3); }
  60%  { transform: translateX(-2px) scale(1.03); filter: brightness(1.5) drop-shadow(0 0 22px rgba(245,165,36,.6)); }
  100% { transform: translateX(0) scale(1); filter: brightness(1); }
}
@keyframes introFlash   { 0% { opacity: 0; } 12% { opacity: .18; } 100% { opacity: 0; } }
@keyframes introLogoOut {
  from { opacity: 1; transform: scale(1); filter: blur(0); }
  to   { opacity: 0; transform: scale(1.3); filter: blur(10px); }
}

@media (max-width: 640px) {
  .intro-label { display: none; }
  .intro-corner { width: 28px; height: 28px; top: auto; }
  .intro-corner--tl, .intro-corner--tr { top: 16px; }
  .intro-corner--bl, .intro-corner--br { bottom: 16px; }
  .intro-corner--tl, .intro-corner--bl { left: 16px; }
  .intro-corner--tr, .intro-corner--br { right: 16px; }
}
@media (prefers-reduced-motion: reduce) { #intro { display: none !important; } }