/**
 * Axencia.co — 2026 Award-Worthy UI
 * World-class visuals, holographic depth, premium micro-interactions
 */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --holographic-border: linear-gradient(135deg, rgba(59,130,246,0.4), rgba(6,182,212,0.3), rgba(99,102,241,0.3), rgba(59,130,246,0.4));
  --holographic-glow: 0 0 60px rgba(59,130,246,0.15), 0 0 120px rgba(6,182,212,0.08);
}

/* ===== SECTION REVEAL — Staggered entrance on scroll ===== */
.section {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
}

.section.in-view {
  opacity: 1;
  transform: translateY(0);
}

.section-header {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out-expo) 0.1s, transform 0.9s var(--ease-out-expo) 0.1s;
}

.section.in-view .section-header {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.section.in-view .expertise-card:nth-child(1) { transition-delay: 0.15s; }
.section.in-view .expertise-card:nth-child(2) { transition-delay: 0.2s; }
.section.in-view .expertise-card:nth-child(3) { transition-delay: 0.25s; }
.section.in-view .expertise-card:nth-child(4) { transition-delay: 0.3s; }
.section.in-view .expertise-card:nth-child(5) { transition-delay: 0.35s; }
.section.in-view .expertise-card:nth-child(6) { transition-delay: 0.4s; }

/* ===== PREMIUM CARD — 3D tilt, holographic edge ===== */
.expertise-card,
.testimonial-card,
.plan-card,
.service-item,
.cs-why-card,
.cs-platform-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.5s var(--ease-spring), box-shadow 0.5s var(--ease-smooth),
    border-color 0.4s ease, background 0.4s ease;
}

.expertise-card:hover,
.testimonial-card:hover,
.plan-card:hover,
.service-item:hover,
.cs-why-card:hover,
.cs-platform-card:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: 
    0 32px 64px rgba(0,0,0,0.45),
    0 0 80px rgba(59,130,246,0.12),
    0 0 0 1px rgba(255,255,255,0.05) inset;
}

/* Holographic border shimmer on hover — testimonial/plan cards */
.testimonial-card::after,
.plan-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--holographic-border);
  background-size: 300% 300%;
  -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;
  opacity: 0;
  animation: holographicShift 4s linear infinite;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.testimonial-card:hover::after,
.plan-card:hover::after {
  opacity: 1;
}

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

/* ===== BUTTONS — Magnetic hover, premium glow ===== */
.btn-primary,
.btn-ghost,
.nav-cta {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-smooth),
    border-color 0.3s ease;
}

.btn-primary:hover,
.nav-cta:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 20px 50px rgba(59,130,246,0.4), 0 0 40px rgba(59,130,246,0.2);
}

.btn-ghost:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(59,130,246,0.15);
}

/* Shine sweep on button hover */
.btn-primary::after,
.nav-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.6s ease;
}

.btn-primary:hover::after,
.nav-cta:hover::after {
  left: 150%;
}

/* ===== HERO — Enhanced depth & glow ===== */
.hero-content {
  animation: heroReveal 1.2s var(--ease-out-expo) forwards;
}

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-badge {
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease;
}

.hero-badge:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 32px rgba(59,130,246,0.2);
}

/* Hero title — subtle text shadow for depth */
.hero-title .line {
  text-shadow: 0 2px 40px rgba(59,130,246,0.2);
}

/* ===== SECTION DIVIDER — Elegant gradient line (subtle) ===== */
.section {
  position: relative;
}

.section:not(:first-of-type)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,0.4), transparent);
  opacity: 0.5;
}

/* ===== NAVBAR — Premium glass, subtle glow ===== */
.navbar {
  transition: backdrop-filter 0.5s ease, box-shadow 0.5s ease;
}

.navbar.scrolled {
  box-shadow: 0 4px 40px rgba(0,0,0,0.35), 0 0 60px rgba(59,130,246,0.05);
}

/* ===== PORTFOLIO — Enhanced card hover ===== */
.portfolio-category {
  transition: transform 0.5s var(--ease-spring), box-shadow 0.5s ease;
}

.portfolio-category:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.35);
}

.portfolio-list a {
  transition: color 0.3s ease, transform 0.3s var(--ease-spring);
}

.portfolio-list a:hover {
  transform: translateX(6px);
  color: #60a5fa !important;
}

/* ===== FOOTER — Subtle gradient border ===== */
.footer {
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,0.3), rgba(6,182,212,0.2), transparent);
  opacity: 0.8;
}

/* ===== SCROLL INDICATOR — Premium pulse ===== */
.scroll-indicator {
  animation: scrollPulse 2.5s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(8px); }
}

/* ===== GLOBAL — Smoother focus states ===== */
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(59,130,246,0.6);
  outline-offset: 3px;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .section,
  .section-header,
  .expertise-card,
  .testimonial-card,
  .plan-card,
  .service-item {
    transition: none !important;
    animation: none !important;
  }
  
  .section { opacity: 1; transform: none; }
  .section-header { opacity: 1; transform: none; }
}