/* Subtle motion overlay — applied on top of styles.css */

/* Smooth anchor scrolling */
html {
  scroll-behavior: auto; /* JS handles smooth scroll with custom (faster) timing */
}

/* Reveal-on-scroll: fade + meaningful rise + staggered children */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger: each subsequent reveal sibling delays a bit */
.reveal[data-reveal-delay="1"] { transition-delay: 0.12s; }
.reveal[data-reveal-delay="2"] { transition-delay: 0.24s; }
.reveal[data-reveal-delay="3"] { transition-delay: 0.36s; }
.reveal[data-reveal-delay="4"] { transition-delay: 0.48s; }
.reveal[data-reveal-delay="5"] { transition-delay: 0.6s; }

/* Reveal: from-left and from-right variants for split sections */
.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* Card hover lift */
.section-number, .h-section, .h-display, .lead { /* nothing */ }

/* Card hover lift — clearly visible */
[class*="grid-2"] > div,
[class*="grid-3"] > div,
[class*="grid-4"] > div,
.approach-tabs > button + *,
#faq > div > div > div > div {
  transition: border-color 0.22s ease, background-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
[class*="grid-2"] > div:hover,
[class*="grid-3"] > div:hover,
[class*="grid-4"] > div:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  background-color: rgba(255,255,255,0.015);
}

/* Module cards (Harness · AX) — clear lift */
.harness-grid > div:hover,
#agent [style*="border:1px solid"]:hover {
  border-color: var(--accent) !important;
  transform: translateY(-3px);
}

/* Eyebrow shimmer line on entrance */
.eyebrow {
  position: relative;
}

/* FAQ: highlight on hover */
#faq button {
  transition: background-color 0.2s ease;
}
#faq button:hover {
  background-color: rgba(255,255,255,0.02);
}

/* Approach tab: subtle indicator */
.approach-tabs > button {
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Nav: links color transition */
nav a {
  transition: color 0.18s ease;
}
nav a:hover {
  color: var(--text) !important;
}

/* Buttons: more pronounced hover */
.btn { transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.btn:hover .arrow-icn { transform: translateX(5px); }
.btn-primary:hover, .btn-accent:hover { transform: translateY(-2px); }
.arrow-icn { transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); }

/* Hero ambient: gentle pulsing glow */
@keyframes heroAmbient {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}
header [style*="radial-gradient"] {
  animation: heroAmbient 8s ease-in-out infinite;
}

/* Section number / eyebrow: slide-in underline on reveal */
.section-header.is-visible .eyebrow::after,
.section-header .eyebrow::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 1px;
  background: var(--text-dim);
  margin-left: 12px;
  vertical-align: middle;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.section-header.is-visible .eyebrow::after { width: 48px; }

/* === ADVANCED MOTION === */

/* 1. Hero headline: word-by-word reveal */
.hero-words > .hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-words.is-visible > .hero-word {
  opacity: 1;
  transform: translateY(0);
}
.hero-words.is-visible > .hero-word:nth-child(1) { transition-delay: 0.1s; }
.hero-words.is-visible > .hero-word:nth-child(2) { transition-delay: 0.22s; }
.hero-words.is-visible > .hero-word:nth-child(3) { transition-delay: 0.34s; }
.hero-words.is-visible > .hero-word:nth-child(4) { transition-delay: 0.46s; }
.hero-words.is-visible > .hero-word:nth-child(5) { transition-delay: 0.58s; }
.hero-words.is-visible > .hero-word:nth-child(6) { transition-delay: 0.7s; }
.hero-words.is-visible > .hero-word:nth-child(7) { transition-delay: 0.82s; }
.hero-words.is-visible > .hero-word:nth-child(8) { transition-delay: 0.94s; }
.hero-words.is-visible > .hero-word:nth-child(9) { transition-delay: 1.06s; }
.hero-words.is-visible > .hero-word:nth-child(10) { transition-delay: 1.18s; }

/* 2. Magnetic underline on nav links */
.nav-desktop-links a {
  position: relative;
}
.nav-desktop-links a::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-desktop-links a:hover::before {
  transform: scaleX(1);
}

/* 3. Section dividers: animated line draw */
.section {
  position: relative;
}
.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--border);
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.section.section-visible::before {
  width: 100%;
  transition-duration: 1.6s;
}

/* 4. Number counters / large stats: subtle scale-in */
[class*="hero-stats"] > div,
.section [style*="fontSize:28"][style*="fontWeight:600"],
.section [style*="fontSize:32"][style*="fontWeight"],
.section [style*="fontSize:48"][style*="fontWeight"] {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 5. Subtle grid bg parallax-ish: fade as you scroll */
header [style*="backgroundImage"][style*="grid"] {
  transition: opacity 0.4s ease;
}

/* 6. CTA button: pulse glow on hover */
.btn-accent {
  position: relative;
  overflow: hidden;
}
.btn-accent::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
  pointer-events: none;
}
.btn-accent:hover::after {
  width: 280px;
  height: 280px;
}

/* 7. Card image / icon: rotate slightly on container hover */
[class*="grid-3"] > div:hover svg,
.harness-grid > div:hover svg {
  transform: scale(1.08);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
[class*="grid-3"] > div svg,
.harness-grid > div svg {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 8. Approach tabs: animated indicator */
.approach-tabs > button {
  position: relative;
  overflow: hidden;
}
.approach-tabs > button::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.approach-tabs > button.active::after,
.approach-tabs > button[aria-selected="true"]::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-words > .hero-word { opacity: 1 !important; transform: none !important; }
  .nav-desktop-links a::before { display: none; }
  .section::before { width: 100% !important; transition: none !important; }
  .btn-accent::after { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover .arrow-icn { transform: none !important; }
}