/* Фон */
body {
  margin: 0;
  padding: 0;
  background: url("Background.jpg") center/cover no-repeat fixed;
  overflow: hidden;
  font-family: "Science Gothic", sans-serif;
  color: white;
}

/* Сцена */
#scene {
  width: 100vw;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

/* CRT-overlay */
#scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0px,
    rgba(0, 0, 0, 0.3) 1px,
    transparent 2px,
    transparent 3px
  );
  opacity: 0.17;
  mix-blend-mode: soft-light;
  z-index: 3;
}

/* ---------- ЛОГОТИП ---------- */
#title {
  position: absolute;
  top: 6vh;
  width: 100%;
  text-align: center;

  font-family: "Science Gothic", sans-serif;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 6px;

  color: #d7faff;

  text-shadow:
    0 0 14px rgba(0, 210, 255, 1),
    0 0 40px rgba(0, 230, 255, 0.9);

  animation: titleGlow 4s ease-in-out infinite;
  z-index: 20;
}

@keyframes titleGlow {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(0, 210, 255, 0.8),
      0 0 25px rgba(0, 210, 255, 0.6);
  }
  50% {
    text-shadow:
      0 0 20px rgba(0, 250, 255, 1),
      0 0 50px rgba(0, 250, 255, 1);
  }
}

/* ---------- КОРПУС ---------- */
#box-base {
  position: absolute;
  width: 60vw;
  left: 50%;
  top: 67vh;
  transform: translate(-50%, -50%);
  z-index: 11;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* ---------- КРЫШКА ---------- */
#box-panel {
  position: absolute;
  width: 60vw;
  left: 50%;
  top: 57vh;
  transform: translate(-50%, -50%) rotateX(0deg);
  z-index: 1;
  pointer-events: none;
}

/* ---------- КРИСТАЛЛЫ ---------- */
#crystals-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9; /* между корпусом и крышкой */
}

.crystal {
  position: absolute;
  width: 11vw;
  opacity: 0.96;

  transition:
    left 0.6s cubic-bezier(.25,.6,.3,1),
    top 0.6s cubic-bezier(.25,.6,.3,1),
    transform 0.6s cubic-bezier(.25,.6,.3,1);

  filter: drop-shadow(0 0 12px rgba(120, 230, 255, 0.9));
}

.crystal-idle {
  animation: crystalPulse 2.3s ease-in-out infinite;
}

@keyframes crystalPulse {
  0%, 100% {
    transform: rotate(var(--rot)) scale(1);
  }
  50% {
    transform: rotate(var(--rot)) scale(1.06);
  }
}


/* ---------- ТЕКСТ ---------- */
#thought {
  position: absolute;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  text-align: center;

  font-size: 34px;
  font-weight: 500;

  opacity: 0;
  color: #c7f7ff;

  text-shadow:
    0 0 10px cyan,
    0 0 25px cyan;

  transition: opacity 0.3s ease;
  z-index: 15;
}

/* ---------- HINT ---------- */
#hint {
  position: absolute;
  width: 100%;
  bottom: 7vh;
  text-align: center;

  font-size: 18px;
  font-weight: 300;
  opacity: 0.9;

  animation: hintPulse 2.6s ease-in-out infinite;

  color: #c7faff;

  text-shadow:
    0 0 10px rgba(0, 160, 255, 1),
    0 0 30px rgba(0, 160, 255, .9);

  z-index: 18;
}

@keyframes hintPulse {
  50% { opacity: 0.3; }
}

/* Пиксельные разряды */
.spark-pixel {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #aefbff;
  opacity: 0.9;

  box-shadow:
    0 0 10px cyan,
    0 0 20px cyan;

  animation: pixelSpark 0.25s ease-out forwards;
  pointer-events: none;
  z-index: 9999;
}

@keyframes pixelSpark {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.7); opacity: 0.6; }
  100% { transform: scale(2.4) translateY(-3px); opacity: 0; }
}

#overlay-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center,
    rgba(50, 160, 255, 0.25),
    transparent 70%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}

/* iPad Pro 11 — портрет (реальная CSS ширина 834px) */
@media screen and (min-width: 1600px) and (max-width: 1800px) {

  #title {
    font-size: 52px;
    letter-spacing: 8px;
    top: 4vh;
  }

  #box-base {
    width: 50vw;
    top: 72vh;
  }

  #box-panel {
    width: 50vw;
    top: 60vh;
  }

  .crystal {
    width: 9vw;
    margin-top: -5vh;
    filter: drop-shadow(0 0 9px rgba(120, 230, 255, 0.9));
    transition:
      left 0.8s cubic-bezier(.25,.6,.3,1),
      top 0.8s cubic-bezier(.25,.6,.3,1),
      transform 0.8s cubic-bezier(.25,.6,.3,1);
  }

  #thought {
    font-size: 54px;
    width: 80vw;
  }

  #hint {
    font-size: 40px;
    bottom: 5vh;
  }

  #crystals-container {
    transform: translateY(6vh);
  }
}