/* Global animation & interaction utilities
   - Designed to work with your Tailwind-based pages
   - Adds interactive classes that JS will toggle on events
   - Respects prefers-reduced-motion
*/
:root {
  --primary: #f20d46;
  --anim-duration: 280ms;
}

/* Force pure light mode globally */
body {
  background-color: #ffffff !important;
  color: #111827 !important;
}

@media (prefers-reduced-motion: reduce) {

  .anim-safe,
  .anim-interaction {
    animation: none !important;
    transition: none !important;
  }
}

/* Interaction helper classes toggled by JS */
.anim-interaction {
  will-change: transform, opacity, filter;
}

/* Hover / pointer interactions */
.is-hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 30px rgba(242, 13, 70, 0.12);
  transition: transform var(--anim-duration) ease, box-shadow var(--anim-duration) ease;
}

.is-press {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08) !important;
  transition: transform 120ms ease;
}

.is-click {
  animation: clickPulse 320ms ease-out;
}

.is-dblclick {
  animation: dblPulse 420ms cubic-bezier(.2, .8, .2, 1);
}

.is-move {
  transform: translateZ(0);
  filter: blur(0.2px);
}

/* Keyboard interactions */
.key-active {
  outline: 3px solid rgba(242, 13, 70, 0.12);
  box-shadow: 0 10px 25px rgba(242, 13, 70, 0.08);
  transform: translateY(-2px) scale(1.01);
}

/* Small focus ring for keyboard nav */
.keyboard-focus-visible :where(a, button, input, textarea, select) {
  outline: none;
}

.keyboard-focus-visible .focus-visible {
  outline: 3px solid rgba(34, 197, 94, 0.15);
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.08);
}

/* Animations used by JS toggles */
@keyframes clickPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  40% {
    transform: scale(0.96);
    opacity: 0.95;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes dblPulse {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(0.92);
  }

  60% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

/* subtle key flash */
.key-flash {
  animation: keyFlash 280ms ease-out;
}

@keyframes keyFlash {
  0% {
    box-shadow: 0 0 0 rgba(242, 13, 70, 0);
  }

  50% {
    box-shadow: 0 6px 18px rgba(242, 13, 70, 0.12);
  }

  100% {
    box-shadow: 0 0 0 rgba(242, 13, 70, 0);
  }
}

/* utility for brief tooltip-like scale */
.scale-quick {
  transition: transform 150ms ease, opacity 150ms ease;
}

/* responsive: reduce motion on small devices */
@media (max-width: 640px) {
  .is-hover {
    transform: none;
    box-shadow: none;
  }
}

/* exposed class to opt-out elements */
[data-no-anim] {
  transition: none !important;
  animation: none !important;
}

/* --- TRANSACTIONAL EFFECTS --- */

/* 1. Page Entry Animation */
@keyframes pageFadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-enter {
  animation: pageFadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 2. Scroll Reveal (Handled by GSAP) */
.scroll-reveal {
  will-change: opacity, transform;
}

/* --- PREMIUM SHADOW EFFECTS --- */
.premium-layered-shadow {
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 20px 25px -5px rgba(0, 0, 0, 0.15),
    0 25px 50px -12px rgba(8, 112, 184, 0.25);
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-layered-shadow:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 20px 25px -5px rgba(0, 0, 0, 0.15),
    0 25px 50px -12px rgba(0, 0, 0, 0.2),
    0 40px 60px -15px rgba(8, 112, 184, 0.35);
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger delays for groups */
.delay-100 {
  transition-delay: 100ms;
}

.delay-200 {
  transition-delay: 200ms;
}

.delay-300 {
  transition-delay: 300ms;
}

.delay-400 {
  transition-delay: 400ms;
}

/* 3. Deep Hover Float (Premium Feel) */
.hover-float {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.hover-float:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 48px -5px rgba(0, 0, 0, 0.2), 0 12px 24px -5px rgba(0, 0, 0, 0.12);
}

/* 4. Button Press Effect */
.btn-press:active {
  transform: scale(0.96);
}

/* 5. Ambient Blob Animation (New) */
@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }

  33% {
    transform: translate(30px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }

  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* 6. Button Sheen (Wipe Effect) */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg);
  transition: 0s;
  pointer-events: none;
}

.btn-shine:hover::after {
  left: 200%;
  transition: 0.7s ease-in-out;
}

/* 7. Skill Bar Fill */
.animate-fill {
  width: 0;
  transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 8. Staggered List Children */
[data-stagger-list]>* {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-stagger-list].visible>* {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays handled by JS or CSS nth-child if static */

/* 5. Ambient Blob Animation (New) */
@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }

  33% {
    transform: translate(30px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }

  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* Glassmorphism & Premium Cards */
.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 6px 14px -2px rgba(0, 0, 0, 0.08);
  border-radius: 1.5rem;
}

.glass-card-dark {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15);
  border-radius: 1.5rem;
}

.hover-card-3d {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
  transform-style: preserve-3d;
}

.hover-card-3d:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 48px -10px rgba(0, 0, 0, 0.25);
}

/* Magnetic Button (Optional utility) */
.magnetic-btn {
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- PRO UPGRADE: Custom Cursor --- */
@media (pointer: fine) {
  body {
    cursor: none; /* Hide default cursor on desktop */
  }
}

.cursor-dot,
.cursor-outline {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  z-index: 10000;
  pointer-events: none;
  mix-blend-mode: difference;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background-color: white;
  transform: translate(-50%, -50%);
}

.cursor-outline {
  width: 40px;
  height: 40px;
  border: 1px solid white;
  transform: translate(-50%, -50%);
}

body.hovering .cursor-dot {
  transform: translate(-50%, -50%) scale(0.5);
}

body.hovering .cursor-outline {
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.1);
}

/* --- PRO UPGRADE: Marquee --- */
.marquee-container {
  display: flex;
  width: max-content;
  animation: marquee 20s linear infinite;
}

.marquee-container:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- PRO UPGRADE: Noise Overlay --- */
.noise-overlay {
  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");
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* --- PRO UPGRADE: Text Reveal --- */
.reveal-text {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  display: inline-block;
}
.reveal-word {
  display: inline-block;
  white-space: pre;
}

/* ==========================================================
   GLOBAL PREMIUM DESIGN SYSTEM (AI SaaS Style)
   ========================================================== */

/* 1. Global Particle Background */
#network-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* 2. Global Floating Card System & Border Glow & Soft Motion */
.card-premium {
  background: rgba(255, 255, 255, 0.75); /* AI SaaS Glass Style */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 12px 20px rgba(0, 0, 0, 0.12),
    0 25px 50px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  position: relative;
  animation: float 6s ease-in-out infinite;
}

.card-premium:hover {
  transform: translateY(-10px);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.15),
    0 20px 40px rgba(0, 0, 0, 0.20),
    0 40px 80px rgba(0, 0, 0, 0.25);
}

.card-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0)
  );
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
}

@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0px); }
}

/* 3. Section Background Surface */
.section-surface {
  background: #f8fafc;
  border-radius: 28px;
  padding: 50px;
}

/* Light / Dark Mode Handling for .card-premium */
.dark .card-premium {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}
.dark .card-premium::before {
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0)
  );
}
.dark .section-surface {
  background: #0f172a; /* Tailwind slate-900 */
}

/* 4. Premium Card Glow (Cursor Spotlight) */
.card-premium-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1; 
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    600px circle at var(--mouse-x, 0) var(--mouse-y, 0),
    rgba(255, 255, 255, 0.4),
    transparent 40%
  );
  mix-blend-mode: overlay;
}
.dark .card-premium-glow {
  background: radial-gradient(
    600px circle at var(--mouse-x, 0) var(--mouse-y, 0),
    rgba(255, 255, 255, 0.1),
    transparent 40%
  );
}
.card-premium:hover > .card-premium-glow {
  opacity: 1;
}
/* --- PRO UPGRADE: Animated Gradient Text --- */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animate-gradient {
  background-size: 200% auto;
  animation: gradientShift 6s ease infinite;
}

/* --- PRO UPGRADE: Floating Tech Icons --- */
@keyframes floatIcon {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
.float-icon {
  animation: floatIcon 8s ease-in-out infinite;
}
.float-icon-fast {
  animation: floatIcon 6s ease-in-out infinite reverse;
}
.float-icon-slow {
  animation: floatIcon 10s ease-in-out infinite;
}