/*
  =============================================================================
  Project: 3D Transform Gallery - Extra Unique Features
  Author: Molla Samser | rskworld.in | 2026
  More 3D and unique effects: coin flip, card lift, folded corner, revolving door,
  bouncing ball, book open, zigzag strip, flip panel.
  =============================================================================
*/

/* ========== 3D Coin Flip (flip on X axis) - rskworld.in | 2026 ========== */
.coin-flip-scene {
  perspective: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px;
}

.coin-flip {
  width: 80px;
  height: 80px;
  position: relative;
  transform-style: preserve-3d;
  cursor: pointer;
}

.coin-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s var(--ease-out-back);
  transform-style: preserve-3d;
}

.coin-flip:hover .coin-flip-inner {
  transform: rotateX(180deg);
}

.coin-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.5rem;
  backface-visibility: hidden;
  border: 4px solid var(--accent);
}

.coin-face.heads {
  background: linear-gradient(145deg, var(--accent) 0%, #0a58ca 100%);
  color: #fff;
}

.coin-face.tails {
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  color: var(--accent-light);
  transform: rotateX(180deg);
}

/* ========== 3D Card Lift - rskworld.in | 2026 ========== */
.card-lift-scene {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
}

.card-lift {
  width: 140px;
  height: 180px;
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease-out-back), box-shadow 0.4s;
  cursor: pointer;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent-light);
  box-shadow: 0 4px 15px var(--shadow);
}

.card-lift:hover {
  transform: rotateX(10deg) rotateY(-5deg) translateZ(20px);
  box-shadow: 0 25px 50px var(--shadow-accent), 0 10px 20px var(--shadow);
}

/* ========== 3D Folded Corner (tag/badge) - rskworld.in | 2026 ========== */
.folded-corner-scene {
  perspective: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}

.folded-tag {
  position: relative;
  width: 120px;
  height: 90px;
  background: linear-gradient(135deg, var(--accent) 0%, #0a58ca 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  box-shadow: 0 6px 20px var(--shadow-accent);
  transition: transform 0.35s var(--ease-out-back);
  cursor: pointer;
}

.folded-tag::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent var(--bg-card) transparent transparent;
  border-radius: 0 4px 0 0;
  filter: brightness(0.85);
}

.folded-tag:hover {
  transform: rotateY(-8deg) rotateZ(2deg);
  box-shadow: 0 12px 30px var(--shadow-accent);
}

/* ========== 3D Revolving Door - rskworld.in | 2026 ========== */
.revolving-scene {
  perspective: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
}

.revolving-door {
  position: relative;
  width: 180px;
  height: 120px;
  transform-style: preserve-3d;
}

.revolving-panel {
  position: absolute;
  width: 56px;
  height: 100%;
  left: 50%;
  top: 0;
  margin-left: -28px;
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  border: 2px solid var(--accent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent-light);
  font-size: 0.85rem;
  transform-origin: center center;
  transition: transform 0.6s var(--ease-out-back);
  backface-visibility: hidden;
}

.revolving-door:hover .revolving-panel:nth-child(1) { transform: rotateY(-75deg); }
.revolving-door:hover .revolving-panel:nth-child(2) { transform: rotateY(-25deg); }
.revolving-door:hover .revolving-panel:nth-child(3) { transform: rotateY(25deg); }
.revolving-door:hover .revolving-panel:nth-child(4) { transform: rotateY(75deg); }

/* ========== 3D Bouncing Ball - rskworld.in | 2026 ========== */
.bounce-scene {
  perspective: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px;
}

.bounce-ball {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent-light), var(--accent));
  box-shadow: 0 8px 25px var(--shadow-accent), inset -4px -4px 12px rgba(0,0,0,0.2);
  animation: bounce3d 1.5s var(--ease-in-out) infinite;
  transition: transform 0.3s;
}

.bounce-scene:hover .bounce-ball {
  animation-play-state: paused;
  transform: scale(1.15);
}

@keyframes bounce3d {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-25px) scale(1.05); }
}

/* ========== 3D Book Open - rskworld.in | 2026 ========== */
.book-open-scene {
  perspective: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
}

.book-open {
  display: flex;
  transform-style: preserve-3d;
  cursor: pointer;
}

.book-page {
  width: 70px;
  height: 100px;
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  border: 2px solid var(--accent);
  border-radius: 0 6px 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent-light);
  font-size: 0.85rem;
  transform-origin: left center;
  transition: transform 0.8s var(--ease-out-back);
  box-shadow: -2px 2px 10px var(--shadow);
}

.book-page:first-child {
  border-radius: 6px 0 0 6px;
  border-right: none;
  transform-origin: right center;
}

.book-open:hover .book-page:first-child {
  transform: rotateY(55deg);
}

.book-open:hover .book-page:last-child {
  transform: rotateY(-55deg);
}

/* ========== 3D Zigzag Strip - rskworld.in | 2026 ========== */
.zigzag-scene {
  perspective: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

.zigzag-strip {
  display: flex;
  gap: 4px;
  transform-style: preserve-3d;
}

.zigzag-segment {
  width: 40px;
  height: 50px;
  background: linear-gradient(135deg, var(--accent) 0%, #0a58ca 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease-out-back);
  transform: rotateY(0deg);
  border-radius: 4px;
}

.zigzag-segment:nth-child(odd) { transform: rotateY(-20deg); }
.zigzag-segment:nth-child(even) { transform: rotateY(20deg); }

.zigzag-strip:hover .zigzag-segment:nth-child(odd) { transform: rotateY(-35deg) translateZ(8px); }
.zigzag-strip:hover .zigzag-segment:nth-child(even) { transform: rotateY(35deg) translateZ(8px); }

/* ========== 3D Flip Panel (vertical flip reveal) - rskworld.in | 2026 ========== */
.flip-panel-scene {
  perspective: 900px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px;
}

.flip-panel {
  width: 120px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  cursor: pointer;
}

.flip-panel-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s var(--ease-out-back);
  transform-style: preserve-3d;
}

.flip-panel:hover .flip-panel-inner {
  transform: rotateX(180deg);
}

.flip-panel-front,
.flip-panel-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  backface-visibility: hidden;
  border: 2px solid var(--accent);
}

.flip-panel-front {
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  color: var(--accent-light);
}

.flip-panel-back {
  background: linear-gradient(145deg, var(--accent) 0%, #0a58ca 100%);
  color: #fff;
  transform: rotateX(180deg);
}

/* ========== 3D Hover Tile Pop - rskworld.in | 2026 ========== */
.tile-pop-scene {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 120px;
}

.tile-pop {
  width: 70px;
  height: 70px;
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  border: 2px solid var(--accent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent-light);
  transition: transform 0.35s var(--ease-out-back), box-shadow 0.35s;
  transform-style: preserve-3d;
  transform: translateZ(0);
  cursor: pointer;
}

.tile-pop:hover {
  transform: translateZ(25px) rotateX(5deg) rotateY(5deg);
  box-shadow: 0 20px 40px var(--shadow-accent);
}

/* ========== 3D Neon Glow Text - rskworld.in | 2026 ========== */
.neon-scene {
  perspective: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

.neon-text {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent-light);
  text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent-dim), 0 0 30px var(--accent-dim);
  transform: rotateX(8deg) rotateY(-5deg);
  transition: transform 0.3s, text-shadow 0.3s;
}

.neon-scene:hover .neon-text {
  transform: rotateX(0) rotateY(0) scale(1.05);
  text-shadow: 0 0 15px var(--accent), 0 0 35px var(--accent-dim), 0 0 50px var(--accent-dim);
}

/* ========== 3D Sliding Door - rskworld.in | 2026 ========== */
.slide-door-scene {
  perspective: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}

.slide-door {
  width: 140px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  background: var(--bg-elevated);
}

.slide-door-panel {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  background: linear-gradient(145deg, var(--accent) 0%, #0a58ca 100%);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s var(--ease-out-back);
  transform-style: preserve-3d;
}

.slide-door-panel.left { left: 0; transform-origin: left center; }
.slide-door-panel.right { right: 0; transform-origin: right center; }

.slide-door:hover .slide-door-panel.left { transform: translateX(-100%) rotateY(-85deg); }
.slide-door:hover .slide-door-panel.right { transform: translateX(100%) rotateY(85deg); }

/* ========== 3D Rotating Ring - rskworld.in | 2026 ========== */
.ring-3d-scene {
  perspective: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}

.ring-3d {
  width: 70px;
  height: 70px;
  border: 6px solid var(--accent);
  border-radius: 50%;
  border-top-color: transparent;
  border-right-color: var(--accent-light);
  animation: ringSpin 2s linear infinite;
  transform: rotateX(15deg) rotateY(15deg);
}

.ring-3d-scene:hover .ring-3d { animation-play-state: paused; transform: rotateX(15deg) rotateY(15deg) scale(1.2); }

@keyframes ringSpin {
  to { transform: rotateX(15deg) rotateY(15deg) rotateZ(360deg); }
}

/* ========== 3D Stamp / Pressed Badge - rskworld.in | 2026 ========== */
.stamp-scene {
  perspective: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 110px;
}

.stamp-3d {
  padding: 0.5rem 1.25rem;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  border: 3px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.2), 0 4px 0 var(--accent);
  transform: rotateX(12deg) translateZ(0);
  transition: transform 0.3s;
}

.stamp-scene:hover .stamp-3d {
  transform: rotateX(5deg) translateZ(-4px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.25), 0 2px 0 var(--accent);
}

/* ========== 3D Wave Strip - rskworld.in | 2026 ========== */
.wave-scene {
  perspective: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90px;
}

.wave-strip {
  display: flex;
  gap: 6px;
}

.wave-block {
  width: 28px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent) 0%, #0a58ca 100%);
  border-radius: 4px;
  transition: transform 0.35s var(--ease-out-back);
  transform: rotateX(0deg);
}

.wave-strip .wave-block:nth-child(1) { transition-delay: 0s; }
.wave-strip .wave-block:nth-child(2) { transition-delay: 0.05s; }
.wave-strip .wave-block:nth-child(3) { transition-delay: 0.1s; }
.wave-strip .wave-block:nth-child(4) { transition-delay: 0.15s; }
.wave-strip .wave-block:nth-child(5) { transition-delay: 0.2s; }
.wave-strip .wave-block:nth-child(6) { transition-delay: 0.25s; }
.wave-strip .wave-block:nth-child(7) { transition-delay: 0.3s; }

.wave-strip:hover .wave-block:nth-child(odd) { transform: rotateX(-25deg); }
.wave-strip:hover .wave-block:nth-child(even) { transform: rotateX(25deg); }

/* ========== 3D Diagonal Flip Card - rskworld.in | 2026 ========== */
.diagonal-flip-scene {
  perspective: 900px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px;
}

.diagonal-flip {
  width: 90px;
  height: 90px;
  position: relative;
  transform-style: preserve-3d;
  cursor: pointer;
}

.diagonal-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s var(--ease-out-back);
  transform-style: preserve-3d;
}

.diagonal-flip:hover .diagonal-flip-inner {
  transform: rotateX(180deg) rotateY(180deg);
}

.diagonal-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  backface-visibility: hidden;
  border: 3px solid var(--accent);
}

.diagonal-face.a {
  background: linear-gradient(135deg, var(--accent) 0%, #0a58ca 100%);
  color: #fff;
}

.diagonal-face.b {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  color: var(--accent-light);
  transform: rotateX(180deg) rotateY(180deg);
}

/* ========== 3D Glowing Border Box - rskworld.in | 2026 ========== */
.glow-box-scene {
  perspective: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}

.glow-box {
  width: 100px;
  height: 100px;
  background: var(--bg-card);
  border: 3px solid var(--accent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent-light);
  box-shadow: 0 0 0 0 var(--accent-dim), inset 0 0 20px rgba(13, 110, 253, 0.1);
  transition: transform 0.35s, box-shadow 0.35s;
}

.glow-box-scene:hover .glow-box {
  transform: rotateX(8deg) rotateY(-8deg) translateZ(15px);
  box-shadow: 0 0 25px var(--accent-dim), 0 0 50px var(--accent-dim), inset 0 0 25px rgba(13, 110, 253, 0.15);
}

/* ========== 3D Stack Spread (cards spread on hover) - rskworld.in | 2026 ========== */
.stack-spread-scene {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px;
}

.stack-spread {
  position: relative;
  width: 80px;
  height: 110px;
}

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

.stack-spread-card:nth-child(1) { z-index: 3; transform: translateY(0) rotate(0deg); }
.stack-spread-card:nth-child(2) { z-index: 2; transform: translateY(4px) rotate(-2deg); }
.stack-spread-card:nth-child(3) { z-index: 1; transform: translateY(8px) rotate(2deg); }

.stack-spread:hover .stack-spread-card:nth-child(1) { transform: translateY(-15px) translateZ(20px) rotate(-8deg); }
.stack-spread:hover .stack-spread-card:nth-child(2) { transform: translateY(0) translateZ(10px) rotate(0deg); }
.stack-spread:hover .stack-spread-card:nth-child(3) { transform: translateY(5px) translateZ(5px) rotate(8deg); }

/* ========== 3D Tilt Menu Item - rskworld.in | 2026 ========== */
.tilt-menu-scene {
  perspective: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-height: 80px;
}

.tilt-menu-item {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  border: 2px solid var(--accent);
  border-radius: 8px;
  color: var(--accent-light);
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.3s var(--ease-out-back);
  transform: rotateX(0) rotateY(0);
}

.tilt-menu-item:hover {
  transform: rotateX(-12deg) rotateY(5deg) translateZ(10px);
  box-shadow: 0 10px 25px var(--shadow-accent);
}

/* ========== 3D Progress Arc - rskworld.in | 2026 ========== */
.progress-arc-scene {
  perspective: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

.progress-arc {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 6px solid var(--bg-elevated);
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  transform: rotateX(10deg) rotate(-45deg);
  transition: transform 0.4s;
}

.progress-arc-scene:hover .progress-arc {
  transform: rotateX(10deg) rotate(135deg);
}

/* ========== 3D Pulsing Circle - rskworld.in | 2026 ========== */
.pulse-circle-scene {
  perspective: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 110px;
}

.pulse-circle {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--accent-light), var(--accent));
  box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4);
  animation: pulse3d 1.8s ease-in-out infinite;
  transform: rotateX(10deg);
}

.pulse-circle-scene:hover .pulse-circle {
  animation-play-state: paused;
  transform: rotateX(10deg) scale(1.15);
}

@keyframes pulse3d {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4); transform: rotateX(10deg) scale(1); }
  50% { box-shadow: 0 0 0 18px rgba(13, 110, 253, 0); transform: rotateX(10deg) scale(1.08); }
}

/* ========== 3D Shutter Reveal - rskworld.in | 2026 ========== */
.shutter-scene {
  perspective: 900px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}

.shutter-box {
  width: 120px;
  height: 90px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-elevated);
  cursor: pointer;
}

.shutter-slat {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 18px;
  background: linear-gradient(90deg, var(--accent) 0%, #0a58ca 100%);
  transition: transform 0.5s var(--ease-out-back);
  transform-origin: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
}

.shutter-slat:nth-child(1) { top: 0; }
.shutter-slat:nth-child(2) { top: 18px; }
.shutter-slat:nth-child(3) { top: 36px; }
.shutter-slat:nth-child(4) { top: 54px; }
.shutter-slat:nth-child(5) { top: 72px; }

.shutter-box:hover .shutter-slat:nth-child(odd) { transform: rotateX(-75deg); }
.shutter-box:hover .shutter-slat:nth-child(even) { transform: rotateX(75deg); }

/* ========== 3D Icon Button - rskworld.in | 2026 ========== */
.icon-btn-3d-scene {
  perspective: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 90px;
}

.icon-btn-3d {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--accent) 0%, #0a58ca 100%);
  color: #fff;
  border: none;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out-back);
  transform: rotateX(0) rotateY(0) translateZ(0);
  box-shadow: 0 4px 0 rgba(0,0,0,0.2);
}

.icon-btn-3d:hover {
  transform: rotateX(-8deg) rotateY(5deg) translateZ(8px);
  box-shadow: 0 8px 20px var(--shadow-accent);
}

.icon-btn-3d:active {
  transform: rotateX(0) translateZ(-2px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}

/* ========== 3D Card Fan Out - rskworld.in | 2026 ========== */
.fan-out-scene {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px;
}

.fan-out {
  position: relative;
  width: 60px;
  height: 90px;
}

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

.fan-out-card:nth-child(1) { z-index: 3; transform: translateY(0) rotate(0deg); }
.fan-out-card:nth-child(2) { z-index: 2; transform: translateY(3px) rotate(-1deg); }
.fan-out-card:nth-child(3) { z-index: 1; transform: translateY(6px) rotate(1deg); }

.fan-out:hover .fan-out-card:nth-child(1) { transform: translateY(-10px) rotate(-25deg) translateZ(15px); }
.fan-out:hover .fan-out-card:nth-child(2) { transform: translateY(-5px) rotate(0deg) translateZ(8px); }
.fan-out:hover .fan-out-card:nth-child(3) { transform: translateY(0) rotate(25deg) translateZ(5px); }

/* ========== 3D Corner Peel - rskworld.in | 2026 ========== */
.peel-scene {
  perspective: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}

.peel-card {
  width: 100px;
  height: 120px;
  position: relative;
  transform-style: preserve-3d;
  cursor: pointer;
}

.peel-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  border: 2px solid var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent-light);
  transition: transform 0.5s var(--ease-out-back);
  transform-origin: top right;
}

.peel-card:hover .peel-card-inner {
  transform: rotateZ(-12deg) rotateX(5deg);
  box-shadow: -4px 4px 20px var(--shadow);
}

/* ========== 3D Layered Cards - rskworld.in | 2026 ========== */
.layered-cards-scene {
  perspective: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 130px;
}

.layered-cards {
  position: relative;
  width: 100px;
  height: 70px;
  transform-style: preserve-3d;
}

.layered-card {
  position: absolute;
  width: 100px;
  height: 70px;
  left: 0;
  top: 0;
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  border: 2px solid var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent-light);
  font-size: 0.9rem;
  transition: transform 0.4s var(--ease-out-back);
}

.layered-card:nth-child(1) { z-index: 1; transform: translateZ(0); }
.layered-card:nth-child(2) { z-index: 2; transform: translateZ(-8px) translateY(6px) scale(0.96); }
.layered-card:nth-child(3) { z-index: 3; transform: translateZ(-16px) translateY(12px) scale(0.92); }

.layered-cards-scene:hover .layered-card:nth-child(1) { transform: translateZ(25px) rotateY(-10deg); }
.layered-cards-scene:hover .layered-card:nth-child(2) { transform: translateZ(15px) translateY(4px) scale(0.98) rotateY(-5deg); }
.layered-cards-scene:hover .layered-card:nth-child(3) { transform: translateZ(5px) translateY(8px) scale(0.94); }
