/* ===== VARIÁVEIS CSS ===== */
:root {
/* Cores da Zero Two */
--primary-pink: #ff69b4;
--secondary-pink: #ff1493;
--accent-pink: #ffb6c1;
--dark-pink: #c71585;
--light-pink: #ffe4e1;
--white: #ffffff;
--black: #1a1a1a;
--gray: #f5f5f5;
--dark-gray: #333333;

/* Gradientes */
--gradient-primary: linear-gradient(135deg, var(--primary-pink), var(--secondary-pink));
--gradient-secondary: linear-gradient(135deg, var(--accent-pink), var(--light-pink));
--gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-rainbow: linear-gradient(45deg, #ff69b4, #ff1493, #ffb6c1, #ffe4e1, #ff69b4);

/* Sombras */
--shadow-soft: 0 8px 32px rgba(255, 105, 180, 0.1);
--shadow-medium: 0 12px 40px rgba(255, 105, 180, 0.2);
--shadow-strong: 0 20px 60px rgba(255, 105, 180, 0.3);
--shadow-glow: 0 0 20px rgba(255, 105, 180, 0.5);

/* Transições */
--transition-fast: 0.3s ease;
--transition-medium: 0.5s ease;
--transition-slow: 0.8s ease;
--transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===== RESET E BASE ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
background: var(--gradient-bg);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
position: relative;
}

/* ===== PARTÍCULAS ANIMADAS ===== */
.particles-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}

.particle {
position: absolute;
width: 4px;
height: 4px;
background: var(--primary-pink);
border-radius: 50%;
animation: float 6s infinite ease-in-out;
box-shadow: 0 0 10px var(--primary-pink);
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 20%; animation-delay: 1s; }
.particle:nth-child(3) { left: 30%; animation-delay: 2s; }
.particle:nth-child(4) { left: 40%; animation-delay: 3s; }
.particle:nth-child(5) { left: 50%; animation-delay: 4s; }
.particle:nth-child(6) { left: 60%; animation-delay: 5s; }
.particle:nth-child(7) { left: 70%; animation-delay: 0.5s; }
.particle:nth-child(8) { left: 80%; animation-delay: 1.5s; }
.particle:nth-child(9) { left: 90%; animation-delay: 2.5s; }
.particle:nth-child(10) { left: 95%; animation-delay: 3.5s; }
.particle:nth-child(11) { left: 5%; animation-delay: 1.2s; }
.particle:nth-child(12) { left: 15%; animation-delay: 2.8s; }
.particle:nth-child(13) { left: 25%; animation-delay: 0.8s; }
.particle:nth-child(14) { left: 35%; animation-delay: 3.2s; }
.particle:nth-child(15) { left: 45%; animation-delay: 1.8s; }

@keyframes float {
0%, 100% { 
transform: translateY(100vh) scale(0) rotate(0deg); 
opacity: 0; 
}
50% { 
transform: translateY(-100px) scale(1) rotate(180deg); 
opacity: 1; 
}
}

/* ===== EFEITOS DE FUNDO ADICIONAIS ===== */
.background-effects {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}

/* Bolhas flutuantes */
.bubble {
position: absolute;
font-size: 1.5rem;
animation: bubbleFloat 8s infinite ease-in-out;
filter: drop-shadow(0 0 10px rgba(255, 105, 180, 0.3));
}

.bubble-1 { top: 10%; left: 5%; animation-delay: 0s; }
.bubble-2 { top: 20%; right: 10%; animation-delay: 1.5s; }
.bubble-3 { top: 30%; left: 15%; animation-delay: 3s; }
.bubble-4 { top: 15%; right: 20%; animation-delay: 4.5s; }
.bubble-5 { top: 40%; left: 8%; animation-delay: 6s; }
.bubble-6 { top: 25%; right: 5%; animation-delay: 7.5s; }
.bubble-7 { top: 35%; left: 25%; animation-delay: 2s; }
.bubble-8 { top: 45%; right: 15%; animation-delay: 5.5s; }

@keyframes bubbleFloat {
0%, 100% { 
transform: translateY(0) scale(1) rotate(0deg); 
opacity: 0.7; 
}
50% { 
transform: translateY(-30px) scale(1.2) rotate(180deg); 
opacity: 1; 
}
}

/* Ondas animadas */
.wave {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid rgba(255, 105, 180, 0.2);
border-radius: 50%;
animation: waveExpand 4s infinite ease-out;
}

.wave-1 { 
top: 50%; 
left: 10%; 
animation-delay: 0s; 
}
.wave-2 { 
top: 30%; 
right: 15%; 
animation-delay: 1.5s; 
}
.wave-3 { 
bottom: 20%; 
left: 20%; 
animation-delay: 3s; 
}

@keyframes waveExpand {
0% { 
transform: scale(0); 
opacity: 1; 
}
100% { 
transform: scale(3); 
opacity: 0; 
}
}

/* Estrelas brilhantes */
.twinkle-star {
position: absolute;
font-size: 1.2rem;
animation: twinkle 3s infinite ease-in-out;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

.twinkle-star.star-1 { top: 15%; left: 12%; animation-delay: 0s; }
.twinkle-star.star-2 { top: 25%; right: 8%; animation-delay: 0.6s; }
.twinkle-star.star-3 { top: 35%; left: 18%; animation-delay: 1.2s; }
.twinkle-star.star-4 { top: 45%; right: 12%; animation-delay: 1.8s; }
.twinkle-star.star-5 { top: 55%; left: 8%; animation-delay: 2.4s; }

@keyframes twinkle {
0%, 100% { 
transform: scale(1) rotate(0deg); 
opacity: 0.5; 
}
50% { 
transform: scale(1.5) rotate(180deg); 
opacity: 1; 
}
}

/* Corações pulsantes */
.pulse-heart {
position: absolute;
font-size: 1.3rem;
animation: pulseHeart 2s infinite ease-in-out;
filter: drop-shadow(0 0 8px rgba(255, 105, 180, 0.6));
}

.pulse-heart.heart-1 { top: 18%; left: 22%; animation-delay: 0s; }
.pulse-heart.heart-2 { top: 28%; right: 18%; animation-delay: 0.5s; }
.pulse-heart.heart-3 { top: 38%; left: 28%; animation-delay: 1s; }
.pulse-heart.heart-4 { top: 48%; right: 25%; animation-delay: 1.5s; }

@keyframes pulseHeart {
0%, 100% { 
transform: scale(1); 
opacity: 0.8; 
}
50% { 
transform: scale(1.3); 
opacity: 1; 
}
}

/* Nuvens fofas */
.cloud {
position: absolute;
font-size: 2rem;
animation: cloudFloat 10s infinite ease-in-out;
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
}

.cloud-1 { top: 5%; left: 5%; animation-delay: 0s; }
.cloud-2 { top: 15%; right: 5%; animation-delay: 3s; }
.cloud-3 { top: 25%; left: 10%; animation-delay: 6s; }

@keyframes cloudFloat {
0%, 100% { 
transform: translateX(0) scale(1); 
opacity: 0.6; 
}
50% { 
transform: translateX(20px) scale(1.1); 
opacity: 1; 
}
}

/* ===== CONTAINER PRINCIPAL ===== */
.main-container {
position: relative;
z-index: 2;
width: 100%;
max-width: 500px;
padding: 20px;
}

/* ===== CARD DE ERRO ===== */
.error-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 30px;
padding: 40px 30px;
box-shadow: var(--shadow-strong);
border: 2px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
animation: slideIn 0.8s ease-out;
}

.error-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
}

.error-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 105, 180, 0.05) 50%, transparent 70%);
animation: shimmer 3s infinite;
}

@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

@keyframes slideIn {
from {
opacity: 0;
transform: translateY(50px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

/* ===== CABEÇALHO ===== */
.header {
text-align: center;
margin-bottom: 30px;
}

/* ===== AVATAR DA ZERO TWO ===== */
.zero-two-avatar {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.avatar-circle {
width: 80px;
height: 80px;
background: var(--gradient-primary);
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-medium);
animation: pulse 2s infinite;
}

@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}

.horns {
position: absolute;
top: -15px;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 10px;
}

.horn {
width: 8px;
height: 20px;
background: var(--dark-pink);
border-radius: 50% 50% 0 0;
position: relative;
}

.horn.left {
transform: rotate(-15deg);
}

.horn.right {
transform: rotate(15deg);
}

.face {
width: 50px;
height: 50px;
background: var(--light-pink);
border-radius: 50%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.eyes {
display: flex;
gap: 8px;
margin-bottom: 5px;
}

.eye {
width: 8px;
height: 8px;
background: var(--dark-gray);
border-radius: 50%;
animation: blink 3s infinite;
}

@keyframes blink {
0%, 90%, 100% { transform: scaleY(1); }
95% { transform: scaleY(0.1); }
}

.mouth {
width: 12px;
height: 6px;
border: 2px solid var(--dark-gray);
border-top: none;
border-radius: 0 0 12px 12px;
}

/* Efeitos de brilho no avatar */
.avatar-sparkle {
position: absolute;
font-size: 0.8rem;
animation: sparkle 2s infinite ease-in-out;
}

.avatar-sparkle.sparkle-1 {
top: -5px;
right: -5px;
animation-delay: 0s;
}

.avatar-sparkle.sparkle-2 {
bottom: -5px;
left: -5px;
animation-delay: 1s;
}

@keyframes sparkle {
0%, 100% { 
transform: scale(0) rotate(0deg); 
opacity: 0; 
}
50% { 
transform: scale(1) rotate(180deg); 
opacity: 1; 
}
}

/* ===== CÓDIGO DE ERRO ===== */
.error-code {
font-family: 'Orbitron', monospace;
font-size: 4rem;
font-weight: 900;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
animation: glowText 2s ease-in-out infinite alternate;
}

@keyframes glowText {
from { filter: drop-shadow(0 0 5px rgba(255, 105, 180, 0.5)); }
to { filter: drop-shadow(0 0 15px rgba(255, 105, 180, 0.8)); }
}

.error-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 20px;
}

/* ===== MENSAGEM DE ERRO ===== */
.error-message {
text-align: center;
margin-bottom: 30px;
}

.message-icon {
font-size: 2rem;
color: var(--primary-pink);
margin-bottom: 15px;
animation: bounce 2s infinite;
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}

.message-text {
font-size: 1.1rem;
color: var(--dark-gray);
margin-bottom: 10px;
line-height: 1.6;
}

.highlight {
color: var(--primary-pink);
font-weight: 600;
text-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
}

.message-subtitle {
font-size: 0.9rem;
color: #666;
line-height: 1.5;
}

/* ===== BOTÕES DE AÇÃO ===== */
.action-buttons {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}

.btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 25px;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
transition: var(--transition-fast);
border: none;
cursor: pointer;
min-width: 140px;
justify-content: center;
position: relative;
overflow: hidden;
}

.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}

.btn:hover::before {
left: 100%;
}

.btn-primary {
background: var(--gradient-primary);
color: var(--white);
box-shadow: var(--shadow-medium);
}

.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-strong);
}

.btn-secondary {
background: var(--gray);
color: var(--dark-gray);
border: 2px solid #e0e0e0;
}

.btn-secondary:hover {
background: var(--light-pink);
border-color: var(--primary-pink);
transform: translateY(-2px);
}

/* ===== ELEMENTOS DECORATIVOS ===== */
.decorative-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}

.floating-heart,
.floating-star,
.floating-flower {
position: absolute;
font-size: 1.2rem;
animation: floatElement 4s infinite ease-in-out;
}

.floating-heart.heart-1 { top: 10%; left: 10%; animation-delay: 0s; }
.floating-heart.heart-2 { top: 20%; right: 15%; animation-delay: 1s; }
.floating-heart.heart-3 { bottom: 30%; left: 20%; animation-delay: 2s; }
.floating-star.star-1 { top: 15%; right: 10%; animation-delay: 0.5s; }
.floating-star.star-2 { bottom: 20%; right: 20%; animation-delay: 1.5s; }
.floating-flower.flower-1 { top: 25%; left: 15%; animation-delay: 0.8s; }
.floating-flower.flower-2 { bottom: 15%; left: 25%; animation-delay: 2.5s; }

@keyframes floatElement {
0%, 100% { 
transform: translateY(0) rotate(0deg) scale(1); 
opacity: 0.7; 
}
50% { 
transform: translateY(-10px) rotate(180deg) scale(1.1); 
opacity: 1; 
}
}

/* ===== RESPONSIVIDADE ===== */
@media (max-width: 768px) {
.main-container {
padding: 15px;
}

.error-card {
padding: 30px 20px;
border-radius: 25px;
}

.error-code {
font-size: 3rem;
}

.error-title {
font-size: 1.3rem;
}

.action-buttons {
flex-direction: column;
align-items: center;
}

.btn {
width: 100%;
max-width: 250px;
}

/* Ajustes para elementos de fundo em mobile */
.bubble, .twinkle-star, .pulse-heart {
font-size: 1.2rem;
}

.cloud {
font-size: 1.5rem;
}
}

@media (max-width: 480px) {
.error-code {
font-size: 2.5rem;
}

.error-title {
font-size: 1.1rem;
}

.message-text {
font-size: 1rem;
}

.avatar-circle {
width: 60px;
height: 60px;
}

.face {
width: 40px;
height: 40px;
}

.horns {
top: -12px;
}

.horn {
width: 6px;
height: 15px;
}

/* Reduzir elementos de fundo em telas muito pequenas */
.particle {
width: 3px;
height: 3px;
}

.bubble, .twinkle-star, .pulse-heart {
font-size: 1rem;
}

.cloud {
font-size: 1.2rem;
}
}

/* ===== EFEITOS DE HOVER ADICIONAIS ===== */
.error-card:hover {
transform: translateY(-5px);
box-shadow: 0 25px 80px rgba(255, 105, 180, 0.4);
}

.btn:hover {
transform: translateY(-2px) scale(1.02);
}

/* ===== ANIMAÇÕES DE ENTRADA ===== */
.header {
animation: fadeInUp 0.8s ease-out 0.2s both;
}

.error-message {
animation: fadeInUp 0.8s ease-out 0.4s both;
}

.action-buttons {
animation: fadeInUp 0.8s ease-out 0.6s both;
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* ===== EFEITOS ESPECIAIS ===== */
/* Efeito de chuva de pétalas */
@keyframes petalFall {
0% {
transform: translateY(-100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}

/* Efeito de brilho no hover dos botões */
.btn:hover {
box-shadow: 0 0 20px rgba(255, 105, 180, 0.6);
}

/* Efeito de pulso no card */
.error-card:hover {
animation: cardPulse 0.3s ease-in-out;
}

@keyframes cardPulse {
0%, 100% { transform: translateY(-5px) scale(1); }
50% { transform: translateY(-5px) scale(1.02); }
}