/* ============================================
   APEX — Luxury Motion System
   Soft reveals · Gold line draws · Elegant pacing
   ============================================ */

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(28px, 22px) scale(1.05); }
  66% { transform: translate(-22px, 36px) scale(0.97); }
}

@keyframes morphFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
  50% {
    transform: translate(14px, -20px) rotate(8deg);
    border-radius: 55% 45% 35% 65% / 55% 35% 65% 45%;
  }
}

@keyframes gradientShift {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.82;
  }
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.88); }
}

@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(199, 163, 90, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(199, 163, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(199, 163, 90, 0); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes ctaGlow {
  from { opacity: 0.55; transform: translate(8%, 0) scale(1); }
  to { opacity: 0.9; transform: translate(-4%, 8%) scale(1.1); }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes goldLineDraw {
  from { transform: scaleX(0); opacity: 0.4; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes goldDividerIn {
  from {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.35);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
}

@keyframes flowDash {
  to { stroke-dashoffset: -120; }
}

@keyframes docFlowEnter {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---------- Hero Entrance ---------- */
.hero-anim {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1s var(--ease-out),
    transform 1s var(--ease-out);
}

.hero-line.hero-anim {
  transform: none;
}

.hero-line .line-inner {
  opacity: 0;
  transform: translateY(105%);
  transition:
    opacity 0.95s var(--ease-out),
    transform 0.95s var(--ease-out);
}

.hero.is-ready .hero-anim {
  opacity: 1;
  transform: translateY(0);
}

.hero.is-ready .hero-line .line-inner {
  opacity: 1;
  transform: translateY(0);
}

.hero.is-ready .hero-brand::after {
  animation: goldLineDraw 0.9s var(--ease-out) 0.45s both;
}

.hero-anim[data-hero="1"] { transition-delay: 0.08s; }
.hero-anim[data-hero="2"] { transition-delay: 0.2s; }
.hero-anim[data-hero="3"] .line-inner { transition-delay: 0.36s; }
.hero-anim[data-hero="4"] .line-inner { transition-delay: 0.5s; }
.hero-anim[data-hero="5"] { transition-delay: 0.64s; }
.hero-anim[data-hero="6"] { transition-delay: 0.78s; }

/* ---------- Scroll Reveals ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal[data-delay="40"]  { --reveal-delay: 40ms; }
.reveal[data-delay="60"]  { --reveal-delay: 60ms; }
.reveal[data-delay="80"]  { --reveal-delay: 80ms; }
.reveal[data-delay="100"] { --reveal-delay: 100ms; }
.reveal[data-delay="120"] { --reveal-delay: 120ms; }
.reveal[data-delay="140"] { --reveal-delay: 140ms; }
.reveal[data-delay="160"] { --reveal-delay: 160ms; }
.reveal[data-delay="180"] { --reveal-delay: 180ms; }
.reveal[data-delay="200"] { --reveal-delay: 200ms; }
.reveal[data-delay="220"] { --reveal-delay: 220ms; }
.reveal[data-delay="240"] { --reveal-delay: 240ms; }
.reveal[data-delay="260"] { --reveal-delay: 260ms; }

/* Stagger children helper */
.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 210ms; }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 350ms; }

/* ---------- Section label gold line draw ---------- */
.section-label::before {
  transform: scaleX(0);
  transition: transform 0.7s var(--ease-out);
}

.section-header.reveal.is-visible .section-label::before,
.reveal.is-visible .section-label::before {
  transform: scaleX(1);
}

/* ---------- Magnetic Buttons (subtle) ---------- */
.magnetic {
  --mx: 0px;
  --my: 0px;
  transform: translate(var(--mx), var(--my));
  transition: transform 0.3s var(--ease-out), box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.magnetic:hover {
  transform: translate(var(--mx), var(--my)) translateY(-1px);
}

/* ---------- Card Hover Lift ---------- */
.glass-card {
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.5s var(--ease-out);
}

.glass-card:hover:not([data-tilt]) {
  transform: translateY(-4px);
}

/* ---------- Section Transitions (gold dividers) ---------- */
.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0.35);
  width: min(240px, 36%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199, 163, 90, 0.55), transparent);
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.9s ease, transform 0.9s var(--ease-out);
}

.section.in-view::before {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
  animation: goldDividerIn 0.9s var(--ease-out) both;
}

#llc::before,
#why::before,
#features::before,
#stats::before,
#faq::before {
  display: none;
}

/* ---------- Navbar link underline ---------- */
.nav-link {
  transition: color 0.3s ease, transform 0.3s var(--ease-out);
}

.nav-link:hover {
  transform: translateY(-1px);
}

/* ---------- Tilt feel note ---------- */
/* JS tilt is capped in animations.js; CSS only preserves 3D context.
   Keep motion restrained for a luxury executive feel. */

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-anim,
  .hero-line .line-inner,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .doc-card[data-doc="0"],
  .doc-card[data-doc="1"],
  .doc-card[data-doc="2"],
  .doc-card[data-doc="3"] {
    transition: none !important;
  }

  .flow-path {
    animation: none !important;
    opacity: 0;
  }

  .doc-flow:hover .flow-path {
    opacity: 0.35;
  }

  .hero-brand::after,
  .section-label::before {
    transform: scaleX(1) !important;
    animation: none !important;
  }

  .section::before {
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(1) !important;
    animation: none !important;
  }

  .cursor-glow,
  .bg-orbs,
  .floating-shapes {
    display: none;
  }

  .marquee-track {
    animation: none;
  }
}