html,body{
    margin:0;height:100%;overflow:hidden;
    background:url("assets/bg.gif") center/cover no-repeat fixed #000;
    font-family:Arial;
  }
  #stage{position:relative;width:100vw;height:100vh;overflow:hidden; pointer-events: none;}

  /* === camadas de imagem base/topo === */
  .asset{
    position:absolute;object-fit:cover;pointer-events:none;opacity:.96;
    z-index:var(--z);width:var(--w);height:var(--h);left:var(--x);top:var(--y);
    box-shadow:0 0 0.35vh rgba(0, 0, 0, 0.35);
  }

  /* texto – agora com paleta via vars (--tcol / --tglow) */
  .text-frag{
    position:absolute;pointer-events:none;z-index:999;
    
    left:var(--x); top:var(--y); 
    font-size:1.2rem; white-space:nowrap; letter-spacing:.02em;
    color:var(--tcol, #ffffff);
    
  }

  #audio, audio#bgm { display:none; }

  /* === LAYER 3: formas (mantidas) === */
  .shape{
    position:absolute; z-index:130; pointer-events:none; 
   
    left:var(--x); top:var(--y); width:var(--w); height:var(--h);
    background:#f0f #13e200;
    clip-path: var(--clip);
    transform: rotate(var(--rot)) skew(var(--skx),var(--sky)) scale(var(--sx),var(--sy));
    animation: var(--anim) var(--dur) ease-in-out infinite alternate;
  }



  /* === LAYER 3: gashes (retângulos/rasgos) com paletas ===
     background recebe camada(s) via var(--bg) */
  .gash{
    position:absolute; z-index:140; pointer-events:none;
    left:var(--x); top:var(--y); width:var(--w); height:var(--h);
    background: var(--bg, linear-gradient(90deg, #ffffff, #ea00ff, #ffffff));
    background-repeat:no-repeat; background-size:cover; background-position:center;
    
    transform: rotate(var(--rot));
    animation: var(--anim, none) var(--dur, 4s) ease-in-out infinite alternate;
  }
  
  /* === LAYER 3: imagens deformadas/animadas (mantidas) === */
  .glitch{
    position:absolute; object-fit:cover; pointer-events:none; z-index:150;
    left:var(--x); top:var(--y); width:var(--w); height:var(--h);
   
    transform: rotate(var(--rot)) scale(var(--sx),var(--sy)) skew(var(--skx),var(--sky));
    animation: var(--anim) var(--dur) ease-in-out infinite alternate;
  }

  /* ------ animações ------ */
  @keyframes rotate360 { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
  @keyframes breatheY  { from{transform:scaleY(0.75);} to{transform:scaleY(1.25);} }
  @keyframes breatheX  { from{transform:scaleX(0.8);}  to{transform:scaleX(1.2);}  }
  @keyframes skewWobble{ from{transform:skew(-10deg,-6deg);} to{transform:skew(10deg,6deg);} }
  @keyframes slideX    { from{transform:translateX(-2vw);} to{transform:translateX(2vw);} }
  @keyframes slideY    { from{transform:translateY(-2vh);} to{transform:translateY(2vh);} }

  /* --- Painel inferior com borda-textura e fundo próprio --- */
#bottom-panel{
  position:absolute;
  left:50%;
  bottom:2vh;
  transform:translateX(-50%);
  z-index:2000;               /* acima de imagens e textos do cenário */
  width:min(92vw, 900px);
  /* Borda por imagem (textura): */
  border: 18px solid transparent;
  border-image-source: url("assets/panel-border.png"); /* sua textura */
  border-image-slice: 30;        /* ajuste conforme a textura */
  border-image-width: 18px;
  border-image-repeat: round;    /* repete em mosaico nas bordas */
  border-radius: 10px;           /* opcional */
  /* Fundo próprio do painel: */
  background: url("assets/panel-bg.png") center/cover no-repeat;
  pointer-events: auto !important; 
}

/* conteúdo interno */
#bottom-panel .panel-content{
  padding: clamp(14px, 3vw, 28px);
  text-align:center;
  pointer-events: auto !important;
}

#bottom-panel h2{
  margin:0 0 .6rem 0;
  font: 700 clamp(20px, 4vw, 40px)/1.1 arial;
  color:#d81d1d;
  letter-spacing:.06em;
}

#bottom-panel .panel-line{
    
    pointer-events: auto !important; 
  font-size: 32px;
  letter-spacing:.08em;
  margin:.25rem 0;
 
}

#bottom-panel .panel-line.white a:hover,
#bottom-panel .panel-line.white a:focus-visible{
  transform: scale(1.1);
  
  
}

.btn{
    position: relative;
    text-decoration: none;
    color: #ffffff;
    pointer-events: auto;
    z-index: 99999;
}

.panel-line a:hover{
    color: #d81d1d;
}

#bottom-panel .panel-line.white{ color:#ffffff; }
#bottom-panel .panel-line.red{   color:#d81d1d; }

/* (opcional) modo “pulsar” sutil no painel */
@keyframes panelPulse{ from{filter:saturate(1);} to{filter:saturate(1.25);} }
#bottom-panel{ animation: panelPulse 4s ease-in-out infinite alternate; }