/* ═══════════════════════════════════════════════════════════════
   SOFTHIRE SYSTEMS — Interactive Effects CSS
   Phase 4: FX-03 Border Beam, FX-04 Cursor Spotlight,
            FX-05 Magnetic CTA, FX-06 3D Tilt,
            FX-10 Stacking Cards, FX-16 Chaos→Order
   ═══════════════════════════════════════════════════════════════ */

/* ── FX-03: Border Beam ──────────────────────────────────────── */
[data-beam] {
  position: relative;
  overflow: hidden;
}
.border-beam-line {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  /* Travelling beam implemented as a conic-gradient that rotates */
  background: conic-gradient(
    from var(--beam-angle, 0deg) at 50% 50%,
    transparent 0%,
    rgba(201,168,76,.7) 8%,
    transparent 16%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
          mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
          mask-composite: exclude;
  padding: 1px; /* controls border width */
  animation: beam-rotate 4s linear infinite;
}
@keyframes beam-rotate {
  to { --beam-angle: 360deg; }
}
@property --beam-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
/* children above beam line */
[data-beam] > *:not(.border-beam-line) {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .border-beam-line { animation: none; opacity: 0; }
}

/* ── FX-04: Cursor Spotlight ─────────────────────────────────── */
[data-spotlight] {
  --spot-x: 50%;
  --spot-y: 50%;
  position: relative;
  isolation: isolate;
}
[data-spotlight]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--spot-x) var(--spot-y),
    rgba(201,168,76,.07),
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
  z-index: 0;
}
[data-spotlight].spotlight-active::before {
  opacity: 1;
}
[data-spotlight] > * {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  [data-spotlight]::before { display: none; }
}

/* ── FX-05: Magnetic CTA ─────────────────────────────────────── */
[data-magnetic] {
  display: inline-flex; /* preserve button layout */
  transform-origin: center;
  /* transition set dynamically in JS */
}
/* No CSS-only fallback needed — the transform stays neutral without JS */

/* ── FX-06: 3D Tilt ──────────────────────────────────────────── */
[data-tilt] {
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transform: none !important; }
}

/* ── FX-10: Stacking Cards ───────────────────────────────────── */
.deck-stack {
  position: relative;
  display: grid;
  /* Cards overlap each other in the same grid cell */
}
.deck-stack .stack-card {
  grid-area: 1 / 1;
  transition: transform 480ms cubic-bezier(0.34,1.56,0.64,1),
              opacity   300ms ease;
  transform-origin: bottom center;
  /* Stacked collapsed: cards behind slightly offset */
  transform: translateY(calc(var(--si, 0) * -4px))
             scale(calc(1 - var(--si, 0) * 0.03));
  z-index: calc(var(--sc, 1) - var(--si, 0));
}
/* Fan out on hover / touch toggle */
.deck-stack.is-fanned .stack-card {
  transform: translateY(calc(var(--si, 0) * -120px))
             rotate(calc((var(--si, 0) - (var(--sc, 1) - 1) / 2) * 6deg))
             scale(1);
  opacity: 1;
}
.deck-stack.is-fanned .stack-card:first-child {
  z-index: calc(var(--sc, 1) + 1);
}
@media (prefers-reduced-motion: reduce) {
  .deck-stack .stack-card,
  .deck-stack.is-fanned .stack-card {
    transition: none;
    transform: none;
  }
}

/* ── FX-16: Chaos → Order ────────────────────────────────────── */
.chaos-pending {
  transform: translateX(var(--chaos-tx, 0))
             translateY(var(--chaos-ty, 0))
             rotate(var(--chaos-rot, 0deg));
  opacity: 0;
  /* JS adds this class immediately; element is invisible until ordered */
}
.chaos-ordered {
  transform: none;
  opacity: 1;
  transition:
    transform 900ms cubic-bezier(0.16,1,0.3,1),
    opacity   600ms ease;
}
/* Stagger siblings via CSS counter trick — siblings get --ci from JS if set,
   otherwise animation fires together */
.chaos-ordered[style*='--ci'] {
  transition-delay: calc(var(--ci, 0) * 80ms);
}
@media (prefers-reduced-motion: reduce) {
  .chaos-pending  { transform: none; opacity: 1; }
  .chaos-ordered  { transition: none; }
}

/* ── Phase 5: Tab Deck ───────────────────────────────────────── */
/* The investment-nav already has its own brand styles;
   we layer active-state highlighting on top */
[data-tabs] a.is-active,
[data-tabs] a[aria-selected="true"] {
  color: var(--sys-gold, #C9A84C);
  border-bottom-color: var(--sys-gold, #C9A84C);
}
/* Panel hide/show */
[data-tab-panel] {
  transition: opacity 300ms ease;
}
[data-tab-panel][hidden] {
  display: none;
}
[data-tab-panel].tab-visible {
  opacity: 1;
}
/* Tab progress indicator — travel left-to-right across tabs */
.investment-progress {
  --tab-idx:   0;
  --tab-total: 3;
  left: calc(var(--tab-idx, 0) / var(--tab-total, 3) * 100%) !important;
  width: calc(100% / var(--tab-total, 3)) !important;
  transition: left 320ms var(--sys-ease-out, cubic-bezier(.2,.8,.2,1));
}
@media (prefers-reduced-motion: reduce) {
  .investment-progress { transition: none; }
  [data-tab-panel]     { transition: none; }
}

/* ── Phase 5: Pinned Deck ────────────────────────────────────── */
.pinned-deck-wrap {
  /* Height controls total scroll distance: 3 steps × 80vh */
  min-height: 240vh;
  position: relative;
}
.pinned-deck {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.pinned-step {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 500ms ease, transform 500ms var(--sys-ease-out, cubic-bezier(.2,.8,.2,1));
  pointer-events: none;
}
.pinned-step.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.pinned-step.is-past {
  opacity: 0;
  transform: translateY(-32px);
}
@media (prefers-reduced-motion: reduce) {
  .pinned-step             { transition: none; }
  .pinned-step.is-upcoming { opacity: 1; transform: none; }
}
@media (max-width: 768px) {
  /* On mobile, disable pinned effect — stack steps normally */
  .pinned-deck-wrap { min-height: 0; }
  .pinned-deck      { position: static; height: auto; }
  .pinned-step      { position: static; opacity: 1; transform: none; pointer-events: auto; }
}