/* ===== Motion polish — hero, hover, parallax, orbs ===== */

/* Floating orbs layer (shared across heroes) */
.orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .55;
  will-change: transform;
}
.orb.o1 { width: 420px; height: 420px; top: -120px; left: -100px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  animation: orbFloat1 18s cubic-bezier(.4,.0,.2,1) infinite alternate; }
.orb.o2 { width: 320px; height: 320px; bottom: -80px; right: -60px;
  background: radial-gradient(circle, var(--accent-3) 0%, transparent 70%);
  animation: orbFloat2 22s cubic-bezier(.4,.0,.2,1) infinite alternate; }
.orb.o3 { width: 260px; height: 260px; top: 40%; left: 55%;
  background: radial-gradient(circle, var(--accent-2) 0%, transparent 70%);
  animation: orbFloat3 26s cubic-bezier(.4,.0,.2,1) infinite alternate; opacity: .35; }

@keyframes orbFloat1 {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(80px,60px) scale(1.15); }
}
@keyframes orbFloat2 {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(-60px,-40px) scale(1.1); }
}
@keyframes orbFloat3 {
  0% { transform: translate(0,0) scale(1) rotate(0deg); }
  100% { transform: translate(-90px,70px) scale(1.2) rotate(30deg); }
}

/* Mesh gradient hero overlay */
.hero-mesh {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(at 20% 20%, color-mix(in oklch, var(--accent) 40%, transparent) 0, transparent 50%),
    radial-gradient(at 80% 30%, color-mix(in oklch, var(--accent-3) 35%, transparent) 0, transparent 55%),
    radial-gradient(at 50% 90%, color-mix(in oklch, var(--accent-2) 30%, transparent) 0, transparent 50%);
  opacity: .6;
  animation: meshPulse 12s ease-in-out infinite;
}
@keyframes meshPulse {
  0%,100% { opacity: .55; transform: scale(1); }
  50% { opacity: .75; transform: scale(1.05); }
}

/* Fine dot particles — scroll-parallax via JS */
.particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.particles::before, .particles::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--fg) 1px, transparent 1.5px);
  background-size: 120px 120px;
  opacity: .08;
  animation: particleDrift 40s linear infinite;
}
.particles::after { background-size: 200px 200px; opacity: .04; animation-duration: 60s; animation-direction: reverse; }
@keyframes particleDrift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-120px,-120px,0); }
}

/* Hero content z-index lift */
.hero .container, .svc-hero .container { position: relative; z-index: 2; }

/* ===== Hover polish ===== */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:hover { transform: translateY(-2px) scale(1.02); }

.btn-ghost { position: relative; overflow: hidden; }
.btn-ghost::before {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in oklch, var(--accent) 20%, transparent);
  transform: translateY(100%);
  transition: transform .4s var(--ease);
}
.btn-ghost:hover::before { transform: translateY(0); }
.btn-ghost:hover { border-color: var(--accent); }

/* Card hover — service cards */
.svc-card { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease); }
.svc-card:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 40px 90px rgba(0,0,0,.35);
  border-color: var(--line-strong);
}
.svc-card img, .svc-card .svc-card-img { transition: transform .9s var(--ease), filter .5s var(--ease); }
.svc-card:hover img, .svc-card:hover .svc-card-img { transform: scale(1.08); filter: saturate(1.15) brightness(1.05); }

/* Feat card */
.feat { transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); }
.feat:hover { transform: translateY(-6px); border-color: var(--accent); }

/* Image zoom on gallery */
.gallery-grid > * { overflow: hidden; }
.gallery-grid > * img,
.gallery-grid > * [style*="background-image"] { transition: transform .8s var(--ease), filter .5s var(--ease); }
.gallery-grid > *:hover img,
.gallery-grid > *:hover [style*="background-image"] { transform: scale(1.07); }

/* Nav link underline sweep */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

/* Hero-head per-line reveal */
.hero-head .line { overflow: hidden; display: block; }

/* Reveal direction variants stagger the section */
[data-reveal="slide-l"] { transform: translateX(-40px); }
[data-reveal="slide-r"] { transform: translateX(40px); }
[data-reveal="zoom"] { transform: scale(.9); }
[data-reveal].in { transform: none; }

/* Magnetic-ish cursor for CTAs (pure CSS: scale near pointer via :hover) */
.cta-band { transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.cta-band:hover { transform: translateY(-4px); box-shadow: 0 40px 90px rgba(0,0,0,.4); }