/* DAKEE Design System Styles */

:root {
  /* Dynamic tokens can be handled via Tailwind config in JS, but pure CSS variables are useful for GSAP and custom classes */
  --electric-blue: #b8c3ff;
  --deep-obsidian: #111317;
}

body {
  background-color: var(--deep-obsidian);
  color: #e2e2e8;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

/* Material Icons configuration */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Base custom classes from Stitch MCP */
.hero-gradient {
    background: radial-gradient(circle at 50% 50%, rgba(46, 91, 255, 0.15) 0%, rgba(17, 19, 23, 0) 70%);
}

.glass-card {
    background: rgba(30, 32, 36, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(67, 70, 86, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.glass-card:hover {
    border: 1px solid rgba(184, 195, 255, 0.3);
    box-shadow: 0 12px 40px 0 rgba(46, 91, 255, 0.15);
}

.text-glow {
    text-shadow: 0 0 20px rgba(184, 195, 255, 0.3);
}

.btn-glow:hover {
    box-shadow: 0 0 20px rgba(46, 91, 255, 0.5);
}

/* Utility for hiding elements initially to let GSAP reveal them */
.gsap-reveal {
  opacity: 0;
  visibility: hidden;
}

/* Image Hover Zoom effect */
.img-zoom-container {
  overflow: hidden;
}
.img-zoom-container img {
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.img-zoom-container:hover img {
  transform: scale(1.05);
}

/* --- ADDED FOR ADVANCED ANIMATIONS (Marquee, Magnetic, 3D Tilt) --- */

/* Marquee / Ticker Scroll */
.marquee-wrapper {
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-content {
  animation: scroll-marquee 25s linear infinite;
}
.marquee-content:hover {
  animation-play-state: paused;
}
@keyframes scroll-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 2rem)); } /* -50% shifts half the width, 2rem accounts for gap */
}

/* Magnetic Buttons base */
.magnetic-btn {
  display: inline-block;
  will-change: transform;
}

/* 3D Tilt Base */
.bento-grid {
  perspective: 1500px;
}
.bento-card {
  transform-style: preserve-3d;
  will-change: transform;
  /* Disable transition for smooth JS tracking, except when mouse leaves */
  transition: transform 0.1s ease-out, border 0.3s, box-shadow 0.3s;
}