/* files/style.css */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #121212;
  color: #E0E0E0;
}
h1 {
  text-align: center;
  margin-top: 2rem;
}
.container, form, #response { text-align: center; }

.cube-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 10rem auto;         /* Default for desktop: large margin */
  perspective: 800px;
}

/* Responsive: on mobile, use smaller top/bottom margins */
@media (max-width: 600px) {
  .cube-container {
    margin: 5rem auto 2rem auto; /* top: 5rem, bottom: 2rem, left/right: auto */
  }
}

.cube {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0; left: 0;
  transform-style: preserve-3d;
  animation: rotateCube 30s infinite linear;
}
.face {
  position: absolute; width:200px; height:200px;
  border:2px solid #007acc; /* VSCode blue */
  box-shadow:0 0 15px #007acc;
  background: transparent; box-sizing: border-box;
}
.particles {
  position: absolute; width:2px; height:2px;
  top:50%; left:50%; perspective:800px;
  pointer-events:none;
}
.particle {
  position:absolute; width:3px; height:3px;
  background:#007acc;
  border-radius:50%; opacity:0.8;
  animation: moveParticle linear infinite;
}
@keyframes moveParticle {
  0% {transform:translate3d(var(--startX),var(--startY),var(--startZ));opacity:1;}
 100%{transform:translate3d(var(--endX),var(--endY),var(--endZ));opacity:0;}
}
@keyframes spiral-collect {
  0% {transform:translate3d(var(--startX),var(--startY),var(--startZ));opacity:1;}
 100%{transform:translate3d(0,0,0) rotate(720deg);opacity:0;}
}
.particle.spiral-collect { animation: spiral-collect ease-in-out; }

.git-icon {
  width:100px; height:100px;
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate3d(1,1,1,0deg);
  transform-style: preserve-3d; backface-visibility:hidden;
  animation: rotateIcon 30s infinite linear;
}
@keyframes rotateIcon {
  from {transform:translate(-50%,-50%) rotateX(0deg) rotateY(0deg);}  
  to   {transform:translate(-50%,-50%) rotateX(360deg) rotateY(360deg);}  
}
.face.front  {transform:rotateY(  0deg) translateZ(100px);}  
.face.back   {transform:rotateY(180deg) translateZ(100px);}  
.face.right  {transform:rotateY( 90deg) translateZ(100px);}  
.face.left   {transform:rotateY(-90deg) translateZ(100px);}  
.face.top    {transform:rotateX( 90deg) translateZ(100px);}  
.face.bottom {transform:rotateX(-90deg) translateZ(100px);}  
@keyframes rotateCube {
  from {transform:rotateX(0deg) rotateY(0deg);}  
  to   {transform:rotateX(360deg) rotateY(360deg);}  
}

/* AES form styling */
#keyForm {
  max-width: 300px; margin: 1rem auto;
  background: #1e1e1e; padding:1rem; border-radius:8px;
  box-shadow:0 0 10px rgba(0,122,204,0.5); /* blue shadow */
}
#keyForm label {
  display:block; margin-bottom:0.5rem; font-weight:bold;
  color:#E0E0E0;
}
#keyForm input[type="text"] {
  width:80%; padding:0.5rem; margin-bottom:1rem;
  background:#2e2e2e; border:1px solid #555; color:#E0E0E0;
  border-radius:4px; font-size:1rem;
}
#keyForm button {
  width:100%; padding:0.5rem; background:#007acc; /* VSCode blue */
  border:none; border-radius:4px; color:#fff;
  font-size:1rem; cursor:pointer; transition:background 0.2s;
}
#keyForm button:hover { background:#005f99; }
#response { margin-top:1rem; font-size:0.9rem; text-align:center; }

/* Blurred wobble background at bottom */
.wobble-bg {
  position: fixed;
  left: 50%;
  bottom: -100px;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse at center, #007acc 60%, transparent 100%);
  filter: blur(80px) brightness(1.2);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
  animation: wobbleMove 8s ease-in-out infinite alternate;
}

@keyframes wobbleMove {
  0%   { transform: translateX(-50%) scale(1,1) rotate(-2deg);}
  40%  { transform: translateX(-48%) scale(1.5,0.95) rotate(2deg);}
  60%  { transform: translateX(-52%) scale(0.95,1.1) rotate(-3deg);}
  100% { transform: translateX(-50%) scale(1.05,1) rotate(2deg);}
}

.center-content, .cube-container {
  position: relative;
  z-index: 2;
}

#keyForm.red-glow {
  animation: redGlow 0.6s;
}
@keyframes redGlow {
  0%   { box-shadow: 0 0 0px 0px #ff0033; }
  30%  { box-shadow: 0 0 12px 4px #ff0033; }
  70%  { box-shadow: 0 0 12px 4px #ff0033; }
  100% { box-shadow: 0 0 0px 0px #ff0033; }
}

.hex-char-particle {
  position: fixed;
  font-size: 2.2rem;
  font-family: monospace;
  color: #ff0033;
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
  z-index: 1; /* Behind the form */
  left: 0; top: 0;
  will-change: transform, opacity;
  animation: hexCharExplosion 2.2s forwards cubic-bezier(.25,.46,.45,.94);
}

@keyframes hexCharExplosion {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  20% {
    opacity: 1;
    /* Initial burst outwards */
    transform: translate(var(--x), var(--y)) scale(1.2) rotate(var(--rot));
  }
  60% {
    opacity: 1;
    /* Start falling, still moving outwards */
    transform: translate(var(--x), var(--y2)) scale(1.1) rotate(var(--rot));
  }
  100% {
    opacity: 0;
    /* Fall to bottom of screen */
    transform: translate(var(--xFinal), var(--yFinal)) scale(0.9) rotate(var(--rotEnd));
  }
}

.hex-char-particle.arc-pop {
  position: fixed;
  font-size: 2.2rem;
  font-family: monospace;
  color: #ff0033;
  opacity: 0.92;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  left: 0; top: 0;
  transform: translate(0,0);
  animation: arcPop var(--duration,1.2s) cubic-bezier(.42,0,.58,1) both;
  animation-delay: var(--delay,0s);
}
@keyframes arcPop {
  0% {
    opacity: 0;
    transform: translate(0,0) scale(0.7);
  }
  20% {
    opacity: 1;
    transform: translate(0,0) scale(1.1);
  }
  60% {
    opacity: 1;
    transform: translate(var(--arcX), var(--arcY)) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translate(var(--arcX), var(--arcY)) scale(1);
  }
}
.hex-char-particle.arc-pop.arc-hide {
  animation: arcHide 0.5s cubic-bezier(.42,0,.58,1) both;
}
@keyframes arcHide {
  0% {
    opacity: 1;
    transform: translate(var(--arcX), var(--arcY)) scale(1);
  }
  60% {
    opacity: 0.7;
    transform: translate(var(--arcBackX), var(--arcBackY)) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translate(0,0) scale(0.5);
  }
}

.hex-char-particle.simple-pop {
  position: fixed;
  font-size: 2.2rem;
  font-family: monospace;
  color: #ff0033;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  animation: simplePop var(--duration,0.8s) ease both;
  animation-delay: var(--delay,0s);
}
@keyframes simplePop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
}

.hex-char-particle.pop-up {
  position: fixed;
  font-size: 2.2rem;
  font-family: monospace;
  color: #ff0033;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  left: 0; top: 0;
  transform: translate(-50%, 0) scale(0.7);
  animation: popUpFade var(--duration,0.7s) cubic-bezier(.42,0,.58,1) both;
}
@keyframes popUpFade {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.7);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1.25);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -40px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80px) scale(0.8);
  }
}

.hex-char-hint {
  font-family: monospace;
  font-size: 1.4rem;
  color: #ff0033;
  background: rgba(30,30,30,0.95);
  border-radius: 6px;
  padding: 0.2em 0.7em;
  box-shadow: 0 2px 12px #ff003355;
  opacity: 0;
  animation: hexHintFade 5s forwards;
  pointer-events: none;
  user-select: none;
}
@keyframes hexHintFade {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.95);}
  10%  { opacity: 1; transform: translate(-50%, -6px) scale(1.08);}
  80%  { opacity: 1; transform: translate(-50%, -6px) scale(1);}
  100% { opacity: 0; transform: translate(-50%, 0) scale(0.95);}
}