/* CSS Animations and Effects - Luxury Edition */

/* Removed Heavy Glow Effects */
.glow-text {
  /* No more neon glow, just crisp rendering */
  text-shadow: none;
}

.glow-box {
  position: relative;
}

.glow-box::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  background: var(--accent-primary);
  z-index: -1;
  border-radius: calc(var(--radius-lg) + 1px);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.glow-box:hover::before {
  opacity: 0.2;
}

/* Particle Canvas Container - Hid for cleaner look */
#particles-js {
  display: none;
}

/* Elegant Mouse Follower */
.cursor-follower {
  position: fixed;
  width: 30px;
  height: 30px;
  border: 1px solid var(--accent-primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
  display: none;
}

@media (pointer: fine) {
  .cursor-follower {
    display: block;
  }
}

.cursor-follower.active {
  width: 50px;
  height: 50px;
  background-color: rgba(212, 175, 55, 0.1);
  border-color: transparent;
}

/* Floating Animation */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.float-anim {
  animation: float 6s ease-in-out infinite;
}

.float-anim-delayed {
  animation: float 6s ease-in-out 3s infinite;
}

/* Subtle Pulse for Luxury Feel */
@keyframes pulse-subtle {
  0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.2); }
  70% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

.pulse {
  animation: pulse-subtle 2s infinite;
}

/* Shimmer Effect for Loading / Skeletons */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.shimmer {
  background: linear-gradient(90deg, #F5F2EB 25%, #FAFAF8 50%, #F5F2EB 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
}

/* Animated Ring Background (Hero Section) - Refined to Gold */
.animated-ring {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--bg-secondary), var(--accent-tertiary), var(--bg-primary), var(--bg-primary));
  filter: blur(80px);
  opacity: 0.1;
  animation: rotate 15s linear infinite;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes morph-blob {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* Typed cursor styling */
.typed-cursor {
  color: var(--accent-primary);
  font-weight: 300;
}

/* =========================================
   UNIVERSAL CARD ANIMATION SUITE
   ========================================= */

/* Base class applied to all cards via JS */
.animated-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%) !important;
  background-size: 200% 200% !important;
  z-index: 1; /* Establish stacking context */
}

/* 1. Background Gradient Shift (Hover) */
.animated-card:hover {
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 2. Gold Glow Border */
.animated-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), transparent, rgba(212, 175, 55, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease, box-shadow 0.4s ease;
  pointer-events: none;
  z-index: 10;
}
.animated-card:hover::before {
  opacity: 1;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.5), inset 0 0 10px rgba(212, 175, 55, 0.2);
}

/* 3. Gold Light Sweep */
.animated-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(212, 175, 55, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: left 0.7s ease;
  z-index: 11;
  pointer-events: none;
}
.animated-card:hover::after {
  left: 200%;
  transition: left 0.7s ease;
}

/* 4. Icon Orbit Animation */
.animated-card .card-icon,
.animated-card .info-icon,
.animated-card .project-icon {
  position: relative;
  z-index: 12;
}

/* Wrap existing orbit logic to target correctly */
.animated-card:hover .card-icon::after,
.animated-card:hover .info-icon::after,
.animated-card:hover .project-icon::after {
  content: '';
  position: absolute;
  top: -8px; left: -8px; right: -8px; bottom: -8px;
  border: 1px dashed var(--accent-primary);
  border-radius: 50%;
  animation: orbitSpin 4s linear infinite;
  pointer-events: none;
}

@keyframes orbitSpin {
  100% { transform: rotate(360deg); }
}

/* =========================================
   PREMIUM INTERACTIONS
   ========================================= */

/* Card Spotlight Effect */
.spotlight-card {
  position: relative;
}

.spotlight-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(
    600px circle at var(--mouse-x, 0) var(--mouse-y, 0),
    rgba(212, 175, 55, 0.08),
    transparent 40%
  );
  z-index: 15;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.spotlight-card:hover::after {
  opacity: 1;
}

/* Page Transition Overlay */
.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--bg-primary);
  z-index: 99999;
  transform: scaleY(0);
  transform-origin: top;
  pointer-events: none;
}

/* Scroll Progress Bar */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-tertiary), var(--accent-primary), var(--accent-secondary));
  transform-origin: 0% 50%;
  transform: scaleX(0);
  z-index: 99998;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Staggered Text Reveal Wrapper */
.reveal-text > span {
  display: inline-block;
}
.reveal-text > span > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}

/* =========================================
   GLOBAL BACKGROUND EFFECTS
   ========================================= */

/* Film Grain Overlay */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998; /* just below transition overlay */
  opacity: 0.12; /* increased opacity so it's visible */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Global Mouse-Tracking Glow */
.global-ambient-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 80vw;
  max-width: 800px;
  height: 80vw;
  max-height: 800px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0; /* Changed to 0 so it's above the background elements but behind content */
  background: radial-gradient(circle, rgba(212, 175, 55, 0.25) 0%, transparent 65%); /* Increased opacity */
  filter: blur(80px);
  transform: translate(-50%, -50%);
  will-change: transform;
}