/*
=== BRICKOUT GAME - CHEAT CODES & CONTROLS ===

🎮 CHEAT CODES :
• Q + L (simultanément) : Active le cheat ! 
  - Balle devient 10x plus grosse
  - Raquette devient 2x plus large

• DELETE ou BACKSPACE : Désactive le cheat
  - Remet la balle et raquette à leur taille normale

⌨️ CONTRÔLES :
• P : Mettre en pause / reprendre le jeu
• ← → : Déplacer la raquette
• ↑ : Augmenter la vitesse de la balle
• ↓ : Diminuer la vitesse de la balle

Enjoy ! 🚀
*/

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

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #0f0f1a;
  color: #ffffff;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  position: relative;
}

.content {
  text-align: center;
  padding: 2rem;
  max-width: 800px;
  animation: fadeIn 2s ease-in-out;
}

h1 {
  font-size: 4rem;
  margin-bottom: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #f0f0f0;
}

.subtitle {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  font-weight: 300;
  color: #a0a0a0;
  font-family: 'Space Mono', monospace;
}

.tech-stack {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
  margin-bottom: 2rem;
}

.tech-icon {
  font-size: 2.5rem;
  color: #6e6eff;
  transition: all 0.3s ease;
  animation: float 3s infinite ease-in-out;
}

.tech-icon:nth-child(1) {
  animation-delay: 0s;
}
.tech-icon:nth-child(2) {
  animation-delay: 0.5s;
}
.tech-icon:nth-child(3) {
  animation-delay: 1s;
}
.tech-icon:nth-child(4) {
  animation-delay: 1.5s;
}
.tech-icon:nth-child(5) {
  animation-delay: 2s;
}
.tech-icon:nth-child(6) {
  animation-delay: 2.5s;
}

.tech-icon:hover {
  color: #ffffff;
  transform: translateY(-10px);
}

footer {
  position: absolute;
  bottom: 3rem;
  font-size: 0.9rem;
  color: #666;
  text-align: center;
  width: 100%;
}

.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Effet Glitch */
.glitch {
  position: relative;
  color: white;
  text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
    -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
    0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  animation: glitch 2s infinite;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #ff00c1;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
      0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  14% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
      0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  15% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  99% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  100% {
    text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
      -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
}

@keyframes glitch-anim {
  0% {
    clip: rect(31px, 9999px, 94px, 0);
  }
  5% {
    clip: rect(70px, 9999px, 71px, 0);
  }
  10% {
    clip: rect(29px, 9999px, 83px, 0);
  }
  15% {
    clip: rect(16px, 9999px, 91px, 0);
  }
  20% {
    clip: rect(2px, 9999px, 23px, 0);
  }
  25% {
    clip: rect(60px, 9999px, 73px, 0);
  }
  30% {
    clip: rect(14px, 9999px, 56px, 0);
  }
  35% {
    clip: rect(60px, 9999px, 23px, 0);
  }
  40% {
    clip: rect(29px, 9999px, 3px, 0);
  }
  45% {
    clip: rect(42px, 9999px, 46px, 0);
  }
  50% {
    clip: rect(46px, 9999px, 3px, 0);
  }
  55% {
    clip: rect(9px, 9999px, 76px, 0);
  }
  60% {
    clip: rect(42px, 9999px, 25px, 0);
  }
  65% {
    clip: rect(86px, 9999px, 87px, 0);
  }
  70% {
    clip: rect(27px, 9999px, 89px, 0);
  }
  75% {
    clip: rect(67px, 9999px, 66px, 0);
  }
  80% {
    clip: rect(75px, 9999px, 55px, 0);
  }
  85% {
    clip: rect(54px, 9999px, 84px, 0);
  }
  90% {
    clip: rect(45px, 9999px, 31px, 0);
  }
  95% {
    clip: rect(95px, 9999px, 7px, 0);
  }
  100% {
    clip: rect(44px, 9999px, 34px, 0);
  }
}

@keyframes glitch-anim2 {
  0% {
    clip: rect(65px, 9999px, 65px, 0);
  }
  5% {
    clip: rect(5px, 9999px, 7px, 0);
  }
  10% {
    clip: rect(53px, 9999px, 25px, 0);
  }
  15% {
    clip: rect(35px, 9999px, 9px, 0);
  }
  20% {
    clip: rect(38px, 9999px, 98px, 0);
  }
  25% {
    clip: rect(91px, 9999px, 96px, 0);
  }
  30% {
    clip: rect(75px, 9999px, 42px, 0);
  }
  35% {
    clip: rect(64px, 9999px, 49px, 0);
  }
  40% {
    clip: rect(35px, 9999px, 73px, 0);
  }
  45% {
    clip: rect(89px, 9999px, 38px, 0);
  }
  50% {
    clip: rect(26px, 9999px, 52px, 0);
  }
  55% {
    clip: rect(23px, 9999px, 35px, 0);
  }
  60% {
    clip: rect(76px, 9999px, 94px, 0);
  }
  65% {
    clip: rect(7px, 9999px, 23px, 0);
  }
  70% {
    clip: rect(25px, 9999px, 55px, 0);
  }
  75% {
    clip: rect(52px, 9999px, 92px, 0);
  }
  80% {
    clip: rect(85px, 9999px, 33px, 0);
  }
  85% {
    clip: rect(74px, 9999px, 5px, 0);
  }
  90% {
    clip: rect(18px, 9999px, 82px, 0);
  }
  95% {
    clip: rect(30px, 9999px, 62px, 0);
  }
  100% {
    clip: rect(88px, 9999px, 43px, 0);
  }
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

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

/* Styles pour le jeu Brickout */
#brickout-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }

  .subtitle {
    font-size: 1.2rem;
  }

  .tech-stack {
    gap: 1rem;
  }

  .tech-icon {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2rem;
  }

  .subtitle {
    font-size: 1rem;
  }

  .tech-stack {
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .tech-icon {
    font-size: 1.8rem;
  }
}