/*
  =============================================================================
  Project: 3D Transform Gallery - Extra Gallery Page Styles
  Author: Molla Samser | rskworld.in | 2026
  - Website: https://rskworld.in
  - Email: help@rskworld.in | support@rskworld.in
  - Phone: +91 93305 39277
  - Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147
  =============================================================================
*/

/* 3D Pyramid - rskworld.in | 2026 */
.pyramid-scene {
  perspective: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 240px;
}

.pyramid {
  position: relative;
  width: 120px;
  height: 120px;
  transform-style: preserve-3d;
  animation: pyramidRotate 10s linear infinite;
}

.pyramid-face {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 120px solid var(--bg-card);
  border-bottom-color: rgba(30, 41, 59, 0.9);
  opacity: 0.9;
  border-radius: 2px;
}

.pyramid-face.f1 { transform: translateZ(60px) rotateY(0deg) rotateX(30deg); border-bottom-color: var(--accent-dim); }
.pyramid-face.f2 { transform: translateZ(-60px) rotateY(180deg) rotateX(30deg); border-bottom-color: var(--bg-elevated); }
.pyramid-face.f3 { transform: translateX(60px) rotateY(90deg) rotateX(30deg); border-bottom-color: var(--bg-card); }
.pyramid-face.f4 { transform: translateX(-60px) rotateY(-90deg) rotateX(30deg); border-bottom-color: var(--bg-elevated); }

@keyframes pyramidRotate {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* Card Fan - Molla Samser | rskworld.in | 2026 */
.card-fan {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  perspective: 600px;
  min-height: 180px;
}

.fan-card {
  width: 80px;
  height: 110px;
  margin-left: -30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  border: 2px solid var(--accent);
  border-radius: 8px;
  color: var(--accent-light);
  transform-origin: center bottom;
  transition: transform 0.4s var(--ease-out-back);
}

.fan-card:first-child { margin-left: 0; }

.card-fan:hover .fan-card:nth-child(1) { transform: rotate(-24deg); }
.card-fan:hover .fan-card:nth-child(2) { transform: rotate(-12deg); }
.card-fan:hover .fan-card:nth-child(3) { transform: rotate(0deg) translateY(-8px); }
.card-fan:hover .fan-card:nth-child(4) { transform: rotate(12deg); }
.card-fan:hover .fan-card:nth-child(5) { transform: rotate(24deg); }

/* Rotating Prism (triangle) - rskworld.in | 2026 */
.prism-scene {
  perspective: 900px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 220px;
}

.prism {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  animation: prismRotate 8s linear infinite;
}

.prism-face {
  position: absolute;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent) 0%, #0a58ca 100%);
  border: 2px solid var(--accent-light);
  border-radius: 12px;
  color: #fff;
  backface-visibility: visible;
}

.prism-face:nth-child(1) { transform: rotateY(0deg) translateZ(50px); }
.prism-face:nth-child(2) { transform: rotateY(120deg) translateZ(50px); }
.prism-face:nth-child(3) { transform: rotateY(240deg) translateZ(50px); }

@keyframes prismRotate {
  0%   { transform: rotateX(-15deg) rotateY(0deg); }
  100% { transform: rotateX(-15deg) rotateY(360deg); }
}

/* Flip Clock Digit - Molla Samser | rskworld.in | 2026 */
.flip-clock-scene {
  perspective: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px;
}

.flip-digit {
  width: 70px;
  height: 90px;
  cursor: pointer;
}

.digit-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s var(--ease-in-out);
  transform-style: preserve-3d;
}

.flip-digit:hover .digit-inner {
  transform: rotateX(-90deg);
}

.digit-top,
.digit-bottom {
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 700;
  background: var(--bg-card);
  border: 2px solid var(--accent);
  color: var(--accent-light);
  overflow: hidden;
}

.digit-top {
  top: 0;
  align-items: flex-end;
  border-radius: 8px 8px 0 0;
  transform-origin: bottom;
}

.digit-bottom {
  bottom: 0;
  align-items: flex-start;
  border-radius: 0 0 8px 8px;
  transform-origin: top;
  transform: rotateX(90deg);
  backface-visibility: hidden;
}

/* Parallax 3D Layers - rskworld.in | 2026 */
.parallax-box {
  perspective: 800px;
  width: 200px;
  height: 120px;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
}

.parallax-layer {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border-radius: 8px;
  border: 2px solid var(--accent);
  transition: transform 0.4s var(--ease-in-out);
}

.parallax-layer.back {
  width: 180px;
  height: 80px;
  left: 10px;
  top: 20px;
  background: var(--bg-card);
  color: var(--text-muted);
  transform: translateZ(-40px);
}

.parallax-layer.mid {
  width: 160px;
  height: 90px;
  left: 20px;
  top: 15px;
  background: var(--bg-elevated);
  color: var(--accent-light);
  transform: translateZ(0);
}

.parallax-layer.front {
  width: 140px;
  height: 100px;
  left: 30px;
  top: 10px;
  background: linear-gradient(145deg, var(--accent) 0%, #0a58ca 100%);
  color: #fff;
  transform: translateZ(40px);
}

.parallax-box:hover .parallax-layer.back { transform: translateZ(-60px); }
.parallax-box:hover .parallax-layer.mid { transform: translateZ(10px); }
.parallax-box:hover .parallax-layer.front { transform: translateZ(60px); }

/* Cylinder Rings - Molla Samser | rskworld.in | 2026 */
.cylinder-scene {
  perspective: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 180px;
}

.cylinder {
  position: relative;
  width: 200px;
  height: 80px;
  transform-style: preserve-3d;
  animation: cylinderRotate 14s linear infinite;
}

.ring {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: linear-gradient(145deg, var(--accent) 0%, #0a58ca 100%);
  border: 2px solid var(--accent-light);
  border-radius: 50%;
  color: #fff;
}

.ring:nth-child(1) { transform: rotateY(0deg) translateZ(60px); }
.ring:nth-child(2) { transform: rotateY(72deg) translateZ(60px); }
.ring:nth-child(3) { transform: rotateY(144deg) translateZ(60px); }
.ring:nth-child(4) { transform: rotateY(216deg) translateZ(60px); }
.ring:nth-child(5) { transform: rotateY(288deg) translateZ(60px); }

@keyframes cylinderRotate {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
