/* ==========================================================================
   The Power Vault Group — Motion System (companion CSS, v3)
   Loaded after each page's own <style> block, layering on top without
   changing any existing selector's behaviour.
   ========================================================================== */

/* Apple-style spring tokens: sampled linear() curves with cubic-bezier
   fallback. "smooth" = critically damped (no bounce). "snappy" = brief,
   small overshoot for quick, frequent interactions. */
:root {
  --ease-spring-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --spring-smooth-duration: 480ms;
  --ease-spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-snappy-duration: 260ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring-smooth: linear(
      0, 0.0037, 0.0142, 0.031, 0.0534, 0.0804, 0.1108,
      0.1438, 0.1784, 0.2135, 0.2484, 0.3145, 0.3746,
      0.4283, 0.4755, 0.5562, 0.6215, 0.6726, 0.7112,
      0.7735, 0.8196, 0.854, 0.8793, 0.9185, 0.9458,
      0.9647, 0.9779, 0.9921, 1
    );
    --ease-spring-snappy: linear(
      0, 0.012, 0.049, 0.107, 0.185, 0.278, 0.383,
      0.493, 0.601, 0.702, 0.791, 0.865, 0.924,
      0.967, 0.995, 1.013, 1.019, 1.016,
      1.009, 1.003, 1
    );
  }
}

/* Word mask reveal */
.mw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: inherit;
}
.mw-in {
  display: inline-block;
  will-change: transform;
}

/* Ambient hosts */
.hero,
.article-hero {
  position: relative;
}
.article-hero { overflow: hidden; }

.motion-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(48px);
  opacity: 0.7;
  will-change: transform;
  z-index: 0;
}

/* Keep hero foreground content above the ambient layer */
.hero > h1,
.hero > .headline-divider,
.hero > .tagline,
.hero > .hero-actions,
.hero > .hero-visual,
.hero > .pillars,
.article-hero > *:not(.motion-orb) {
  position: relative;
  z-index: 1;
}

/* Sticky header depth on scroll */
header {
  transition: background var(--spring-smooth-duration) var(--ease-spring-smooth),
              box-shadow var(--spring-smooth-duration) var(--ease-spring-smooth),
              border-color var(--spring-smooth-duration) var(--ease-spring-smooth);
}
/* Liquid Glass separates chrome from content with material depth (blur +
   soft shadow), not a hardening line — so the hairline recedes once there
   is real content passing beneath the glass to separate from, and the
   shadow (already soft/diffuse) carries the depth cue instead. */
header.motion-scrolled {
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.6);
  border-bottom-color: transparent;
}

/* GPU-readiness hints — only on elements that actually animate a transform */
.solution-card,
.reason-card,
.feature-block,
.card,
.sidebar-card,
.sector-item {
  will-change: transform;
}

.btn-primary,
.btn-secondary,
nav .cta-btn,
.form-submit,
.sidebar-cta,
.logo,
.logo-icon {
  will-change: transform;
}
.btn-primary,
.btn-secondary,
nav .cta-btn,
.form-submit,
.sidebar-cta {
  display: inline-block;
}

/* FAQ accordion — grid-rows fill instead of a fixed max-height ceiling, so
   short and long answers both settle at the same perceived speed. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  max-height: none;
  padding-top: 0;
  padding-bottom: 0;
  transition: grid-template-rows var(--spring-smooth-duration) var(--ease-spring-smooth),
              padding-top var(--spring-smooth-duration) var(--ease-spring-smooth),
              padding-bottom var(--spring-smooth-duration) var(--ease-spring-smooth);
}
.faq-answer > p {
  overflow: hidden;
  min-height: 0;
}
.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
  max-height: none;
  padding-top: 18px;
  padding-bottom: 18px;
}
.faq-chevron {
  transition: transform var(--spring-snappy-duration) var(--ease-spring-snappy);
}

/* Press feedback for elements CSS alone controls (GSAP owns transform on
   buttons/cards elsewhere and supplies its own press state in motion.js). */
.faq-question:active {
  background: rgba(11, 22, 40, 0.9);
}

/* -------------------------------------------------------------------- */
/* Focus — every interactive element gets a visible, keyboard-only ring. */
/* Mirrors the accent-colour halo AppKit draws around a focused control; */
/* never appears on a mouse click, only on Tab / programmatic focus.     */
/* -------------------------------------------------------------------- */
:focus {
  outline: none;
}
:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--gold, #c9a84c), 0 0 0 3px rgba(201, 168, 76, 0.18);
}

/* Gold-filled buttons need a dark ring instead — gold-on-gold has no
   contrast. */
.btn-primary:focus-visible,
.form-submit:focus-visible,
nav .cta-btn:focus-visible,
.sidebar-cta:focus-visible {
  box-shadow: inset 0 0 0 2px var(--navy, #060d1a), 0 0 0 3px rgba(201, 168, 76, 0.55);
}

/* -------------------------------------------------------------------- */
/* Sticky sidebars — pinned panels that can outgrow the viewport need to  */
/* scroll internally (like a Mail/Finder sidebar), not silently overflow */
/* past the bottom of the screen with unreachable content.               */
/* -------------------------------------------------------------------- */
aside.sidebar,
.article-sidebar {
  max-height: calc(100vh - 88px - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 168, 76, 0.35) transparent;
}
aside.sidebar::-webkit-scrollbar,
.article-sidebar::-webkit-scrollbar {
  width: 6px;
}
aside.sidebar::-webkit-scrollbar-track,
.article-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
aside.sidebar::-webkit-scrollbar-thumb,
.article-sidebar::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.35);
  border-radius: 3px;
}
aside.sidebar::-webkit-scrollbar-thumb:hover,
.article-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 168, 76, 0.55);
}
@media (max-width: 900px) {
  aside.sidebar,
  .article-sidebar {
    max-height: none;
    overflow-y: visible;
  }
}

/* -------------------------------------------------------------------- */
/* List rows — sidebar link lists get a native row highlight (like a     */
/* Finder/Mail list row) instead of a bare text-colour change, plus real */
/* press feedback. Padding/margin cancel out, so layout is unaffected.   */
/* -------------------------------------------------------------------- */
.link-list a,
.sidebar-link-list a {
  padding: 7px 8px;
  margin: -7px -8px;
  border-radius: 2px;
  transition: background-color var(--spring-snappy-duration) var(--ease-spring-snappy),
              color var(--spring-snappy-duration) var(--ease-spring-snappy),
              transform var(--spring-snappy-duration) var(--ease-spring-snappy);
}
.link-list a:hover,
.sidebar-link-list a:hover {
  background: rgba(201, 168, 76, 0.08);
  transform: translateX(2px);
}
.link-list a:active,
.sidebar-link-list a:active {
  background: rgba(201, 168, 76, 0.14);
  transform: translateX(2px) scale(0.99);
}

/* Back link — a light directional nudge, same language as nav hover. */
.back-link {
  transition: color var(--spring-snappy-duration) var(--ease-spring-snappy),
              transform var(--spring-snappy-duration) var(--ease-spring-snappy);
}
.back-link:hover {
  transform: translateX(-2px);
}

/* -------------------------------------------------------------------- */
/* Mobile nav toggle + glass dropdown panel — grows out of the header    */
/* it's attached to (transform-origin: top), never a detached overlay.   */
/* -------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle-bar {
  width: 18px;
  height: 1.5px;
  background: var(--gold, #c9a84c);
  transition: transform var(--spring-snappy-duration) var(--ease-spring-snappy),
              opacity var(--spring-snappy-duration) var(--ease-spring-snappy);
}
header.nav-open .nav-toggle-bar:first-child { transform: translateY(3.75px) rotate(45deg); }
header.nav-open .nav-toggle-bar:last-child { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  header nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 24px 22px;
    background: rgba(6, 13, 26, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(201, 168, 76, 0.18);
    transform-origin: top center;
    opacity: 0;
    visibility: hidden;
    transform: scaleY(0.94) translateY(-2px);
    pointer-events: none;
    transition: opacity var(--spring-smooth-duration) var(--ease-spring-smooth),
                transform var(--spring-smooth-duration) var(--ease-spring-smooth),
                visibility 0s linear var(--spring-smooth-duration);
  }
  header nav a:not(.cta-btn) {
    display: block;
    padding: 14px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  header nav .cta-btn { margin-top: 14px; text-align: center; }

  header.nav-open nav {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1) translateY(0);
    pointer-events: auto;
    transition: opacity var(--spring-smooth-duration) var(--ease-spring-smooth),
                transform var(--spring-smooth-duration) var(--ease-spring-smooth),
                visibility 0s linear 0s;
  }
}

/* -------------------------------------------------------------------- */
/* Disabled — inert, no hover/press affordance, cursor stays a plain     */
/* arrow (macOS dims a control rather than showing a "no entry" cursor). */
/* -------------------------------------------------------------------- */
.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled {
  opacity: 0.5;
  cursor: default;
}
button:disabled {
  cursor: default;
}

/* Reduced-motion: strip transforms and ambient decoration, collapse spring
   tokens to effectively-instant, but keep state changes (no dead transitions). */
@media (prefers-reduced-motion: reduce) {
  .mw-in { transform: none !important; }
  .motion-orb { display: none !important; }
  :root {
    --ease-spring-smooth: linear(0, 1);
    --ease-spring-snappy: linear(0, 1);
    --spring-smooth-duration: 1ms;
    --spring-snappy-duration: 1ms;
  }
}