/* Nasos.io — Shared Styles */
body {
  background: #080808;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(81, 0, 172, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(71, 218, 218, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(20, 20, 20, 1) 0%, rgba(8, 8, 8, 1) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  color: #e2e2e2;
  font-family: 'Inter', sans-serif;
}
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif; }
.glass-card {
  background: rgba(20, 20, 20, 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.architectural-grid {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
  mask-image: radial-gradient(circle at center, black, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
}
.btn-glow {
  box-shadow: 0 0 30px rgba(81, 0, 172, 0.3);
  transition: box-shadow 0.3s ease;
}
.btn-glow:hover {
  box-shadow: 0 0 45px rgba(81, 0, 172, 0.5);
}
.nav-link {
  color: #a1a1aa;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: color 0.3s;
}
.nav-link:hover { color: #ffffff; }
.nav-link.active {
  color: #d8b4fe;
  font-weight: 700;
  border-bottom: 2px solid #c084fc;
  padding-bottom: 4px;
}

/* ── Scroll-Reveal Animations ── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-on-scroll.active {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ── Fade-Up (keyframe variant for hero text) ── */
@keyframes fade-slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-hero {
  animation: fade-slide-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
}

/* ── CTA Glow Pulse ── */
@keyframes soft-glow {
  0%, 100% { box-shadow: 0 0 30px rgba(81, 0, 172, 0.3); }
  50%      { box-shadow: 0 0 50px rgba(81, 0, 172, 0.55), 0 0 80px rgba(81, 0, 172, 0.15); }
}
.cta-glow {
  animation: soft-glow 3s ease-in-out infinite;
}

/* ── Hover Card Lift ── */
.hover-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}
.hover-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

/* ── Progress Bar Fill ── */
@keyframes bar-fill {
  from { width: 0; }
  to   { width: var(--bar-width); }
}
.animate-bar {
  width: 0;
  animation: bar-fill 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* ── Animated SVG Flow Line ── */
@keyframes flow-dash {
  to { stroke-dashoffset: -40; }
}
.flow-line {
  stroke: rgba(71, 218, 218, 0.3);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 12 8;
  animation: flow-dash 3s linear infinite;
}

/* ── Pulse Glow (nodes) ── */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(81, 0, 172, 0.5); }
  50%      { box-shadow: 0 0 35px rgba(81, 0, 172, 0.8), 0 0 60px rgba(81, 0, 172, 0.3); }
}
.animate-pulse-glow {
  animation: pulse-glow 2.5s ease-in-out infinite;
}

/* ── Drifting Grid (AI Solutions) ── */
@keyframes drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-50px, -50px); }
}
.grid-bg {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(74, 68, 84, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(74, 68, 84, 0.15) 1px, transparent 1px);
}
.animate-drift {
  animation: drift 60s linear infinite;
}

/* ── Data Stream (AI Solutions Level 3) ── */
@keyframes data-stream {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.animate-data-stream {
  background: linear-gradient(90deg, transparent, rgba(71, 218, 218, 0.15), transparent);
  background-size: 200% 100%;
  animation: data-stream 2s linear infinite;
}

/* ── Count-Up Bar Growth ── */
@keyframes bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.animate-bar-grow {
  transform-origin: left;
  animation: bar-grow 2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* ── Gradient Text ── */
.gradient-text {
  background: linear-gradient(135deg, #D4BBFF 0%, #47DADA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Glow Gradient Button ── */
.glow-gradient {
  background: linear-gradient(135deg, #d4bbff 0%, #5100ac 100%);
}

/* ── Marquee Scroll ── */
@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@keyframes marquee-right {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}
.marquee-row {
  overflow: hidden;
}
.marquee-scroll-left {
  animation: marquee-left 30s linear infinite;
}
.marquee-scroll-right {
  animation: marquee-right 30s linear infinite;
}
.marquee-row:hover .marquee-scroll-left,
.marquee-row:hover .marquee-scroll-right {
  animation-play-state: paused;
}
.marquee-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, #131313 0%, transparent 10%, transparent 90%, #131313 100%);
}

/* ── 3D Tilt Card (mouse-follow parallax) ── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
}
.tilt-card .tilt-inner {
  transform: translateZ(30px);
}
.tilt-card .tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(212, 187, 255, 0.12) 0%, transparent 60%);
  pointer-events: none;
}
.tilt-card:hover .tilt-shine {
  opacity: 1;
}

/* ── Floating Particle Field ── */
.ambient-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ── Magnetic Button (subtle pull toward cursor) ── */
.magnetic-btn {
  transition: transform 0.2s ease-out;
}

/* ── Glowing Border on Hover ── */
.glow-border {
  position: relative;
}
.glow-border::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: linear-gradient(135deg, rgba(212,187,255,0.3), rgba(71,218,218,0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  pointer-events: none;
}
.glow-border:hover::after {
  opacity: 1;
}

/* ── Text Shimmer (for accent headings) ── */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.text-shimmer {
  background: linear-gradient(90deg, #d4bbff 0%, #47dada 30%, #d4bbff 60%, #47dada 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}

/* ── Stagger Children Animation ── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger-children.active > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(3) { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(4) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(5) { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(6) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }