/* ============================================================
   PARKER SOLUTIONS — MOTION
   Scroll reveals · smooth anchor scroll · navbar scrolled state
   Respects prefers-reduced-motion
   ============================================================ */

html { scroll-behavior: smooth; }

/* ============================================================
   SCROLL REVEAL
   Elements fade + slide up as they enter the viewport.
   .reveal is added by js/scroll.js; .in flips when visible.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* Subtle horizontal variant (used for side-by-side hero halves) */
.reveal-x {
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-x.in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   NAVBAR SCROLLED STATE
   Adds a slightly stronger shadow once the user starts scrolling.
   ============================================================ */
.site-header {
  transition: top var(--transition-base);
}
.site-header-inner {
  transition:
    background-color 240ms cubic-bezier(0.4, 0, 0.2, 1),
    color 240ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 240ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow var(--transition-base);
}
.site-header.scrolled .site-header-inner {
  box-shadow:
    var(--nav-shadow),
    0 6px 24px rgba(14, 14, 30, 0.12);
}

/* ============================================================
   THEME TRANSITION
   Adds a smooth color crossfade to surfaces that flip with the theme.
   Cards/buttons/inputs are excluded — they already define `transition: all`
   which covers the color flip on its own (and overriding here would break
   their hover transforms).
   ============================================================ */
html,
body,
.site-footer,
.hero,
.showcase,
.stat-band,
.sector-hero,
.app-hero,
.cta-strip,
.arch-hero,
.impact-cell,
.contact-info-panel,
.compare-wrap,
.extras-table,
.config-summary,
.flow-row-aside,
.mockup-chrome,
.mockup-sidebar,
.mockup-topbar,
.mock-kpi,
.mock-panel,
.mock-deal,
.mock-phone-screen {
  transition-property: background-color, color, border-color;
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   THEME TOGGLE — icon crossfade
   ============================================================ */
.theme-toggle svg {
  transition: transform var(--transition-base), opacity var(--transition-fast);
}
.theme-toggle:hover svg {
  transform: rotate(-12deg);
}

/* ============================================================
   PULSE / GLOW background motion on the hero glow orb
   ============================================================ */
.hero-bg-glow,
.sector-hero-glow,
.cta-strip-glow,
.showcase-bg-glow {
  animation: glowDrift 14s ease-in-out infinite alternate;
}
@keyframes glowDrift {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
  100% { transform: translate(-46%, -54%) scale(1.08); opacity: 0.85; }
}

/* ============================================================
   REDUCED MOTION — disable everything
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .reveal-x {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-bg-glow,
  .sector-hero-glow,
  .cta-strip-glow,
  .showcase-bg-glow,
  .eyebrow::before {
    animation: none !important;
  }
}