/* ============================================
   The Harmonic Monoliths - CSS 3D Crystals
   ============================================ */

:root {
  --bass-color: #4A1A6B;
  --bass-glow: #8B5CF6;
  --pad-color: #D4820E;
  --pad-glow: #F59E0B;
  --arp-color: #0E8E9E;
  --arp-glow: #06B6D4;
  --texture-color: #E6B84D;
  --texture-glow: #FBBF24;

  --monolith-width: 60px;
  --monolith-height: 180px;
  --monolith-depth: 40px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  user-select: none;
}

/* Perspective Container */
.perspective-1000 {
  perspective: 1000px;
}

/* ============================================
   Monolith Wrapper
   ============================================ */

.monolith-wrapper {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.monolith-wrapper:hover .monolith {
  transform: translateY(-10px) rotateY(5deg);
}

.monolith-wrapper.active .monolith {
  transform: translateY(-100px) rotateY(15deg) rotateX(-5deg);
}

.monolith-wrapper.active .monolith-glow {
  opacity: 1;
  transform: scale(1.5);
}

/* ============================================
   3D Monolith Crystal
   ============================================ */

.monolith {
  width: var(--monolith-width);
  height: var(--monolith-height);
  position: relative;
  transform-style: preserve-3d;
  transform: translateY(0) rotateY(0deg) translateZ(0);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);

  /* [M01 Fix] Safari 3D 優化 */
  -webkit-transform-style: preserve-3d;
  will-change: transform;
}

/* Crystal Faces */
.monolith-face {
  position: absolute;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(0, 0, 0, 0.2) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);

  /* [M01 Fix] Safari z-fighting 防護 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* [M07 Fix] Firefox backdrop-filter fallback */
@supports not (backdrop-filter: blur(2px)) {
  .monolith-face {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(0, 0, 0, 0.3) 100%
    );
  }
}

/* Front Face */
.monolith-face.front {
  width: var(--monolith-width);
  height: var(--monolith-height);
  transform: translateZ(calc(var(--monolith-depth) / 2));
}

/* Back Face */
.monolith-face.back {
  width: var(--monolith-width);
  height: var(--monolith-height);
  transform: translateZ(calc(var(--monolith-depth) / -2)) rotateY(180deg);
}

/* Left Face */
.monolith-face.left {
  width: var(--monolith-depth);
  height: var(--monolith-height);
  left: calc(var(--monolith-depth) / -2);
  transform: translateX(calc(var(--monolith-width) / 2)) rotateY(-90deg);
}

/* Right Face */
.monolith-face.right {
  width: var(--monolith-depth);
  height: var(--monolith-height);
  right: calc(var(--monolith-depth) / -2);
  transform: translateX(calc(var(--monolith-width) / -2)) rotateY(90deg);
}

/* Top Face - Angled for crystal effect */
.monolith-face.top {
  width: var(--monolith-width);
  height: var(--monolith-depth);
  top: calc(var(--monolith-depth) / -2);
  transform: translateY(0) rotateX(90deg);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
}

/* ============================================
   Monolith Colors
   ============================================ */

/* Bass - Deep Purple */
.monolith-bass .monolith-face {
  background: linear-gradient(
    180deg,
    rgba(139, 92, 246, 0.4) 0%,
    rgba(74, 26, 107, 0.6) 50%,
    rgba(30, 10, 50, 0.8) 100%
  );
  border-color: rgba(139, 92, 246, 0.3);
}

.monolith-bass .monolith-face.top {
  background: linear-gradient(
    180deg,
    rgba(167, 139, 250, 0.5) 0%,
    rgba(139, 92, 246, 0.3) 100%
  );
}

/* Pad - Amber */
.monolith-pad .monolith-face {
  background: linear-gradient(
    180deg,
    rgba(245, 158, 11, 0.4) 0%,
    rgba(212, 130, 14, 0.6) 50%,
    rgba(120, 70, 5, 0.8) 100%
  );
  border-color: rgba(245, 158, 11, 0.3);
}

.monolith-pad .monolith-face.top {
  background: linear-gradient(
    180deg,
    rgba(251, 191, 36, 0.5) 0%,
    rgba(245, 158, 11, 0.3) 100%
  );
}

/* Arp - Teal */
.monolith-arp .monolith-face {
  background: linear-gradient(
    180deg,
    rgba(6, 182, 212, 0.4) 0%,
    rgba(14, 142, 158, 0.6) 50%,
    rgba(5, 70, 80, 0.8) 100%
  );
  border-color: rgba(6, 182, 212, 0.3);
}

.monolith-arp .monolith-face.top {
  background: linear-gradient(
    180deg,
    rgba(34, 211, 238, 0.5) 0%,
    rgba(6, 182, 212, 0.3) 100%
  );
}

/* Texture - Golden */
.monolith-texture .monolith-face {
  background: linear-gradient(
    180deg,
    rgba(251, 191, 36, 0.4) 0%,
    rgba(230, 184, 77, 0.6) 50%,
    rgba(130, 100, 30, 0.8) 100%
  );
  border-color: rgba(251, 191, 36, 0.3);
}

.monolith-texture .monolith-face.top {
  background: linear-gradient(
    180deg,
    rgba(253, 224, 71, 0.5) 0%,
    rgba(251, 191, 36, 0.3) 100%
  );
}

/* ============================================
   Glow Effect
   ============================================ */

.monolith-glow {
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: translateX(-50%) scale(1);
  opacity: 0.3;
  filter: blur(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.monolith-bass + .monolith-label + .monolith-glow {
  background: var(--bass-glow);
}

.monolith-pad + .monolith-label + .monolith-glow {
  background: var(--pad-glow);
}

.monolith-arp + .monolith-label + .monolith-glow {
  background: var(--arp-glow);
}

.monolith-texture + .monolith-label + .monolith-glow {
  background: var(--texture-glow);
}

/* ============================================
   Label
   ============================================ */

.monolith-label {
  margin-top: 24px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  transition: color 0.5s;
}

.monolith-wrapper.active .monolith-label {
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 640px) {
  :root {
    --monolith-width: 45px;
    --monolith-height: 140px;
    --monolith-depth: 30px;
  }

  .monolith-label {
    font-size: 8px;
  }
}

/* ============================================
   Animations
   ============================================ */

@keyframes float {
  0%, 100% {
    transform: translateY(-100px) rotateY(15deg) rotateX(-5deg);
  }
  50% {
    transform: translateY(-108px) rotateY(15deg) rotateX(-5deg);
  }
}

.monolith-wrapper.active .monolith {
  animation: float 4s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.8;
    transform: translateX(-50%) scale(1.4);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.6);
  }
}

.monolith-wrapper.active .monolith-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* ============================================
   Start Screen Animation
   ============================================ */

@keyframes fade-out {
  to {
    opacity: 0;
    pointer-events: none;
  }
}

#start-screen.hidden {
  animation: fade-out 1s forwards;
}