/* =====================================================================
   HORROR.CSS — Cyber Horror Core / VHS 80s re-skin
   Standalone. Re-styles the same portfolio markup used in classic.html.
   Palettes via [data-hpal]: sangue (default), vhs, toxico.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #050101;
  --bg2:       #0a0203;
  --panel:     rgba(17,4,6,.86);
  --panel-2:   rgba(24,6,8,.9);
  --border:    rgba(227,6,19,.30);
  --border-br: rgba(255,42,42,.60);
  --text:      #ece0e0;
  --muted:     #ab8f8f;
  --accent:    #ff2020;
  --accent-2:  #ff5a5a;
  --glitch-a:  rgba(255,42,42,.75);
  --glitch-b:  rgba(0,190,255,.50);
  --term:      #35ff8f;
  --glow:      rgba(227,6,19,.55);

  --f-display: 'Creepster', 'VT323', cursive;
  --f-term:    'VT323', 'Share Tech Mono', monospace;
  --f-body:    'Share Tech Mono', 'VT323', monospace;
}

:root[data-hpal="vhs"] {
  --accent: #ff2e88; --accent-2: #2ee6ff;
  --glitch-a: rgba(255,46,136,.75); --glitch-b: rgba(46,230,255,.6);
  --term: #2ee6ff; --border: rgba(255,46,136,.32); --border-br: rgba(46,230,255,.6);
  --glow: rgba(255,46,136,.55);
}
:root[data-hpal="toxico"] {
  --bg: #030601; --bg2: #050a02;
  --accent: #5bff1a; --accent-2: #b6ff5a;
  --glitch-a: rgba(91,255,26,.7); --glitch-b: rgba(255,0,80,.5);
  --term: #5bff1a; --border: rgba(91,255,26,.3); --border-br: rgba(182,255,90,.6);
  --glow: rgba(91,255,26,.45);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at 78% 8%, rgba(227,6,19,.14), transparent 45%),
    radial-gradient(circle at 12% 82%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 45%),
    linear-gradient(180deg, var(--bg2), var(--bg) 40%);
  background-attachment: fixed;
}

::selection { background: var(--accent); color: #000; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* =====================================================================
   CRT / VHS GLOBAL OVERLAYS
   ===================================================================== */
.crt, .crt-roll, .crt-noise, .crt-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 9990;
}
.crt {
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 4px);
  mix-blend-mode: multiply; opacity: .5;
}
.crt-roll {
  background: linear-gradient(to bottom, transparent 0%, rgba(255,60,60,.05) 46%, rgba(255,255,255,.05) 50%, rgba(255,60,60,.05) 54%, transparent 100%);
  height: 60%; animation: crtRoll 8s linear infinite;
}
@keyframes crtRoll { 0% { transform: translateY(-70%); } 100% { transform: translateY(230%); } }
.crt-noise {
  opacity: .06; z-index: 9991;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: crtNoise .4s steps(3) infinite;
}
@keyframes crtNoise {
  0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(-2%,3%)}
}
.crt-vignette {
  z-index: 9989;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.55) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .crt-roll, .crt-noise { animation: none; }
}

/* =====================================================================
   RISING PARTICLES (blood embers)
   ===================================================================== */
.rising-particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.rising-particles .drop {
  position: absolute; bottom: -20px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  opacity: .5; filter: blur(.4px);
  animation: rise linear infinite;
}
@keyframes rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: .6; }
  90% { opacity: .35; }
  100% { transform: translateY(-108vh) translateX(var(--drift,0)); opacity: 0; }
}

/* =====================================================================
   SIDE RAIL
   ===================================================================== */
.side-rail {
  position: fixed; left: 18px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 16px; z-index: 100;
}
.rail-dot {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 8px;
  background: rgba(10,2,3,.6); color: var(--muted);
  font-size: 14px; transition: all .25s ease; position: relative;
}
.rail-dot:hover { color: var(--accent); border-color: var(--border-br); }
.rail-dot.active {
  color: #000; background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 18px var(--glow);
}

/* =====================================================================
   WINDOWS (shared chrome)
   ===================================================================== */
.window {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 60px rgba(227,6,19,.05);
  backdrop-filter: blur(3px);
  position: relative;
}
.window::after { /* faint distress edge */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,42,42,.05);
}
.window-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(to right, rgba(227,6,19,.12), rgba(227,6,19,.02));
  border-bottom: 1px solid var(--border);
  font-family: var(--f-term); font-size: 18px; letter-spacing: .5px;
}
.traffic { display: flex; gap: 7px; }
.t-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.t-dot.red { background: #ff2b2b; color: #ff2b2b; }
.t-dot.yellow { background: #b36b00; color: #b36b00; }
.t-dot.green { background: #2f6b2f; color: #2f6b2f; }
.window-title { color: var(--accent-2); display: flex; align-items: center; gap: 7px; }
.window-title i { color: var(--accent); }
.win-actions { margin-left: auto; display: flex; gap: 12px; color: var(--muted); font-size: 13px; }

.window-body { padding: 26px; }

.window-footer {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--border);
  font-family: var(--f-term); font-size: 17px; color: var(--muted);
  background: rgba(227,6,19,.04);
}
.window-footer .accent { color: var(--accent); }
.footer-socials { display: flex; gap: 14px; }
.footer-socials a { color: var(--muted); transition: color .2s, transform .2s; }
.footer-socials a:hover { color: var(--accent); transform: translateY(-2px); }
.footer-cta { margin-left: auto; color: var(--accent-2); font-family: var(--f-term); }
.footer-cta:hover { color: var(--accent); text-shadow: 0 0 12px var(--glow); }
.local-time { color: var(--term); }

/* =====================================================================
   LANG + PALETTE SWITCHERS (in window bars)
   ===================================================================== */
.lang-switcher, .hpal-switcher { display: flex; gap: 4px; align-items: center; }
.lang-switcher { margin-left: auto; }
.lang-btn {
  font-family: var(--f-term); font-size: 15px; letter-spacing: 1px;
  padding: 2px 8px; border: 1px solid var(--border); border-radius: 4px;
  background: transparent; color: var(--muted); cursor: pointer; transition: all .2s;
}
.lang-btn:hover { color: var(--accent); }
.lang-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }

.hpal-dot {
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  cursor: pointer; padding: 0; background: var(--dot,#fff); transition: transform .2s;
}
.hpal-dot:hover { transform: scale(1.2); }
.hpal-dot.active { box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--dot); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { min-height: 100vh; display: grid; place-items: center; padding: 90px 24px 60px; position: relative; z-index: 1; }
.hero-window { width: min(1000px, 100%); }
.hero-body { padding: 46px 40px 54px; position: relative; overflow: hidden; }
.crumb { font-family: var(--f-term); color: var(--term); font-size: 18px; letter-spacing: 1px; }
.hero-greeting { font-family: var(--f-term); font-size: 22px; color: var(--muted); margin-top: 8px; }
.hero-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(46px, 8vw, 104px); line-height: .95; margin: 10px 0 20px;
  color: var(--text); letter-spacing: 1px;
  text-shadow: 3px 0 var(--glitch-a), -3px 0 var(--glitch-b);
  animation: heroGlitch 5s infinite steps(1);
}
.hero-title .accent, .accent { color: var(--accent); }
@keyframes heroGlitch {
  0%,92%,100% { transform: translate(0,0); }
  93% { transform: translate(-4px,2px); text-shadow: 5px 0 var(--glitch-a), -5px 0 var(--glitch-b); }
  95% { transform: translate(4px,-2px); }
  97% { transform: translate(-2px,0); }
}
.hero-sub { max-width: 620px; color: var(--muted); font-size: 1.05rem; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-glow, .btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 6px; font-family: var(--f-term);
  font-size: 19px; letter-spacing: 1px; cursor: pointer; transition: all .3s;
}
.btn-glow { background: var(--accent); color: #000; border: 1px solid var(--accent); box-shadow: 0 0 22px var(--glow); }
.btn-glow:hover { box-shadow: 0 0 36px var(--glow); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--accent-2); border: 1px solid var(--border-br); }
.btn-ghost:hover { background: rgba(227,6,19,.12); color: #fff; }
.shape { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .35; z-index: -1; }
.shape-1 { width: 260px; height: 260px; background: var(--accent); top: -60px; right: -40px; }
.shape-2 { width: 180px; height: 180px; background: var(--accent-2); bottom: -50px; right: 120px; opacity: .18; }
.shape-3 { width: 140px; height: 140px; background: #7a000c; bottom: 20px; left: -40px; }

/* =====================================================================
   SECTIONS
   ===================================================================== */
.section { padding: 80px 24px; position: relative; z-index: 1; }
.container { width: min(1100px, 100%); margin: 0 auto; }
.showcase-tag {
  font-family: var(--f-term); font-size: 17px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.showcase-tag::before { content: "// "; opacity: .6; }
.showcase-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(34px, 5.4vw, 68px); line-height: 1; margin-bottom: 40px;
  color: var(--text); letter-spacing: 1px;
  text-shadow: 2px 0 var(--glitch-a), -2px 0 var(--glitch-b);
}
.drag-hint { font-family: var(--f-term); color: var(--muted); font-size: 17px; margin-bottom: 18px; }
.drag-hint i { color: var(--accent); }

/* =====================================================================
   SOBRE — draggable desktop panels
   ===================================================================== */
.desktop-window { }
.desktop-canvas {
  position: relative; height: 640px; padding: 12px;
  background:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(227,6,19,.03) 30px 31px),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(227,6,19,.03) 30px 31px);
  overflow: hidden;
}
.panel {
  position: absolute; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.6);
}
.panel.dragging { box-shadow: 0 0 0 1px var(--accent), 0 26px 60px rgba(0,0,0,.8); }
.panel-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 11px; cursor: grab;
  background: linear-gradient(to right, rgba(227,6,19,.14), transparent);
  border-bottom: 1px solid var(--border); font-family: var(--f-term); font-size: 16px;
  color: var(--accent-2);
}
.panel-bar:active { cursor: grabbing; }
.panel-actions { display: flex; gap: 9px; color: var(--muted); font-size: 11px; }
.panel-body { padding: 16px; }
.panel-body.about-text p { margin-bottom: 11px; font-size: .98rem; color: var(--text); }
.panel-body.about-text .accent { color: var(--accent); font-weight: 700; }
.panel-portrait .panel-img {
  width: 100%; height: auto; display: block;
  filter: grayscale(1) contrast(1.25) sepia(.5) hue-rotate(-30deg) saturate(3) brightness(.9);
  mix-blend-mode: luminosity;
}
.panel-portrait { background: #1a0305; }
.panel-portrait:hover .panel-img { filter: grayscale(.2) contrast(1.2) saturate(1.4); }
.small-text p { font-size: .9rem; color: var(--muted); margin-bottom: 8px; }
.small-text .accent { color: var(--accent); }
.line-num { color: var(--term); font-family: var(--f-term); margin-right: 6px; }

/* =====================================================================
   EXPERIÊNCIA
   ===================================================================== */
.exp-list { display: flex; flex-direction: column; gap: 24px; }
.exp-window.featured { border-color: var(--border-br); box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(227,6,19,.12); }
.live-badge {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-term); font-size: 15px; color: var(--accent-2);
  padding: 1px 9px; border: 1px solid var(--border-br); border-radius: 20px;
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.exp-body { padding: 22px 26px; }
.exp-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.exp-index { font-family: var(--f-display); font-size: 30px; color: var(--accent); line-height: 1; }
.exp-date { font-family: var(--f-term); font-size: 17px; color: var(--muted); letter-spacing: 1px; }
.exp-role { font-size: 1.25rem; margin-bottom: 8px; color: var(--text); font-weight: 700; }
.exp-company { color: var(--accent-2); font-weight: 400; font-size: 1rem; }
.exp-body p { color: var(--muted); margin-bottom: 12px; }
.exp-bullets { list-style: none; margin-bottom: 14px; }
.exp-bullets li { position: relative; padding-left: 22px; margin-bottom: 7px; color: var(--text); font-size: .95rem; }
.exp-bullets li::before { content: "›"; position: absolute; left: 4px; color: var(--accent); font-family: var(--f-term); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-family: var(--f-term); font-size: 15px; letter-spacing: .5px;
  padding: 3px 11px; border: 1px solid var(--border); border-radius: 4px;
  color: var(--accent-2); background: rgba(227,6,19,.05);
}

/* =====================================================================
   HABILIDADES
   ===================================================================== */
.skills-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.skill-col h4 { font-family: var(--f-term); font-size: 20px; color: var(--accent); margin-bottom: 16px; letter-spacing: 1px; }
.bracket { color: var(--term); }
.skbar { margin-bottom: 15px; }
.skbar > span { display: block; font-size: .9rem; margin-bottom: 5px; color: var(--text); }
.track { height: 7px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.fill {
  height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(to right, #7a000c, var(--accent));
  box-shadow: 0 0 12px var(--glow); transition: width 1.1s cubic-bezier(.22,1,.36,1);
}
.skbar em { font-family: var(--f-term); font-size: 14px; color: var(--muted); font-style: normal; letter-spacing: 1px; }

/* =====================================================================
   PROJETOS
   ===================================================================== */
.proj-header { padding: 26px 26px 6px; }
.proj-statement {
  font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 3.6vw, 46px);
  line-height: 1.05; color: var(--text); letter-spacing: 1px;
  text-shadow: 2px 0 var(--glitch-a), -2px 0 var(--glitch-b);
}
.proj-subtitle { color: var(--muted); margin-top: 12px; max-width: 640px; }
.proj-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 26px; }
.proj-filter {
  font-family: var(--f-term); font-size: 16px; letter-spacing: 1px;
  padding: 5px 16px; border: 1px solid var(--border); border-radius: 4px;
  background: transparent; color: var(--muted); cursor: pointer; transition: all .25s;
}
.proj-filter:hover { color: var(--accent); border-color: var(--border-br); }
.proj-filter.active { background: var(--accent); color: #000; border-color: var(--accent); box-shadow: 0 0 16px var(--glow); }
.proj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 6px 26px 30px; }
.proj-card {
  display: block; padding: 20px; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(20,4,6,.6); transition: all .3s ease; position: relative; overflow: hidden;
}
.proj-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(227,6,19,.06) 3px 4px);
}
.proj-card:hover {
  border-color: var(--border-br); transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 26px rgba(227,6,19,.18);
}
.proj-card:hover::before { opacity: 1; }
.proj-card:hover .proj-card-name { text-shadow: 2px 0 var(--glitch-a), -2px 0 var(--glitch-b); }
.proj-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.proj-card-name { font-size: 1.08rem; color: var(--text); font-weight: 700; }
.proj-cat-badge {
  font-family: var(--f-term); font-size: 13px; letter-spacing: 1px;
  padding: 2px 9px; border: 1px solid var(--border-br); border-radius: 4px;
  color: var(--accent); white-space: nowrap; height: fit-content;
}
.proj-card-stack { font-family: var(--f-term); font-size: 16px; color: var(--accent-2); margin-bottom: 10px; }
.proj-card-desc { color: var(--muted); font-size: .93rem; margin-bottom: 14px; }
.proj-card-link { font-family: var(--f-term); font-size: 16px; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; }
.proj-card.hidden { display: none; }

/* =====================================================================
   CONTATO (terminal)
   ===================================================================== */
.contact-body { padding: 26px; font-family: var(--f-term); font-size: 19px; }
.terminal-line { margin-bottom: 10px; color: var(--text); }
.terminal-line .prompt { color: var(--term); margin-right: 8px; }
.terminal-line.out { color: var(--muted); padding-left: 4px; }
.cursor-blink { animation: blink 1s steps(1) infinite; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }
.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0; }
.contact-card-item {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1px solid var(--border); border-radius: 8px; background: rgba(20,4,6,.5);
  transition: all .25s;
}
.contact-card-item:hover { border-color: var(--border-br); background: rgba(227,6,19,.08); transform: translateY(-2px); }
.contact-card-item i { color: var(--accent); font-size: 20px; width: 24px; text-align: center; }
.contact-card-item strong { display: block; color: var(--text); font-size: 16px; }
.contact-card-item span { color: var(--muted); font-size: 15px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { padding: 40px 24px; border-top: 1px solid var(--border); position: relative; z-index: 1; }
.footer-inner { width: min(1100px,100%); margin: 0 auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer .logo { font-family: var(--f-display); font-size: 30px; color: var(--text); }
.footer .logo .accent { color: var(--accent); }
.footer p { color: var(--muted); font-family: var(--f-term); font-size: 17px; }
.footer p .accent { color: var(--accent); }
.footer .footer-socials { margin-left: auto; }

/* =====================================================================
   VERSION NAV (return to portal / switch version)
   ===================================================================== */
.version-nav {
  position: fixed; top: 16px; right: 16px; z-index: 200;
  display: flex; gap: 8px; align-items: center;
}
.version-nav a {
  font-family: var(--f-term); font-size: 16px; letter-spacing: 1px;
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 5px;
  background: rgba(10,2,3,.75); color: var(--muted); backdrop-filter: blur(4px);
  transition: all .25s; display: inline-flex; align-items: center; gap: 6px;
}
.version-nav a:hover { color: var(--accent); border-color: var(--border-br); box-shadow: 0 0 16px var(--glow); }
.version-nav a.portal-link { color: var(--accent-2); }

/* =====================================================================
   SCROLL REVEAL (matches script.js .animated toggle)
   ===================================================================== */
[data-anime] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
[data-anime].animated { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-anime] { opacity: 1; transform: none; transition: none; }
  .hero-title { animation: none; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
  .skills-body { grid-template-columns: 1fr 1fr; }
  .desktop-canvas { height: 560px; }
}
@media (max-width: 720px) {
  .side-rail { display: none; }
  .section { padding: 60px 16px; }
  /* hero: layout em bloco no mobile p/ a janela não crescer pelo conteúdo */
  .hero { display: block; padding: 80px 16px 50px; }
  .hero-window, .win-shell--hero { width: 100%; max-width: 100%; }
  .hero-body { padding: 32px 22px 40px; }
  .hero-title { font-size: clamp(34px, 11vw, 60px); word-break: break-word; }
  .hero-sub { max-width: 100%; }
  .skills-body { grid-template-columns: 1fr; }
  .proj-grid { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
  .window-body { padding: 18px; }
  .footer-cta { margin-left: 0; }
  .version-nav a span.label { display: none; }
  /* draggable desktop -> readable stacked flow on mobile */
  .desktop-canvas { height: auto; display: flex; flex-direction: column; gap: 14px; }
  .desktop-canvas .panel { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; }
  .panel-bar { cursor: default; }
  /* controles que só fazem sentido com teclado/mouse: fora no mobile */
  #cmdk-launch { display: none; }
  .drag-hint { display: none; }
  #disc-chip { bottom: 16px; left: 16px; }
}

/* =====================================================================
   ██ AGGRESSIVE / CYBERPUNK / BLOOD OVERRIDES ██
   Appended layer — cranks intensity: neon-notched cards, blood drips,
   glitch, hazard tags, sharper chrome. Cascade wins over base rules.
   ===================================================================== */
:root { --glow: rgba(227,6,19,.8); --cyan: #00e5ff; --blood-deep: #7a000c; }
:root[data-hpal="vhs"]    { --cyan: #2ee6ff; }
:root[data-hpal="toxico"] { --cyan: #00ff9d; }

/* Heavier atmosphere */
.crt { opacity: .6; }
.crt-vignette { background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.72) 100%); }
.crt-noise { opacity: .09; }

/* Full-screen glitch flash */
.glitch-flash {
  position: fixed; inset: 0; z-index: 9992; pointer-events: none; opacity: 0;
  mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(255,0,60,.10), rgba(0,229,255,.07));
  animation: flashGlitch 8.5s infinite steps(1);
}
@keyframes flashGlitch {
  0%,95%,100% { opacity: 0; transform: translateX(0); }
  96% { opacity: .55; transform: translateX(-7px) scaleY(1.01); }
  97% { opacity: .15; transform: translateX(7px); }
  98% { opacity: .6; transform: translateX(-3px); }
  99% { opacity: .2; transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) { .glitch-flash { animation: none; } }

/* Blood dripping across the very top of the screen */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 9993;
  pointer-events: none; background-repeat: repeat-x; background-position: top; background-size: 200px 44px;
  filter: drop-shadow(0 3px 5px rgba(120,0,10,.7));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='44'%3E%3Cg fill='%23a3000b'%3E%3Crect width='200' height='7'/%3E%3Cpath d='M22 7c-3 0-4 12-2 20 1 4 3 4 4 0 2-8 1-20-2-20z'/%3E%3Ccircle cx='22' cy='30' r='3.2'/%3E%3Cpath d='M58 7c-2 0-3 20-1 27 1 3 3 3 4 0 2-7 -1-27-3-27z'/%3E%3Ccircle cx='58' cy='37' r='2.6'/%3E%3Cpath d='M104 7c-2 0-3 9-1 14 1 2 2 2 3 0 1-5 0-14-2-14z'/%3E%3Ccircle cx='104' cy='23' r='2.4'/%3E%3Cpath d='M140 7c-2 0-3 24-1 31 1 3 3 3 4 0 2-7 0-31-3-31z'/%3E%3Ccircle cx='140' cy='40' r='3'/%3E%3Cpath d='M178 7c-2 0-3 14-1 19 1 2 2 2 3 0 1-5 0-19-2-19z'/%3E%3Ccircle cx='178' cy='28' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Windows: neon frame + hazard underline on the bar */
.window {
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 1px rgba(255,42,42,.18), 0 22px 60px rgba(0,0,0,.72),
              0 0 46px rgba(227,6,19,.16), inset 0 0 70px rgba(227,6,19,.06);
}
.window-bar { border-bottom: 1px solid var(--accent); position: relative; }
.window-bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--cyan) 50%, var(--accent));
  box-shadow: 0 0 12px var(--glow); opacity: .8;
}
.exp-window.featured { box-shadow: 0 0 0 1px var(--accent), 0 22px 60px rgba(0,0,0,.72), 0 0 50px rgba(227,6,19,.28); }

/* HERO — bigger blood bloom + sharper CTA */
.hero-body .shape-1 { opacity: .5; filter: blur(52px); }
.hero-title { text-shadow: 4px 0 var(--glitch-a), -4px 0 var(--glitch-b), 0 0 34px rgba(227,6,19,.35); }
.btn-glow {
  clip-path: polygon(0 0, 100% 0, 100% 66%, calc(100% - 14px) 100%, 0 100%);
  box-shadow: 0 0 30px var(--glow); text-transform: uppercase; letter-spacing: 2px;
}
.btn-glow:hover { animation: btnKick .28s steps(2) 2; }
@keyframes btnKick { 0%{transform:translate(-2px,0)} 50%{transform:translate(2px,-1px)} 100%{transform:translate(0,0)} }
.btn-ghost { clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 34%); }

/* Section titles — thicker chromatic bleed */
.showcase-title, .proj-statement { text-shadow: 3px 0 var(--glitch-a), -3px 0 var(--glitch-b), 0 0 26px rgba(227,6,19,.3); }
.showcase-tag { text-shadow: 0 0 12px var(--glow); }

/* ============ PROJECT CARDS — notched neon cyberpunk ============ */
.proj-grid { gap: 22px; }
.proj-card {
  --notch: 20px;
  border: none; background: transparent; padding: 22px 22px;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
  transition: transform .25s ease, filter .25s ease;
  overflow: visible;
}
/* neon gradient frame */
.proj-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 1;
  clip-path: inherit;
  background: linear-gradient(135deg, var(--accent) 0%, transparent 32%, transparent 62%, var(--cyan) 100%);
  transition: filter .25s ease;
}
/* inner fill + baked scanlines (sits 1.5px inside the frame) */
.proj-card::after {
  content: ""; position: absolute; inset: 1.5px; z-index: 0; opacity: 1;
  clip-path: polygon(0 0, calc(100% - 19px) 0, 100% 19px, 100% 100%, 19px 100%, 0 calc(100% - 19px));
  background:
    repeating-linear-gradient(to bottom, transparent 0 3px, rgba(227,6,19,.05) 3px 4px),
    linear-gradient(160deg, #14060a, #090103);
}
.proj-card > * { position: relative; z-index: 2; }
.proj-card:hover {
  transform: translateY(-6px) skewX(-.6deg);
  filter: drop-shadow(0 0 16px var(--glow)) drop-shadow(0 0 5px var(--cyan));
}
.proj-card:hover::before { filter: brightness(1.35) saturate(1.3); }

/* card name glitch on hover (uses data-text set by JS) */
.proj-card-name.glitch { position: relative; display: inline-block; }
.proj-card-name.glitch::before, .proj-card-name.glitch::after {
  content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%;
  opacity: 0; pointer-events: none;
}
.proj-card:hover .proj-card-name.glitch::before { opacity: .9; color: var(--cyan); animation: cardGlA .38s steps(2) infinite; }
.proj-card:hover .proj-card-name.glitch::after  { opacity: .9; color: var(--accent-2); animation: cardGlB .38s steps(2) infinite; }
@keyframes cardGlA {
  0%{transform:translate(-2px,-1px);clip-path:inset(0 0 62% 0)}
  50%{transform:translate(2px,1px);clip-path:inset(42% 0 0 0)}
  100%{transform:translate(-1px,0);clip-path:inset(22% 0 34% 0)}
}
@keyframes cardGlB {
  0%{transform:translate(2px,1px);clip-path:inset(52% 0 0 0)}
  50%{transform:translate(-2px,-1px);clip-path:inset(0 0 56% 0)}
  100%{transform:translate(1px,0);clip-path:inset(32% 0 22% 0)}
}
@media (prefers-reduced-motion: reduce) {
  .proj-card:hover .proj-card-name.glitch::before,
  .proj-card:hover .proj-card-name.glitch::after { animation: none; }
}

.proj-card-stack { color: var(--cyan); text-shadow: 0 0 8px rgba(0,229,255,.3); }
.proj-card-link { color: var(--accent); text-shadow: 0 0 8px var(--glow); }
.proj-card:hover .proj-card-link i { transform: translate(3px,-3px); }
.proj-card-link i { transition: transform .2s; }

/* hazard-striped category badge */
.proj-cat-badge {
  color: #fff; border: 1px solid var(--accent); text-shadow: 0 0 6px var(--glow);
  box-shadow: 0 0 12px rgba(227,6,19,.35);
  background:
    repeating-linear-gradient(45deg, rgba(227,6,19,.30) 0 6px, transparent 6px 12px),
    rgba(10,2,3,.6);
}

/* Filters + pills sharper */
.proj-filter { clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.proj-filter.active { box-shadow: 0 0 20px var(--glow); }
.pill { border-color: var(--accent); color: #ffdede; text-shadow: 0 0 6px var(--glow); background: rgba(227,6,19,.08); }
.pill:hover { background: rgba(227,6,19,.18); }

/* Contact cards — notched + neon like project cards */
.contact-card-item {
  border: 1px solid var(--accent);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow: inset 0 0 30px rgba(227,6,19,.05);
}
.contact-card-item:hover { box-shadow: 0 0 22px var(--glow), inset 0 0 30px rgba(227,6,19,.1); }
.contact-card-item i { text-shadow: 0 0 10px var(--glow); }

/* Rail active — stronger neon */
.rail-dot.active { box-shadow: 0 0 22px var(--glow), 0 0 40px rgba(227,6,19,.35); }
.rail-dot { clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }

/* Skill fill — hotter gradient + glow pulse edge */
.fill { background: linear-gradient(to right, var(--blood-deep), var(--accent) 70%, var(--cyan)); box-shadow: 0 0 14px var(--glow); }

/* Version nav — notched */
.version-nav a { clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }

@media (max-width: 720px) {
  body::before { height: 34px; background-size: 150px 34px; }
  .proj-card { --notch: 16px; }
}

/* =====================================================================
   ██ V3 — SANGUE ESCORRENDO + CARDS TRAPÉZIO EMPILHADOS ██
   Later cascade layer: overrides the rising embers and the notched cards.
   ===================================================================== */
:root {
  --teardrop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 46'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff6060'/%3E%3Cstop offset='.45' stop-color='%23d10a17'/%3E%3Cstop offset='1' stop-color='%23640008'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 1C12 1 3 23 3 31a9 9 0 0 0 18 0C21 23 12 1 12 1Z' fill='url(%23g)'/%3E%3Cellipse cx='9' cy='28' rx='2.2' ry='4.6' fill='%23ffbcbc' opacity='.45'/%3E%3C/svg%3E");
}

/* ---- FALLING BLOOD (replaces rising embers) ---- */
.blood-fall { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bloodrop {
  position: absolute; top: 0;
  background: var(--teardrop) center / 100% 100% no-repeat;
  animation-name: bloodFall; animation-timing-function: cubic-bezier(.35,0,.65,1);
  animation-iteration-count: infinite; will-change: transform, opacity;
}
@keyframes bloodFall {
  0%   { transform: translateY(-16vh) scaleY(.85); opacity: 0; }
  7%   { opacity: 1; }
  90%  { opacity: .92; }
  100% { transform: translateY(114vh) scaleY(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .bloodrop { animation-duration: 0s !important; opacity: .25 !important; } }

/* ---- Prettier blood pooled + dripping along the very top ---- */
body::before {
  height: 48px; background-size: 360px 48px;
  filter: drop-shadow(0 4px 6px rgba(120,0,10,.75));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 48'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23b3000c'/%3E%3Cstop offset='1' stop-color='%237a0009'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23p)'%3E%3Cpath d='M0 0h360v10c-26 3-52 4-80 2-30-2-52 4-86 3-30-1-58-5-94-3-30 2-60 4-100 1z'/%3E%3Cpath d='M46 11c-4 0-6 17-3 25 1 3 5 3 6 0 3-8 1-25-3-25z'/%3E%3Ccircle cx='46' cy='35' r='4.3'/%3E%3Cpath d='M132 11c-3 0-5 27-2 34 1 3 4 3 5 0 3-7 0-34-3-34z'/%3E%3Ccircle cx='132.5' cy='44' r='3.5'/%3E%3Cpath d='M236 11c-3 0-4 12-2 17 1 2 3 2 4 0 2-5 1-17-2-17z'/%3E%3Ccircle cx='237' cy='26' r='3.3'/%3E%3Cpath d='M320 11c-4 0-5 21-2 28 1 3 4 3 5 0 3-7 1-28-3-28z'/%3E%3Ccircle cx='320.5' cy='37' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

/* (Cards de projeto voltam ao estilo neon-com-corte definido acima) */

@media (max-width: 720px) {
  body::before { height: 36px; background-size: 280px 36px; }
}

/* =====================================================================
   ██ V4 — JANELAS EM PARALELOGRAMO EMPILHADO ██
   Applies the aggressive parallelogram shape to ALL big windows,
   with a neon frame and a slab stacked underneath. Project cards keep
   their notched-neon look (defined earlier).
   ===================================================================== */
.window {
  --lean: 30px;
  border: none;
  overflow: visible;
  border-radius: 0;
  background: linear-gradient(135deg, var(--accent) 0 7%, transparent 40%, transparent 60%, var(--cyan) 100%);
  box-shadow: none;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.6));
  clip-path: polygon(0 0, calc(100% - var(--lean)) 0, 100% 100%, var(--lean) 100%);
}
/* slab underneath — a second window peeking below */
.window::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  clip-path: inherit;
  transform: translate(10px, 18px);
  background: linear-gradient(135deg, rgba(0,229,255,.5), rgba(122,0,12,.92) 55%);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.6));
  opacity: .9;
}
/* dark interior fill inside the neon frame */
.window::after {
  content: ""; position: absolute; inset: 1.5px; z-index: 0;
  clip-path: inherit;
  background: linear-gradient(160deg, #150609, #0a0203);
  box-shadow: inset 0 0 70px rgba(227,6,19,.07);
}
.window > * { position: relative; z-index: 1; }

/* keep title-bar + footer content clear of the cut corners */
.window-bar { padding-right: calc(14px + var(--lean)); }
.window-footer { padding-left: calc(16px + var(--lean)); }

/* contain hero glow blobs so they don't spill past the parallelogram */
.hero-body { overflow: hidden; }

/* featured experience window gets a hotter aura */
.exp-window.featured { filter: drop-shadow(0 0 28px rgba(227,6,19,.4)) drop-shadow(0 14px 30px rgba(0,0,0,.6)); }
.exp-window.featured::before { background: linear-gradient(135deg, rgba(0,229,255,.55), rgba(160,0,14,.95) 55%); }

@media (max-width: 900px) {
  .window { --lean: 22px; }
}
@media (max-width: 720px) {
  .window { --lean: 16px; }
  .window::before { transform: translate(6px, 12px); }
}

/* =====================================================================
   ██ V5 — SOMBRA PRETA (o "contrário") + HOVER LEVE NAS JANELAS ██
   The stacked layer becomes a solid black silhouette of the window
   (its dark opposite) with a faint red rim so it reads on the dark bg.
   On hover the window lifts and separates from its black twin.
   ===================================================================== */
.window { transition: transform .32s cubic-bezier(.22,1,.36,1), filter .32s ease; }

/* the black opposite — a shadow-twin of the window */
.window::before {
  background: #000;
  opacity: 1;
  transform: translate(13px, 15px);
  filter: drop-shadow(2px 3px 0 rgba(255,28,28,.38)) drop-shadow(0 14px 24px rgba(0,0,0,.75));
  transition: transform .32s cubic-bezier(.22,1,.36,1), filter .32s ease;
}
.exp-window.featured::before {
  background: #000;
  filter: drop-shadow(2px 3px 0 rgba(255,40,40,.5)) drop-shadow(0 16px 28px rgba(0,0,0,.8));
}

/* hover: the card pops up and its black opposite slides out behind it */
.window:hover {
  transform: translate(-4px, -6px);
  filter: drop-shadow(0 24px 46px rgba(0,0,0,.7)) drop-shadow(0 0 20px var(--glow));
}
.window:hover::before {
  transform: translate(20px, 24px);
  filter: drop-shadow(3px 4px 0 rgba(255,28,28,.5)) drop-shadow(0 18px 30px rgba(0,0,0,.85));
}

@media (max-width: 720px) {
  .window::before { transform: translate(8px, 10px); }
  .window:hover { transform: translate(-2px, -4px); }
  .window:hover::before { transform: translate(12px, 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .window, .window::before { transition: none; }
  .window:hover { transform: none; }
  .window:hover::before { transform: translate(13px, 15px); }
}

/* =====================================================================
   ██ V6 — RETÂNGULO PRETO ATRÁS (triângulos pretos nos cantos) ██
   The window is a red parallelogram; a black rectangle sits directly
   behind it (via .win-shell), so the cut corners read as black
   triangles that complete a rectangle — exactly the reference sketch.
   ===================================================================== */
.win-shell { position: relative; display: block; }
.win-shell--hero { width: min(1000px, 100%); margin: 0 auto; }
.win-shell--hero > .hero-window { width: 100%; }
.win-shell::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: #000;
  outline: 1.5px solid rgba(255,42,42,.5);
  outline-offset: -1px;
  box-shadow: 0 0 24px rgba(227,6,19,.22), 0 22px 40px rgba(0,0,0,.7);
}
.win-shell > .window { position: relative; z-index: 1; }

/* window = red parallelogram (top-left + bottom-right cut), no offset twin */
.window {
  --lean: 26px;
  clip-path: polygon(var(--lean) 0, 100% 0, calc(100% - var(--lean)) 100%, 0 100%);
  filter: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1), filter .3s ease;
}
.window::before { display: none; }            /* remove the old offset shadow twin */
.window::after  { clip-path: inherit; transform: none; filter: none; }
.exp-window.featured::before { display: none; }

/* keep title-bar dots (top-left) and footer cta (bottom-right) off the black triangles */
.window-bar    { padding-left:  calc(14px + var(--lean)); padding-right: 14px; }
.window-footer { padding-right: calc(16px + var(--lean)); padding-left: 16px; }

/* leve animação: ao passar o mouse a janela levanta e destaca da base preta */
.window:hover        { transform: translateY(-5px); filter: drop-shadow(0 0 22px var(--glow)); }
.window:hover::after { background: linear-gradient(160deg, #1c080d, #0c0204); }

@media (max-width: 900px) { .window { --lean: 20px; } }
@media (max-width: 720px) { .window { --lean: 15px; } }

/* =====================================================================
   ██ V7 — HOVER FLUIDO DAS JANELAS ██
   Animate only GPU-cheap transform (no filter/background/backdrop-filter
   churn), with a springy easing, and let the black base glow smoothly.
   ===================================================================== */
.window {
  backdrop-filter: none;                 /* blur was causing per-frame repaint jank */
  will-change: transform;
  filter: none;
  transition: transform .45s cubic-bezier(.34, 1.35, .5, 1);
}
.window:hover {
  transform: translateY(-9px) scale(1.012);
  filter: none;                          /* no filter animation = smooth */
}
.window:hover::after {                   /* cancel the old color snap */
  background: linear-gradient(160deg, #150609, #0a0203);
}

/* the black base reacts smoothly (box-shadow / outline transition, not filter) */
.win-shell::before {
  transition: box-shadow .45s ease, outline-color .45s ease;
}
.win-shell:hover::before {
  outline-color: rgba(255,64,64,.8);
  box-shadow: 0 0 50px rgba(227,6,19,.42), 0 32px 60px rgba(0,0,0,.75);
}

@media (prefers-reduced-motion: reduce) {
  .window { transition: none; }
  .window:hover { transform: none; }
}

/* =====================================================================
   ██ V8 — HOVER CRIATIVO: AS DUAS CAMADAS SE MOVEM (parallax 3D) ██
   O paralelogramo vermelho e o retângulo preto compartilham a animação:
   sobem/deslizam em direções complementares, com mola e tempos diferentes,
   tudo em transform (GPU) para ficar bem fluido.
   ===================================================================== */
.window {
  will-change: transform;
  transform: translate3d(0,0,0) rotate(0deg);
  transition: transform .5s cubic-bezier(.22, 1.15, .36, 1);
}
.win-shell::before {
  will-change: transform, box-shadow;
  transform: translate3d(0,0,0);
  transition: transform .6s cubic-bezier(.22, 1.15, .36, 1) .02s,
              box-shadow .5s ease, outline-color .5s ease;
}

/* front red parallelogram: lifts up-left with a tiny tilt */
.window:hover {
  transform: translate3d(-7px, -11px, 0) scale(1.015) rotate(-.5deg);
  filter: none;
}
/* black twin: slides the opposite way (down-right) and tilts back, revealing depth */
.win-shell:hover::before {
  transform: translate3d(12px, 15px, 0) rotate(.4deg);
  outline-color: rgba(255,64,64,.85);
  box-shadow: 0 0 55px rgba(227,6,19,.45), 0 34px 66px rgba(0,0,0,.8);
}

@media (max-width: 720px) {
  .window:hover { transform: translate3d(-4px,-7px,0) scale(1.01) rotate(-.4deg); }
  .win-shell:hover::before { transform: translate3d(7px,9px,0) rotate(.3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .window, .win-shell::before { transition: none; }
  .window:hover, .win-shell:hover::before { transform: none; }
}

/* =====================================================================
   ██ V9 — ORNAMENTOS TRIBAIS NOS CANTOS ██
   Tribal "horns" (SVG blades) grow out of the two sharp corners of each
   parallelogram (top-right + bottom-left) and animate with the hover.
   ===================================================================== */
:root {
  --tribal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='t' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%237a000c'/%3E%3Cstop offset='.6' stop-color='%23e30613'/%3E%3Cstop offset='1' stop-color='%23ff6a6a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23t)'%3E%3Cpath d='M8 93 Q9 40 20 5 Q28 45 31 93 Z'/%3E%3Cpath d='M27 92 Q47 45 69 16 Q54 52 47 93 Z'/%3E%3Cpath d='M45 93 Q73 59 98 43 Q74 67 64 95 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.tribal-corner {
  position: absolute; width: 66px; height: 66px; z-index: 3; pointer-events: none;
  background: var(--tribal) center / contain no-repeat;
  filter: drop-shadow(0 0 7px var(--glow));
  will-change: transform;
  transition: transform .5s cubic-bezier(.22, 1.15, .36, 1), filter .5s ease;
}
.tribal-tr { top: -54px; right: -54px; }                       /* rooted at the sharp top-right corner, points outward */
.tribal-bl { bottom: -54px; left: -54px; transform: rotate(180deg); }  /* rooted at the sharp bottom-left corner */

/* the horns move with the front parallelogram and flare a bit on hover */
.win-shell:hover .tribal-tr { transform: translate(-7px, -11px) scale(1.18) rotate(-4deg); filter: drop-shadow(0 0 14px var(--glow)); }
.win-shell:hover .tribal-bl { transform: translate(-7px, -11px) rotate(184deg) scale(1.18); filter: drop-shadow(0 0 14px var(--glow)); }

@media (max-width: 720px) {
  .tribal-corner { width: 46px; height: 46px; }
  .tribal-tr { top: -38px; right: -38px; }
  .tribal-bl { bottom: -38px; left: -38px; }
}
@media (prefers-reduced-motion: reduce) {
  .tribal-corner { transition: none; }
  .win-shell:hover .tribal-tr { transform: none; }
  .win-shell:hover .tribal-bl { transform: rotate(180deg); }
}

/* =====================================================================
   ██ V10 — FAIXA TRIBAL (barra/rodapé) + BARBAS NAS BORDAS ██
   Faixa: zigue-zague de triângulos alternados na base da barra de título
   e no topo do rodapé. Barbas: dentes tribais regulares saindo das bordas
   superior e inferior de cada janela (na moldura preta, sem cortar nada).
   ===================================================================== */
:root {
  --tribal-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cg fill='%23e30613'%3E%3Cpath d='M0 10 L5 2 L10 10 Z'/%3E%3Cpath d='M10 0 L15 8 L20 0 Z'/%3E%3C/g%3E%3C/svg%3E");
  --barb-up:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cg fill='%23e30613'%3E%3Cpath d='M2 9 L6 1 L10 9 Z'/%3E%3Cpath d='M12 9 L16 1 L20 9 Z'/%3E%3C/g%3E%3C/svg%3E");
  --barb-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cg fill='%23e30613'%3E%3Cpath d='M2 0 L6 8 L10 0 Z'/%3E%3Cpath d='M12 0 L16 8 L20 0 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- FAIXA TRIBAL: ribbon na base da barra de título ---- */
.window-bar { position: relative; }
.window-bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  background: var(--tribal-band) repeat-x left bottom / auto 9px;
  opacity: .5; box-shadow: none; pointer-events: none;
  filter: drop-shadow(0 0 5px var(--glow));
}
/* ---- FAIXA TRIBAL: ribbon no topo do rodapé (espelhada) ---- */
.window-footer { position: relative; }
.window-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px;
  background: var(--tribal-band) repeat-x left top / auto 9px;
  transform: scaleY(-1); opacity: .5; pointer-events: none;
  filter: drop-shadow(0 0 5px var(--glow));
}

/* ---- BARBAS: dentes tribais saindo das bordas de cima e de baixo ---- */
.win-shell::after {
  content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px;
  z-index: 0; pointer-events: none;
  background: var(--barb-up) repeat-x left top / auto 8px,
             var(--barb-down) repeat-x left bottom / auto 8px;
  opacity: .8;
  filter: drop-shadow(0 0 5px var(--glow));
}

@media (max-width: 720px) {
  .win-shell::after { top: -6px; bottom: -6px; background-size: auto 6px, auto 6px; }
}

/* =====================================================================
   ██ V11 — SANGUE GOOEY + BARBAS COERENTES COM O PARALELOGRAMO ██
   ===================================================================== */

/* new gooey top blood replaces the old flat drip bar */
body::before { content: none; }
.blood-top {
  position: fixed; top: 0; left: 0; width: 100vw; height: 96px; z-index: 9993;
  pointer-events: none;
  filter: drop-shadow(0 6px 9px rgba(120,0,10,.55));
}
@media (max-width: 720px) { .blood-top { height: 70px; } }

/* remove the old rectangle-spanning barbs; use edge-aligned ones instead */
.win-shell::after { display: none; }

/* lean shared with the window so barbs sit on the parallelogram's real edges */
.win-shell { --lean: 26px; }
@media (max-width: 900px) { .win-shell { --lean: 20px; } }
@media (max-width: 720px) { .win-shell { --lean: 16px; } }

.barb {
  position: absolute; height: 8px; z-index: 0; pointer-events: none;
  opacity: .85; filter: drop-shadow(0 0 5px var(--glow));
}
/* top teeth follow the parallelogram's top edge (from x=lean to the right) */
.barb-top    { top: -8px;    left: var(--lean); right: 0;           background: var(--barb-up)   repeat-x left bottom / auto 8px; }
/* bottom teeth follow the parallelogram's bottom edge (from left to 100%-lean) */
.barb-bottom { bottom: -8px; left: 0;           right: var(--lean); background: var(--barb-down) repeat-x left top    / auto 8px; }

@media (max-width: 720px) {
  .barb { height: 6px; }
  .barb-top, .barb-bottom { background-size: auto 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .blood-top .goo-drips * { animation: none; }
}

/* =====================================================================
   ██ V12 — sangue mais alto + HOVER UNIFICADO (nada escapa) ██
   O card inteiro (paralelogramo + base preta + barbas) levanta como uma
   peça só no hover — assim as bordas/dentes não se soltam do paralelogramo.
   ===================================================================== */
.blood-top { height: 150px; }
@media (max-width: 720px) { .blood-top { height: 112px; } }

.window { transition: none; }
.window:hover { transform: none; }

.win-shell { will-change: transform; transition: transform .42s cubic-bezier(.22, 1.1, .36, 1); }
.win-shell:hover { transform: translateY(-8px) scale(1.012); }
.win-shell:hover::before {
  transform: none;
  outline-color: rgba(255,64,64,.85);
  box-shadow: 0 0 55px rgba(227,6,19,.45), 0 34px 66px rgba(0,0,0,.8);
}
@media (prefers-reduced-motion: reduce) {
  .win-shell { transition: none; }
  .win-shell:hover { transform: none; }
}

/* =====================================================================
   ██ V13 — SEM SERRILHA + BORDAS ÁSPERAS (grunge) ██
   Remove os elementos tribais serrilhados (faixa + barbas) e rasga as
   bordas do card com um filtro de deslocamento, dando aspereza.
   ===================================================================== */
.window-bar::after   { content: none; }   /* remove a faixa tribal da barra */
.window-footer::before { content: none; } /* remove a faixa tribal do rodapé */
.barb { display: none !important; }        /* remove as barbas/dentes */

/* bordas ásperas: rasga a borda do preenchimento e da base preta */
.window::after     { filter: url(#edge); }
.win-shell::before { filter: url(#edge); }

/* =====================================================================
   ██ V14 — FONTES MAIS AGRESSIVAS (brutal / metal) ██
   Títulos de destaque ganham cara de logo de death metal; corpo segue
   legível (Share Tech Mono / VT323).
   ===================================================================== */
:root {
  --f-display: 'Metal Mania', 'Creepster', cursive;   /* títulos de seção — logo espinhoso */
  --f-brutal:  'Nosifer', 'Metal Mania', cursive;     /* hero — grossa e sangrenta */
}

.hero-title {
  font-family: var(--f-brutal);
  font-weight: 400; letter-spacing: 1px; line-height: 1.08;
  font-size: clamp(40px, 7vw, 92px);
}
.showcase-title, .proj-statement {
  font-family: var(--f-display);
  letter-spacing: 1.5px; font-weight: 400;
}
.exp-index { font-family: var(--f-brutal); }
.footer .logo { font-family: var(--f-display); }

/* =====================================================================
   ██ V15 — FONTES MENORES AGRESSIVAS + FUNDO BIOMECÂNICO NOS CARDS ██
   ===================================================================== */
:root {
  --f-term: 'Oxanium', 'VT323', monospace;               /* rótulos/chrome — angular cyber */
  --f-body: 'Chakra Petch', 'Share Tech Mono', monospace; /* corpo — legível e afiado */
  /* veias/espinhos biomecânicos gerados por ruído (feTurbulence) */
  --veins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.02 0.04' numOctaves='2' seed='9' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0.5  0 0 0 0 0.02  0 0 0 0 0.04  0 0 0 26 -14'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.16'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23v)'/%3E%3C/svg%3E");
}
.window-bar, .window-footer, .window-title, .win-actions,
.pill, .exp-date, .exp-company, .proj-card-stack, .proj-card-link, .proj-cat-badge,
.proj-filter, .lang-btn, .btn-glow, .btn-ghost, .footer-cta, .crumb, .local-time,
.showcase-tag, .drag-hint, .skill-col h4, .line-num, .terminal-line, .contact-card-item,
.version-nav a, .live-badge { font-family: var(--f-term); }

/* biomech veins in the card backgrounds (windows + panels) */
.window::after, .window:hover::after {
  background: var(--veins) center / cover no-repeat,
              linear-gradient(160deg, #150609, #0a0203);
}
.panel { background: var(--veins) center / cover no-repeat, var(--panel-2); }

/* =====================================================================
   ██ V16 — IMERSÃO: boot, moldura CRT, glitches, cursor, áudio ██
   ===================================================================== */
:root {
  --cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%23ff2323' stroke-width='1.4'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 1v5M12 18v5M1 12h5M18 12h5'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23ff2323'/%3E%3C/svg%3E") 12 12;
}
html, body { cursor: var(--cur), crosshair; }
a, button, .rail-dot, .proj-card, .proj-filter, .lang-btn, .hpal-dot,
.contact-card-item, .audio-toggle, .theme-dot { cursor: var(--cur), pointer; }

/* --- moldura de monitor CRT --- */
.crt-bezel {
  position: fixed; inset: 0; z-index: 9995; pointer-events: none; border-radius: 16px;
  box-shadow: inset 0 0 130px rgba(0,0,0,.85), inset 0 0 26px rgba(0,0,0,.9);
  border: 2px solid rgba(0,0,0,.55);
}
.crt-bezel::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.4) 100%);
}

/* --- indicador REC --- */
.rec {
  position: fixed; top: 15px; left: 18px; z-index: 9994; pointer-events: none;
  font-family: var(--f-term); font-size: 15px; letter-spacing: 2px; color: var(--accent-2);
  display: flex; align-items: center; gap: 7px; text-shadow: 0 0 8px var(--glow); opacity: .85;
}
.rec .dot { width: 10px; height: 10px; border-radius: 50%; background: #ff2b2b; box-shadow: 0 0 10px #ff2b2b; animation: recBlink 1.4s steps(1) infinite; }
@keyframes recBlink { 50% { opacity: .12; } }

/* --- overlay de falha de sinal --- */
.glitch-overlay { position: fixed; inset: 0; z-index: 9996; pointer-events: none; opacity: 0; }
.glitch-overlay.on {
  opacity: 1;
  background:
    repeating-linear-gradient(to bottom, rgba(255,60,60,.06) 0 2px, transparent 2px 5px),
    linear-gradient(90deg, rgba(255,42,42,.05), rgba(0,190,255,.05));
  animation: sigJolt .42s steps(2);
}
.glitch-overlay .lost {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--f-term); font-size: clamp(22px,4vw,40px); letter-spacing: 5px; color: var(--accent);
  text-shadow: 3px 0 var(--glitch-b), -3px 0 var(--glitch-a); opacity: 0; white-space: nowrap;
}
.glitch-overlay.on .lost { opacity: 1; animation: lostShift .42s steps(2); }
@keyframes sigJolt { 0%{transform:translateX(-7px)}50%{transform:translateX(7px)}100%{transform:translateX(0)} }
@keyframes lostShift { 0%{transform:translate(-52%,-50%)}50%{transform:translate(-48%,-50%)}100%{transform:translate(-50%,-50%)} }

/* --- tela de boot --- */
.boot {
  position: fixed; inset: 0; z-index: 100000; background: #050101;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--f-term); color: var(--accent);
  transition: opacity .55s ease;
}
.boot.done { opacity: 0; visibility: hidden; }
.boot-scan { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.4) 3px 4px); }
.boot-inner { width: min(720px, 86vw); font-size: clamp(15px,2vw,21px); line-height: 1.7; text-shadow: 0 0 8px var(--glow); }
.boot-inner .l { white-space: pre-wrap; }
.boot-inner .ok { color: var(--term); }
.boot-inner .err { color: #ff3b3b; }

/* --- botão de áudio --- */
.audio-toggle {
  position: fixed; bottom: 15px; right: 16px; z-index: 9997;
  font-family: var(--f-term); font-size: 14px; letter-spacing: 1px; color: var(--muted);
  background: rgba(10,2,3,.78); border: 1px solid var(--border); padding: 6px 12px; border-radius: 6px;
  backdrop-filter: blur(4px); display: inline-flex; align-items: center; gap: 8px;
}
.audio-toggle:hover { color: var(--accent); border-color: var(--border-br); box-shadow: 0 0 14px var(--glow); }
.audio-toggle .wv { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.audio-toggle.on { color: var(--accent); border-color: var(--border-br); }
.audio-toggle.on .wv { background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: recBlink 1s steps(1) infinite; }

/* --- glitch leve no hover de links --- */
.footer-cta:hover, .version-nav a:hover, .footer-socials a:hover, .contact-card-item:hover strong {
  text-shadow: 1.5px 0 var(--glitch-a), -1.5px 0 var(--glitch-b);
}

@media (prefers-reduced-motion: reduce) {
  .rec .dot, .audio-toggle.on .wv { animation: none; }
  .glitch-overlay.on { animation: none; }
}

/* =====================================================================
   ██ V17 — REC + trocar-versão SEMPRE VISÍVEIS ██
   O sangue do topo (.blood-top 9993) e a moldura CRT (.crt-bezel 9995)
   estavam por cima do REC (9994) e da nav de versão (z-index 200),
   cortando/apagando os dois. Aqui eles sobem acima de TODAS as camadas
   de overlay e ganham um respaldo escuro para ler sobre o sangue.
   ===================================================================== */

/* REC acima do bezel/sangue, com chip escuro para contraste */
.rec {
  z-index: 10000;
  top: 16px; left: 20px;
  padding: 4px 10px;
  background: rgba(10,2,3,.72);
  border: 1px solid var(--border);
  border-radius: 6px;
  backdrop-filter: blur(3px);
  clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}

/* nav de versão acima de tudo e clicável */
.version-nav {
  z-index: 10000;
  top: 18px; right: 20px;
  pointer-events: auto;
}
.version-nav a {
  background: rgba(10,2,3,.9);
  border-color: var(--border-br);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.55);
}
.version-nav a.portal-link { color: var(--accent-2); }
.version-nav a:hover { color: var(--accent); box-shadow: 0 0 16px var(--glow); }

/* garante que o sangue do topo nunca capture cliques da nav/REC */
.blood-top, .crt-bezel { pointer-events: none; }

@media (max-width: 720px) {
  .rec { top: 12px; left: 12px; font-size: 13px; }
  .version-nav { top: 12px; right: 12px; }
}

/* =====================================================================
   ██ V18 — showcase-title: dica visual de interatividade ██
   O cursor crosshair (definido no JS) já dá uma pista, mas um
   glow suave no hover confirma que o título responde ao toque.
   ===================================================================== */

.showcase-title {
  cursor: crosshair;
}
/* caractere individual: corrompe sob o cursor (rastro letra a letra) */
.showcase-title .ct-ch {
  display: inline-block;
  transition: color .1s linear, text-shadow .1s linear, transform .08s linear;
  will-change: transform;
}

/* =====================================================================
   ██ V19 — TURBULÊNCIA DE SCROLL ██
   Overlay de linhas RGB cuja opacidade sobe com a velocidade de rolagem
   (controlada por JS via style.opacity + --sg). Rolar rápido = sinal
   instável; parar = o sinal se acalma.
   ===================================================================== */
:root { --sg: 0; }
#scroll-glitch {
  position: fixed; inset: -12px 0; z-index: 9990; pointer-events: none;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,190,255,.10) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(255,32,32,.12) 0 2px, transparent 2px 5px);
  mix-blend-mode: screen;
  will-change: opacity, transform;
}
:root[data-hpal="toxico"] #scroll-glitch {
  background:
    repeating-linear-gradient(0deg, rgba(255,0,80,.10) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(91,255,26,.12) 0 2px, transparent 2px 5px);
}

/* =====================================================================
   ██ V20 — TERMINAL INTERATIVO (seção Sobre) ██
   O painel "about-me" virou um terminal navegável por comandos.
   Reaproveita a moldura .panel; só o corpo (.term-body) é novo.
   ===================================================================== */
.panel-terminal .panel-title i { color: var(--term); }
.term-body {
  height: 372px;
  overflow-y: auto;
  padding: 14px 14px 8px;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  background: rgba(3,1,1,.55);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  cursor: text;
}
.term-body::-webkit-scrollbar { width: 8px; }
.term-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.term-body .line { white-space: pre-wrap; word-break: break-word; }
.term-body .prompt { color: var(--term); }
.term-body .user   { color: var(--accent-2); }
.term-body .path   { color: #7fb0ff; }
.term-body .ac     { color: var(--accent); }
.term-body .mut    { color: var(--muted); }
.term-body .tb     { color: var(--term); }
.term-body .ok     { color: #27c93f; }
.term-body .er     { color: var(--accent); }
.term-body a       { color: var(--accent-2); border-bottom: 1px dotted var(--border-br); text-decoration: none; }
.term-body a:hover { color: var(--accent); }
.term-body .input-line { display: flex; align-items: center; gap: 8px; }
.term-body .input-line .prompt { flex: none; }
.term-body input.cmd {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--text); font-family: inherit; font-size: 16px; caret-color: var(--term);
}
@media (max-width: 720px) {
  .term-body { height: 300px; font-size: 15px; }
}

/* destaque dos projetos "systems" (raros: browser engine, SO) */
.proj-card-featured {
  border-color: var(--border-br);
  box-shadow: 0 0 0 1px rgba(255,42,42,.18), 0 0 30px rgba(227,6,19,.12);
}
.proj-card-featured .proj-cat-badge {
  color: var(--accent);
  border-color: var(--border-br);
}

/* =====================================================================
   ██ V21 — INTERATIVIDADE: skills, experiência, contato ██
   Foco: recompensar exploração (hover revela, clique expande),
   tudo self-contained (sem serviço externo).
   ===================================================================== */

/* --- SKILLS: hover revela contexto + glitch na barra --- */
.skbar { cursor: help; }
.sk-detail {
  max-height: 0; overflow: hidden; opacity: 0;
  font-family: var(--f-term); font-size: 13.5px; color: var(--muted);
  border-left: 2px solid var(--border-br); padding-left: 0; margin-top: 0;
  transition: max-height .3s ease, opacity .25s ease, padding-left .3s ease, margin-top .3s ease;
}
.skbar:hover .sk-detail {
  max-height: 60px; opacity: 1; padding-left: 8px; margin-top: 6px;
}
.skbar:hover > span { color: var(--accent-2); text-shadow: 0 0 8px var(--glow); }
.skbar:hover .fill { box-shadow: 0 0 20px var(--glow); }
@media (prefers-reduced-motion: no-preference) {
  .skbar:hover .fill { animation: skGlitch .5s steps(3) 1; }
}
@keyframes skGlitch {
  0%,100% { transform: translateX(0); }
  33% { transform: translateX(-2px); }
  66% { transform: translateX(2px); }
}

/* --- EXPERIÊNCIA: accordion + cross-highlight de tech --- */
.exp-accordion { cursor: pointer; }
.exp-accordion .window-bar { display: flex; align-items: center; }
.exp-chevron {
  margin-left: auto; color: var(--muted); font-size: 14px;
  transition: transform .3s ease, color .3s ease; padding-left: 10px;
}
.exp-open .exp-chevron { transform: rotate(90deg); color: var(--accent); }
.exp-detail {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .45s ease, opacity .35s ease, margin-top .35s ease;
  margin-top: 0;
}
.exp-open .exp-detail { max-height: 480px; opacity: 1; margin-top: 14px; }
.exp-accordion:not(.exp-open):hover { box-shadow: 0 0 0 1px var(--border-br), 0 0 26px rgba(227,6,19,.14); }

/* pill acesa via cross-highlight (hover em uma acende todas iguais) */
.pill.tech-hot {
  background: var(--accent); color: #0a0203; border-color: var(--accent);
  text-shadow: none; box-shadow: 0 0 16px var(--glow); font-weight: 700;
}

/* --- CONTATO: mini-terminal self-contained --- */
.contact-input-line { display: flex; align-items: center; gap: 8px; }
.contact-input-line .prompt { color: var(--term); flex: none; }
.contact-body input.cmd {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--text); font-family: var(--f-body); font-size: 1rem; caret-color: var(--term);
}
.contact-body .out.typed { color: var(--muted); }
.contact-body .out .ac { color: var(--accent); }
.contact-body .out .tb { color: var(--term); }
.copy-tag {
  margin-left: 10px; font-family: var(--f-term); font-size: 13px;
  color: var(--term); text-shadow: 0 0 8px rgba(53,255,143,.5);
  animation: copyPop .25s ease;
}
@keyframes copyPop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.contact-body .hint-cmd { color: var(--muted); font-size: 14px; }
.contact-body .hint-cmd b { color: var(--accent-2); }

/* =====================================================================
   ██ V22 — IMERSÃO: lanterna, corrupção, inatividade, minigame ██
   Os quatro se amarram no estado --corr (0..1): rolar/interagir
   "apodrece" o sistema, aperta a lanterna e faz o contato implorar.
   ===================================================================== */

/* --- LANTERNA: página escura, o mouse é a luz (desktop only, toggle) --- */
#lantern {
  position: fixed; inset: 0; z-index: 9985; pointer-events: none; opacity: 0;
  transition: opacity .5s ease;
  --lamp-r: calc(260px - var(--corr,0) * 90px);
  background:
    /* facho: miolo limpo, borda com queda nítida, entorno preto */
    radial-gradient(
      circle var(--lamp-r) at var(--lx,50%) var(--ly,50%),
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 46%,
      rgba(0,0,0,.35) 60%,
      rgba(0,0,0,.82) 82%,
      rgba(0,0,0,.965) 100%),
    /* leve halo quente na beirada do facho */
    radial-gradient(
      circle calc(var(--lamp-r) * 1.15) at var(--lx,50%) var(--ly,50%),
      rgba(227,6,19,.10) 40%,
      rgba(0,0,0,0) 72%);
}
body.lantern-on #lantern { opacity: 1; }
#lantern-toggle {
  position: fixed; left: 20px; bottom: 20px; z-index: 10001;
  width: 38px; height: 38px; border-radius: 8px; cursor: pointer;
  background: rgba(10,2,3,.85); border: 1px solid var(--border-br); color: var(--accent);
  box-shadow: 0 0 14px var(--glow); font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .2s, box-shadow .2s, opacity .2s;
}
#lantern-toggle.off { color: var(--muted); box-shadow: none; opacity: .6; }
#lantern-toggle:hover { color: var(--accent-2); box-shadow: 0 0 20px var(--glow); }

/* --- CORRUPÇÃO: véu que esquenta conforme --corr sobe --- */
#corruption-veil {
  position: fixed; inset: 0; z-index: 9984; pointer-events: none;
  opacity: calc(var(--corr,0) * .6);
  background: radial-gradient(130% 100% at 50% 120%, rgba(227,6,19,.55), transparent 62%);
  mix-blend-mode: screen; transition: opacity .6s ease;
}
:root[data-hpal="toxico"] #corruption-veil { background: radial-gradient(130% 100% at 50% 120%, rgba(91,255,26,.4), transparent 62%); }
:root[data-hpal="vhs"] #corruption-veil { background: radial-gradient(130% 100% at 50% 120%, rgba(255,46,136,.4), transparent 62%); }

/* --- INATIVIDADE: o sistema "acorda" --- */
#idle-log {
  position: fixed; left: 20px; bottom: 68px; z-index: 10001;
  font-family: var(--f-term); font-size: 16px; color: var(--accent);
  background: rgba(10,2,3,.88); border: 1px solid var(--border-br);
  padding: 6px 12px; border-radius: 6px; text-shadow: 0 0 8px var(--glow);
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
  pointer-events: none; max-width: 70vw;
}
#idle-log.show { opacity: 1; transform: none; }
body.idle .rec { animation: recAlarm .45s steps(1) infinite; border-color: var(--accent); }
@keyframes recAlarm { 50% { background: rgba(227,6,19,.35); box-shadow: 0 0 18px var(--glow); } }

/* --- CONTATO implora quando a corrupção estoura --- */
body.corr-max .footer-cta { animation: pleaPulse 1.1s ease-in-out infinite; }
body.corr-max .contact-curse-title { text-shadow: 3px 0 var(--glitch-a), -3px 0 var(--glitch-b), 0 0 40px var(--glow); }
@keyframes pleaPulse {
  0%,100% { text-shadow: 0 0 6px var(--glow); }
  50% { text-shadow: 0 0 18px var(--accent), 0 0 34px var(--glow); transform: translateX(2px); }
}

/* --- MINIGAME: cobrinha ASCII --- */
.snake-board {
  font-family: var(--f-term); font-size: 15px; line-height: 1.05; letter-spacing: 2px;
  color: var(--term); background: rgba(0,0,0,.45); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px; margin: 6px 0; white-space: pre; overflow-x: auto;
}

/* =====================================================================
   ██ V23 — COMANDO GLOBAL · KONAMI · FLIP · TIMELINE ██
   ===================================================================== */

/* --- COMMAND PALETTE (Ctrl+K / /) --- */
#cmdk-overlay {
  position: fixed; inset: 0; z-index: 12000; display: none;
  background: rgba(0,0,0,.62); backdrop-filter: blur(3px);
}
#cmdk-overlay.open { display: flex; align-items: flex-start; justify-content: center; }
#cmdk {
  margin-top: 12vh; width: min(560px, 92vw);
  background: var(--panel-2); border: 1px solid var(--border-br); border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 24px 70px rgba(0,0,0,.7), 0 0 44px var(--glow);
  overflow: hidden; animation: cmdkIn .16s ease;
}
@keyframes cmdkIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
#cmdk-input {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--border);
  outline: 0; color: var(--text); font-family: var(--f-body); font-size: 18px;
  padding: 15px 18px; caret-color: var(--term);
}
#cmdk-input::placeholder { color: var(--muted); }
.cmdk-list { max-height: 340px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.cmdk-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 18px; cursor: pointer;
  color: var(--text); font-size: 15px; border-left: 2px solid transparent;
}
.cmdk-item .ic { color: var(--accent); width: 18px; text-align: center; }
.cmdk-item .lbl { font-family: var(--f-term); letter-spacing: .5px; }
.cmdk-item .d { color: var(--muted); margin-left: auto; font-size: 13px; font-family: var(--f-term); }
.cmdk-item.sel, .cmdk-item:hover { background: rgba(227,6,19,.15); border-left-color: var(--accent); }
.cmdk-empty { padding: 18px; color: var(--muted); font-family: var(--f-term); }
#cmdk-launch {
  position: fixed; left: 20px; bottom: 66px; z-index: 10001;
  height: 38px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  background: rgba(10,2,3,.85); border: 1px solid var(--border-br); color: var(--accent-2);
  font-family: var(--f-term); font-size: 14px; letter-spacing: 1px;
  display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 0 14px var(--glow);
  transition: color .2s, box-shadow .2s;
}
#cmdk-launch:hover { color: var(--accent); box-shadow: 0 0 20px var(--glow); }
#cmdk-launch kbd { border: 1px solid var(--border-br); border-radius: 4px; padding: 1px 5px; font-size: 12px; }

/* --- MODO HACKER (konami) --- */
body.hacker-mode #corruption-veil { opacity: .5 !important; }
#hacker-banner {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.9);
  z-index: 12001; font-family: var(--f-display); font-size: clamp(28px,7vw,72px);
  color: var(--accent); text-shadow: 3px 0 var(--glitch-a), -3px 0 var(--glitch-b), 0 0 40px var(--glow);
  opacity: 0; pointer-events: none; letter-spacing: 3px; text-align: center; white-space: nowrap;
}
#hacker-banner.show { animation: hbShow 2.4s ease forwards; }
@keyframes hbShow {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); }
  15%,75% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.1); }
}
#matrix-rain { position: fixed; inset: 0; z-index: 9983; pointer-events: none; opacity: 0; transition: opacity .6s; }
body.hacker-mode #matrix-rain { opacity: .22; }

/* --- FLIP dos cards de projeto --- */
.proj-card.flippable { perspective: 1200px; }
.proj-card .proj-card-inner {
  position: relative; transition: transform .6s cubic-bezier(.22,1,.36,1); transform-style: preserve-3d;
}
.proj-card.flipped .proj-card-inner { transform: rotateY(180deg); }
.proj-card .card-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.proj-card .card-back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  display: flex; flex-direction: column; gap: 8px;
}
.card-back .arch-title { font-family: var(--f-term); color: var(--accent); font-size: 14px; letter-spacing: 1px; }
.card-back .arch-flow { font-family: var(--f-term); font-size: 13.5px; color: var(--term); line-height: 1.7; }
.card-back .arch-flow .node { color: var(--text); }
.card-back .arch-note { color: var(--muted); font-size: 13px; }
.card-back .back-link { margin-top: auto; color: var(--accent-2); font-family: var(--f-term); font-size: 14px; }
.card-back .back-link:hover { color: var(--accent); }
.proj-card .flip-hint {
  position: absolute; top: 10px; right: 12px; color: var(--muted); font-size: 12px;
  font-family: var(--f-term); opacity: .6; pointer-events: none;
}
.proj-card.flipped .flip-hint { display: none; }

/* --- TIMELINE SCRUBBER (experiência) --- */
.exp-timeline {
  display: flex; align-items: center; gap: 14px; margin: 0 0 26px;
  padding: 14px 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
}
.exp-timeline .tl-label { font-family: var(--f-term); color: var(--muted); font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.exp-timeline .tl-track { position: relative; flex: 1; height: 34px; display: flex; align-items: center; }
.exp-timeline input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent), var(--border-br)); outline: none; cursor: pointer;
}
.exp-timeline input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid #0a0203; box-shadow: 0 0 12px var(--glow); cursor: grab;
}
.exp-timeline input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid #0a0203;
  box-shadow: 0 0 12px var(--glow); cursor: grab;
}
.exp-timeline .tl-years { position: absolute; inset: 0; display: flex; justify-content: space-between; pointer-events: none; top: 22px; }
.exp-timeline .tl-years span { font-family: var(--f-term); font-size: 12px; color: var(--muted); }
.exp-timeline .tl-years span.on { color: var(--accent); text-shadow: 0 0 8px var(--glow); }
.exp-window.tl-focus { box-shadow: 0 0 0 1px var(--accent), 0 0 30px var(--glow); }
@media (max-width: 640px) { .exp-timeline { flex-direction: column; align-items: stretch; gap: 8px; } }

/* =====================================================================
   ██ V24 — RASTREADOR DE DESCOBERTAS ██
   Conta segredos achados (comandos, konami, flip, lanterna, snake…).
   Amarra tudo num objetivo só. Persistido em localStorage.
   ===================================================================== */
#disc-chip {
  position: fixed; left: 20px; bottom: 112px; z-index: 10001;
  height: 38px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  background: rgba(10,2,3,.85); border: 1px solid var(--border-br); color: var(--accent-2);
  font-family: var(--f-term); font-size: 14px; letter-spacing: 1px;
  display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 0 14px var(--glow);
  transition: color .2s, box-shadow .2s;
}
#disc-chip:hover { color: var(--accent); box-shadow: 0 0 20px var(--glow); }
#disc-chip .cnt { color: var(--term); }
#disc-chip.flash { animation: discFlash .6s ease; }
@keyframes discFlash { 0%,100% { transform: none; } 30% { transform: scale(1.14); box-shadow: 0 0 28px var(--accent); } }
#disc-toast {
  position: fixed; left: 20px; bottom: 158px; z-index: 10001;
  background: rgba(10,2,3,.92); border: 1px solid var(--border-br); color: var(--accent);
  font-family: var(--f-term); font-size: 14px; padding: 7px 12px; border-radius: 6px;
  text-shadow: 0 0 8px var(--glow); opacity: 0; transform: translateY(8px);
  transition: opacity .3s, transform .3s; pointer-events: none; max-width: 78vw;
}
#disc-toast.show { opacity: 1; transform: none; }
#disc-pop {
  position: fixed; left: 20px; bottom: 158px; z-index: 10002; width: min(310px, 82vw);
  background: var(--panel-2); border: 1px solid var(--border-br); border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 16px 44px rgba(0,0,0,.6), 0 0 30px var(--glow);
  padding: 12px 14px; display: none;
}
#disc-pop.open { display: block; }
#disc-pop h5 { font-family: var(--f-term); color: var(--accent); font-size: 14px; letter-spacing: 1px; margin-bottom: 8px; }
#disc-pop .di { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-family: var(--f-body); font-size: 14px; color: var(--muted); }
#disc-pop .di.got { color: var(--text); }
#disc-pop .di .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
#disc-pop .di.got .dot { background: var(--term); box-shadow: 0 0 8px var(--term); }
#disc-pop .di .h { color: var(--muted); font-family: var(--f-term); font-size: 12px; }
#disc-pop .all { margin-top: 10px; color: var(--accent); font-family: var(--f-term); font-size: 13px; text-shadow: 0 0 8px var(--glow); }

/* trava de segurança: nunca rolar horizontalmente (mobile) */
html, body { max-width: 100%; overflow-x: hidden; }

/* =====================================================================
   ██ V25 — OVERRIDES MOBILE (no fim p/ vencer ordem de cascata) ██
   ===================================================================== */
@media (max-width: 720px) {
  #cmdk-launch { display: none !important; }   /* Ctrl+K é só teclado */
  .drag-hint { display: none !important; }     /* painéis não arrastam no mobile */
  #disc-chip { bottom: 16px !important; left: 16px !important; }
  #disc-pop, #disc-toast { bottom: 62px !important; left: 16px !important; }
}

/* =====================================================================
   ██ V26 — ACESSIBILIDADE MOBILE: alvos de toque ≥ ~30px ██
   ===================================================================== */
@media (max-width: 720px) {
  .live-badge { white-space: nowrap; }
  /* bolinhas de paleta: mantém o visual, amplia a área de toque */
  .hpal-dot { position: relative; }
  .hpal-dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
  .window-bar .lang-btn { min-height: 34px; padding: 6px 11px; }
  .version-nav a { padding: 9px 13px; }
  .footer-socials a { padding: 8px; display: inline-flex; }
}
@media (max-width: 720px) { .footer-cta { padding: 8px 0; } }
/* hero: barra quebra linha no mobile p/ paleta/idioma não cortarem */
@media (max-width: 720px) {
  .hero-window .window-bar { flex-wrap: wrap; height: auto; row-gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .hero-window .window-bar .hpal-switcher { margin-left: auto; }
}

/* =====================================================================
   ██ V27 — CURSOR TEMÁTICO (mira de horror; só com mouse) ██
   ===================================================================== */
@media (pointer: fine) {
  html, body { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%277%27%20fill%3D%27none%27%20stroke%3D%27%23ff3b3b%27%20stroke-width%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M12%201V5M12%2019V23M1%2012H5M19%2012H23%27%20stroke%3D%27%23ff3b3b%27%20stroke-width%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%271.4%27%20fill%3D%27%23ff3b3b%27%2F%3E%3C%2Fsvg%3E") 12 12, auto; }
  a, button, [role="button"], label, summary,
  .proj-card, .proj-filter, .contact-card-item, .exp-window, .showcase-title,
  .hpal-dot, .cmdk-item, #cmdk-launch, #disc-chip, #lantern-toggle,
  .audio-toggle, .back-link, .version-nav a, .footer-cta, .flip-hint,
  .panel-actions i, .traffic .t-dot {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2728%27%20height%3D%2728%27%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2714%27%20r%3D%279%27%20fill%3D%27rgba%28255%2C32%2C32%2C0.12%29%27%20stroke%3D%27%23ff5a5a%27%20stroke-width%3D%272%27%2F%3E%3Cpath%20d%3D%27M14%201V6M14%2022V27M1%2014H6M22%2014H27%27%20stroke%3D%27%23ff5a5a%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2714%27%20r%3D%273%27%20fill%3D%27%23ff2020%27%2F%3E%3C%2Fsvg%3E") 14 14, pointer;
  }
  input, textarea, .term-body, .contact-body, .term-body input, .contact-body input {
    cursor: text;
  }
  .exp-timeline input[type="range"] { cursor: grab; }
}

/* =====================================================================
   ██ V28 — HUD: MEDIDOR DE CORRUPÇÃO EM % ██
   Telemetria no canto: sobe ao vivo conforme o sistema apodrece.
   ===================================================================== */
#corr-meter {
  position: fixed; top: 58px; left: 20px; z-index: 10000;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-term); font-size: 13px; letter-spacing: 1px;
  color: var(--muted); background: rgba(10,2,3,.72);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px;
  backdrop-filter: blur(3px); pointer-events: none;
  transition: border-color .4s, box-shadow .4s;
}
#corr-meter .cm-lbl { opacity: .8; }
#corr-meter .cm-val {
  min-width: 34px; text-align: right; font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 calc(var(--corr,0) * 12px) var(--glow);
}
#corr-meter .cm-bar {
  width: 54px; height: 5px; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,.08); border: 1px solid var(--border);
}
#corr-meter .cm-bar > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(to right, #7a000c, var(--accent));
  box-shadow: 0 0 8px var(--glow);
}
/* corrupção alta: o medidor "pulsa" em alerta */
body[data-corr="3"] #corr-meter {
  border-color: var(--border-br); box-shadow: 0 0 16px var(--glow);
  animation: cmAlarm 1s steps(1) infinite;
}
@keyframes cmAlarm { 50% { background: rgba(227,6,19,.28); } }
@media (max-width: 720px) {
  #corr-meter { top: 54px; left: 12px; font-size: 12px; padding: 3px 7px; }
  #corr-meter .cm-bar { width: 42px; }
}

/* =====================================================================
   ██ V29 — CLÍMAX 100%: SISTEMA CONSUMIDO ██
   ===================================================================== */
#consumed-banner {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.8);
  z-index: 12002; font-family: var(--f-display); font-size: clamp(30px,8vw,84px);
  color: var(--accent); text-shadow: 4px 0 var(--glitch-a), -4px 0 var(--glitch-b), 0 0 50px var(--glow);
  opacity: 0; pointer-events: none; letter-spacing: 3px; text-align: center; white-space: nowrap;
}
#consumed-banner.show { animation: consumedShow 2.7s ease forwards; }
@keyframes consumedShow {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.5); filter: blur(6px); }
  12%,70% { opacity: 1; transform: translate(-50%,-50%) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.15); filter: blur(3px); }
}
/* tremor da tela no momento do consumo */
body.consumed-shudder { animation: shudder .6s steps(2) 3; }
@keyframes shudder {
  0%,100% { transform: translate(0,0); }
  25% { transform: translate(-3px,2px); }
  50% { transform: translate(3px,-2px); }
  75% { transform: translate(-2px,-3px); }
}
/* medidor "morto" — trava em 100% ☠ e pisca em alarme */
#corr-meter.dead { border-color: var(--border-br); box-shadow: 0 0 22px var(--glow); }
#corr-meter.dead .cm-val { color: var(--accent); animation: deadBlink .7s steps(1) infinite; }
#corr-meter.dead .cm-bar > i { background: var(--accent); box-shadow: 0 0 14px var(--accent); }
@keyframes deadBlink { 50% { opacity: .35; } }
/* consumido: o CTA do contato implora mais forte */
body.consumed .footer-cta { animation: pleaPulse .8s ease-in-out infinite; }
body.consumed .contact-curse-title { text-shadow: 4px 0 var(--glitch-a), -4px 0 var(--glitch-b), 0 0 50px var(--accent); }