/* ==========================================================================
   NEWTON THE TUTOR — WORLD-CLASS ANIMATION SYSTEM
   Inspired by: Lusion.co · Wavespace.agency · David Langarica
                Jeton.com · JFL Consulting · Sedai.io
   ========================================================================== */

/* ── KEYFRAME LIBRARY ──────────────────────────────────────────── */

@keyframes nt-fade-up {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes nt-fade-down {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0);     }
}
@keyframes nt-fade-left {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes nt-fade-right {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes nt-scale-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1);    }
}
@keyframes nt-scale-up {
  from { opacity: 0; transform: scale(0.7) translateY(30px); }
  to   { opacity: 1; transform: scale(1) translateY(0);      }
}
@keyframes nt-blur-in {
  from { opacity: 0; filter: blur(12px); transform: translateY(20px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0);    }
}
@keyframes nt-clip-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0);   }
}
@keyframes nt-slide-mask {
  0%   { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  50.001% { transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@keyframes nt-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes nt-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-18px) rotate(1deg); }
  66%       { transform: translateY(-8px) rotate(-1deg); }
}
@keyframes nt-float-alt {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(14px) rotate(-0.5deg); }
}
@keyframes nt-pulse-ring {
  0%   { transform: scale(1);    opacity: 0.8; }
  100% { transform: scale(2.4);  opacity: 0; }
}
@keyframes nt-gradient-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
@keyframes nt-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes nt-spin-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes nt-morph-border {
  0%, 100% { border-radius: 24px 4px 24px 4px; }
  25%       { border-radius: 4px 24px 4px 24px; }
  50%       { border-radius: 24px 24px 4px 4px; }
  75%       { border-radius: 4px 4px 24px 24px; }
}
@keyframes nt-scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
@keyframes nt-orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(40px, -60px) scale(1.08); }
  50%  { transform: translate(-30px, 40px) scale(0.94); }
  75%  { transform: translate(60px, 20px) scale(1.04); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes nt-text-slide-up {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes nt-line-grow {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes nt-counter-bounce {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}
@keyframes nt-ripple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}
@keyframes nt-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(99,102,241,0.3), 0 0 60px rgba(99,102,241,0.1); }
  50%       { box-shadow: 0 0 40px rgba(99,102,241,0.6), 0 0 100px rgba(99,102,241,0.2); }
}
@keyframes nt-border-rotate {
  from { --border-angle: 0deg; }
  to   { --border-angle: 360deg; }
}
@keyframes nt-loader-fill {
  0%   { width: 0%; }
  20%  { width: 35%; }
  50%  { width: 65%; }
  80%  { width: 88%; }
  100% { width: 100%; }
}
@keyframes nt-loader-out {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}

/* ── SCROLL-TRIGGERED REVEAL BASE STATES ────────────────────────── */
/* Elements start hidden and animate in when .nt-in-view is added  */

.nt-reveal,
.nt-reveal-up,
.nt-reveal-down,
.nt-reveal-left,
.nt-reveal-right,
.nt-reveal-scale,
.nt-reveal-blur,
.nt-reveal-clip {
  opacity: 0;
  will-change: opacity, transform, filter;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-duration: 0.8s;
  transition-property: opacity, transform, filter;
}
.nt-reveal-up,
.nt-reveal { transform: translateY(48px); }
.nt-reveal-down  { transform: translateY(-36px); }
.nt-reveal-left  { transform: translateX(60px); }
.nt-reveal-right { transform: translateX(-60px); }
.nt-reveal-scale { transform: scale(0.88); }
.nt-reveal-blur  { transform: translateY(20px); filter: blur(10px); }
.nt-reveal-clip  {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transition-property: clip-path;
  transition-timing-function: cubic-bezier(0.77, 0, 0.18, 1);
  transition-duration: 1s;
}

.nt-reveal.nt-in-view,
.nt-reveal-up.nt-in-view,
.nt-reveal-down.nt-in-view,
.nt-reveal-left.nt-in-view,
.nt-reveal-right.nt-in-view,
.nt-reveal-scale.nt-in-view,
.nt-reveal-blur.nt-in-view {
  opacity: 1;
  transform: none;
  filter: none;
}
.nt-reveal-clip.nt-in-view { clip-path: inset(0 0% 0 0); }

/* Stagger delays 1–12 */
.nt-d1  { transition-delay: 0.05s !important; }
.nt-d2  { transition-delay: 0.12s !important; }
.nt-d3  { transition-delay: 0.20s !important; }
.nt-d4  { transition-delay: 0.28s !important; }
.nt-d5  { transition-delay: 0.36s !important; }
.nt-d6  { transition-delay: 0.44s !important; }
.nt-d7  { transition-delay: 0.52s !important; }
.nt-d8  { transition-delay: 0.60s !important; }

/* ── CINEMATIC TEXT MASK (Lusion-style per-word reveal) ─────────── */
.nt-text-mask {
  overflow: hidden;
  display: inline-block;
}
.nt-text-mask-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1), opacity 0.6s ease;
}
.nt-text-mask.nt-in-view .nt-text-mask-inner {
  transform: translateY(0);
  opacity: 1;
}

/* ── SPLIT CHARACTER ANIMATION (Lusion style) ───────────────────── */
.nt-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%) rotate(5deg);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.nt-word-wrap {
  overflow: hidden;
  display: inline-block;
}
.nt-chars-in-view .nt-char {
  opacity: 1;
  transform: none;
}

/* ── SECTION CINEMATIC PARALLAX BANDS ───────────────────────────── */
.nt-parallax-section {
  position: relative;
  overflow: hidden;
}
.nt-parallax-bg {
  position: absolute;
  inset: -20%;
  will-change: transform;
  pointer-events: none;
}

/* ── ULTRA GLASS CARDS (Jeton / Apple) ──────────────────────────── */
.nt-glass-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.45s ease,
              border-color 0.45s ease;
}
/* Prismatic shimmer border */
.nt-glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.15) 0%,
    rgba(99,102,241,0.1) 30%,
    rgba(168,85,247,0.08) 60%,
    rgba(255,255,255,0.05) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* Moving spotlight on hover */
.nt-glass-card::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
  border-radius: 50%;
  left: var(--card-mouse-x, 50%);
  top:  var(--card-mouse-y, 50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nt-glass-card:hover::before { opacity: 1; }
.nt-glass-card:hover::after  { opacity: 1; }
.nt-glass-card:hover {
  transform: translateY(-8px) scale(1.008);
  border-color: rgba(99,102,241,0.2);
  box-shadow:
    0 0 0 1px rgba(99,102,241,0.1),
    0 24px 60px rgba(0,0,0,0.3),
    0 0 80px rgba(99,102,241,0.08);
}

/* ── CINEMATIC FLOATING ORB BLOBS ───────────────────────────────── */
.nt-orb-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.nt-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}
.nt-orb-1 {
  width: clamp(300px,40vw,600px); height: clamp(300px,40vw,600px);
  background: radial-gradient(circle, rgba(99,102,241,0.18) 0%, transparent 70%);
  top: -10%; right: -5%;
  animation: nt-orb-drift 18s ease-in-out infinite;
}
.nt-orb-2 {
  width: clamp(200px,30vw,450px); height: clamp(200px,30vw,450px);
  background: radial-gradient(circle, rgba(168,85,247,0.14) 0%, transparent 70%);
  bottom: -10%; left: 5%;
  animation: nt-orb-drift 22s ease-in-out infinite reverse;
  animation-delay: -8s;
}
.nt-orb-3 {
  width: clamp(150px,20vw,300px); height: clamp(150px,20vw,300px);
  background: radial-gradient(circle, rgba(236,72,153,0.1) 0%, transparent 70%);
  top: 40%; left: 30%;
  animation: nt-orb-drift 14s ease-in-out infinite;
  animation-delay: -4s;
}

/* ── MAGNETIC BUTTON PREMIUM (Wavespace / JFL) ──────────────────── */
.nt-magnetic {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
/* Ripple layer */
.nt-magnetic .nt-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transform: scale(0);
  animation: nt-ripple 0.65s linear;
  pointer-events: none;
}
/* Spotlight glow */
.nt-magnetic::before {
  content: '';
  position: absolute;
  width: 120%;
  height: 120%;
  top: -10%;
  left: -10%;
  background: radial-gradient(
    circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,0.12) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.nt-magnetic:hover::before { opacity: 1; }

/* ── SCROLL PROGRESS (Sedai style rainbow) ──────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    #6366f1 0%,
    #8b5cf6 25%,
    #ec4899 50%,
    #f59e0b 75%,
    #10b981 100%
  );
  background-size: 200% 100%;
  animation: nt-gradient-shift 4s linear infinite;
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(99,102,241,0.5), 0 0 20px rgba(168,85,247,0.3);
}

/* ── BACK TO TOP — SINGLE PREMIUM BUTTON ────────────────────────── */
.nt-back-top {
  position: fixed;
  bottom: 36px; right: 36px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(168,85,247,0.1));
  border: 1px solid rgba(99,102,241,0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #818cf8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px) scale(0.7);
  transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 800;
  overflow: hidden;
}
.nt-back-top.nt-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.nt-back-top:hover {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  border-color: transparent;
  color: white;
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 12px 32px rgba(99,102,241,0.4), 0 0 0 4px rgba(99,102,241,0.1);
}
.nt-back-top-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(99,102,241,0.4);
  animation: nt-pulse-ring 2s ease-out infinite;
}
/* Hide old #back-top if it gets created elsewhere */
#back-top:not(.nt-back-top) {
  display: none !important;
}
/* Kill JS-created .back-to-top if any slips through */
.back-to-top:not(.nt-back-top) {
  display: none !important;
}

/* ── PREMIUM PAGE LOADER (Lusion / Sedai style) ─────────────────── */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #050814;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.77,0,0.18,1);
}
#page-loader.nt-loader-out {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.loader-bar-wrap {
  width: 200px;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin: 20px auto 8px;
}
.loader-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
  background-size: 200% 100%;
  animation: nt-loader-fill 1.6s cubic-bezier(0.77,0,0.18,1) forwards,
             nt-gradient-shift 2s linear infinite;
  border-radius: 2px;
}
.loader-percent {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  letter-spacing: 2px;
  text-align: center;
  margin-top: 6px;
}
.loader-text {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-top: 4px;
}

/* ── GLOBAL AMBIENT CANVAS ──────────────────────────────────────── */
#nt-ambient-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* ── HERO SECTION ENHANCEMENTS ──────────────────────────────────── */
.hero,
[class*="page-hero"] {
  position: relative;
}
/* Scanline overlay for cinematic depth */
.nt-scanline-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.015) 2px,
    rgba(0,0,0,0.015) 4px
  );
  z-index: 2;
}

/* ── CURSOR TRAIL (Wavespace) ───────────────────────────────────── */
.nt-cursor-dot {
  position: fixed;
  width: 8px; height: 8px;
  background: #818cf8;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s, width 0.3s, height 0.3s, background 0.3s;
  mix-blend-mode: screen;
}
.nt-cursor-ring {
  position: fixed;
  width: 40px; height: 40px;
  border: 1.5px solid rgba(129,140,248,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
  transform: translate(-50%, -50%);
  transition: all 0.18s cubic-bezier(0.25,0.46,0.45,0.94);
  mix-blend-mode: screen;
}
.nt-cursor-ring.nt-cursor-hover {
  width: 60px; height: 60px;
  border-color: rgba(168,85,247,0.5);
  background: rgba(99,102,241,0.04);
}

/* ── GRADIENT HEADING ANIMATION ─────────────────────────────────── */
.nt-animated-heading {
  background: linear-gradient(
    135deg,
    #f1f5f9 0%,
    #c7d2fe 25%,
    #818cf8 50%,
    #c084fc 75%,
    #f1f5f9 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: nt-gradient-shift 6s ease infinite;
}
.nt-animated-heading-gold {
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 30%, #f59e0b 60%, #fde68a 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: nt-gradient-shift 5s ease infinite;
}

/* ── STAT COUNTER GLOW ──────────────────────────────────────────── */
.nt-stat-glow {
  position: relative;
}
.nt-stat-glow::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%; transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #818cf8, transparent);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.4s ease, width 0.4s ease;
}
.nt-stat-glow.nt-in-view::after {
  opacity: 1;
  width: 100%;
  animation: nt-line-grow 0.8s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}

/* ── CARD GRID HOVER SPOTLIGHT (Sedai style) ────────────────────── */
.nt-card-grid {
  position: relative;
}
.nt-card-grid::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  left: var(--grid-mouse-x, -9999px);
  top:  var(--grid-mouse-y, -9999px);
  transform: translate(-50%,-50%);
  transition: left 0.1s, top 0.1s;
  z-index: 0;
}

/* ── SCROLL-SYNCED HORIZONTAL LINE REVEAL ───────────────────────── */
.nt-line-reveal {
  position: relative;
  overflow: hidden;
}
.nt-line-reveal::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 1px;
  width: 0%;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  transition: width 1.2s cubic-bezier(0.25,0.46,0.45,0.94);
}
.nt-line-reveal.nt-in-view::after { width: 100%; }

/* ── MORPHING BORDER CARD ───────────────────────────────────────── */
.nt-morph-card {
  border-radius: 24px;
  transition: border-radius 0.6s cubic-bezier(0.34,1.56,0.64,1), transform 0.4s ease;
}
.nt-morph-card:hover {
  border-radius: 8px 24px 8px 24px;
  transform: translateY(-6px);
}

/* ── FLOATING ELEMENTS ──────────────────────────────────────────── */
.nt-float         { animation: nt-float 5s ease-in-out infinite; }
.nt-float-alt     { animation: nt-float-alt 7s ease-in-out infinite; }
.nt-float-slow    { animation: nt-float 9s ease-in-out infinite; }
.nt-float-d1      { animation-delay: -1.5s; }
.nt-float-d2      { animation-delay: -3s; }
.nt-float-d3      { animation-delay: -4.5s; }

/* ── ROTATING DECORATIVE RINGS ──────────────────────────────────── */
.nt-ring-spin {
  border-radius: 50%;
  border: 1px dashed rgba(99,102,241,0.2);
  animation: nt-spin-slow 30s linear infinite;
}
.nt-ring-spin-fast {
  border-radius: 50%;
  border: 1px solid rgba(168,85,247,0.1);
  animation: nt-spin-slow 12s linear infinite;
}
.nt-ring-ccw {
  animation: nt-spin-ccw 20s linear infinite;
}

/* ── SHIMMER SKELETON LOADING ───────────────────────────────────── */
.nt-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 40%,
    rgba(255,255,255,0.04) 80%
  );
  background-size: 200% 100%;
  animation: nt-shimmer 1.8s infinite;
}

/* ── STAGGERED GRID ANIMATIONS (JFL Consulting style) ──────────── */
.nt-stagger-grid > * {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.nt-stagger-grid.nt-in-view > *:nth-child(1)  { opacity:1; transform:none; transition-delay:0s;    }
.nt-stagger-grid.nt-in-view > *:nth-child(2)  { opacity:1; transform:none; transition-delay:0.08s; }
.nt-stagger-grid.nt-in-view > *:nth-child(3)  { opacity:1; transform:none; transition-delay:0.16s; }
.nt-stagger-grid.nt-in-view > *:nth-child(4)  { opacity:1; transform:none; transition-delay:0.24s; }
.nt-stagger-grid.nt-in-view > *:nth-child(5)  { opacity:1; transform:none; transition-delay:0.32s; }
.nt-stagger-grid.nt-in-view > *:nth-child(6)  { opacity:1; transform:none; transition-delay:0.40s; }
.nt-stagger-grid.nt-in-view > *:nth-child(7)  { opacity:1; transform:none; transition-delay:0.48s; }
.nt-stagger-grid.nt-in-view > *:nth-child(8)  { opacity:1; transform:none; transition-delay:0.56s; }
.nt-stagger-grid.nt-in-view > *:nth-child(n+9){ opacity:1; transform:none; transition-delay:0.64s; }

/* ── SECTION TRANSITIONS (Lusion scroll-story) ──────────────────── */
.nt-section-enter {
  opacity: 0;
  transform: translateY(60px) scale(0.97);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(0.16,1,0.3,1);
}
.nt-section-enter.nt-in-view {
  opacity: 1;
  transform: none;
}

/* ── ANIMATED GRADIENT BORDER ───────────────────────────────────── */
@property --border-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.nt-gradient-border {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-primary, #050814), var(--bg-primary, #050814)) padding-box,
    conic-gradient(from var(--border-angle), #6366f1, #a855f7, #ec4899, #f59e0b, #6366f1) border-box;
  animation: nt-border-rotate 4s linear infinite;
}

/* ── GLITCH TEXT EFFECT ─────────────────────────────────────────── */
@keyframes nt-glitch-1 {
  0%, 100% { clip-path: none; transform: none; }
  20% { clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%); transform: translate(-3px, 0); }
  40% { clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); transform: translate(3px, 0); }
  60% { clip-path: polygon(0 10%, 100% 10%, 100% 25%, 0 25%); transform: translate(-2px, 0); }
  80% { clip-path: none; transform: none; }
}
.nt-glitch {
  position: relative;
}
.nt-glitch::before,
.nt-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.nt-glitch:hover::before {
  color: #818cf8;
  opacity: 0.7;
  animation: nt-glitch-1 0.4s ease infinite;
}
.nt-glitch:hover::after {
  color: #f472b6;
  opacity: 0.5;
  animation: nt-glitch-1 0.4s ease 0.1s infinite reverse;
}

/* ── HORIZONTAL SCROLL MARQUEE ──────────────────────────────────── */
@keyframes nt-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.nt-marquee-wrap {
  overflow: hidden;
  width: 100%;
}
.nt-marquee-track {
  display: flex;
  width: max-content;
  animation: nt-marquee 24s linear infinite;
}
.nt-marquee-track:hover { animation-play-state: paused; }
.nt-marquee-item {
  white-space: nowrap;
  padding: 0 32px;
  flex-shrink: 0;
}

/* ── WORD-BY-WORD REVEAL ────────────────────────────────────────── */
.nt-words-wrap .nt-word {
  display: inline-block;
  overflow: hidden;
  margin-right: 0.25em;
}
.nt-words-wrap .nt-word-inner {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease;
}
.nt-words-wrap.nt-in-view .nt-word-inner {
  transform: translateY(0);
  opacity: 1;
}

/* ── FOOTER ANIMATION ───────────────────────────────────────────── */
.nt-footer-anim {
  position: relative;
  overflow: hidden;
}
.nt-footer-anim::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.4), rgba(168,85,247,0.4), transparent);
}

/* ── HOVER UNDERLINE ANIMATION ──────────────────────────────────── */
.nt-hover-underline {
  position: relative;
  display: inline-block;
}
.nt-hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0%; height: 1px;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  transition: width 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.nt-hover-underline:hover::after { width: 100%; }

/* ── 3D TILT GLARE ──────────────────────────────────────────────── */
.tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(255,255,255,0.12) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tilt-card:hover .tilt-glare { opacity: 1; }

/* ── REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .nt-orb, .nt-float, .nt-float-alt, .nt-ring-spin,
  .nt-marquee-track, .nt-char, .nt-animated-heading { animation: none !important; }
}

/* ── LIGHT MODE ADJUSTMENTS ─────────────────────────────────────── */
[data-theme="light"] .nt-glass-card {
  background: rgba(255,255,255,0.65);
  border-color: rgba(99,102,241,0.1);
}
[data-theme="light"] .nt-orb-1 {
  background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%);
}
[data-theme="light"] .nt-orb-2 {
  background: radial-gradient(circle, rgba(168,85,247,0.06) 0%, transparent 70%);
}
[data-theme="light"] .nt-ambient-canvas { opacity: 0.2; }
[data-theme="light"] .nt-back-top {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(20px);
  border-color: rgba(99,102,241,0.2);
}
[data-theme="light"] .nt-animated-heading {
  background: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 40%, #7c3aed 70%, #1e1b4b 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================================================================
   ADDITIONAL WORLD-CLASS EFFECTS — Round 2 Extension
   ======================================================================== */

/* ── NAV HIDE ON SCROLL DOWN ────────────────────────────────────── */
#navbar.nt-nav-hidden {
  transform: translateY(-110%);
}
#navbar {
  transition:
    height 0.5s cubic-bezier(0.16,1,0.3,1),
    background 0.5s cubic-bezier(0.16,1,0.3,1),
    backdrop-filter 0.5s ease,
    box-shadow 0.5s ease,
    border-color 0.5s ease,
    transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

/* ── PAGE TRANSITION OVERLAY (advanced) ─────────────────────────── */
.nt-page-transition {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: linear-gradient(135deg, #2900a6, #4e2780, #7c4dcc);
  transform: translateX(-100%);
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1);
}
.nt-page-transition.nt-enter {
  transform: translateX(0);
  pointer-events: all;
}
.nt-page-transition.nt-exit {
  transform: translateX(100%);
}

/* ── CUSTOM REVEAL DELAY FROM CSS VAR ───────────────────────────── */
.nt-reveal,
.nt-reveal-up,
.nt-reveal-down,
.nt-reveal-left,
.nt-reveal-right,
.nt-reveal-scale,
.nt-reveal-blur {
  transition-delay: var(--nt-reveal-delay, 0s);
}

/* ── TILT GLARE LAYER (injected by JS) ─────────────────────────── */
.nt-tilt-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  border-radius: inherit;
  transition: background 0.12s ease;
}

/* ── BACK-TO-TOP SHOW CLASS (also support .show for compat) ─────── */
.nt-back-top.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── BUTTON RIPPLE ANIMATION ────────────────────────────────────── */
.nt-btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: scale(0);
  animation: nt-ripple 0.65s ease-out forwards;
  pointer-events: none;
}

/* ── HOVER LINK UNDERLINE SLIDE ─────────────────────────────────── */
.nt-underline {
  position: relative;
  display: inline-block;
}
.nt-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nt-underline:hover::after { width: 100%; }

/* ── DROPDOWN LINK STAGGER ──────────────────────────────────────── */
.nav-dropdown .dropdown-link {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s ease var(--dd-delay, 0s),
    transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94) var(--dd-delay, 0s),
    background 0.2s ease,
    color 0.2s ease;
}
.has-dropdown:hover .nav-dropdown .dropdown-link,
.has-dropdown:focus-within .nav-dropdown .dropdown-link {
  opacity: 1;
  transform: none;
}

/* ── SECTION ACTIVE (BG GLOW) ───────────────────────────────────── */
.nt-section-active {
  --section-active: 1;
}

/* ── ORB FIELD FULL PAGE HERO BACKGROUND ────────────────────────── */
.nt-hero-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* ── CINEMATIC VIDEO / IMAGE OVERLAY ────────────────────────────── */
.nt-cinematic-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(168,85,247,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 80%, rgba(236,72,153,0.07) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

/* ── GLASSMORPHISM HERO BADGE (Jeton pill label) ────────────────── */
.nt-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 100px;
  backdrop-filter: blur(12px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #818cf8;
  margin-bottom: 20px;
  animation: nt-fade-up 0.8s ease forwards;
}
.nt-hero-badge-dot {
  width: 6px; height: 6px;
  background: #4ade80;
  border-radius: 50%;
  animation: nt-pulse-ring 2s infinite;
  flex-shrink: 0;
}

/* ── SECTION HEADING ACCENT LINE ────────────────────────────────── */
.nt-section-line {
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  border-radius: 3px;
  margin: 16px auto;
  animation: nt-line-grow 1s ease forwards;
}

/* ── GRID WITH REVEAL DELAY FROM CSS VAR ────────────────────────── */
.nt-stagger-grid > * {
  transition-delay: var(--nt-child-delay, 0s) !important;
}

/* ── SCROLL-SYNCED WORD SPLIT OUTER CONTAINERS ──────────────────── */
.nt-word-outer {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

/* ── HERO CANVAS FULL COVER ─────────────────────────────────────── */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ── PREMIUM CTA HOVER GLOW ─────────────────────────────────────── */
.btn-primary:hover,
.lg-btn-solid:hover {
  box-shadow:
    0 4px 20px rgba(108,99,255,0.45),
    0 0 40px rgba(108,99,255,0.2),
    inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:active,
.lg-btn-solid:active {
  transform: scale(0.97);
}

/* ── NAV LINK HOVER GLOW ────────────────────────────────────────── */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%; right: 50%;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  border-radius: 2px;
  transition: left 0.3s ease, right 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  left: 8px; right: 8px;
}

/* ── PREMIUM FOOTER LINK HOVER ──────────────────────────────────── */
.footer-link {
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer-link:hover {
  color: #818cf8 !important;
  padding-left: 6px;
}

/* ── FEATURE CARD ICON GLOW ─────────────────────────────────────── */
.service-card:hover .service-icon,
.stat-card:hover .stat-icon,
.feature-icon:hover,
.contact-icon:hover {
  animation: nt-glow-pulse 1.5s ease-in-out infinite;
}

/* ── ANIMATED BORDER CARD (Premium) ─────────────────────────────── */
.nt-border-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.nt-border-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    var(--border-angle, 135deg),
    rgba(99,102,241,0.5),
    rgba(168,85,247,0.3),
    rgba(236,72,153,0.4),
    rgba(99,102,241,0.5)
  );
  animation: nt-border-rotate 4s linear infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.nt-border-card:hover::before { opacity: 1; }

/* ── STAT BAND ENHANCED ─────────────────────────────────────────── */
.stats-band,
.stats-row,
.hero-stats {
  position: relative;
}
.stats-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(99,102,241,0.04) 20%,
    rgba(168,85,247,0.04) 50%,
    rgba(99,102,241,0.04) 80%,
    transparent
  );
  pointer-events: none;
}

/* ── SCROLL INDICATOR (Lusion style) ────────────────────────────── */
@keyframes nt-scroll-bounce {
  0%, 100% { transform: translateY(0) translateX(-50%); opacity: 0.6; }
  50%       { transform: translateY(10px) translateX(-50%); opacity: 1; }
}
.nt-scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.4);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: nt-scroll-bounce 2s ease-in-out infinite;
  z-index: 10;
}
.nt-scroll-indicator-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(99,102,241,0.6), transparent);
}

/* ── SPOTLIGHT CURSOR EFFECT ON SECTIONS ────────────────────────── */
.nt-spotlight {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 65%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  z-index: 0;
}

/* ── ABOUT / TEAM CARD ENHANCEMENTS ─────────────────────────────── */
.team-card {
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.4s ease;
}
.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 40px rgba(99,102,241,0.1);
}

/* ── PRICING CARD HIGHLIGHT ANIMATION ───────────────────────────── */
.pricing-card.featured,
.pricing-card[data-featured] {
  animation: nt-glow-pulse 3s ease-in-out infinite;
}

/* ── MOBILE RESPONSIVE — Reduce animation complexity ────────────── */
@media (max-width: 768px) {
  .nt-cursor-dot,
  .nt-cursor-ring {
    display: none !important;
  }
  .nt-orb-1 { opacity: 0.5; }
  .nt-orb-2 { opacity: 0.4; }
  .nt-orb-3 { opacity: 0; }
  #nt-ambient-canvas { opacity: 0.3; }
  .nt-back-top {
    bottom: 20px;
    right: 20px;
    width: 46px;
    height: 46px;
  }
}

/* ── JS READY STATE ─────────────────────────────────────────────── */
html:not(.nt-js-ready) .nt-reveal,
html:not(.nt-js-ready) .nt-reveal-up,
html:not(.nt-js-ready) .nt-reveal-down,
html:not(.nt-js-ready) .nt-reveal-left,
html:not(.nt-js-ready) .nt-reveal-right,
html:not(.nt-js-ready) .nt-reveal-scale,
html:not(.nt-js-ready) .nt-reveal-blur {
  /* Don't hide elements if JS fails to load */
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ── CURSOR CLICK STATE ─────────────────────────────────────────── */
.nt-cursor-dot.nt-cursor-click {
  width: 14px;
  height: 14px;
  background: #a855f7;
}
.nt-cursor-ring.nt-cursor-click {
  width: 28px;
  height: 28px;
  border-color: rgba(168,85,247,0.8);
}

/* ── ADVANCED STAT NUMBER STYLING ───────────────────────────────── */
.nt-stat-val {
  font-family: 'Sora', 'DM Sans', sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── LIGHT MODE PAGE TRANSITION ─────────────────────────────────── */
[data-theme="light"] .nt-page-transition {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe, #c4b5fd);
}
[data-theme="light"] #nt-ambient-canvas { opacity: 0.15; }

/* ── PRISMATIC SHINE ON HOVER (Jeton card signature) ────────────── */
@keyframes nt-prismatic-sweep {
  0%   { transform: translateX(-100%) rotate(30deg); }
  100% { transform: translateX(300%) rotate(30deg); }
}
.nt-prismatic {
  position: relative;
  overflow: hidden;
}
.nt-prismatic::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -60%;
  width: 40%;
  height: 220%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.06),
    transparent
  );
  transform: translateX(-100%) rotate(30deg);
  pointer-events: none;
}
.nt-prismatic:hover::after {
  animation: nt-prismatic-sweep 0.6s ease forwards;
}