/* ============================================================
   BAD INFLUENCE · motion.css — cinematic motion system (v2)
   One timing language:
     micro 180ms · hover 320ms · reveals 750ms · hero 1.2s
     ease: cubic-bezier(0.16,1,0.3,1)
   Entrance motion gated on html.js + no-reduced-motion.
   Cursor/magnetic/spotlight extras live in motion.js (fine pointer only).
   ============================================================ */

:root {
  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --m-micro: 180ms;
  --m-hover: 320ms;
}

/* ------------------------------------------------ scroll reveals */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal:not(.in) {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    filter: blur(6px);
  }
  .js .reveal {
    transition:
      opacity 0.75s var(--m-ease),
      transform 0.75s var(--m-ease),
      filter 0.75s var(--m-ease);
  }
  .js .reveal.in { opacity: 1; transform: none; filter: none; }
  .js .reveal.d1 { transition-delay: 0.09s; }
  .js .reveal.d2 { transition-delay: 0.18s; }
  .js .reveal.d3 { transition-delay: 0.27s; }
  .js .reveal.d4 { transition-delay: 0.36s; }

  @media (max-width: 680px) {
    .js .reveal:not(.in) { transform: translateY(14px); filter: none; }
  }
}

/* ------------------------------------------------ hero: cinematic open */
@media (prefers-reduced-motion: no-preference) {
  /* word-cascade headline (motion.js splits words into .bi-w > .bi-wi) */
  .bi-cascade .bi-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    /* room for glyph-ink overhang (tight tracking) so letters never get shaved */
    padding: 0 0.1em 0.12em 0;
    margin: 0 -0.1em -0.12em 0;
  }
  .bi-cascade .bi-wi {
    display: inline-block;
    transform: translateY(110%) rotate(2deg);
    filter: blur(6px);
    animation: bi-word-up 0.85s var(--m-ease) forwards;
  }
  @keyframes bi-word-up {
    to { transform: translateY(0) rotate(0); filter: blur(0); }
  }

  /* cursor spotlight layer (position driven by motion.js --sx/--sy) */
  .js .hero { --sx: 70%; --sy: 30%; }
  .js .hero .wrap::before {
    content: "";
    position: absolute;
    inset: -80px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--sx) var(--sy), rgba(200, 242, 60, 0.08), transparent 62%);
    transition: opacity 0.4s ease;
  }
}

/* ------------------------------------------------ scroll progress bar */
.bi-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 200;
  background: linear-gradient(90deg, var(--acid), var(--flare));
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ------------------------------------------------ nav scroll state */
.nav { transition: background 0.3s ease, box-shadow 0.3s ease; }
.nav nav a.active { color: var(--ink); background: var(--acid); }
.nav.scrolled {
  background: rgba(22, 19, 15, 0.97);
  backdrop-filter: blur(16px);
  box-shadow: 0 3px 0 0 rgba(200, 242, 60, 0.9);
}
.nav .row { transition: height 0.3s var(--m-ease); }
.nav.scrolled .row { height: 60px; }

/* ------------------------------------------------ buttons: signature system */
.btn { position: relative; overflow: hidden; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* magnetic pull (motion.js drives --magx/--magy) composed with lift + press */
  .btn {
    transform: translate(var(--magx, 0px), var(--magy, 0px));
    transition:
      transform var(--m-hover) var(--m-ease),
      box-shadow var(--m-hover) var(--m-ease),
      background var(--m-hover);
  }
  .btn:not(.ghost):hover {
    transform: translate(calc(var(--magx, 0px) - 2px), calc(var(--magy, 0px) - 2px));
    box-shadow: 6px 6px 0 0 var(--ink);
  }
  .btn:active {
    transform: translate(4px, 4px) !important;
    box-shadow: 0 0 0 0 var(--ink) !important;
    transition-duration: var(--m-micro);
  }
  .btn.ghost:active { transform: translate(1px, 1px) !important; }

  /* light-beam scan on hover */
  .btn::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -80%;
    width: 55%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
  }
  .btn:hover::after { opacity: 1; animation: bi-shine 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1; }
  .btn.ghost::after { display: none; }

  /* primary CTA: quiet energy pulse until first hover */
  .hero .btn.acid { animation: bi-pulse 3.2s ease-in-out infinite; }
  .hero .btn.acid:hover { animation: none; }
}
@keyframes bi-shine { from { left: -80%; } to { left: 130%; } }
@keyframes bi-pulse {
  0%, 100% { box-shadow: 4px 4px 0 0 var(--ink), 0 0 0 0 rgba(200, 242, 60, 0.5); }
  50%      { box-shadow: 4px 4px 0 0 var(--ink), 0 0 0 14px rgba(200, 242, 60, 0); }
}

/* ------------------------------------------------ cards: depth + inner light */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .svc, .webpkg, .numcard, .stat, .fstep, .step, .addon-band, .fit, .refer, .guarantee, .nh-card {
    transition: transform var(--m-hover) var(--m-ease), box-shadow var(--m-hover) var(--m-ease);
  }
  .svc:hover, .numcard:hover, .stat:hover, .fstep:hover, .step:hover, .fit:hover, .nh-card:hover {
    transform: translateY(-5px);
  }
  .webpkg:hover { transform: translate(-3px, -3px); }
  .addon:hover { transform: translateY(-3px); }
  .addon { transition: transform var(--m-hover) var(--m-ease), opacity var(--m-hover) ease; }

  /* icon nudge inside service cards */
  .svc .ic { transition: transform var(--m-hover) var(--m-ease); }
  .svc:hover .ic { transform: translateY(-3px) rotate(-4deg); }

  /* focus-card behaviour: hovered card takes priority, siblings soften */
  .svc-grid:hover .svc:not(:hover),
  .steps:hover .step:not(:hover),
  .addon-grid:hover .addon:not(:hover) {
    opacity: 0.66;
    transform: scale(0.985);
  }
  .price-grid:hover .plan:not(:hover) { opacity: 0.72; }
  .price-grid:hover .plan:not(:hover):not(.feat) { transform: scale(0.985); }
  .svc-grid .svc, .steps .step {
    transition: transform var(--m-hover) var(--m-ease), box-shadow var(--m-hover) var(--m-ease), opacity var(--m-hover) ease;
  }
  .price-grid .plan {
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--m-hover) ease;
  }
}

/* cursor-tracked light inside cards (positioned by motion.js) */
.bi-lit { position: relative; isolation: isolate; }
.bi-lit .bi-light-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.bi-lit .bi-light {
  position: absolute;
  top: 0; left: 0;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 242, 60, 0.16), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bi-lit:hover .bi-light { opacity: 1; }
}

/* ------------------------------------------------ cursor halo (motion.js) */
.bi-halo {
  position: fixed;
  top: 0; left: 0;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 242, 60, 0.09), transparent 60%);
  pointer-events: none;
  z-index: 190;
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}
@media (hover: none), (pointer: coarse) {
  .bi-halo { display: none; }
}

/* ------------------------------------------------ FAQ + micro-interactions */
.qa .pm { display: inline-block; transition: transform var(--m-micro) var(--m-ease); }
.qa.open .pm { transform: rotate(180deg); }
.qa button { transition: background var(--m-micro); }

.ticker:hover .run { animation-play-state: paused; }

/* ------------------------------------------------ hero scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.scroll-cue span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--n-500);
}
.scroll-cue i {
  display: block;
  width: 2px;
  height: 34px;
  background: rgba(200, 242, 60, 0.25);
  position: relative;
  overflow: hidden;
}
.scroll-cue i::after {
  content: "";
  position: absolute;
  left: 0; top: -40%;
  width: 100%;
  height: 40%;
  background: var(--acid);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue i::after { animation: bi-cue 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
}
@keyframes bi-cue {
  0%   { top: -40%; }
  70%, 100% { top: 110%; }
}
@media (max-width: 680px) { .scroll-cue { display: none; } }

/* ------------------------------------------------ WhatsApp FAB: arrives on scroll */
.js .wa-fab {
  transition: opacity 0.35s ease, translate 0.35s var(--m-ease);
}
.js .wa-fab:not(.show) {
  opacity: 0;
  translate: 0 18px;
  pointer-events: none;
}

.cform input, .cform textarea, .cform select {
  transition: border-color var(--m-micro), box-shadow var(--m-hover) var(--m-ease);
}
.cform input:focus, .cform textarea:focus, .cform select:focus {
  outline: none;
  border-color: var(--acid);
  box-shadow: 3px 3px 0 0 var(--acid);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .founder-photo { overflow: hidden; }
  .founder-photo img { transition: transform 0.9s var(--m-ease); }
  .founder-photo:hover img { transform: scale(1.035); }
  /* social buttons nudge */
  .socials a, .sm-row a { transition: transform var(--m-micro) var(--m-ease); }
  .socials a:hover, .sm-row a:hover { transform: translateY(-3px); }
}

/* ------------------------------------------------ accessibility */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 3px;
}