/**
 * 3D Objects — Pure CSS true 3D geometry for Skills section
 * All objects standardised: scene = fixed 88×88px block,
 * every shape rendered inside an identical 52×52px bounding box.
 */

/* ── Scene wrapper: fixed size, no influence on card height ── */
.css3d-scene {
  width: 88px;
  height: 88px;        /* fixed — every card's icon zone is identical */
  flex-shrink: 0;
  perspective: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
  margin-bottom: 20px;
}

/* ── Invisible 52×52 anchor that all objects are sized against ── */
.css3d-scene::before {
  content: '';
  display: block;
  width: 52px;
  height: 52px;
  visibility: hidden;  /* takes up space but is invisible */
  flex-shrink: 0;
}

/* Base styles for all 3D objects */
.css3d-obj {
  width: 52px;
  height: 52px;
  position: absolute;          /* overlays the 52×52 anchor */
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--time, 0) * 15deg)) rotateY(calc(var(--time, 0) * 20deg));
}

.css3d-obj.reverse {
  transform: rotateX(calc(var(--time, 0) * -12deg)) rotateY(calc(var(--time, 0) * -24deg));
}
.css3d-obj.fast {
  transform: rotateX(calc(var(--time, 0) * 30deg)) rotateZ(calc(var(--time, 0) * 15deg));
}

/* ══════════════════════════════════════════
   OBJECT 1: THE CUBE  (52×52 bounding box)
══════════════════════════════════════════ */
.css3d-cube { width: 44px; height: 44px; }
.css3d-cube .face {
  position: absolute; width: 44px; height: 44px;
  background: rgba(255, 184, 0, 0.1);
  border: 1px solid rgba(255, 184, 0, 0.5);
  box-shadow: inset 0 0 10px rgba(255, 184, 0, 0.2);
  backdrop-filter: blur(2px);
}
.css3d-cube .front  { transform: translateZ(22px); }
.css3d-cube .back   { transform: rotateY(180deg) translateZ(22px); }
.css3d-cube .right  { transform: rotateY(90deg) translateZ(22px); }
.css3d-cube .left   { transform: rotateY(-90deg) translateZ(22px); }
.css3d-cube .top    { transform: rotateX(90deg) translateZ(22px); }
.css3d-cube .bottom { transform: rotateX(-90deg) translateZ(22px); }

/* ══════════════════════════════════════════
   OBJECT 2: THE RINGS  (52×52 bounding box)
══════════════════════════════════════════ */
.css3d-rings { width: 48px; height: 48px; }
.css3d-rings .ring {
  position: absolute; width: 100%; height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(52, 211, 153, 0.6);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.3), inset 0 0 10px rgba(52, 211, 153, 0.2);
}
.css3d-rings .ring:nth-child(1) { transform: rotateY(0deg); }
.css3d-rings .ring:nth-child(2) { transform: rotateY(60deg) rotateX(30deg); }
.css3d-rings .ring:nth-child(3) { transform: rotateY(120deg) rotateX(60deg); }

/* ══════════════════════════════════════════
   OBJECT 3: THE PYRAMID  (52×52 bounding box)
══════════════════════════════════════════ */
.css3d-pyramid { width: 44px; height: 44px; }
.css3d-pyramid .face {
  position: absolute;
  width: 0; height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 44px solid rgba(167, 139, 250, 0.15);
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.4));
}
.css3d-pyramid .front  { transform: translateZ(22px) rotateX(30deg); transform-origin: bottom center; }
.css3d-pyramid .back   { transform: translateZ(-22px) rotateY(180deg) rotateX(30deg); transform-origin: bottom center; }
.css3d-pyramid .right  { transform: translateX(22px) rotateY(90deg) rotateX(30deg); transform-origin: bottom center; }
.css3d-pyramid .left   { transform: translateX(-22px) rotateY(-90deg) rotateX(30deg); transform-origin: bottom center; }
.css3d-pyramid .bottom {
  border-left: none; border-right: none; border-bottom: none;
  width: 44px; height: 44px; background: rgba(167, 139, 250, 0.3);
  transform: rotateX(-90deg);
}

/* ══════════════════════════════════════════
   OBJECT 4: FLOATING LAYERS  (52×52 bounding box)
══════════════════════════════════════════ */
.css3d-layers { width: 44px; height: 44px; }
.css3d-layers .layer {
  position: absolute; width: 100%; height: 100%;
  border-radius: 8px;
  background: rgba(255, 107, 53, 0.1);
  border: 1px solid rgba(255, 107, 53, 0.5);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
}
.css3d-layers .layer:nth-child(1) { transform: translateZ(-20px); opacity: 0.4; }
.css3d-layers .layer:nth-child(2) { transform: translateZ(0px); opacity: 0.7; }
.css3d-layers .layer:nth-child(3) { transform: translateZ(20px); opacity: 1; }

/* ══════════════════════════════════════════
   OBJECT 5: CYLINDER / TUBE  (52×52 bounding box — made square)
══════════════════════════════════════════ */
.css3d-tube { width: 44px; height: 44px; }
.css3d-tube .side {
  position: absolute; width: 20px; height: 44px;
  background: rgba(96, 165, 250, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.4);
  left: 12px;
}
.css3d-tube .side:nth-child(1) { transform: rotateY(0deg)   translateZ(20px); }
.css3d-tube .side:nth-child(2) { transform: rotateY(45deg)  translateZ(20px); }
.css3d-tube .side:nth-child(3) { transform: rotateY(90deg)  translateZ(20px); }
.css3d-tube .side:nth-child(4) { transform: rotateY(135deg) translateZ(20px); }
.css3d-tube .side:nth-child(5) { transform: rotateY(180deg) translateZ(20px); }
.css3d-tube .side:nth-child(6) { transform: rotateY(225deg) translateZ(20px); }
.css3d-tube .side:nth-child(7) { transform: rotateY(270deg) translateZ(20px); }
.css3d-tube .side:nth-child(8) { transform: rotateY(315deg) translateZ(20px); }
.css3d-tube .cap {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(96, 165, 250, 0.4); left: 2px;
}
.css3d-tube .top    { transform: rotateX(90deg)  translateZ(22px); top: 2px; }
.css3d-tube .bottom { transform: rotateX(-90deg) translateZ(22px); top: 2px; }

/* ══════════════════════════════════════════
   OBJECT 6: INTERSECTING PLANES  (52×52 bounding box)
══════════════════════════════════════════ */
.css3d-planes { width: 44px; height: 44px; }
.css3d-planes .plane {
  position: absolute; width: 100%; height: 100%;
  border-radius: 50%;
  background: rgba(244, 114, 182, 0.1);
  border: 2px solid rgba(244, 114, 182, 0.6);
  box-shadow: inset 0 0 12px rgba(244, 114, 182, 0.3);
}
.css3d-planes .plane:nth-child(1) { transform: rotateX(0deg); }
.css3d-planes .plane:nth-child(2) { transform: rotateX(90deg); }
.css3d-planes .plane:nth-child(3) { transform: rotateY(90deg); }

/* ── Hover lift — keeps 3D intact ── */
.skill-card:hover .css3d-scene {
  transform: translateZ(20px);
}