@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

@font-face {
  font-family: 'GoogleSansLocal';
  src: url('./fonts/GoogleSans-Regular.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'GoogleSansLocal';
  src: url('./fonts/GoogleSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'GoogleSansLocal';
  src: url('./fonts/GoogleSans-Bold.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

:root {
    --bg-color: #000000;
    --text-primary: #ffffff;
    --text-secondary: #888888;
    --yellow-neon: yellow;
    --font-main: 'GoogleSansLocal', 'Outfit', 'Inter', sans-serif;
    --offset-e-set: 200ms; /* Calibrador do conjunto E (Mude para adiantar ou atrasar) */
}

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

body, html {
    width: 100%;
    height: 100dvh;
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-main);
    overflow: hidden;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Background Game Iframe */
.bg-iframe-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none; /* Nada interativo */
}

.bg-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    margin: 0;
    padding: 0;
}

/* Degradê que esconde o jogo do meio pra baixo/lados */
.bg-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to top, transparent 0%, transparent 40%, #000000 70%, #000000 100%);
    z-index: 1;
}

/* HUD Central */
.hud-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto;
    align-items: center;
    padding: 2rem 4rem;
    pointer-events: none;
}

/* Tipografia Comum */
.grey-text { color: #888; font-weight: 400; }
.white-text { color: #fff; font-weight: 900; }
.yellow-text { color: var(--yellow-neon); font-weight: 600; }

.text-left, .text-right {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    letter-spacing: 1px;
    pointer-events: auto;
}

.text-left {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    text-align: left;
    opacity: 0;
    animation: textFadeIn 1.5s ease-out forwards;
    animation-delay: 2.0s;
}

.text-right {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    text-align: right;
    opacity: 0;
    animation: textFadeIn 0.6s ease-out forwards;
    animation-delay: calc(6.63s + var(--offset-e-set));
}

@keyframes textFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* LOGO SVG & ANIMAÇÕES */
.logo-container {
    grid-column: 2;
    grid-row: 1;
    width: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

.animated-logo {
    width: 100%;
    overflow: visible; /* Para o pulo não cortar a viewBox */
    animation: shakeSite 0.4s ease-out forwards;
    animation-delay: 3.60s; /* Cravado matematicamente com o impacto do T */
}


/* ANIMATIONS MISSING FROM INITIAL REPLACEMENT */

@keyframes bounceShake {
    0% { opacity: 0; transform: translateY(30px) scale(0.8); }
    20% { opacity: 1; transform: translateY(-15px) scale(1.1); }
    40% { transform: translateY(10px) scale(0.95); }
    60% { transform: translateY(-5px) scale(1.02); }
    70% { transform: translateX(-3px) rotate(-3deg); }
    80% { transform: translateX(3px) rotate(3deg); }
    90% { transform: translateX(-1px) rotate(-1deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

.anim-bounce {
    animation: bounceShake 1.2s cubic-bezier(0.28, 0.84, 0.42, 1) forwards;
    transform-origin: center;
}

@keyframes pewPew {
    0% { opacity: 0; transform: translateX(-50px) skewX(20deg); }
    60% { opacity: 1; transform: translateX(5px) skewX(-5deg); }
    100% { opacity: 1; transform: translateX(0) skewX(0); }
}

.anim-pew {
    animation: pewPew 0.4s ease-out forwards;
}

.delay-g { animation-delay: 0.1s; }
.delay-a { animation-delay: 0.25s; }
.delay-r { animation-delay: 0.1s; }

/* Base states before animation */
.anim-bounce, .anim-pew, .anim-spring, .anim-cautious-m, .anim-charge, .anim-spit2, .anim-spit3, .anim-snake-e, .anim-snake-s, .anim-smash, .anim-dracula {
    opacity: 0;
}


@keyframes shakeSite {
    0% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-3px, -3px) rotate(-1deg); }
    20% { transform: translate(3px, 3px) rotate(1deg); }
    30% { transform: translate(-2px, 2px) rotate(0deg); }
    40% { transform: translate(2px, -2px) rotate(1deg); }
    50% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.anim-angry {
    animation: angryGrow 2.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
    transform-origin: center;
    opacity: 0;
}

@keyframes angryGrow {
    0% { opacity: 0; transform: scale(0.8) translateY(15px); }
    5% { opacity: 1; transform: scale(0.9) translateY(0); }
    10% { transform: scale(0.9) translate(-1px, 1px) rotate(-1deg); }
    15% { transform: scale(0.9) translate(1px, -1px) rotate(1deg); }
    20% { transform: scale(0.92) translate(-2px, -1px) rotate(-1deg); }
    25% { transform: scale(0.92) translate(2px, 1px) rotate(1deg); }
    30% { transform: scale(0.94) translate(-2px, 2px) rotate(-2deg); }
    35% { transform: scale(0.94) translate(2px, -2px) rotate(2deg); }
    40% { transform: scale(0.96) translate(-3px, -1px) rotate(-2deg); }
    45% { transform: scale(0.96) translate(3px, 1px) rotate(2deg); }
    50% { transform: scale(0.98) translate(-3px, 2px) rotate(-3deg); }
    55% { transform: scale(0.98) translate(3px, -2px) rotate(3deg); }
    60% { transform: scale(1.0) translate(-4px, -2px) rotate(-3deg); }
    65% { transform: scale(1.0) translate(4px, 2px) rotate(3deg); }
    70% { transform: scale(1.05) translate(-4px, 3px) rotate(-4deg); }
    75% { transform: scale(1.05) translate(4px, -3px) rotate(4deg); }
    80% { transform: scale(1.1) translate(-5px, -3px) rotate(-5deg); }
    85% { transform: scale(1.15) translate(5px, 3px) rotate(5deg); }
    90% { transform: scale(1.2) translate(-6px, 4px) rotate(-6deg); }
    95% { transform: scale(1.25) translate(6px, -4px) rotate(6deg); }
    98% { transform: scale(1.3) translate(0px, 0px) rotate(0deg); }
    100% { opacity: 1; transform: scale(1) translate(0, 0) rotate(0); }
}

.anim-dash { animation: dashBlur 0.15s ease-out forwards; opacity: 0; }

@keyframes dashBlur {
    0% { opacity: 0; transform: translateX(-10px); filter: blur(4px); }
    100% { opacity: 1; transform: translateX(0); filter: blur(0px); }
}

.anim-dracula {
    animation: draculaRise 3.1s ease-out forwards;
    transform-origin: bottom center;
    transform-box: fill-box;
    opacity: 0;
}

/* Levantada do Caixão Sombria com Luz de Trovão */
@keyframes draculaRise {
    0% { opacity: 0; transform: perspective(500px) rotateX(-90deg); filter: drop-shadow(0 0 0px rgba(255,255,255,0)); }
    15% { opacity: 0.3; transform: perspective(500px) rotateX(-75deg); }
    75% { opacity: 1; transform: perspective(500px) rotateX(-10deg); filter: drop-shadow(0 0 0px rgba(255,255,255,0)); }
    82% { transform: perspective(500px) rotateX(-5deg); filter: drop-shadow(0 -20px 25px rgba(255,255,255,0.9)); } /* Luz rápida estourando em cima */
    90% { transform: perspective(500px) rotateX(-1deg); filter: drop-shadow(0 -5px 10px rgba(255,255,255,0)); }
    100% { opacity: 1; transform: perspective(500px) rotateX(0deg); filter: drop-shadow(0 0 0px rgba(255,255,255,0)); }
}

/* O T batendo com força no chão (Caindo de cima) */
@keyframes smashT {
    /* Nasce como um pedrinha esmagada caindo do S e DESPENCA */
    0% { opacity: 0; transform-origin: bottom center; transform: translateY(-45px) scaleY(0.1) scaleX(0.3); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    35% { opacity: 1; transform-origin: bottom center; transform: translateY(0) scaleY(1) scaleX(1); animation-timing-function: linear; }
    
    /* Esmagamento Extremo no chao (BUM!) */
    39% { transform-origin: bottom center; transform: translateY(0) scaleY(1) scaleX(1); }
    40% { transform-origin: bottom center; transform: translateY(0) scaleY(0.5) scaleX(1.4); } 
    50% { transform-origin: bottom center; transform: translateY(0) scaleY(1.1) scaleX(0.9) rotate(-6deg); }
    65% { transform-origin: bottom center; transform: translateY(0) scaleY(0.95) scaleX(1.05) rotate(5deg); }
    80% { transform-origin: bottom center; transform: translateY(0) scaleY(1.02) scaleX(0.98) rotate(-3deg); }
    90% { transform-origin: bottom center; transform: translateY(0) scale(1) rotate(1deg); }
    100% { opacity: 1; transform-origin: bottom center; transform: translateY(0) scale(1) rotate(0deg); }
}
.anim-smash {
    animation: smashT 0.5s linear forwards;
    transform-box: fill-box;
}
.delay-t { animation-delay: 3.37s; }

/* Dash 1: Engate de Espingarda (METE COM FORÇA, ARRANCA) */
@keyframes pumpAction {
    0.00% { transform: translateY(35px) translateX(0px) scaleY(0); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); } 
    5.00% { transform: translateY(-2px) translateX(0px) scaleY(1.1); animation-timing-function: cubic-bezier(0.4, 0.8, 0.4, 1); filter: drop-shadow(0px 15px 5px rgba(255,255,255,0.3)); } 
    10.00% { transform: translateY(-5px) translateX(0px) scaleY(1); animation-timing-function: cubic-bezier(0.7, 0, 1, 1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); } 
    11.00% { transform: translateY(-2px) translateX(0px) scaleY(1); filter: drop-shadow(0px -6px 3px rgba(255,255,255,0.2)); } 
    12.00% { transform: translateY(0px) translateX(0px) scaleY(1); animation-timing-function: linear; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); } 
    20.00% { transform: translateY(0px) translateX(0px) scaleY(1); } 
    32.66% { transform: translateY(0px) translateX(0px) scaleY(1); } 
    34.33% { transform: translateY(0px) translateX(8px) scaleY(1); } /* GRAB E! */
    84.33% { transform: translateY(0px) translateX(-2px) scaleY(1); } /* MAX PULL 1.5s LATER */
    89.33% { transform: translateY(0px) translateX(-2px) scaleY(1); } /* HOLD */
    90.00% { transform: translateY(0px) translateX(-15px) skewX(20deg) scaleY(1); } /* RIPS BACK */
    91.66% { transform: translateY(0px) translateX(2px) skewX(-5deg) scaleY(1); } 
    100% { transform: translateY(0px) translateX(0px) skewX(0deg) scaleY(1); } 
}
.anim-pump { 
    animation: pumpAction 3.0s linear both; 
    transform-origin: center; 
    transform-box: fill-box;
}
.delay-dash1 { animation-delay: calc(3.57s + var(--offset-e-set)); }

/* E: Charging (TREMILIQUE MÁXIMO, INJEÇÃO SÚBITA) e Estilingue */
@keyframes chargeE {
    0.00% { opacity: 0.00; transform: scale(0.20) translate(1px, -1px); filter: drop-shadow(-3px 3px 0px rgba(255,255,255,0.3)) drop-shadow(-1px 3px 0px rgba(255,255,255,0.3)); }
    0.82% { opacity: 0.01; transform: scale(0.22) translate(1px, 1px); filter: drop-shadow(5px 4px 0px rgba(255,255,255,0.3)) drop-shadow(-2px 5px 0px rgba(255,255,255,0.3)); }
    1.65% { opacity: 0.02; transform: scale(0.23) translate(-1px, -1px); filter: drop-shadow(-4px 5px 0px rgba(255,255,255,0.3)) drop-shadow(3px 0px 0px rgba(255,255,255,0.3)); }
    2.47% { opacity: 0.03; transform: scale(0.25) translate(-2px, 2px); filter: drop-shadow(5px 0px 0px rgba(255,255,255,0.3)) drop-shadow(1px -6px 0px rgba(255,255,255,0.3)); }
    3.30% { opacity: 0.04; transform: scale(0.26) translate(2px, -2px); filter: drop-shadow(6px 4px 0px rgba(255,255,255,0.3)) drop-shadow(5px -6px 0px rgba(255,255,255,0.3)); }
    4.12% { opacity: 0.04; transform: scale(0.28) translate(1px, 1px); filter: drop-shadow(6px 3px 0px rgba(255,255,255,0.3)) drop-shadow(-1px 2px 0px rgba(255,255,255,0.3)); }
    4.95% { opacity: 0.05; transform: scale(0.30) translate(1px, -1px); filter: drop-shadow(-1px 4px 0px rgba(255,255,255,0.3)) drop-shadow(5px 2px 0px rgba(255,255,255,0.3)); }
    5.77% { opacity: 0.06; transform: scale(0.31) translate(1px, -1px); filter: drop-shadow(1px -3px 0px rgba(255,255,255,0.3)) drop-shadow(2px -3px 0px rgba(255,255,255,0.3)); }
    6.59% { opacity: 0.07; transform: scale(0.33) translate(2px, 1px); filter: drop-shadow(3px -3px 0px rgba(255,255,255,0.3)) drop-shadow(6px 2px 0px rgba(255,255,255,0.3)); }
    7.42% { opacity: 0.08; transform: scale(0.34) translate(-1px, -1px); filter: drop-shadow(4px -2px 0px rgba(255,255,255,0.3)) drop-shadow(-2px -3px 0px rgba(255,255,255,0.3)); }
    8.24% { opacity: 0.09; transform: scale(0.36) translate(-2px, 2px); filter: drop-shadow(2px 4px 0px rgba(255,255,255,0.3)) drop-shadow(5px 5px 0px rgba(255,255,255,0.3)); }
    9.07% { opacity: 0.10; transform: scale(0.38) translate(-2px, -2px); filter: drop-shadow(-4px -4px 0px rgba(255,255,255,0.3)) drop-shadow(6px 5px 0px rgba(255,255,255,0.3)); }
    9.89% { opacity: 0.11; transform: scale(0.39) translate(-2px, 2px); filter: drop-shadow(3px 5px 0px rgba(255,255,255,0.3)) drop-shadow(4px -1px 0px rgba(255,255,255,0.3)); }
    10.71% { opacity: 0.12; transform: scale(0.41) translate(-1px, -1px); filter: drop-shadow(0px 2px 0px rgba(255,255,255,0.3)) drop-shadow(6px 2px 0px rgba(255,255,255,0.3)); }
    11.54% { opacity: 0.12; transform: scale(0.42) translate(-1px, 1px); filter: drop-shadow(6px 1px 0px rgba(255,255,255,0.3)) drop-shadow(6px 3px 0px rgba(255,255,255,0.3)); }
    12.36% { opacity: 0.13; transform: scale(0.44) translate(-2px, 2px); filter: drop-shadow(-6px 6px 0px rgba(255,255,255,0.3)) drop-shadow(0px -3px 0px rgba(255,255,255,0.3)); }
    13.19% { opacity: 0.14; transform: scale(0.46) translate(-2px, 1px); filter: drop-shadow(1px 4px 0px rgba(255,255,255,0.3)) drop-shadow(6px 5px 0px rgba(255,255,255,0.3)); }
    14.01% { opacity: 0.15; transform: scale(0.47) translate(-2px, -1px); filter: drop-shadow(2px -2px 0px rgba(255,255,255,0.3)) drop-shadow(3px 0px 0px rgba(255,255,255,0.3)); }
    14.84% { opacity: 0.16; transform: scale(0.49) translate(-2px, 1px); filter: drop-shadow(-4px 0px 0px rgba(255,255,255,0.3)) drop-shadow(0px 5px 0px rgba(255,255,255,0.3)); }
    15.66% { opacity: 0.17; transform: scale(0.50) translate(-1px, 2px); filter: drop-shadow(6px -4px 0px rgba(255,255,255,0.3)) drop-shadow(4px -6px 0px rgba(255,255,255,0.3)); }
    16.48% { opacity: 0.18; transform: scale(0.52) translate(-2px, -2px); filter: drop-shadow(1px -1px 0px rgba(255,255,255,0.3)) drop-shadow(-6px 4px 0px rgba(255,255,255,0.3)); }
    17.31% { opacity: 0.19; transform: scale(0.54) translate(1px, -1px); filter: drop-shadow(-3px 2px 0px rgba(255,255,255,0.3)) drop-shadow(1px 4px 0px rgba(255,255,255,0.3)); }
    18.13% { opacity: 0.20; transform: scale(0.55) translate(2px, -2px); filter: drop-shadow(3px 2px 0px rgba(255,255,255,0.3)) drop-shadow(4px -3px 0px rgba(255,255,255,0.3)); }
    18.96% { opacity: 0.20; transform: scale(0.57) translate(1px, 2px); filter: drop-shadow(4px 1px 0px rgba(255,255,255,0.3)) drop-shadow(-6px 6px 0px rgba(255,255,255,0.3)); }
    19.78% { opacity: 0.21; transform: scale(0.58) translate(-1px, 2px); filter: drop-shadow(-5px -1px 0px rgba(255,255,255,0.3)) drop-shadow(5px 0px 0px rgba(255,255,255,0.3)); }
    20.61% { opacity: 0.22; transform: scale(0.60) translate(1px, -2px); filter: drop-shadow(-2px -2px 0px rgba(255,255,255,0.3)) drop-shadow(4px -6px 0px rgba(255,255,255,0.3)); }
    21.43% { opacity: 0.23; transform: scale(0.62) translate(1px, 2px); filter: drop-shadow(1px 2px 0px rgba(255,255,255,0.3)) drop-shadow(3px -4px 0px rgba(255,255,255,0.3)); }
    22.25% { opacity: 0.24; transform: scale(0.63) translate(1px, -2px); filter: drop-shadow(0px 6px 0px rgba(255,255,255,0.3)) drop-shadow(1px 5px 0px rgba(255,255,255,0.3)); }
    23.08% { opacity: 0.25; transform: scale(0.65) translate(1px, -2px); filter: drop-shadow(6px -1px 0px rgba(255,255,255,0.3)) drop-shadow(3px 4px 0px rgba(255,255,255,0.3)); }
    23.90% { opacity: 0.26; transform: scale(0.66) translate(-2px, 1px); filter: drop-shadow(-6px -3px 0px rgba(255,255,255,0.3)) drop-shadow(5px 6px 0px rgba(255,255,255,0.3)); }
    24.73% { opacity: 0.27; transform: scale(0.68) translate(-1px, -2px); filter: drop-shadow(2px 6px 0px rgba(255,255,255,0.3)) drop-shadow(2px 1px 0px rgba(255,255,255,0.3)); }
    25.55% { opacity: 0.28; transform: scale(0.70) translate(-2px, 1px); filter: drop-shadow(5px -4px 0px rgba(255,255,255,0.3)) drop-shadow(4px -1px 0px rgba(255,255,255,0.3)); }
    26.38% { opacity: 0.28; transform: scale(0.71) translate(1px, 2px); filter: drop-shadow(5px 4px 0px rgba(255,255,255,0.3)) drop-shadow(-4px 2px 0px rgba(255,255,255,0.3)); }
    27.20% { opacity: 0.29; transform: scale(0.73) translate(-2px, -2px); filter: drop-shadow(-5px 0px 0px rgba(255,255,255,0.3)) drop-shadow(2px -4px 0px rgba(255,255,255,0.3)); }
    28.02% { opacity: 0.30; transform: scale(0.74) translate(2px, -2px); filter: drop-shadow(-4px 0px 0px rgba(255,255,255,0.3)) drop-shadow(-5px 0px 0px rgba(255,255,255,0.3)); }
    28.85% { opacity: 0.31; transform: scale(0.76) translate(1px, 1px); filter: drop-shadow(-3px -3px 0px rgba(255,255,255,0.3)) drop-shadow(-1px 6px 0px rgba(255,255,255,0.3)); }
    29.67% { opacity: 0.32; transform: scale(0.78) translate(1px, 2px); filter: drop-shadow(3px 5px 0px rgba(255,255,255,0.3)) drop-shadow(2px 3px 0px rgba(255,255,255,0.3)); }
    30.50% { opacity: 0.33; transform: scale(0.79) translate(1px, -1px); filter: drop-shadow(3px 6px 0px rgba(255,255,255,0.3)) drop-shadow(-6px 4px 0px rgba(255,255,255,0.3)); }
    31.32% { opacity: 0.34; transform: scale(0.81) translate(-1px, 2px); filter: drop-shadow(1px 0px 0px rgba(255,255,255,0.3)) drop-shadow(6px 5px 0px rgba(255,255,255,0.3)); }
    32.14% { opacity: 0.35; transform: scale(0.82) translate(-1px, 2px); filter: drop-shadow(0px 3px 0px rgba(255,255,255,0.3)) drop-shadow(-5px -4px 0px rgba(255,255,255,0.3)); }
    32.97% { opacity: 0.36; transform: scale(0.84) translate(-2px, 2px); filter: drop-shadow(2px 6px 0px rgba(255,255,255,0.3)) drop-shadow(3px -5px 0px rgba(255,255,255,0.3)); }
    33.79% { opacity: 0.36; transform: scale(0.86) translate(-2px, -1px); filter: drop-shadow(-1px -5px 0px rgba(255,255,255,0.3)) drop-shadow(6px 5px 0px rgba(255,255,255,0.3)); }
    34.62% { opacity: 0.37; transform: scale(0.87) translate(-1px, -2px); filter: drop-shadow(6px 4px 0px rgba(255,255,255,0.3)) drop-shadow(-1px -2px 0px rgba(255,255,255,0.3)); }
    35.44% { opacity: 0.38; transform: scale(0.89) translate(2px, 1px); filter: drop-shadow(6px -6px 0px rgba(255,255,255,0.3)) drop-shadow(-4px -5px 0px rgba(255,255,255,0.3)); }
    36.27% { opacity: 0.39; transform: scale(0.90) translate(-2px, 1px); filter: drop-shadow(-5px -2px 0px rgba(255,255,255,0.3)) drop-shadow(5px 2px 0px rgba(255,255,255,0.3)); }
    37.09% { opacity: 0.40; transform: scale(0.92) translate(-1px, -1px); filter: drop-shadow(-2px -3px 0px rgba(255,255,255,0.3)) drop-shadow(-5px 6px 0px rgba(255,255,255,0.3)); }
    37.09% { opacity: 1; transform: scale(1.1) translate(0px, 0px); filter: none; }
    49.09% { opacity: 1; transform: scale(1.1) translate(0px, 0px); }
    49.77% { transform: scaleX(1.101) scaleY(1.096) translate(-0.50px, -0.40px) skewX(0.25deg); filter: none; }
    50.45% { transform: scaleX(1.103) scaleY(1.093) translate(-0.90px, -0.52px) skewX(0.50deg); filter: none; }
    51.14% { transform: scaleX(1.104) scaleY(1.089) translate(-1.00px, -0.54px) skewX(0.75deg); filter: none; }
    51.82% { transform: scaleX(1.105) scaleY(1.085) translate(-1.07px, -0.32px) skewX(1.00deg); filter: none; }
    52.50% { transform: scaleX(1.106) scaleY(1.081) translate(-0.68px, -0.51px) skewX(1.25deg); filter: none; }
    53.18% { transform: scaleX(1.108) scaleY(1.078) translate(-1.00px, -0.46px) skewX(1.50deg); filter: none; }
    53.86% { transform: scaleX(1.109) scaleY(1.074) translate(-2.14px, -0.40px) skewX(1.75deg); filter: none; }
    54.54% { transform: scaleX(1.110) scaleY(1.070) translate(-2.62px, 0.72px) skewX(2.00deg); filter: none; }
    55.23% { transform: scaleX(1.111) scaleY(1.066) translate(-1.45px, 0.81px) skewX(2.25deg); filter: none; }
    55.91% { transform: scaleX(1.113) scaleY(1.062) translate(-1.74px, 0.13px) skewX(2.50deg); filter: none; }
    56.59% { transform: scaleX(1.114) scaleY(1.059) translate(-3.50px, -0.75px) skewX(2.75deg); filter: none; }
    57.27% { transform: scaleX(1.115) scaleY(1.055) translate(-3.47px, 0.94px) skewX(3.00deg); filter: none; }
    57.95% { transform: scaleX(1.116) scaleY(1.051) translate(-2.29px, -0.00px) skewX(3.25deg); filter: none; }
    58.63% { transform: scaleX(1.117) scaleY(1.048) translate(-4.38px, -0.97px) skewX(3.50deg); filter: none; }
    59.32% { transform: scaleX(1.119) scaleY(1.044) translate(-4.59px, 0.36px) skewX(3.75deg); filter: none; }
    60.00% { transform: scaleX(1.120) scaleY(1.040) translate(-4.75px, 0.81px) skewX(4.00deg); filter: none; }
    60.68% { transform: scaleX(1.121) scaleY(1.036) translate(-3.98px, -1.06px) skewX(4.25deg); filter: none; }
    61.36% { transform: scaleX(1.123) scaleY(1.032) translate(-4.40px, 0.69px) skewX(4.50deg); filter: none; }
    62.04% { transform: scaleX(1.124) scaleY(1.029) translate(-5.08px, 0.01px) skewX(4.75deg); filter: none; }
    62.73% { transform: scaleX(1.125) scaleY(1.025) translate(-5.63px, -1.10px) skewX(5.00deg); filter: none; }
    63.41% { transform: scaleX(1.126) scaleY(1.021) translate(-4.45px, 0.90px) skewX(5.25deg); filter: none; }
    64.09% { transform: scaleX(1.127) scaleY(1.018) translate(-5.45px, -0.13px) skewX(5.50deg); filter: none; }
    64.77% { transform: scaleX(1.129) scaleY(1.014) translate(-5.15px, -0.77px) skewX(5.75deg); filter: none; }
    65.45% { transform: scaleX(1.130) scaleY(1.010) translate(-5.94px, -1.11px) skewX(6.00deg); filter: none; }
    66.13% { transform: scaleX(1.131) scaleY(1.006) translate(-6.66px, 0.84px) skewX(6.25deg); filter: none; }
    66.82% { transform: scaleX(1.133) scaleY(1.002) translate(-6.39px, 0.75px) skewX(6.50deg); filter: none; }
    67.50% { transform: scaleX(1.134) scaleY(0.999) translate(-6.08px, -0.83px) skewX(6.75deg); filter: none; }
    68.18% { transform: scaleX(1.135) scaleY(0.995) translate(-8.07px, 0.31px) skewX(7.00deg); filter: none; }
    68.86% { transform: scaleX(1.136) scaleY(0.991) translate(-8.11px, 1.54px) skewX(7.25deg); filter: none; }
    69.54% { transform: scaleX(1.137) scaleY(0.988) translate(-6.47px, 1.09px) skewX(7.50deg); filter: none; }
    70.22% { transform: scaleX(1.139) scaleY(0.984) translate(-7.94px, 0.29px) skewX(7.75deg); filter: none; }
    70.91% { transform: scaleX(1.140) scaleY(0.980) translate(-7.58px, 0.72px) skewX(8.00deg); filter: none; }
    71.59% { transform: scaleX(1.141) scaleY(0.976) translate(-8.72px, 1.60px) skewX(8.25deg); filter: none; }
    72.27% { transform: scaleX(1.142) scaleY(0.972) translate(-9.78px, 1.21px) skewX(8.50deg); filter: none; }
    72.95% { transform: scaleX(1.144) scaleY(0.969) translate(-8.51px, -0.06px) skewX(8.75deg); filter: none; }
    73.63% { transform: scaleX(1.145) scaleY(0.965) translate(-9.71px, 0.29px) skewX(9.00deg); filter: none; }
    74.31% { transform: scaleX(1.146) scaleY(0.961) translate(-7.59px, -0.02px) skewX(9.25deg); filter: none; }
    75.00% { transform: scaleX(1.147) scaleY(0.958) translate(-10.67px, 1.46px) skewX(9.50deg); filter: none; }
    75.68% { transform: scaleX(1.149) scaleY(0.954) translate(-7.83px, -1.20px) skewX(9.75deg); filter: none; }
    76.36% { transform: scaleX(1.150) scaleY(0.950) translate(-10.47px, -0.31px) skewX(10.00deg); filter: none; }
    79.09% { transform: scaleX(1.15) scaleY(0.95) translate(-10px, 0px) skewX(10deg); }
    79.45% { transform: scaleX(0.85) scaleY(1.1) translate(6px, 0px) skewX(-8deg); }
    80.45% { transform: scaleX(1.05) scaleY(0.95) translate(-5px, 0px) skewX(4deg); }
    81.00% { transform: scale(1.0) translate(0, 0); filter: none; }
    100% { opacity: 1; transform: scale(1) translate(0, 0); filter: none; }
}
.anim-charge { 
    animation: chargeE 5.5s linear forwards; 
    transform-origin: center; 
    transform-box: fill-box;
}
.delay-e { animation-delay: calc(1.90s + var(--offset-e-set)); }

/* Dash 2: Tiro rápido (ZIP 1) */
@keyframes spitDash2 {
    0% { opacity: 0; transform: translateX(-15px); } /* Nasce metade pra dentro do E */
    5% { opacity: 1; transform: translateX(-15px); }
    100% { opacity: 1; transform: translateX(0); } /* Bate seco no final */
}
.anim-spit2 { 
    animation: spitDash2 0.08s cubic-bezier(0.1, 0.9, 0.2, 1) forwards; 
    transform-origin: left; 
    transform-box: fill-box;
}

/* Dash 3: Tiro rápido (ZIP 2) partindo do local final do Dash 2 */
@keyframes spitDash3 {
    0% { opacity: 0; transform: translateX(-18px); } /* Nasce exatamente do final do dash2 */
    5% { opacity: 1; transform: translateX(-18px); }
    100% { opacity: 1; transform: translateX(0); } /* Bate seco no final */
}
.anim-spit3 { 
    animation: spitDash3 0.08s cubic-bezier(0.1, 0.9, 0.2, 1) forwards; 
    transform-origin: left; 
    transform-box: fill-box;
}
.delay-dash2 { animation-delay: calc(6.30s + var(--offset-e-set)); }
.delay-dash3 { animation-delay: calc(6.60s + var(--offset-e-set)); }

/* O M Cauteloso */
@keyframes cautiousM {
    /* Caminhada longa, perna esquerda e perna direita */
    0% { opacity: 0; filter: brightness(0.2); transform: translateY(40px) scale(0.1) rotate(-20deg); animation-timing-function: ease-out; -webkit-mask-position: 0% 100%; mask-position: 0% 100%; } 
    5% { opacity: 0.1; filter: brightness(0.25); transform: translateY(25px) scale(0.15) rotate(-35deg); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
    
    10% { opacity: 0.2; filter: brightness(0.3); transform: translateY(40px) scale(0.2) rotate(20deg); animation-timing-function: ease-out; -webkit-mask-position: 0% 100%; mask-position: 0% 100%; } 
    15% { opacity: 0.25; filter: brightness(0.35); transform: translateY(25px) scale(0.27) rotate(35deg); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
    
    20% { opacity: 0.3; filter: brightness(0.4); transform: translateY(40px) scale(0.35) rotate(-20deg); animation-timing-function: ease-out; -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
    25% { opacity: 0.35; filter: brightness(0.45); transform: translateY(25px) scale(0.42) rotate(-35deg); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
    
    30% { opacity: 0.4; filter: brightness(0.5); transform: translateY(40px) scale(0.5) rotate(20deg); animation-timing-function: ease-out; -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
    35% { opacity: 0.45; filter: brightness(0.55); transform: translateY(25px) scale(0.57) rotate(35deg); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
    
    40% { opacity: 0.5; filter: brightness(0.6); transform: translateY(40px) scale(0.65) rotate(-20deg); animation-timing-function: ease-out; -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
    45% { opacity: 0.55; filter: brightness(0.65); transform: translateY(25px) scale(0.7) rotate(-30deg); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
    
    50% { opacity: 0.6; filter: brightness(0.7); transform: translateY(40px) scale(0.75) rotate(20deg); animation-timing-function: ease-out; -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
    55% { opacity: 0.65; filter: brightness(0.75); transform: translateY(25px) scale(0.78) rotate(30deg); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
    
    60% { opacity: 0.7; filter: brightness(0.8); transform: translateY(40px) scale(0.8) rotate(0deg); animation-timing-function: ease-in-out; -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }

    /* Spot de Luz Acendendo (60% a 84%): Ele fica parado enquanto a luz revela ele */
    75% { opacity: 0.8; filter: brightness(0.9); transform: translateY(40px) scaleX(0.85) scaleY(0.75) rotate(0deg); -webkit-mask-position: 0% 100%; mask-position: 0% 100%; } 
    84% { opacity: 0.9; filter: brightness(1.2); transform: translateY(40px) scaleX(1.4) scaleY(0.2) rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
    
    /* Pulo esmagado inspirado no Hifen */
    90% { transform: translateY(-10px) scaleY(1.15) scaleX(0.85) rotate(0deg); animation-timing-function: cubic-bezier(0.4, 0.8, 0.4, 1); -webkit-mask-position: 0% 50%; mask-position: 0% 50%; filter: drop-shadow(0px 15px 5px rgba(255,255,255,0.3)); }
    96% { transform: translateY(5px) scaleY(0.9) scaleX(1.1) rotate(0deg); animation-timing-function: cubic-bezier(0.7, 0, 1, 1); -webkit-mask-position: 0% 0%; mask-position: 0% 0%; filter: drop-shadow(0px -5px 2px rgba(255,255,255,0.2)); }
    100% { opacity: 1; filter: brightness(1.0); transform: translateY(0) scale(1) rotate(0deg); -webkit-mask-position: 0% 0%; mask-position: 0% 0%; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); } 
}

.anim-cautious-m {
    animation: cautiousM 2.5s ease-in-out forwards;
    transform-origin: bottom center;
    transform-box: fill-box;
    /* Mscara de luz de cima para baixo */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0.6) 60%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0.6) 60%);
    -webkit-mask-size: 100% 200%;
    mask-size: 100% 200%;
    -webkit-mask-position: 0% 100%;
    mask-position: 0% 100%;
}

.delay-m { animation-delay: 0.1s; }

/* Snake Spit (E amarelo saindo do M) */
@keyframes spitSnake {
    0% { opacity: 0; transform: translate(-25px, 16px) rotate(-430deg) scale(0.2); animation-timing-function: linear; }
    20% { opacity: 1; transform: translate(-20px, -8.3px) rotate(-344deg) scale(0.36); animation-timing-function: linear; }
    40% { opacity: 1; transform: translate(-15px, -22.1px) rotate(-258deg) scale(0.52); animation-timing-function: linear; }
    60% { opacity: 1; transform: translate(-10px, -25.3px) rotate(-172deg) scale(0.68); animation-timing-function: linear; }
    80% { opacity: 1; transform: translate(-5px, -17.9px) rotate(-86deg) scale(0.84); animation-timing-function: linear; }
    100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}

.anim-snake-e {
    animation: spitSnake 0.70s forwards;
    transform-origin: left center;
    transform-box: fill-box;
}
.delay-e-curv { animation-delay: 2.60s; }

/* Snake Tail (S amarelo saindo do E) */
@keyframes spitSnakeTail {
    0% { opacity: 0; transform: translate(-45px, 25px) rotate(-430deg) scale(0.2); animation-timing-function: linear; }
    20% { opacity: 1; transform: translate(-36px, -16.8px) rotate(-344deg) scale(0.36); animation-timing-function: linear; }
    40% { opacity: 1; transform: translate(-27px, -40.2px) rotate(-258deg) scale(0.52); animation-timing-function: linear; }
    60% { opacity: 1; transform: translate(-18px, -45.2px) rotate(-172deg) scale(0.68); animation-timing-function: linear; }
    80% { opacity: 1; transform: translate(-9px, -31.8px) rotate(-86deg) scale(0.84); animation-timing-function: linear; }
    100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}

.anim-snake-s {
    animation: spitSnakeTail 0.70s forwards;
    transform-origin: left center;
    transform-box: fill-box;
}
.delay-s { animation-delay: 2.65s; }

/* Flash Súbito (ZLCIK!) sem mola */
@keyframes sparklePop {
    0% { opacity: 0; transform: scale(0.2); filter: brightness(3); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}


.anim-spring {
    animation: sparklePop 0.08s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transform-origin: left center;
    transform-box: fill-box;
}
.delay-flash { animation-delay: calc(6.70s + var(--offset-e-set)); }



/* Bottom Area */
.bottom-area {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding-bottom: 2rem;
    pointer-events: auto;
}

/* App Icon Space Paper */
.app-icon {
    width: 140px;
    height: 140px;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.app-icon:hover {
    transform: scale(1.05);
}

.icon-dot {
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
}

.icon-arrow {
    width: 32px;
    height: 32px;
}

.icon-text {
    font-size: 0.7rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 1px;
    margin-top: 5px;
}

/* Bottom Texts */
.bottom-texts {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bottom-texts h2 {
    font-size: 1.3rem;
    letter-spacing: 1px;
}

.url-text {
    font-size: 1rem;
    letter-spacing: 2px;
}

/* Layout Mobile */
@media (max-width: 1000px) {
    .hud-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr;
        gap: 2rem;
        padding: 2rem;
    }

    .bg-gradient-overlay {
        background: linear-gradient(to top, transparent 0%, transparent 30%, #000000 60%, #000000 100%);
    }

    .text-left {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        text-align: center;
        padding: 0;
        font-size: 0.9rem;
    }

    .logo-container {
        grid-column: 1;
        grid-row: 2;
        width: 280px;
        margin: 0 auto;
    }

    .text-right {
        grid-column: 1;
        grid-row: 3;
        justify-self: center;
        text-align: center;
        padding: 0;
        font-size: 0.9rem;
    }

    .bottom-area {
        grid-column: 1;
        grid-row: 4;
        justify-content: flex-end;
        padding-bottom: 1rem;
    }
}

/* GAME ACTIVE MODE (Transição ao clicar no Ícone) */
body.game-active .bg-gradient-overlay {
    transform: translateY(100vh);
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

body.game-active .text-left,
body.game-active .text-right,
body.game-active .bottom-area {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.5s ease;
}

body.game-active .bg-iframe-container {
    pointer-events: auto;
}

body.game-active .logo-container {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: calc(-50vh + 60px);
    margin-left: calc(50vw - 150px);
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0.3;
    pointer-events: auto;
    cursor: pointer;
    transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

body.game-active .animated-logo path,
body.game-active .animated-logo polygon {
    fill: #ffffff !important;
    transition: fill 1.5s ease;
}

/* --- Waveform Audio Button --- */
#audio-toggle {
    position: fixed;
    top: clamp(20px, 4vh, 40px);
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    z-index: 999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease-out;
    transform-origin: top center;
    touch-action: none;
}

#audio-toggle.snap-back {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#audio-toggle svg {
    overflow: visible;
}

#audio-toggle rect {
    fill: #ffffff;
    width: 4px;
    rx: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Playing State (Animated) */
#audio-toggle.playing rect {
    opacity: 1;
    animation: waveform-bounce 1.2s ease-in-out infinite both;
}

#audio-toggle rect:nth-child(1) { animation-delay: 0.0s; --max-h: 12px; --drag-mult: 0.4; }
#audio-toggle rect:nth-child(2) { animation-delay: 0.2s; --max-h: 22px; --drag-mult: 0.8; }
#audio-toggle rect:nth-child(3) { animation-delay: 0.4s; --max-h: 28px; --drag-mult: 1.0; }
#audio-toggle rect:nth-child(4) { animation-delay: 0.1s; --max-h: 16px; --drag-mult: 0.6; }
#audio-toggle rect:nth-child(5) { animation-delay: 0.3s; --max-h: 10px; --drag-mult: 0.3; }

@keyframes waveform-bounce {
    0%, 100% {
        height: calc(6px + (var(--drag-ext, 0px) * var(--drag-mult, 1) * 0.4));
        y: 11px;
    }
    50% {
        height: calc(var(--max-h) + (var(--drag-ext, 0px) * var(--drag-mult, 1) * 1.0));
        y: calc(14px - (var(--max-h) / 2));
    }
}

/* Muted State (Flat dots) */
#audio-toggle.muted rect {
    height: calc(4px + (var(--drag-ext, 0px) * var(--drag-mult, 1) * 0.8)) !important;
    y: calc(12px - ((var(--drag-ext, 0px) * var(--drag-mult, 1) * 0.8) / 2)) !important;
    opacity: 0.5;
    animation: none;
}