/* ========================================================
   AdeX - Digital Marketing Agency Premium Theme
   ======================================================== */

@import "tailwindcss";

/* Base variables & styles */
:root {
  --bg-dark: #090e1a;
  --bg-card: rgba(17, 26, 48, 0.45);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --color-primary: #182f65;
  --color-accent: #3b63cd;
  --color-highlight: #6595ff;
  --color-slate: #e8e3e6;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Hide standard cursor only when a mouse is actively being used (safeguard for touch-screens and hybrid systems) */
body.has-mouse,
body.has-mouse a,
body.has-mouse button,
body.has-mouse select,
body.has-mouse input,
body.has-mouse textarea,
body.has-mouse .accordion-trigger,
body.has-mouse .glass-card,
body.has-mouse [data-hover-magnetic] {
  cursor: none !important;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-dark);
  color: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  position: relative;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
  background: rgba(101, 149, 255, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(101, 149, 255, 0.6);
}

/* Custom Glassmorphism Classes */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-card {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(101, 149, 255, 0.3);
  box-shadow: 0 12px 40px 0 rgba(101, 149, 255, 0.15);
  transform: translateY(-4px);
}

.glass-input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: white;
  transition: all 0.3s ease;
}

.glass-input:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--color-highlight);
  box-shadow: 0 0 15px rgba(101, 149, 255, 0.25);
  outline: none;
}

/* 3D perspective wrapper */
.perspective-container {
  perspective: 1000px;
}

.perspective-card {
  transform-style: preserve-3d;
  transition: transform 0.1s ease;
}

/* Glowing Backdrops */
.glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
  animation: floatGlow 15s infinite alternate ease-in-out;
}

@keyframes floatGlow {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  50% {
    transform: translate(50px, -30px) scale(1.1);
  }
  100% {
    transform: translate(-30px, 40px) scale(0.9);
  }
}

/* Custom Cursor Styles */
#custom-cursor {
  width: 32px;
  height: 32px;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  transition: width 0.2s, height 0.2s, background-color 0.2s;
  display: none; /* Hide by default, shown only when mouse moves */
  align-items: center;
  justify-content: center;
}

#custom-cursor-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-highlight);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 100000;
  box-shadow: 0 0 10px var(--color-highlight), 0 0 20px var(--color-accent);
  display: none; /* Hide by default, shown only when mouse moves */
}

body.has-mouse #custom-cursor,
body.has-mouse #custom-cursor-dot {
  display: flex;
}

/* Hover effects for cursor */
.cursor-hover #custom-cursor {
  width: 54px;
  height: 54px;
}

.cursor-hover #custom-cursor svg {
  transform: scale(1.4) rotate(45deg);
}

/* Magnetic link wrapper hover style */
.magnet-link {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Font styles */
.font-display {
  font-family: var(--font-display);
}

/* Hero Title animation gradients */
.text-gradient {
  background: linear-gradient(135deg, #ffffff 30%, #a8c0ff 70%, #6595ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-accent {
  background: linear-gradient(135deg, #6595ff 0%, #3b63cd 50%, #182f65 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Interactive elements styles */
.animated-border {
  position: relative;
  overflow: hidden;
}

.animated-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-highlight), transparent);
  animation: animBorderLeft 3s infinite linear;
}

@keyframes animBorderLeft {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Animations for timeline */
.slide-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-in.visible {
  opacity: 1;
  transform: translateY(0);
}