/* 3D Demo Theme — isolated, only applies when data-theme="3d-demo".
 * Inspired by threejs.org: depth, glow, smooth motion, interactive 3D.
 * This is DEMO ONLY — does not touch the default theme. */

[data-theme="3d-demo"] {
  --bg: #050508;
  --card-bg: rgba(20, 20, 35, 0.6);
  --accent: #a855f7;
  --accent2: #06b6d4;
  --glow: 0 0 20px rgba(168, 85, 247, 0.4);
}

/* 3D canvas background */
#bg3d { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
[data-theme="3d-demo"] .shell,
[data-theme="3d-demo"] .main { position: relative; z-index: 1; }
[data-theme="3d-demo"] body { background: var(--bg); }

/* 3D cards with depth */
[data-theme="3d-demo"] .poster-card,
[data-theme="3d-demo"] .online-card {
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
[data-theme="3d-demo"] .poster-card:hover,
[data-theme="3d-demo"] .online-card:hover {
  box-shadow: var(--glow), 0 8px 40px rgba(0, 0, 0, 0.6);
  z-index: 10;
}

/* Glassmorphism panels */
[data-theme="3d-demo"] .auth-card,
[data-theme="3d-demo"] .detail-hero,
[data-theme="3d-demo"] .settings-group {
  background: rgba(15, 15, 25, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Glowing headers */
[data-theme="3d-demo"] .row-head h2,
[data-theme="3d-demo"] .page-head h1 {
  background: linear-gradient(135deg, #a855f7, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Animated buttons */
[data-theme="3d-demo"] .auth-btn,
[data-theme="3d-demo"] .reminder-btn.primary {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}
[data-theme="3d-demo"] .auth-btn:hover,
[data-theme="3d-demo"] .reminder-btn.primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(168, 85, 247, 0.6);
}
[data-theme="3d-demo"] .auth-btn::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}
[data-theme="3d-demo"] .auth-btn:hover::after { left: 100%; }

/* Floating navigation */
[data-theme="3d-demo"] .topbar {
  background: rgba(10, 10, 18, 0.7);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
[data-theme="3d-demo"] .bottomnav {
  background: rgba(10, 10, 18, 0.85);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(168, 85, 247, 0.15);
}

/* Glowing bell */
[data-theme="3d-demo"] .reminder-bell.has-alerts {
  box-shadow: var(--glow);
  border-color: var(--accent);
}

/* Smooth page transitions */
[data-theme="3d-demo"] .main {
  animation: fadeSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hero depth */
[data-theme="3d-demo"] .hero {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
              0 0 40px rgba(168, 85, 247, 0.15);
  transform: perspective(1000px) rotateX(2deg);
  transition: transform 0.5s ease;
}
[data-theme="3d-demo"] .hero:hover {
  transform: perspective(1000px) rotateX(0deg) scale(1.01);
}