/* ==========================================================================
   FUTURE POWER CAPITAL — MOTION SYSTEM
   Transform/opacity only. Respects prefers-reduced-motion throughout.
   ========================================================================== */

/* ---------------------------------------------------------------------
   HEADER — transforms on scroll (handled by .is-scrolled class via JS)
   --------------------------------------------------------------------- */
.site-header {
  transition: height var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.site-header.is-scrolled .site-header__inner { height: 64px; }

/* ---------------------------------------------------------------------
   SCROLL REVEAL — generic reveal primitives
   Elements start hidden via [data-reveal], JS adds .is-visible on intersect.
   Cascading delay via --reveal-delay custom property set per-item (or via
   nth-child stagger helper classes below).
   --------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: transform, opacity;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].is-visible { transform: translateX(0); }

@media (max-width: 900px) {
  /* Horizontal translateX reveals push near-edge elements (side rails, list
     items, cards) past the viewport at narrow widths, causing real horizontal
     document overflow. Below this breakpoint (matches the single-column
     .split-layout / .org-chart fallback) there is no layout room for a
     32px horizontal offset, so fall back to a vertical-only reveal. */
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(28px); }
  [data-reveal="left"].is-visible, [data-reveal="right"].is-visible { transform: translateY(0); }
}

/* Cascade stagger for grid/list children: applied automatically by JS
   which sets --reveal-delay per child based on index. Cap at 8 to keep
   long lists from feeling slow. */

/* ---------------------------------------------------------------------
   HERO — layered parallax + sequenced word/line reveal
   --------------------------------------------------------------------- */
.hero__grid {
  transition: transform 0.2s linear;
  will-change: transform;
}
.hero__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

/* Animated tracing lines (SVG strokes drawn on load) */
.hero__tracelines path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: fpc-draw 2.6s var(--ease-out) forwards;
}
.hero__tracelines path:nth-child(2) { animation-delay: 0.25s; }
.hero__tracelines path:nth-child(3) { animation-delay: 0.5s; }

@keyframes fpc-draw {
  to { stroke-dashoffset: 0; }
}

/* Drifting geometric dots — subtle, sober, not particle-effect noise */
.hero__dot {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--fpc-bronze-400);
  opacity: 0.5;
  animation: fpc-drift 14s ease-in-out infinite;
}
@keyframes fpc-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0, -22px); }
}

/* Hero title: split into lines by JS/markup, each line animates in */
.hero__title-line {
  display: block;
  overflow: hidden;
  max-width: 100%;
}
.hero__title-line span {
  display: inline-block;
  max-width: 100%;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out);
  transition-delay: calc(var(--line-index, 0) * 0.12s + 0.1s);
}
@media (max-width: 640px) {
  /* Segments no longer fit on one visual line at this width; switch to a
     simple block reveal instead of the per-line mask technique so text
     wraps normally without causing horizontal overflow. */
  .hero__title-line, .hero__title-line span {
    display: block;
    white-space: normal;
  }
}
.hero.is-loaded .hero__title-line span { transform: translateY(0); }

.hero__eyebrow, .hero__lede, .hero__inner .btn-row, .hero__meta {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.hero.is-loaded .hero__eyebrow { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.hero.is-loaded .hero__lede { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }
.hero.is-loaded .hero__inner .btn-row { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
.hero.is-loaded .hero__meta { opacity: 1; transform: translateY(0); transition-delay: 0.85s; }

/* ---------------------------------------------------------------------
   ANIMATED COUNTERS — verified facts only
   --------------------------------------------------------------------- */
.hero__meta-item strong[data-counter] { display: block; }

/* ---------------------------------------------------------------------
   MICRO-INTERACTIONS — cards, buttons
   --------------------------------------------------------------------- */
.card {
  transform: translateY(0) rotateX(0) rotateY(0);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
  transform-style: preserve-3d;
}
.card:hover {
  transform: translateY(-4px);
}

.btn {
  position: relative;
  overflow: hidden;
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fpc-bronze-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
  z-index: 0;
}
.btn--primary span, .btn--primary { position: relative; }

/* logo mark micro-draw on load in header */
.site-header__logo svg rect {
  animation: fpc-fade-scale 0.6s var(--ease-out) backwards;
}
@keyframes fpc-fade-scale {
  from { opacity: 0; transform: scaleY(0.4); transform-origin: bottom; }
  to { opacity: 1; transform: scaleY(1); }
}

/* Nav caret + underline already handled in shell.css via transform/opacity */

/* ---------------------------------------------------------------------
   SLIDING TAB INDICATOR
   --------------------------------------------------------------------- */
.tabs-list { position: relative; }
.tabs-list__indicator {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--color-accent-strong);
  transition: transform 0.35s var(--ease-out), width 0.35s var(--ease-out);
  transform: translateX(0);
}

/* ---------------------------------------------------------------------
   ACCORDION — smoother open/close using grid-template-rows trick avoided;
   keep max-height but ease icon + panel opacity too.
   --------------------------------------------------------------------- */
.accordion-panel__inner {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s var(--ease-standard), transform 0.35s var(--ease-standard);
}
.accordion-item.is-open .accordion-panel__inner {
  opacity: 1;
  transform: translateY(0);
}
.accordion-trigger {
  transition: color var(--duration-fast);
}
.accordion-trigger:hover { color: var(--color-accent-strong); }

/* ---------------------------------------------------------------------
   IMAGE MASK REVEAL (for founder portrait / future imagery)
   --------------------------------------------------------------------- */
.mask-reveal {
  position: relative;
  overflow: hidden;
}
.mask-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fpc-ink-900);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.9s var(--ease-out);
}
.mask-reveal.is-visible::after { transform: scaleX(0); }

/* ---------------------------------------------------------------------
   CUSTOM CURSOR — medallion-derived
   A thin ring (echoes the logo medallion's circular ring) with a small
   solid centre dot, trailing the pointer with light inertia. On hover of
   a link/button the ring widens and the compact monogram fades in as a
   faint watermark inside it. Single constant bronze colour, chosen for
   sufficient contrast on both light and dark surfaces. Both layers are
   pointer-events:none and driven purely by transform + opacity from JS —
   no layout properties are touched here. Disabled automatically on touch
   devices and prefers-reduced-motion; see cursor.js and the media query
   override at the end of this file.
   --------------------------------------------------------------------- */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  transform: translate3d(-100px, -100px, 0);
  opacity: 0;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--fpc-bronze-600);
  transition: opacity 0.2s var(--ease-standard);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.6px solid var(--fpc-bronze-600);
  border-radius: 50%;
  color: var(--fpc-bronze-600);
  transition: width 0.28s var(--ease-out), height 0.28s var(--ease-out),
              margin 0.28s var(--ease-out), opacity 0.2s var(--ease-standard);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cursor-ring__glyph {
  width: 60%;
  height: 60%;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.24s var(--ease-standard), transform 0.28s var(--ease-out);
}
.cursor-ring__glyph svg { width: 100%; height: 100%; display: block; }

html.has-custom-cursor,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select,
html.has-custom-cursor [role="button"] {
  cursor: none !important;
}

/* Hover state: links / buttons -- ring grows, monogram fades in inside it */
body.cursor-hover-link .cursor-ring {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
}
body.cursor-hover-link .cursor-ring__glyph {
  opacity: 0.9;
  transform: scale(1);
}
body.cursor-hover-link .cursor-dot { opacity: 0; }

/* Hover state: cards -- ring widens further, no glyph, framing feel */
body.cursor-hover-card .cursor-ring {
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  opacity: 0.5;
}

/* Active / pressed state -- quick contraction on click, purely cosmetic */
body.cursor-active .cursor-dot { transform: scale(0.6); }
body.cursor-active .cursor-ring { transform: scale(0.92); }

/* ---------------------------------------------------------------------
   REDUCED MOTION — hard override, always last
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__title-line span { transform: none !important; }
  .hero__eyebrow, .hero__lede, .hero__inner .btn-row, .hero__meta { opacity: 1 !important; transform: none !important; }

  .cursor-dot, .cursor-ring { display: none !important; }
  html.has-custom-cursor,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor input,
  html.has-custom-cursor textarea,
  html.has-custom-cursor select,
  html.has-custom-cursor [role="button"] {
    cursor: auto !important;
  }
}