/* ============================================================
   DSMS — Premium interaction layer
   Senior-grade polish: scroll progress, cursor spotlight,
   3D tilt, magnetic buttons, count-up, parallax, refined reveals
   ============================================================ */

/* ---------- scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 200;
  background: linear-gradient(90deg, var(--green), var(--saffron));
  box-shadow: 0 0 12px rgba(224,122,31,.5);
  transition: width .08s linear;
  pointer-events: none;
}

/* ---------- ambient cursor glow (whole page) ---------- */
.cursor-glow {
  position: fixed;
  width: 460px; height: 460px;
  border-radius: 50%;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(224,122,31,.10), transparent 62%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .4s ease;
  mix-blend-mode: multiply;
  will-change: transform;
}
body.cursor-active .cursor-glow { opacity: 1; }

/* ---------- refined reveal (blur + clip + custom easing) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1),
    filter .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.in { opacity: 1; transform: none; filter: blur(0); }

/* per-letter / heading shimmer reveal handled in JS via .word spans */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(38px) rotate(2deg);
  filter: blur(8px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1),
              filter .6s cubic-bezier(.22,.61,.36,1);
}
.split-word.in { opacity: 1; transform: none; filter: blur(0); }

/* ---------- 3D tilt cards + cursor spotlight ---------- */
.card, .plan, .review, .persona-head {
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt {
  position: relative;
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease;
}
/* spotlight follows cursor inside element */
.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 0%),
    rgba(224,122,31,.12),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 0;
}
.spotlight:hover::before { opacity: 1; }
.card > *, .plan > *, .review > * { position: relative; z-index: 1; }

/* feature icon lift on hover */
.card .feat-ic {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;
}
.card:hover .feat-ic {
  transform: translateY(-4px) scale(1.08) rotate(-4deg);
  background: var(--green);
  color: #fff;
}

/* ---------- magnetic buttons ---------- */
.btn { will-change: transform; position: relative; overflow: hidden; }
/* sheen sweep */
.btn-primary::after, .btn-saffron::after, .btn-wa::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
  pointer-events: none;
}
.btn-primary:hover::after, .btn-saffron:hover::after, .btn-wa:hover::after { left: 130%; }

/* ---------- count-up stats ---------- */
.stat-item .n { display: inline-flex; align-items: baseline; }

/* odometer flip-in for stat numbers */
.stats .stat-item { opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.stats .stat-item.in { opacity: 1; transform: none; }

/* ---------- hero parallax floats ---------- */
.float-chip { will-change: transform; }
.hero-visual .phone { will-change: transform; }

/* subtle continuous float on chips */
@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: no-preference) {
  .float-chip.fc1 { animation: chipFloat 4.5s ease-in-out infinite; }
  .float-chip.fc2 { animation: chipFloat 5.2s ease-in-out infinite .6s; }
}

/* ---------- marquee trust strip ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--surface);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 64px;
  width: max-content;
  padding: 22px 32px;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-weight: 600; font-size: 18px;
  color: var(--ink-soft);
  white-space: nowrap;
  opacity: .82;
}
.marquee-item .lucide { width: 22px; height: 22px; color: var(--green); }
.marquee-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--saffron); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- animated section divider (road dashes) ---------- */
.sg-divider {
  height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--line-strong) 0 18px, transparent 18px 38px);
  margin: 0;
  border: 0;
  opacity: .7;
}

/* ---------- back to top ---------- */
.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  border: none;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(15,92,61,.35);
  opacity: 0;
  transform: translateY(20px) scale(.8);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), background .2s ease;
  z-index: 90;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--green-600); transform: translateY(-3px); }
.to-top .lucide { width: 24px; height: 24px; }

/* progress ring around back-to-top */
.to-top svg.ring { position: absolute; inset: -4px; transform: rotate(-90deg); }
.to-top svg.ring circle { fill: none; stroke-width: 3; }
.to-top svg.ring .bg { stroke: rgba(255,255,255,.18); }
.to-top svg.ring .fg { stroke: var(--saffron); stroke-linecap: round; transition: stroke-dashoffset .08s linear; }

/* ---------- hero accent: animated underline draw ---------- */
.hero h1 .accent::after {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .8s cubic-bezier(.22,.61,.36,1) .5s;
}
.hero h1.in .accent::after,
body.loaded .hero h1 .accent::after { transform: scaleX(1); }

/* ---------- nav link underline grow ---------- */
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  height: 2px; width: 100%;
  background: var(--saffron);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.nav-links a:hover::after { transform: scaleX(1); }

/* ---------- plan featured glow pulse ---------- */
.plan.featured { position: relative; }
.plan.featured::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--saffron), transparent 40%, transparent 60%, var(--saffron));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .6;
  pointer-events: none;
}

/* ---------- 3D Advanced Layers ---------- */
.hero-visual { perspective: 1200px; }
.phone-3d-wrapper {
  transform-style: preserve-3d;
  will-change: transform;
}

.chip-glass-3d {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  transform: translateZ(40px); /* Lift above the phone */
}

/* Enhancing card depth */
.card, .plan, .persona-head { transform-style: preserve-3d; }
.card > *, .plan > *, .persona-head > * { transform: translateZ(20px); }
.card .feat-ic { transform: translateZ(35px); }
.plan-ribbon { transform: translateZ(35px); box-shadow: 0 8px 16px rgba(224, 122, 31, 0.2); }

/* Showcase 3D Perspective */
.showcase-grid { perspective: 1400px; }
.reveal-3d {
  opacity: 0;
  transform: rotateX(30deg) translateY(60px) scale(0.9);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.reveal-3d.in {
  opacity: 1;
  transform: rotateX(0deg) translateY(0) scale(1);
}

/* ---------- Ultra-Premium Ambient Animations ---------- */
/* Aurora Background */
.aurora-container {
  position: absolute; inset: 0; z-index: -3;
  overflow: hidden; pointer-events: none;
}
.aurora-orb {
  position: absolute; border-radius: 50%;
  filter: blur(100px); opacity: 0.35;
  mix-blend-mode: multiply;
}
.orb-1 {
  width: 700px; height: 700px; background: var(--green);
  top: -200px; left: -100px;
  animation: floatOrb1 20s infinite alternate ease-in-out;
}
.orb-2 {
  width: 600px; height: 600px; background: var(--saffron);
  bottom: -200px; right: -100px;
  animation: floatOrb2 25s infinite alternate ease-in-out;
}
@keyframes floatOrb1 { 100% { transform: translate(400px, 300px) scale(1.3); } }
@keyframes floatOrb2 { 100% { transform: translate(-400px, -300px) scale(1.2); } }

/* Shimmering Metallic Text */
.accent {
  background: linear-gradient(110deg, var(--green) 10%, var(--saffron) 50%, var(--green) 90%);
  background-size: 200% auto;
  color: transparent !important;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmerText 5s linear infinite;
}
@keyframes shimmerText { to { background-position: -200% center; } }

/* Continuous Button Pulse */
.btn-primary, .btn-saffron { animation: btnPulse 3s infinite; }
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 92, 61, 0.4); }
  50% { box-shadow: 0 0 15px 0 rgba(15, 92, 61, 0.7); }
}

/* Persona Badge Float */
.persona-badge { animation: badgeFloat 4s ease-in-out infinite; }
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Marquee Icons Bouncing */
.marquee-item i {
  animation: iconBounce 3s ease-in-out infinite;
  display: inline-block;
}
@keyframes iconBounce {
  0%, 100% { transform: translateY(0); color: inherit; }
  50% { transform: translateY(-4px); color: var(--saffron); }
}

/* FAQ Accordion Spring */
.faq-q .plus { transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.26, 1.55); }
.faq-item.open .faq-q .plus { transform: rotate(135deg); color: var(--saffron); }

/* reduce motion: kill the heavy stuff */
@media (prefers-reduced-motion: reduce) {
  .reveal, .split-word { filter: none; transform: none; opacity: 1; transition: none; }
  .float-chip { animation: none; }
  .marquee-track { animation: none; }
  .cursor-glow { display: none; }
}

/* touch devices: disable tilt + cursor glow cost */
@media (hover: none) {
  .cursor-glow { display: none; }
  .tilt { transform: none !important; }
}