/* ==========================================================================
   SyskoSoft - Game of Branding Inspired Animation & Micro-Interactions CSS
   ========================================================================== */

/* Custom Cursor */
#custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background-color: #2563EB;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.8);
}

#custom-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(37, 99, 235, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, background-color 0.25s ease;
  backdrop-filter: blur(2px);
}

/* Active Hover Cursor States */
body.cursor-hover #custom-cursor-dot {
  width: 14px;
  height: 14px;
  background-color: #06B6D4;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.9);
}

body.cursor-hover #custom-cursor-ring {
  width: 58px;
  height: 58px;
  border-color: rgba(6, 182, 212, 0.8);
  background-color: rgba(6, 182, 212, 0.08);
}

/* Hide custom cursor on mobile touch screens */
@media (hover: none) and (pointer: coarse) {
  #custom-cursor-dot, #custom-cursor-ring {
    display: none !important;
  }
}

/* Kinetic Display Typography */
.font-display {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
}

.heading-display {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.03em;
}

.text-gradient-neon {
  background: linear-gradient(135deg, #2563EB 0%, #06B6D4 50%, #8B5CF6 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: neonGlow 6s ease infinite alternate;
}

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

/* Glowing Dynamic Card Spotlight */
.spotlight-card {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 1.25rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  overflow: hidden;
}

.dark .spotlight-card {
  background: rgba(15, 23, 42, 0.6);
}

.spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(37, 99, 235, 0.15), transparent 40%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

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

/* 3D Tilt Card */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.tilt-card:hover {
  box-shadow: 0 20px 45px -15px rgba(37, 99, 235, 0.25);
}

.dark .tilt-card:hover {
  box-shadow: 0 20px 45px -15px rgba(6, 182, 212, 0.2);
}

/* Shiny Sweep Buttons */
.shiny-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.shiny-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: rotate(25deg);
  transition: left 0.65s ease-in-out;
}

.shiny-btn:hover::after {
  left: 140%;
}

.shiny-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(37, 99, 235, 0.5);
}

/* Scroll Progress Bar */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #2563EB, #06B6D4, #8B5CF6);
  z-index: 999999;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.8);
}

/* Scroll Reveal Animations */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal[data-reveal="scale-up"] {
  transform: scale(0.92) translateY(20px);
}

.reveal[data-reveal="slide-left"] {
  transform: translateX(-40px);
}

.reveal[data-reveal="slide-right"] {
  transform: translateX(40px);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* Word Reveal Effect */
.word-reveal {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.word-reveal .word-inner {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.in .word-reveal .word-inner {
  transform: translateY(0);
}

/* Floating Glass Badges */
.glass-badge {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.dark .glass-badge {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
}