/* PCBuilder — tela de início (overlay antes do comparador). Paleta de teste: branco + dourado + azul. */
.intro-screen {
  --intro-gold:#c9962b; --intro-gold-2:#e8bd55; --intro-gold-soft:#f6e3b4;
  --intro-blue:#1f5fd6; --intro-blue-2:#4c8dff; --intro-ink:#0f1a2e; --intro-muted:#5b6578;
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  overflow:hidden; isolation:isolate;
  background:#e4ded0;
  color:var(--intro-ink);
  font-family:'Manrope',sans-serif;
  transition:opacity .6s cubic-bezier(.22,1,.36,1), visibility .6s, transform .7s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform;
}
/* saída suave: desliza para cima e desvanece (sem desfoque, que pesava e fazia piscar) */
.intro-screen.is-leaving { opacity:0; visibility:hidden; transform:translateY(-4%); pointer-events:none; }
.intro-screen.is-leaving .intro-bg, .intro-screen.is-leaving .intro-hud { animation-play-state:paused; }
.intro-screen[hidden] { display:none; }
body.intro-open { overflow:hidden; }

/* ---------- fundo ---------- */
.intro-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.intro-glow { position:absolute; width:52vmax; height:52vmax; border-radius:50%; filter:blur(90px); will-change:transform; }
.intro-glow.g1 { left:-14vmax; top:-18vmax; background:radial-gradient(circle,var(--intro-gold-2),transparent 65%); opacity:.35; animation:intro-drift-a 16s ease-in-out infinite alternate; }
.intro-glow.g2 { right:-18vmax; bottom:-22vmax; background:radial-gradient(circle,var(--intro-blue-2),transparent 65%); opacity:.28; animation:intro-drift-b 19s ease-in-out infinite alternate; }
.intro-glow.g3 { left:50%; top:52%; width:30vmax; height:30vmax; transform:translate(-50%,-50%); background:radial-gradient(circle,#efe2c0,transparent 65%); opacity:.9; animation:intro-pulse 7s ease-in-out infinite; }
@keyframes intro-drift-a { to { transform:translate(10vmax,8vmax) scale(1.1); } }
@keyframes intro-drift-b { to { transform:translate(-9vmax,-7vmax) scale(1.15); } }
@keyframes intro-pulse { 50% { opacity:.6; transform:translate(-50%,-50%) scale(1.15); } }

/* chão em perspetiva a deslizar */
.intro-floor { position:absolute; left:-50%; right:-50%; bottom:-6%; height:55%; transform:perspective(520px) rotateX(62deg); transform-origin:50% 100%;
  background-image:linear-gradient(#1f5fd626 1px,transparent 1px),linear-gradient(90deg,#1f5fd626 1px,transparent 1px);
  background-size:64px 64px; animation:intro-floor 3.2s linear infinite;
  mask-image:linear-gradient(to top,#000 10%,transparent 85%); -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%); }
@keyframes intro-floor { to { background-position:0 64px; } }

/* trilhas de circuito */
.intro-traces { position:absolute; inset:0; width:100%; height:100%; opacity:.7; }
.intro-traces path { fill:none; stroke:url(#introTraceGrad); stroke-width:1.4; stroke-linecap:round; stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:intro-draw 2.4s cubic-bezier(.65,0,.35,1) forwards; animation-delay:var(--d,0s); }
.intro-traces circle { fill:var(--intro-gold); opacity:0; animation:intro-dot .5s ease forwards; animation-delay:var(--d,0s); }
@keyframes intro-draw { to { stroke-dashoffset:0; } }
@keyframes intro-dot { to { opacity:1; } }

/* partículas */
.intro-particles { position:absolute; inset:0; }
.intro-particles i { position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%; background:var(--intro-gold-2); box-shadow:0 0 6px var(--intro-gold); opacity:0; animation:intro-rise linear infinite; }
.intro-particles i:nth-child(3n) { background:var(--intro-blue-2); box-shadow:0 0 6px var(--intro-blue); }
@keyframes intro-rise { 0% { opacity:0; transform:translateY(0); } 15% { opacity:.8; } 100% { opacity:0; transform:translateY(-105vh); } }

/* vinheta */
.intro-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 50%,#d6cfbfcc 100%); }

/* ---------- conteúdo ---------- */
.intro-content { position:relative; width:min(760px,100%); padding:32px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; }

.intro-logo-wrap { position:relative; width:clamp(140px,22vmin,210px); aspect-ratio:1; display:grid; place-items:center; margin-bottom:clamp(18px,3.5vh,34px);
  opacity:0; transform:scale(.6) translateY(20px); animation:intro-logo-in 1.1s cubic-bezier(.16,1,.3,1) .15s forwards; will-change:transform; }
.intro-logo-wrap::before { content:""; position:absolute; inset:2%; border-radius:50%; z-index:-1;
  background:conic-gradient(from 0deg,var(--intro-gold-2),#fff1c4,var(--intro-gold),var(--intro-gold-2)); filter:blur(28px); opacity:0; animation:intro-spin 9s linear infinite; }
.intro-ring { position:absolute; inset:-10%; border-radius:50%; border:1px solid #c9962b55; }
.intro-ring::before { content:""; position:absolute; top:-3px; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:var(--intro-gold); box-shadow:0 0 10px var(--intro-gold-2); }
.intro-ring.r1 { animation:intro-spin 6s linear infinite; }
.intro-ring.r2 { inset:-22%; border-style:dashed; border-color:#c9962b40; animation:intro-spin 14s linear infinite reverse; }
.intro-ring.r2::before { background:var(--intro-gold-2); box-shadow:0 0 10px var(--intro-gold); }
.intro-logo { width:92%; height:92%; object-fit:contain;  animation:intro-float 5s ease-in-out 1.3s infinite; }
@keyframes intro-logo-in { to { opacity:1; transform:none; } }
@keyframes intro-spin { to { transform:rotate(360deg); } }
@keyframes intro-float { 50% { transform:translateY(-8px); } }

.intro-eyebrow { display:inline-flex; align-items:center; gap:10px; padding:7px 14px; border:1px solid #c9962b40; border-radius:999px; background:#f2ede2b3; backdrop-filter:blur(6px);
  color:#8a6a1f; font:600 .66rem/1 'IBM Plex Mono',monospace; letter-spacing:.16em; text-transform:uppercase; }
.intro-eyebrow span { width:6px; height:6px; border-radius:50%; background:var(--intro-blue); box-shadow:0 0 8px var(--intro-blue-2); animation:intro-blink 1.8s ease-in-out infinite; }
@keyframes intro-blink { 50% { opacity:.25; } }

.intro-title { margin:18px 0 0; font:300 clamp(2.8rem,8.5vw,5.8rem)/1 'Jost',sans-serif; letter-spacing:.01em; color:var(--intro-ink); }
.intro-title .word { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; }
.intro-title .word > span { display:inline-block; transform:translateY(110%); animation:intro-word-up .9s cubic-bezier(.16,1,.3,1) forwards; }
.intro-title .accent { background:linear-gradient(100deg,#b07d1c,var(--intro-gold-2) 40%,#fff1c4 52%,var(--intro-gold) 64%,#b07d1c); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:intro-word-up .9s cubic-bezier(.16,1,.3,1) forwards, intro-sheen 5s ease-in-out 1.6s infinite; }
@keyframes intro-word-up { to { transform:none; } }
@keyframes intro-sheen { 50% { background-position:100% 0; } }

.intro-sub { max-width:540px; margin:20px 0 0; color:var(--intro-muted); font-size:clamp(.98rem,2.2vw,1.12rem); line-height:1.6; }
.intro-sub strong { color:var(--intro-blue); font-weight:700; }

.intro-actions { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:clamp(24px,4.5vh,38px); }
.intro-actions .intro-btn-primary { min-height:62px; min-width:300px; justify-content:center; padding:0 18px 0 34px; border-radius:18px; font-size:1.08rem; letter-spacing:.01em; }
.intro-btn-primary .intro-btn-chip { display:grid; place-items:center; width:38px; height:38px; margin-left:8px; border-radius:12px; background:#ffffff2b; box-shadow:inset 0 0 0 1px #ffffff4d; transition:transform .3s cubic-bezier(.23,1,.32,1), background .3s; }
.intro-btn-primary:hover .intro-btn-chip { background:#ffffff40; transform:translateX(3px); }
.intro-btn-primary .intro-btn-chip svg { width:18px; height:18px; }
.intro-actions .intro-btn-ghost { min-height:44px; padding:0 20px; border-radius:999px; font-size:.88rem; gap:9px; }
.intro-actions .intro-btn-ghost svg { width:18px; height:18px; color:var(--intro-gold); }
.intro-actions .intro-btn-ghost:hover svg { transform:rotate(-8deg); }
.intro-btn { position:relative; display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 26px; border-radius:14px; font:700 .95rem/1 'Manrope',sans-serif; cursor:pointer; overflow:hidden; text-decoration:none;
  transition:transform .25s cubic-bezier(.23,1,.32,1), box-shadow .25s ease, border-color .25s ease, background-color .25s ease; }
.intro-btn svg { width:18px; height:18px; transition:transform .25s cubic-bezier(.23,1,.32,1); }
.intro-btn:hover svg { transform:translateX(4px); }
.intro-btn:active { transform:scale(.97); }
.intro-btn:focus-visible { outline:2px solid var(--intro-gold); outline-offset:3px; }
.intro-btn-primary { border:1px solid #1a4fb8; color:#fff; background:linear-gradient(135deg,#2f72ef,#1a4cb5); box-shadow:0 10px 26px #1f5fd640, inset 0 1px #ffffff40; }
.intro-btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 36px #1f5fd659, inset 0 1px #ffffff55; }
.intro-btn-primary::after { content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,#ffe7a866,transparent); animation:intro-shine 3.6s ease-in-out 2.2s infinite; }
@keyframes intro-shine { 0%,60% { left:-60%; } 100% { left:140%; } }
.intro-btn-ghost { border:1px solid #c9962b80; color:#7a5c16; background:#f2ede2cc; backdrop-filter:blur(6px); }
.intro-btn-ghost:hover { transform:translateY(-2px); border-color:var(--intro-gold); background:#efe3c6; box-shadow:0 10px 24px #c9962b26; }

.intro-stats { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; margin-top:clamp(26px,5vh,44px); padding-top:20px; border-top:1px solid #c9962b33; color:var(--intro-muted); font:500 .74rem/1.3 'Manrope',sans-serif; }
.intro-stats b { display:block; margin-bottom:3px; color:var(--intro-blue); font:600 1.05rem/1 'IBM Plex Mono',monospace; }

.intro-skip { position:absolute; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vh,28px); padding:8px 12px; border:0; background:none; color:var(--intro-muted); font:500 .74rem/1 'Manrope',sans-serif; letter-spacing:.04em; cursor:pointer; opacity:0; animation:intro-fade 1s ease 2.4s forwards; }
.intro-skip:hover { color:var(--intro-blue); }
.intro-skip:focus-visible { outline:2px solid var(--intro-gold); border-radius:8px; }

/* ---------- HUD futurista ---------- */
.intro-hud { position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0; animation:intro-fade 1.2s ease 1s forwards; }
.hud-corner { position:absolute; width:46px; height:46px; border:0 solid #a8781f; }
.hud-corner.tl { top:22px; left:22px; border-width:1.5px 0 0 1.5px; }
.hud-corner.tr { top:22px; right:22px; border-width:1.5px 1.5px 0 0; }
.hud-corner.bl { bottom:22px; left:22px; border-width:0 0 1.5px 1.5px; }
.hud-corner.br { bottom:22px; right:22px; border-width:0 1.5px 1.5px 0; }
.hud-corner::after { content:""; position:absolute; width:5px; height:5px; background:var(--intro-blue); }
.hud-corner.tl::after { top:6px; left:6px; } .hud-corner.tr::after { top:6px; right:6px; }
.hud-corner.bl::after { bottom:6px; left:6px; } .hud-corner.br::after { bottom:6px; right:6px; }

.hud-scan { position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,#1f5fd659 20%,#c9962b8c 50%,#1f5fd659 80%,transparent); box-shadow:0 0 12px #c9962b55; animation:hud-scan 6s linear infinite; }
@keyframes hud-scan { from { transform:translateY(0); } to { transform:translateY(100vh); } }

.hud-ruler { position:absolute; top:50%; width:14px; height:44vh; transform:translateY(-50%);
  background:repeating-linear-gradient(to bottom,#a8781f99 0 1px,transparent 1px 12px),repeating-linear-gradient(to bottom,#a8781f 0 1px,transparent 1px 60px); background-size:8px 100%,14px 100%; background-repeat:no-repeat; }
.hud-ruler.left { left:34px; } .hud-ruler.right { right:34px; transform:translateY(-50%) scaleX(-1); }

.hud-label { position:absolute; color:#7a6430; font:500 .62rem/1 'IBM Plex Mono',monospace; letter-spacing:.14em; }
.hud-label.tl { top:34px; left:82px; } .hud-label.tr { top:34px; right:82px; } .hud-label.bl { bottom:34px; left:82px; }
.hud-label i { display:inline-block; width:6px; height:6px; margin:0 6px; border-radius:50%; background:#2fbf71; box-shadow:0 0 6px #2fbf71; vertical-align:0; animation:intro-blink 1.6s ease-in-out infinite; }

.hud-readout { position:absolute; right:68px; top:50%; display:flex; flex-direction:column; gap:12px; transform:translateY(-50%); }
.hud-readout b { position:relative; width:96px; padding-bottom:5px; color:#5b6578; font:500 .58rem/1 'IBM Plex Mono',monospace; letter-spacing:.14em; text-align:right; }
.hud-readout b::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:#1f5fd61f; }
.hud-readout b::before { content:""; position:absolute; left:0; bottom:0; height:2px; background:linear-gradient(90deg,var(--intro-blue),var(--intro-gold)); animation:hud-bar 3.2s ease-in-out infinite alternate; }
.hud-readout b:nth-child(2)::before { animation-delay:-.8s; } .hud-readout b:nth-child(3)::before { animation-delay:-1.6s; } .hud-readout b:nth-child(4)::before { animation-delay:-2.4s; }
@keyframes hud-bar { from { width:20%; } to { width:92%; } }

/* mostrador à volta da logo */
.intro-dial { position:absolute; inset:-34%; width:168%; height:168%; overflow:visible; animation:intro-spin 40s linear infinite; }
.intro-dial circle { fill:none; stroke:#a8781f40; stroke-width:.8; }
.intro-dial .ticks { stroke:#a8781f80; stroke-width:4; stroke-dasharray:.6 5.4; }
.intro-dial .arc { fill:none; stroke:var(--intro-blue); stroke-width:1.4; stroke-linecap:round; opacity:.6; }

@media (max-width:900px) { .hud-readout, .hud-label.tr { display:none; } }
@media (max-width:560px) { .hud-ruler, .hud-label.bl { display:none; } .hud-corner { width:28px; height:28px; } .hud-label.tl { left:56px; } }

/* entrada escalonada */
.intro-reveal { opacity:0; transform:translateY(16px); animation:intro-fade-up .8s cubic-bezier(.16,1,.3,1) forwards; animation-delay:var(--d,0s); }
@keyframes intro-fade-up { to { opacity:1; transform:none; } }
@keyframes intro-fade { to { opacity:1; } }

/* parallax do rato (variáveis definidas por intro.js) */
.intro-parallax { transform:translate3d(calc(var(--mx,0) * var(--depth,0) * 1px),calc(var(--my,0) * var(--depth,0) * 1px),0); transition:transform .4s cubic-bezier(.23,1,.32,1); }

@media (max-width:560px) {
  .intro-btn { width:100%; justify-content:center; }
  .intro-actions { width:100%; max-width:340px; }
  .intro-stats { gap:14px 22px; }
  .intro-floor { background-size:44px 44px; }
}
@media (max-height:640px) { .intro-stats { display:none; } }

@media (prefers-reduced-motion:reduce) {
  .intro-screen *, .intro-screen *::before, .intro-screen *::after { animation-duration:.01ms!important; animation-delay:0s!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .intro-particles, .intro-traces { display:none; }
  .intro-parallax { transform:none!important; }
}