/* ============================================
   Motion & Animation Layer
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .anim-card:not(.dimension-orbit-node) {
    opacity: 1 !important;
    transform: none !important;
  }

  .dimension-orbit-node.anim-card {
    opacity: 1 !important;
  }
}

.score-ring.animated .ring-fill {
  animation: ringShimmer 2.5s ease-in-out infinite;
}

@keyframes ringShimmer {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(200, 16, 46, 0.25)); }
  50% { filter: drop-shadow(0 0 10px rgba(200, 16, 46, 0.5)); }
}

@keyframes goalGlow {
  0%, 100% { box-shadow: 0 4px 24px rgba(200, 16, 46, 0.06); }
  50% { box-shadow: 0 8px 32px rgba(200, 16, 46, 0.14); }
}

.goal-card:nth-child(odd) {
  animation: goalGlow 6s ease-in-out infinite;
}

.goal-card:nth-child(even) {
  animation: goalGlow 6s ease-in-out infinite;
  animation-delay: -3s;
}

.insight-banner {
  animation: insightFade 1s var(--ease-out) both;
}

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

/* Finding report — static, no shine or hover motion */
.finding-report {
  position: relative;
}

.finding-report-action:hover,
.finding-report-score:hover {
  transform: none;
  translate: none;
}

/* ---- Marquee ---- */
.marquee-wrap {
  overflow: hidden;
  background: var(--red);
  padding: 0.85rem 0;
  position: relative;
  z-index: 2;
}

.marquee {
  display: flex;
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
}

.marquee-content {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  white-space: nowrap;
}

.marquee-content span:not(.marquee-dot) {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}

.marquee-dot {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.5rem;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Split text ---- */
.section-title,
.hero-title {
  perspective: 900px;
}

.title-word {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.hero-title em {
  display: inline-block;
  background: linear-gradient(
    120deg,
    var(--red) 0%,
    var(--red-light) 40%,
    var(--red) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerText 4s linear infinite;
}

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

/* ---- Ambient floating ---- */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes floatRotate {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes ringExpand {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0; }
}

.card-icon,
.data-icon,
.transition-icon,
.gov-icon {
  animation: floatRotate 4s ease-in-out infinite;
}

.summary-card:nth-of-type(1) .card-icon { animation-delay: 0s; }
.summary-card:nth-of-type(3) .card-icon { animation-delay: -1.3s; }
.summary-card:nth-of-type(5) .card-icon { animation-delay: -2.6s; }

.gap-card:nth-child(2) .gap-icon,
.data-card:nth-child(2) .data-icon { animation-delay: -1.5s; }
.gap-card:nth-child(3) .gap-icon,
.data-card:nth-child(3) .data-icon { animation-delay: -3s; }

.security-shield {
  animation: floatY 3.5s ease-in-out infinite, iconPulse 3.5s ease-in-out infinite;
}

.hero-pill {
  animation: floatY 3s ease-in-out infinite;
}

.hero-pill:nth-child(2) { animation-delay: -0.5s; }
.hero-pill:nth-child(3) { animation-delay: -1s; }
.hero-pill:nth-child(4) { animation-delay: -1.5s; }

.pulse-dot {
  position: relative;
}

.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--red);
  animation: ringExpand 2s ease-out infinite;
}

/* ---- Section floats (injected by JS) ---- */
.section-float {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.35;
  animation: floatDrift 12s ease-in-out infinite;
}

@keyframes floatDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, -30px) scale(1.1); }
  66% { transform: translate(-15px, 20px) scale(0.95); }
}

/* ---- SVG draw ---- */
.anim-icon svg {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 0.1s;
}

.anim-icon.drawn svg {
  stroke-dashoffset: 0;
}

/* ---- Card tilt ---- */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
}

.tilt-card .card-icon,
.tilt-card .data-icon,
.tilt-card .gap-icon,
.tilt-card .gov-icon,
.tilt-card .transition-icon {
  transform: translateZ(30px);
}

/* ---- Magnetic button ---- */
.magnetic-wrap {
  display: inline-block;
}

/* ---- Section tag underline ---- */
.section-tag {
  position: relative;
  overflow: hidden;
}

.section-tag::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}

.section-header.in-view .section-tag::after {
  transform: scaleX(1);
}

/* ---- Dim stripe GSAP target ---- */
.dim-stripe {
  transform: scaleY(0);
}

/* ---- Pipeline number pop ---- */
.pipeline-num {
  display: inline-block;
}

/* ---- Gap badge glow ---- */
.gap-badge {
  animation: badgeGlow 3s ease-in-out infinite;
}

@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); }
  50% { box-shadow: 0 0 12px 0 rgba(200, 16, 46, 0.25); }
}

/* ---- Matrix fill enhanced ---- */
.matrix-fill {
  position: relative;
  overflow: hidden;
}

.matrix-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  animation: barShine 2s ease-in-out infinite;
}

@keyframes barShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ---- Hero grid mouse parallax ---- */
.hero-grid {
  transition: transform 0.3s ease-out;
}

/* ---- Nav link active indicator ---- */
.nav-links a {
  position: relative;
}

.nav-links a.active::after {
  width: 100%;
}

/* ---- Scroll indicator enhanced ---- */
.scroll-indicator {
  animation: floatY 2s ease-in-out infinite;
}

/* ---- Footer reveal ---- */
.footer-inner,
.footer-bottom {
  opacity: 0;
  transform: translateY(30px);
}

.footer.in-view .footer-inner,
.footer.in-view .footer-bottom {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.footer.in-view .footer-bottom {
  transition-delay: 0.15s;
}

/* ---- Section background breathe ---- */
.section-dark {
  animation: darkBreathe 14s ease-in-out infinite alternate;
}

@keyframes darkBreathe {
  0% {
    background-color: var(--surface-dark);
  }
  100% {
    background-color: #160D0F;
  }
}

.section-light {
  animation: lightBreathe 14s ease-in-out infinite alternate;
}

@keyframes lightBreathe {
  0% { filter: brightness(1); }
  100% { filter: brightness(0.99); }
}

/* ---- Hover ripple on CTA ---- */
.hero-cta {
  position: relative;
  overflow: hidden;
}

.hero-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.25) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}

.hero-cta:hover::before {
  opacity: 1;
}

/* ---- Dim pill wave ---- */
.dim-pill {
  position: relative;
  overflow: hidden;
}

.dim-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.6s;
}

.dim-pill:hover::before {
  transform: translateX(120%);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .marquee,
  .hero-title em,
  .card-icon,
  .data-icon,
  .transition-icon,
  .gov-icon,
  .security-shield,
  .hero-pill,
  .pulse-dot::after,
  .section-float,
  .section-dark,
  .section-light,
  .gap-badge,
  .matrix-fill::after,
  .scroll-indicator {
    animation: none !important;
  }

  .anim-icon svg {
    stroke-dashoffset: 0;
  }

  .footer-inner,
  .footer-bottom {
    opacity: 1;
    transform: none;
  }
}