/* ==========================================================================
   NakNih Motion Layer v1 — sitewide premium-motion upgrade
   Loaded AFTER every page's own inline <style>, so these rules win on
   anything already defined (same selector, later wins) without deleting
   the original animation pack. Purely additive / non-destructive.
   Inspired by the buttery-smooth, high-polish motion of studios like
   Cuberto, Dogstudio, Ramotion, Fantasy and Builder.io.
   ========================================================================== */

/* ---- Page load fade-in (pure CSS, works even before JS executes) ---- */
body { animation: nkPageIn .35s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes nkPageIn { from { opacity: .01; } to { opacity: 1; } }

/* ---- Page-transition overlay (used by nk-motion.js on internal link clicks) ---- */
#nk-page-fade {
  position: fixed; inset: 0; z-index: 9999;
  background: #050918;
  opacity: 0; pointer-events: none;
  transition: opacity .38s cubic-bezier(0.16,1,0.3,1);
}
#nk-page-fade.nk-out { opacity: 1; pointer-events: all; }

/* ---- Premium easing for the existing .reveal system ----
   Overrides the transition curve/duration only; the JS that toggles
   .visible is untouched, so this works whether or not GSAP loaded. */
.reveal {
  transition: opacity .65s cubic-bezier(0.16,1,0.3,1),
              transform .65s cubic-bezier(0.16,1,0.3,1) !important;
}

/* Consistent vertical rhythm prevents oversized gaps across page templates. */
.section { padding-block: clamp(3.75rem, 7vw, 6.25rem) !important; }
.section-sm { padding-block: clamp(2.5rem, 5vw, 3.75rem) !important; }
.section-header { margin-bottom: clamp(2rem, 4vw, 4rem) !important; }
main > section:empty, section[aria-hidden="true"]:empty { display: none !important; }

/* Keep below-the-fold rendering cheap while preserving find-in-page and SEO. */
@supports (content-visibility: auto) {
  main > section:not(:first-child), footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
  }
}

img {
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 3px solid #2ce6c7;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .container { padding-inline: 1.1rem !important; }
  .section { padding-block: 3.5rem !important; }
  .section-sm { padding-block: 2.5rem !important; }
  .section-header { margin-bottom: 2rem !important; }
  p { text-align: left !important; }
}

/* ---- Custom slim scrollbar (desktop) ---- */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#0057FF,#7B2FFF); border-radius: 8px; border: 2px solid #050918; }
  ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#00D4FF,#7B2FFF); }
}

/* ---- Smoother magnetic buttons (slightly springier easing) ---- */
.nk-magnet { transition: transform .35s cubic-bezier(0.16,1,0.3,1) !important; }

/* ---- Smoother 3D tilt cards ---- */
.nk-tilt { transition: transform .4s cubic-bezier(0.16,1,0.3,1), border-color .3s ease, box-shadow .3s ease !important; }

/* ---- Respect reduced motion: cancel every effect this file adds ---- */
@media (prefers-reduced-motion: reduce) {
  body { animation: none !important; opacity: 1 !important; }
  #nk-page-fade { display: none !important; }
  .reveal { transition: none !important; }
}

/* ---- Lenis smooth-scroll fallback safety net ----
   (lenis.css from the CDN already ships the canonical rules; these are
   harmless duplicates in case that stylesheet fails to load.) */