/* =========================
   Hero right-side 3D cubes
   ========================= */

/* Optional theme vars (tweak if you like) */
:root{
  --cube-size-lg: 200px;
  --cube-size-sm: 120px;
}
/* stack wrapper */
.cube-stack {
  display: flex;
  flex-direction: column;   /* stack cubes vertically */
  align-items: center;      /* center horizontally */
  gap: 60px;                /* space between cubes */
}

/* Ensure the right column can center the scene */
.col-right{
  display:grid;
  place-items:center;             /* centers both axes */
  min-height: 360px;              /* ensure enough room */
  position: relative;
  overflow: visible;              /* allow glow to breathe */
}

/* 1) Put perspective on a parent of the rotating stuff */
.scene{
  position: relative;
  perspective: 1200px;            /* must be on the parent */
  width: max-content;             /* shrink-wrap */

}

/* 2) The inner stack actually rotates in 3D */
.scene > .box,
.scene > .box *{
  transform-style: preserve-3d;
}

/* 3) Make faces behave like solid planes */
.face{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;    /* hide back sides */

}

/* -------- Sizes / animation -------- */
.large-box{
  --size: var(--cube-size-lg);
  width: var(--size);
  height: var(--size);
  animation: spinL 6s linear infinite;

}

/* no absolute positioning for small cube anymore */
.small-box {
  --size: var(--cube-size-sm);
  width: var(--size);
  height: var(--size);
  animation: spinS 4s linear infinite;
  left : 40px;
   top: calc(-0.1 * var(--size));   /* was -0.55 */
  position: relative;       /* not absolute */
}
/* 4) Position each face at half the cube size */
.large-box .front  { transform: rotateY(0)       translateZ(calc(var(--size)/2)); background: linear-gradient(145deg,#ecf0f1,#bdc3c7); box-shadow: inset 0 0 20px rgba(0,0,0,.08); }
.large-box .back   { transform: rotateY(180deg)  translateZ(calc(var(--size)/2)); background: linear-gradient(145deg,#d5dbdb,#a6acaf);  box-shadow: inset 0 0 20px rgba(0,0,0,.08); }
.large-box .right  { transform: rotateY(90deg)   translateZ(calc(var(--size)/2)); background: linear-gradient(145deg,#e8e8e8,#c0c0c0);  box-shadow: inset 0 0 20px rgba(0,0,0,.08); }
.large-box .left   { transform: rotateY(-90deg)  translateZ(calc(var(--size)/2)); background: linear-gradient(145deg,#f8f9fa,#d1d8e0);  box-shadow: inset 0 0 20px rgba(0,0,0,.08); }
.large-box .top    { transform: rotateX(90deg)   translateZ(calc(var(--size)/2)); background: linear-gradient(145deg,#ffffff,#e9ecef);  box-shadow: inset 0 0 20px rgba(0,0,0,.08); }
.large-box .bottom { transform: rotateX(-90deg)  translateZ(calc(var(--size)/2)); background: linear-gradient(145deg,#dee2e6,#adb5bd);  box-shadow: inset 0 0 20px rgba(0,0,0,.08); }

.small-box .front  { transform: rotateY(0)       translateZ(calc(var(--size)/2)); background: linear-gradient(145deg,#ff9f43,#ee5a24); box-shadow: inset 0 0 15px rgba(0,0,0,.10); }
.small-box .back   { transform: rotateY(180deg)  translateZ(calc(var(--size)/2)); background: linear-gradient(145deg,#ff9f43,#ee5a24); box-shadow: inset 0 0 15px rgba(0,0,0,.10); }
.small-box .right  { transform: rotateY(90deg)   translateZ(calc(var(--size)/2)); background: linear-gradient(145deg,#feca57,#ff6348); box-shadow: inset 0 0 15px rgba(0,0,0,.10); }
.small-box .left   { transform: rotateY(-90deg)  translateZ(calc(var(--size)/2)); background: linear-gradient(145deg,#feca57,#ff6348); box-shadow: inset 0 0 15px rgba(0,0,0,.10); }
.small-box .top    { transform: rotateX(90deg)   translateZ(calc(var(--size)/2)); background: linear-gradient(145deg,#fdcb6e,#f39c12); box-shadow: inset 0 0 15px rgba(0,0,0,.10); }
.small-box .bottom { transform: rotateX(-90deg)  translateZ(calc(var(--size)/2)); background: linear-gradient(145deg,#fdcb6e,#f39c12); box-shadow: inset 0 0 15px rgba(0,0,0,.10); }

/* 5) Smooth spin */
@keyframes spinL { to { transform: rotateY(-360deg); } }
@keyframes spinS { to { transform: rotateY( 360deg); } }

/* Optional: slow down on hover (nice micro-interaction) */
.scene:hover .large-box { animation-duration: 2.2s; }
.scene:hover .small-box { animation-duration: 1.6s; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .large-box, .small-box { animation: none !important; }
}

/* Responsive sizing for narrow screens */
@media (max-width: 768px){
  :root{
    --cube-size-lg: 150px;
    --cube-size-sm: 90px;
  }
}