/* ---------- Sistema de Temas Dinâmico ---------- */
  :root{
    --bg: #FFFFFF;
    --bg-soft: #FAF7F1;
    --surface: #F6F1E6;
    --surface-hi: #EFE7D3;
    --line: #E4D9C4;
    --text: #20242C;
    --text-dim: #6B7280;
    --navy: #181D27;
    --sky: #4F46E5;
    --emerald: #D97706;
    --mystic-pulse: 0.5;
  }
  html[data-theme="blueprint"]{
    --bg: #0F2942;
    --bg-soft: #0B2135;
    --surface: #153453;
    --surface-hi: #1B3F63;
    --line: #25507A;
    --text: #DCEAF7;
    --text-dim: #9FB8D1;
    --navy: #F3F8FF;
    --sky: #38BDF8;
    --emerald: #FBBF24;
  }
  html[data-theme="terminal"]{
    --bg: #0B0F17;
    --bg-soft: #10141D;
    --surface: #141924;
    --surface-hi: #1B212F;
    --line: #252C3B;
    --text: #E5E9F0;
    --text-dim: #8B94A7;
    --navy: #F5F7FA;
    --sky: #10B981;
    --emerald: #22D3EE;
  }
  html[data-theme="graphite"]{
    --bg: #1C1C1E;
    --bg-soft: #161618;
    --surface: #242426;
    --surface-hi: #2B2B2E;
    --line: #3A3A3D;
    --text: #F2F2F2;
    --text-dim: #A8A8AC;
    --navy: #FFFFFF;
    --sky: #A3E635;
    --emerald: #8B5CF6;
  }
  
  html{transition: background-color .35s ease;}
  body{transition: background-color .35s ease, color .35s ease;}
  html.mystic-mode, html.mystic-mode body{transition:none;}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .font-display{font-family:'Space Grotesk',sans-serif}
  .font-mono{font-family:'JetBrains Mono',monospace}

  /* ---------- Entrada Direta (Splash & Start) ---------- */
  #start-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: #0B0F17; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.6s ease;
  }
  #start-overlay.fade-out {
    opacity: 0; pointer-events: none;
  }
  
  .btn-mystic-start {
    background: conic-gradient(from 0deg, #C084FC, #F472B6, #FBBF24, #2DD4BF, #38BDF8, #C084FC);
    color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem;
    padding: 16px 36px; border-radius: 999px;
    box-shadow: 0 0 40px -10px rgba(139,92,246, 0.8);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer; position: relative; z-index: 1;
    animation: mystic-spin 6s linear infinite, pop .7s cubic-bezier(.34,1.56,.64,1) both;
  }
  .btn-mystic-start:hover {
    transform: scale(1.05); box-shadow: 0 0 60px -10px rgba(139,92,246, 1);
  }
  .btn-mystic-start-inner {
    position: absolute; inset: 2px; border-radius: 999px;
    background: #0B0F17; z-index: -1;
  }
  .btn-mystic-start-text {
    position: relative; z-index: 2; letter-spacing: 0.05em;
  }

  #splash{
    position:fixed; inset:0; z-index:9999;
    background: #0B0F17;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transition: opacity .8s ease, visibility .8s ease;
  }
  #splash.fade-out{
    opacity:0; visibility:hidden; pointer-events:none;
  }

  #splash-canvas{position:fixed; inset:0; z-index:10000; pointer-events:none;}
  @keyframes pop{
    0%{transform:scale(.4); opacity:0}
    100%{transform:scale(1); opacity:1}
  }

  /* ---------- Grid & Glow ---------- */
  .grid-bg{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(color-mix(in srgb, var(--sky) 8%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--sky) 8%, transparent) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 40%, transparent 100%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 40%, transparent 100%);
    transition: background-image .35s ease;
  }
  .glow{
    background: radial-gradient(600px circle at 20% 10%, color-mix(in srgb, var(--sky) 14%, transparent), transparent 40%),
                radial-gradient(500px circle at 85% 5%, color-mix(in srgb, var(--emerald) 12%, transparent), transparent 40%);
    transition: background .35s ease;
  }

  /* ---------- UI Elements ---------- */
  .glass{
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transition: background .35s ease, border-color .35s ease;
  }

  .nav-link{position:relative; color:var(--text-dim); transition: color .25s ease;}
  .nav-link::after{
    content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px;
    background: var(--sky); transition: width .25s ease;
  }
  .nav-link:hover{color:var(--navy)}
  .nav-link:hover::after{width:100%}

  .terminal{
    background: linear-gradient(180deg, #16202E 0%, #0E1520 100%);
    border:1px solid #263142;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4), 0 0 90px -28px color-mix(in srgb, var(--sky) 35%, transparent);
  }
  html.mystic-mode .terminal{
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4),
      0 0 calc(60px + var(--mystic-pulse, 0.5) * 60px) calc(-10px)
      color-mix(in srgb, var(--sky) calc(30% + var(--mystic-pulse, 0.5) * 20%), transparent);
  }
  .dot{width:11px;height:11px;border-radius:50%}
  .cursor{
    display:inline-block; width:8px; height:1.1em; background:var(--sky);
    vertical-align:text-bottom; animation: blink 1s steps(1) infinite;
  }
  @keyframes blink{50%{opacity:0}}

  .reveal{opacity:0; transform:translateY(28px); transition: opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}
  .hero-in{animation: hero-rise .8s ease both;}
  @keyframes hero-rise{
    from{opacity:0; transform:translateY(16px);}
    to{opacity:1; transform:translateY(0);}
  }

  .badge{
    border:1px solid var(--line); background: color-mix(in srgb, var(--surface) 90%, var(--sky) 10%);
    color:var(--navy);
    transition: border-color .25s ease, transform .25s ease, background .25s ease;
  }
  .badge:hover{border-color: var(--sky); transform:translateY(-2px); background: color-mix(in srgb, var(--surface-hi) 85%, var(--sky) 15%);}

  .card{
    background: var(--surface); border: 1px solid var(--line);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
  }
  .card:hover{
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--sky) 40%, transparent);
    box-shadow: 0 20px 40px -22px rgba(0,0,0,0.15), 0 0 46px -16px color-mix(in srgb, var(--sky) 20%, transparent);
  }
  .card-img-wrap{overflow:hidden}
  .card-img-wrap img{transition: transform .6s ease, filter .6s ease;}
  .card:hover .card-img-wrap img{transform:scale(1.06); filter:brightness(0.92);}

  .tag{
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.02em;
    color:var(--sky); background: color-mix(in srgb, var(--sky) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--sky) 25%, transparent);
  }

  .btn-primary{
    background: linear-gradient(135deg, var(--sky), var(--emerald));
    color:#fff; font-weight:600;
    box-shadow: 0 10px 25px -8px color-mix(in srgb, var(--sky) 45%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow: 0 14px 30px -8px color-mix(in srgb, var(--sky) 60%, transparent);}

  .btn-ghost{
    border:1px solid var(--line); color:var(--navy); background: var(--bg);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .btn-ghost:hover{border-color:var(--emerald); background: color-mix(in srgb, var(--emerald) 8%, transparent); transform:translateY(-2px);}

  .field{
    background:var(--surface); border:1px solid var(--line); color:var(--navy);
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .field::placeholder{color:var(--text-dim);}
  .field:focus{
    outline:none; border-color:var(--sky);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 16%, transparent);
  }

  .social-icon{
    border:1px solid var(--line); background:var(--surface); color:var(--navy);
    transition: border-color .2s ease, transform .2s ease, color .2s ease;
  }
  .social-icon:hover{border-color:var(--sky); color:var(--sky); transform:translateY(-3px);}

  ::selection{background:var(--sky); color:#fff;}
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--sky); outline-offset:3px; border-radius:4px;
  }

  /* ---------- Ocultação Inteligente (Idle Timeout) ---------- */
  .idle-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(15px) !important;
  }

  /* ---------- Theme Switcher ---------- */
  #theme-switcher{
    position:fixed; right:20px; bottom:20px; z-index:60;
    display:flex; align-items:center; gap:8px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    border:1px solid var(--line); border-radius:999px;
    padding:8px; box-shadow: 0 12px 28px -12px rgba(0,0,0,0.25);
    backdrop-filter: blur(10px);
    transition: opacity 0.6s ease, transform 0.6s ease, background 0.35s ease;
  }
  .theme-dot{
    width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer;
    transition: transform .2s ease, border-color .2s ease; padding:0;
  }
  .theme-dot:hover{transform:translateY(-2px) scale(1.06);}
  .theme-dot.active{border-color: var(--sky);}
  .theme-label{
    font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim);
    padding-left:2px; padding-right:2px; white-space:nowrap;
  }

  .theme-dot-mystic{
    background: conic-gradient(from 0deg, #C084FC, #F472B6, #FBBF24, #2DD4BF, #38BDF8, #C084FC);
    position:relative;
  }
  @keyframes mystic-spin{ to{ transform: rotate(360deg); } }
  @keyframes mystic-ring{
    0%,100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--sky) 55%, transparent); }
    50%{ box-shadow: 0 0 0 6px color-mix(in srgb, var(--sky) 0%, transparent); }
  }
  .theme-dot-mystic.active{
    animation: mystic-ring 2.4s ease-in-out infinite; border-color: var(--sky);
  }
  .theme-dot-mystic::after{
    content:''; position:absolute; inset:-3px; border-radius:50%;
    background: inherit; filter: blur(2px); opacity:.6; z-index:-1;
    animation: mystic-spin 6s linear infinite;
  }
  
  @media (max-width: 640px){
    #theme-switcher{ right:12px; bottom:12px; padding:6px; gap:6px;}
    .theme-label{display:none;}
  }
  @media (prefers-reduced-motion: reduce){
    .reveal, .hero-in, #splash, html, body{transition:none !important; animation:none !important; opacity:1; transform:none;}
    .cursor, .theme-dot-mystic.active, .theme-dot-mystic::after, .btn-mystic-start{animation:none !important;}
  }

  /* ---------- Painel Flutuante de Áudio (Glassmorphism) ---------- */
  #audio-panel{
    position:fixed; left:20px; bottom:20px; z-index:60;
    display:flex; align-items:center; gap:10px;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius:999px;
    padding:8px 16px 8px 8px;
    box-shadow: 0 12px 32px -12px rgba(0,0,0,0.35);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    color: var(--navy);
    transition: opacity 0.6s ease, transform 0.6s ease, background .35s ease, border-color .35s ease;
  }
  #audio-toggle-btn{
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, var(--sky), var(--emerald));
    color:#fff; border:none; cursor:pointer;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--sky) 55%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  #audio-toggle-btn:hover{ transform:scale(1.07); }
  #audio-toggle-btn:active{ transform:scale(0.96); }
  #audio-volume-slider{
    -webkit-appearance:none; appearance:none;
    width:90px; height:4px; border-radius:999px;
    background: color-mix(in srgb, var(--text-dim) 35%, transparent);
    cursor:pointer; outline:none;
  }
  #audio-volume-slider::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:14px; height:14px; border-radius:50%;
    background: var(--sky); border:2px solid var(--bg);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sky) 60%, transparent);
    cursor:pointer;
  }
  #audio-volume-slider::-moz-range-thumb{
    width:14px; height:14px; border-radius:50%;
    background: var(--sky); border:2px solid var(--bg);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sky) 60%, transparent);
    cursor:pointer;
  }
  @media (max-width:640px){
    #audio-panel{ left:12px; bottom:12px; padding:6px 12px 6px 6px; gap:8px; }
    #audio-volume-slider{ width:64px; }
  }