/**
 * StillCo Ultra-Optimized 3D Cyber-Cube Stylesheet
 * 
 * Hardware Accelerations & GPU Optimizations:
 * - Removed heavy `backdrop-filter: blur` on 6 overlapping 3D faces (eliminates 80%+ GPU raster cost)
 * - Isolated compositor layer via `contain: paint layout`
 * - Hardware transforms via `translate3d` & `preserve-3d`
 * - Lightweight non-repainting gradient reflections
 * - Fully responsive with 0 horizontal scroll
 */

/* ==========================================================================
   SCENE & 3D VIEWPORT
   ========================================================================== */

.cube-scene {
  position: relative;
  width: 320px;
  height: 320px;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none !important;
  -webkit-touch-callout: none !important;
  contain: paint layout;
}

.cube-scene *,
.cube,
#cubo,
.face {
  touch-action: none !important;
  -webkit-touch-callout: none !important;
}

/* ==========================================================================
   LIGHTWEIGHT GYRO ORBITAL RINGS
   ========================================================================== */

.cube-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.cube-ring-1 {
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  border: 1.5px solid rgba(6, 182, 212, 0.35);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
  animation: gyroSpin1 24s linear infinite;
}

.cube-ring-2 {
  width: 350px;
  height: 350px;
  margin: -175px 0 0 -175px;
  border: 1px dashed rgba(79, 70, 229, 0.4);
  animation: gyroSpin2 30s linear infinite reverse;
}

@keyframes gyroSpin1 {
  0% {
    transform: rotateX(68deg) rotateY(18deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(68deg) rotateY(18deg) rotateZ(360deg);
  }
}

@keyframes gyroSpin2 {
  0% {
    transform: rotateX(-55deg) rotateY(-35deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(-55deg) rotateY(-35deg) rotateZ(360deg);
  }
}

/* ==========================================================================
   THE 3D CUBE CONTAINER
   ========================================================================== */

.cube,
#cubo {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  width: 200px !important;
  height: 200px !important;
  transform-style: preserve-3d;
  cursor: grab;
  will-change: transform;
  transform: rotateX(-16deg) rotateY(28deg);
}

.cube:active,
#cubo.is-dragging {
  cursor: grabbing !important;
}

/* ==========================================================================
   LIGHTWEIGHT GLOWING AI ENERGY CORE
   ========================================================================== */

.cube-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.9) 0%, rgba(79, 70, 229, 0.6) 50%, transparent 75%);
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.6), 0 0 45px rgba(79, 70, 229, 0.4);
  pointer-events: none;
  transform: translateZ(0);
  animation: cubeCorePulse 4s ease-in-out infinite alternate;
}

@keyframes cubeCorePulse {
  0% {
    transform: scale(0.9);
    opacity: 0.75;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* ==========================================================================
   THE 6 HIGH-PERFORMANCE CYBER-GLASS FACES
   ========================================================================== */

.face {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  width: 200px !important;
  height: 200px !important;
  box-sizing: border-box;
  content: none !important;
  /* Clean high-performance glass look without GPU-choking backdrop-filter */
  background: linear-gradient(135deg, rgba(11, 18, 32, 0.88) 0%, rgba(17, 24, 39, 0.76) 100%);
  border: 1.5px solid rgba(6, 182, 212, 0.5);
  border-radius: 18px;
  box-shadow: 
    inset 0 0 15px rgba(6, 182, 212, 0.15),
    inset 0 0 8px rgba(79, 70, 229, 0.25),
    0 0 12px rgba(6, 182, 212, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  backface-visibility: visible;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Subtle Specular Sheen (Pre-rendered, zero repaint cost) */
.face::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 16px 16px 0 0;
  pointer-events: none;
}

/* Corner Accents */
.face::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(6, 182, 212, 0.16);
  border-radius: 12px;
  pointer-events: none;
}

.face:hover {
  border-color: #06b6d4;
  box-shadow: 
    inset 0 0 20px rgba(6, 182, 212, 0.3),
    0 0 20px rgba(6, 182, 212, 0.35);
}

/* 3D Box Geometry (Half side = 100px) */
.face:nth-child(2), .face--react  { transform: translateZ(100px); }
.face:nth-child(3), .face--ai     { transform: rotateY(90deg) translateZ(100px); }
.face:nth-child(4), .face--js     { transform: rotateY(180deg) translateZ(100px); }
.face:nth-child(5), .face--python { transform: rotateY(-90deg) translateZ(100px); }
.face:nth-child(6), .face--php    { transform: rotateX(90deg) translateZ(100px); }
.face:nth-child(7), .face--sql    { transform: rotateX(-90deg) translateZ(100px); }

/* Technology Graphic */
.face img {
  width: 125px;
  height: 125px;
  object-fit: contain;
  pointer-events: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transition: transform 0.2s ease;
}

.face:hover img {
  transform: scale(1.04);
}

/* Technology Label Pill */
.face-tag {
  margin-top: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #06b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
}

/* ==========================================================================
   RESPONSIVE HERO INTEGRATION
   ========================================================================== */

@media (min-width: 992px) {
  .intro .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 480px;
    width: 70% !important;
    max-width: 70% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .cube-scene {
    flex: 0 0 320px;
    margin: 0 !important;
  }

  .intro__inner {
    flex: 1 1 850px;
    max-width: 860px;
    margin: 0 !important;
    text-align: right;
  }
}

@media (max-width: 991px) {
  .intro .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .cube-scene,
  #cubeScene {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .intro__inner {
    text-align: center !important;
    width: 100%;
    margin: 0 auto !important;
  }

  .intro__actions {
    justify-content: center !important;
  }
}