/* ============================================================
   Al-Ahd Premium Theme — Animations (loaded when enabled)
   ============================================================ */

/* Body class set by JS when animations are on */
body.alahd-animations {
  /* nothing needed here — animations are driven by data-aos + JS */
}

/* ── Particle Canvas ────────────────────────────────────────── */
#alahd-particles { opacity: .6; }

/* ── Stagger children ───────────────────────────────────────── */
.alahd-services__grid .alahd-service-card:nth-child(1) { transition-delay: .05s; }
.alahd-services__grid .alahd-service-card:nth-child(2) { transition-delay: .12s; }
.alahd-services__grid .alahd-service-card:nth-child(3) { transition-delay: .19s; }
.alahd-services__grid .alahd-service-card:nth-child(4) { transition-delay: .26s; }
.alahd-services__grid .alahd-service-card:nth-child(5) { transition-delay: .33s; }
.alahd-services__grid .alahd-service-card:nth-child(6) { transition-delay: .40s; }

/* ── Shimmer on nav links ───────────────────────────────────── */
.alahd-nav__link::after {
  content: '';
  display: block;
  height: 2px;
  width: 0;
  background: var(--alahd-gradient-1);
  border-radius: 2px;
  margin-top: 2px;
  transition: width .3s var(--alahd-ease);
}

.alahd-nav__link:hover::after,
.alahd-nav__link.active::after { width: 100%; }

/* ── Gradient text shimmer ──────────────────────────────────── */
.alahd-hero__title {
  background: linear-gradient(270deg, #6c63ff, #00d4ff, #ff6584, #6c63ff);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 8s ease infinite;
}

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

/* ── Hover tilt on project cards ────────────────────────────── */
.alahd-project-card {
  transition: transform .4s var(--alahd-ease), box-shadow .4s var(--alahd-ease);
  will-change: transform;
}

/* ── Ripple on primary button ───────────────────────────────── */
.alahd-btn--primary {
  position: relative;
  overflow: hidden;
}

.alahd-btn--primary::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  background: rgba(255,255,255,.25);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: width .5s ease, height .5s ease, opacity .5s ease;
  opacity: 0;
}

.alahd-btn--primary:active::after {
  width: 240px; height: 240px;
  opacity: 0;
  transition: 0s;
}

/* ── Section reveal ──────────────────────────────────────────── */
section {
  transition: opacity .6s var(--alahd-ease);
}

/* ── Glow pulse on logo icon ────────────────────────────────── */
.alahd-logo__icon {
  animation: logo-glow 4s ease-in-out infinite;
}

@keyframes logo-glow {
  0%, 100% { box-shadow: 0 0 16px rgba(108,99,255,.5); }
  50% { box-shadow: 0 0 32px rgba(108,99,255,.9), 0 0 64px rgba(0,212,255,.3); }
}

/* ── Tilt on service cards (JS picks this up) ───────────────── */
.alahd-service-card, .alahd-project-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── Animated background gradient for contact section ────────── */
.alahd-contact {
  background:
    radial-gradient(ellipse 40% 40% at 20% 50%, rgba(108,99,255,.08) 0%, transparent 100%),
    radial-gradient(ellipse 40% 40% at 80% 50%, rgba(0,212,255,.06) 0%, transparent 100%);
}

/* ── Particle trail on cursor ───────────────────────────────── */
.alahd-cursor-dot {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--alahd-accent);
  pointer-events: none;
  z-index: 99999;
  transition: transform .15s ease, opacity .3s ease;
  mix-blend-mode: difference;
}

.alahd-cursor-ring {
  position: fixed;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--alahd-accent);
  pointer-events: none;
  z-index: 99998;
  transition: transform .35s ease, width .2s, height .2s;
  mix-blend-mode: difference;
}