/* ─────────────────────────────────────────────────────────────
   LeadForge Studio · CINEMATIC LAYER
   Adds: animated mesh gradients, particle field, dot grid,
   richer hover micro-interactions, smoother reveals.
   Loaded AFTER styles.css so it overrides cleanly.
   ───────────────────────────────────────────────────────────── */

/* ─────────  HERO: cinematic background stack  ───────── */
.hero{
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(99,102,241,.05), transparent 60%),
    var(--bg);
}

/* Dot-grid mesh — sits at the very back */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(17,17,17,.10) 1px, transparent 1.4px);
  background-size: 28px 28px;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 0%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 0%, transparent 80%);
  opacity: .55;
  z-index: 0;
  pointer-events: none;
  animation: gridDrift 60s linear infinite;
}
@keyframes gridDrift {
  to { background-position: 28px 28px; }
}

/* Aurora mesh — multiple drifting colored gradients */
.hero-mesh{
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  filter: blur(70px);
  opacity: .35;
  mix-blend-mode: normal;
}
.mesh-orb{
  position: absolute;
  border-radius: 50%;
  opacity: .55;
  will-change: transform;
}
.mesh-orb-1{
  width: 520px; height: 520px;
  left: -8%; top: -8%;
  background: radial-gradient(circle at 30% 30%, #c7d2fe, transparent 65%);
  animation: meshDrift1 22s ease-in-out infinite alternate;
}
.mesh-orb-2{
  width: 460px; height: 460px;
  right: -6%; top: 10%;
  background: radial-gradient(circle at 60% 40%, #e0e7ff, transparent 65%);
  animation: meshDrift2 26s ease-in-out -4s infinite alternate;
}
.mesh-orb-3{
  width: 380px; height: 380px;
  left: 30%; bottom: -15%;
  background: radial-gradient(circle at 50% 50%, #ddd6fe, transparent 65%);
  animation: meshDrift3 30s ease-in-out -8s infinite alternate;
}
.mesh-orb-4{
  width: 320px; height: 320px;
  right: 25%; bottom: -10%;
  background: radial-gradient(circle at 50% 50%, #dbeafe, transparent 65%);
  animation: meshDrift4 28s ease-in-out -12s infinite alternate;
}
@keyframes meshDrift1{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(60px, 40px, 0) scale(1.15); }
}
@keyframes meshDrift2{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-50px, 60px, 0) scale(1.12); }
}
@keyframes meshDrift3{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(40px, -50px, 0) scale(1.18); }
}
@keyframes meshDrift4{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-60px, -40px, 0) scale(1.1); }
}

/* Particle canvas */
.hero-particles{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .45;
}

/* Soft scan beam — subtle horizontal light sweep */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255,255,255,.5) 48%,
    rgba(255,255,255,.7) 50%,
    rgba(255,255,255,.5) 52%,
    transparent 100%
  );
  opacity: 0;
  mix-blend-mode: screen;
  transform: translateY(-100%);
  animation: scanBeam 14s ease-in-out 3s infinite;
}
@keyframes scanBeam{
  0%   { transform: translateY(-100%); opacity: 0; }
  8%   { opacity: .25; }
  18%  { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* Make sure existing blobs sit nicely on top of mesh, more diffused */
.hero .bg-gradients{ z-index: 0; }
.hero .blob{ opacity: .35; }

/* Lift hero content above all background layers */
.hero-grid{ position: relative; z-index: 2; }

/* Parallax wrapper for visual */
.hero-visual{
  will-change: transform;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.hero-copy{
  will-change: transform;
}

/* Subtle text gradient on the em accent of h1 */
.hero-copy h1 em{
  background: linear-gradient(135deg, #6366f1, #8b5cf6 50%, #ec4899);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
}

/* ─────────  Premium button — primary  ───────── */
.btn-primary{
  position: relative;
  overflow: hidden;
}
/* Shine sweep on hover */
.btn-primary::before{
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 60%; height: 100%;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255,255,255,.18) 50%,
    transparent 80%
  );
  transform: skewX(-20deg);
  transition: left .8s cubic-bezier(.2,.6,.2,1);
  pointer-events: none;
}
.btn-primary:hover::before{ left: 130%; }

/* ─────────  Cards — gradient border glow on hover  ───────── */
.card.svc{
  position: relative;
  isolation: isolate;
}
.card.svc::before{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(99,102,241,.6), rgba(139,92,246,.5), rgba(236,72,153,.5));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 1;
}
.card.svc:hover::before{ opacity: 1; }
.card.svc::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 0%),
    rgba(99,102,241,.10),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 0;
}
.card.svc:hover::after{ opacity: 1; }
.card.svc > *{ position: relative; z-index: 2; }

/* Smoother service-card lift */
.card.svc{
  transition:
    transform .5s cubic-bezier(.2,.6,.2,1),
    box-shadow .5s ease,
    border-color .5s ease;
}
.card.svc:hover{
  transform: translateY(-6px);
  box-shadow:
    0 1px 2px rgba(17,17,17,.04),
    0 30px 60px -20px rgba(99,102,241,.18);
}

/* ─────────  Process steps — soft gradient on hover  ───────── */
.step{
  position: relative;
  isolation: isolate;
  transition: transform .5s cubic-bezier(.2,.6,.2,1), box-shadow .5s ease, border-color .5s ease;
}
.step::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(99,102,241,.04), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 0;
}
.step:hover::before{ opacity: 1; }
.step:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(99,102,241,.18);
  border-color: rgba(99,102,241,.18);
}
.step > *{ position: relative; z-index: 1; }
.step-num{
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 6px 16px -6px rgba(99,102,241,.55);
}

/* ─────────  Portfolio cards — image zoom + overlay gradient  ───────── */
.proj{
  transition: transform .55s cubic-bezier(.2,.6,.2,1), box-shadow .55s ease;
}
.proj-media{
  overflow: hidden;
}
.proj-media-img{
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.proj:hover .proj-media-img{
  transform: scale(1.06);
}
.proj-media::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.18) 100%);
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 0;
}
.proj:hover .proj-media::before{ opacity: 1; }

/* ─────────  Tier cards — subtle inner shimmer on the pop tier  ───────── */
.tier-pop{
  position: relative;
  overflow: hidden;
}
.tier-pop::before{
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255,255,255,.06) 60deg,
    transparent 120deg,
    transparent 360deg
  );
  animation: conicSpin 8s linear infinite;
  pointer-events: none;
}
@keyframes conicSpin{
  to { transform: rotate(360deg); }
}
.tier-pop > *{ position: relative; z-index: 1; }

/* ─────────  Industry chips — lift on hover  ───────── */
.ind{
  padding: 8px 14px;
  border-radius: 999px;
  transition: color .3s ease, background .3s ease, transform .3s ease;
}
.ind:hover{
  background: rgba(99,102,241,.06);
  transform: translateY(-2px);
}

/* ─────────  Smoother reveal — adds a touch of scale + filter  ───────── */
.reveal{
  transform: translateY(28px) scale(.985);
  filter: blur(2px);
  transition:
    opacity 1s cubic-bezier(.2,.6,.2,1),
    transform 1s cubic-bezier(.2,.6,.2,1),
    filter .9s ease;
}
.reveal.in{
  opacity: 1;
  transform: none;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal{ filter: none; transform: none; }
}

/* ─────────  Nav — subtle glow on scroll  ───────── */
.nav.scrolled{
  background: rgba(255,255,255,.78);
  box-shadow: 0 1px 0 rgba(17,17,17,.04), 0 8px 24px -16px rgba(99,102,241,.12);
}

/* ─────────  Final CTA — animated radial aurora  ───────── */
.final-cta-card{
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(99,102,241,.35), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 100%, rgba(236,72,153,.25), transparent 60%),
    #0c0c0e;
}

/* ─────────  Disable cinematic stuff on reduced motion  ───────── */
@media (prefers-reduced-motion: reduce){
  .hero::before, .mesh-orb, .hero::after, .tier-pop::before{
    animation: none !important;
  }
}

/* ─────────  Mobile tuning — lighter effects, better perf  ───────── */
@media (max-width: 720px){
  /* Reduce aurora mesh */
  .hero-mesh{ filter: blur(40px); opacity: .28; }
  .mesh-orb-1, .mesh-orb-2, .mesh-orb-3, .mesh-orb-4{
    width: 240px; height: 240px;
    animation-duration: 40s; /* slower = less CPU/GPU */
  }
  /* Simplify dot grid */
  .hero::before{
    background-size: 24px 24px;
    opacity: .2;
    animation: none; /* static on mobile saves CPU */
  }
  /* Remove scan beam on mobile */
  .hero::after{ display: none; }
  /* Hide particle canvas — CSS wins, JS also checks */
  .hero-particles{ display: none; }
  /* Remove blur from reveals — filter is GPU-heavy on phones */
  .reveal{ filter: none !important; }
  /* Disable card gradient border glow on mobile (hover-only anyway) */
  .card.svc::before, .card.svc::after{ display: none; }
  /* Stop conic spin — expensive on low-end phones */
  .tier-pop::before{ animation: none; }
}

/* ── Very small phones (≤ 480px): strip to essentials ─── */
@media (max-width: 480px){
  .hero-mesh{ display: none; }   /* no aurora */
  .hero::before{ display: none; } /* no dot grid */
  .hero .blob{ display: none; }   /* no colour blobs */
}

/* ─────────  Disable cinematic stuff on reduced motion  ───────── */
@media (prefers-reduced-motion: reduce){
  .hero::before, .mesh-orb, .hero::after, .tier-pop::before{
    animation: none !important;
  }
}