/**
 * 3D Gallery - Portable CSS (use on any website)
 * Author: Molla Samser | rskworld.in | 2026
 * Wrap your 3D content in <div class="rsk-3d-gallery"> and use the same class names.
 * Include this file once; responsive and Bootstrap-like breakpoints included.
 */
:root {
  --g3d-perspective: 1200px;
  --g3d-cube-size: clamp(80px, 18vw, 120px);
  --g3d-card-w: clamp(110px, 22vw, 140px);
  --g3d-card-h: clamp(140px, 28vw, 180px);
  --g3d-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --g3d-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --g3d-duration: 0.4s;
  --g3d-accent: #0d6efd;
  --g3d-accent-light: #6ea8fe;
  --g3d-bg: #1e293b;
  --g3d-bg-elevated: #334155;
  --g3d-text: #f1f5f9;
  --g3d-border: rgba(255,255,255,0.08);
  --g3d-shadow: rgba(13, 110, 253, 0.25);
}
[data-theme="light"] {
  --g3d-bg: #ffffff;
  --g3d-bg-elevated: #e2e8f0;
  --g3d-text: #0f172a;
  --g3d-border: rgba(0,0,0,0.08);
}

.rsk-3d-gallery { font-family: system-ui, sans-serif; color: var(--g3d-text); }
.rsk-3d-gallery * { box-sizing: border-box; }

/* Flip cards */
.rsk-3d-gallery .flip-cards { display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 1.5rem); justify-content: center; }
.rsk-3d-gallery .flip-card { width: var(--g3d-card-w); height: var(--g3d-card-h); perspective: 1000px; cursor: pointer; }
.rsk-3d-gallery .flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s var(--g3d-ease-back); transform-style: preserve-3d; }
.rsk-3d-gallery .flip-card:hover .flip-inner { transform: rotateY(180deg); }
.rsk-3d-gallery .flip-front, .rsk-3d-gallery .flip-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: clamp(1rem, 2.5vw, 1.25rem); border-radius: 12px; border: 1px solid var(--g3d-border); }
.rsk-3d-gallery .flip-front { background: linear-gradient(145deg, var(--g3d-bg) 0%, var(--g3d-bg-elevated) 100%); color: var(--g3d-accent-light); }
.rsk-3d-gallery .flip-back { background: linear-gradient(145deg, var(--g3d-accent) 0%, #0a58ca 100%); color: #fff; transform: rotateY(180deg); }

/* Cube */
.rsk-3d-gallery .cube-scene { perspective: var(--g3d-perspective); display: flex; justify-content: center; align-items: center; min-height: clamp(200px, 40vw, 280px); }
.rsk-3d-gallery .cube { position: relative; width: var(--g3d-cube-size); height: var(--g3d-cube-size); transform-style: preserve-3d; animation: g3d-cubeRotate 12s linear infinite; }
.rsk-3d-gallery .cube:hover { animation-play-state: paused; }
.rsk-3d-gallery .cube-face { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 700; background: linear-gradient(145deg, var(--g3d-bg) 0%, var(--g3d-bg-elevated) 100%); border: 2px solid var(--g3d-accent); border-radius: 8px; box-shadow: 0 0 20px var(--g3d-shadow); }
.rsk-3d-gallery .cube-face.front { transform: translateZ(50%); }
.rsk-3d-gallery .cube-face.back { transform: rotateY(180deg) translateZ(50%); }
.rsk-3d-gallery .cube-face.right { transform: rotateY(90deg) translateZ(50%); }
.rsk-3d-gallery .cube-face.left { transform: rotateY(-90deg) translateZ(50%); }
.rsk-3d-gallery .cube-face.top { transform: rotateX(90deg) translateZ(50%); }
.rsk-3d-gallery .cube-face.bottom { transform: rotateX(-90deg) translateZ(50%); }
@keyframes g3d-cubeRotate { 0% { transform: rotateX(-18deg) rotateY(0); } 100% { transform: rotateX(-18deg) rotateY(360deg); } }

/* Tiles */
.rsk-3d-gallery .tiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100px, 25vw), 1fr)); gap: clamp(0.75rem, 2vw, 1rem); max-width: 500px; margin: 0 auto; }
.rsk-3d-gallery .tile { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--g3d-bg) 0%, var(--g3d-bg-elevated) 100%); border-radius: 12px; border: 1px solid var(--g3d-border); font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: 700; color: var(--g3d-accent-light); transition: transform var(--g3d-duration) var(--g3d-ease-back); transform-style: preserve-3d; transform: perspective(500px) rotateX(0) rotateY(0); }
.rsk-3d-gallery .tile:hover { transform: perspective(500px) rotateX(8deg) rotateY(-8deg) scale(1.08); box-shadow: 0 20px 40px var(--g3d-shadow); }
.rsk-3d-gallery .tile:nth-child(even):hover { transform: perspective(500px) rotateX(-8deg) rotateY(8deg) scale(1.08); }

/* Carousel */
.rsk-3d-gallery .carousel-scene { perspective: 1000px; display: flex; justify-content: center; align-items: center; min-height: clamp(200px, 35vw, 260px); }
.rsk-3d-gallery .carousel { position: relative; width: clamp(160px, 35vw, 200px); height: clamp(100px, 20vw, 120px); transform-style: preserve-3d; animation: g3d-carouselSpin 15s linear infinite; }
.rsk-3d-gallery .carousel-item { position: absolute; width: clamp(60px, 14vw, 80px); height: clamp(80px, 18vw, 100px); left: 50%; top: 50%; margin-left: -40px; margin-top: -50px; display: flex; align-items: center; justify-content: center; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; background: linear-gradient(145deg, var(--g3d-accent) 0%, #0a58ca 100%); border-radius: 12px; border: 2px solid var(--g3d-accent-light); }
.rsk-3d-gallery .carousel-item:nth-child(1) { transform: rotateY(0deg) translateZ( clamp(110px, 22vw, 140px) ); }
.rsk-3d-gallery .carousel-item:nth-child(2) { transform: rotateY(60deg) translateZ( clamp(110px, 22vw, 140px) ); }
.rsk-3d-gallery .carousel-item:nth-child(3) { transform: rotateY(120deg) translateZ( clamp(110px, 22vw, 140px) ); }
.rsk-3d-gallery .carousel-item:nth-child(4) { transform: rotateY(180deg) translateZ( clamp(110px, 22vw, 140px) ); }
.rsk-3d-gallery .carousel-item:nth-child(5) { transform: rotateY(240deg) translateZ( clamp(110px, 22vw, 140px) ); }
.rsk-3d-gallery .carousel-item:nth-child(6) { transform: rotateY(300deg) translateZ( clamp(110px, 22vw, 140px) ); }
@keyframes g3d-carouselSpin { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }

/* Back to top (works anywhere) */
.rsk-3d-gallery [data-3d-back-to-top], [data-3d-back-to-top] { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 48px; height: 48px; border-radius: 50%; background: var(--g3d-accent, #0d6efd); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; opacity: 0; visibility: hidden; transition: opacity 0.3s, transform 0.3s; z-index: 100; }
.rsk-3d-gallery [data-3d-back-to-top].visible, [data-3d-back-to-top].visible { opacity: 1; visibility: visible; }

/* Responsive */
@media (max-width: 575.98px) {
  .rsk-3d-gallery .flip-card { width: 110px; height: 140px; }
  .rsk-3d-gallery .cube { width: 80px; height: 80px; }
  .rsk-3d-gallery .cube-face { width: 80px; height: 80px; font-size: 1.25rem; }
  .rsk-3d-gallery .tiles-grid { grid-template-columns: repeat(3, 1fr); }
  .rsk-3d-gallery [data-3d-back-to-top], [data-3d-back-to-top] { width: 42px; height: 42px; bottom: 1rem; right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rsk-3d-gallery .flip-inner, .rsk-3d-gallery .cube, .rsk-3d-gallery .carousel { animation: none !important; transition-duration: 0.01ms !important; }
}
