/* ============================================================
   Fund page motif layer
   Scroll-triggered background motifs for dark sections.
   Additive overlay — does not modify fund-shared.css.
   Spec: docs/superpowers/specs/2026-04-10-fund-visual-effects-design.md
   ============================================================ */

:root {
  --motif-slow: 16s;  /* hero orbital pulse */
  --motif-fast: 6s;   /* bracket loop */
}

/* ── Motif wrapper contract ─────────────────────────────── */
.motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.motif ~ .container,
.motif ~ .container-narrow {
  position: relative;
  z-index: 1;
}

.motif .grid-base {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 49.5%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 50.5%,
    transparent 100%
  );
  background-size: 100% 56px;
  z-index: 0;
}

/* ── Play-state contract ────────────────────────────────── */
.motif .orbit-ring,
.motif .orbit-core,
.motif .orbit-orbiter,
.motif .bracket::before,
.motif .bracket::after,
.motif .rule,
.motif .wall-col span,
.motif .ticker-tape {
  animation-play-state: paused;
}

.motif--active .orbit-ring,
.motif--active .orbit-core,
.motif--active .orbit-orbiter,
.motif--active .bracket::before,
.motif--active .bracket::after,
.motif--active .rule,
.motif--active .wall-col span,
.motif--active .ticker-tape {
  animation-play-state: running;
}

/* ============================================================
   Motif 1 — Hero Orbital
   Monumental concentric rings + slow orbiter. Anchors the
   opening statement.
   ============================================================ */

.motif--orbital .orbit-ring {
  position: absolute;
  top: 50%;
  right: -40px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.motif--orbital .orbit-ring--outer {
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  animation: orbital-pulse var(--motif-slow) ease-in-out infinite;
}
.motif--orbital .orbit-ring--mid {
  width: 259px;
  height: 259px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  animation: orbital-pulse var(--motif-slow) ease-in-out infinite -2s;
}
.motif--orbital .orbit-ring--inner {
  width: 158px;
  height: 158px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  animation: orbital-pulse var(--motif-slow) ease-in-out infinite -4s;
}

/* Core and orbiter share an anchor point 40px from the right edge.
   The rings are anchored at right: -40px so half their width spills
   off-canvas; the core marks the visual center of the visible ring
   slice. The orbiter uses transform-origin: 0 0 so its rotation pivots
   around that same anchor, and translateX(179px) in orbital-travel
   places its path roughly on the mid ring radius. */
.motif--orbital .orbit-core {
  position: absolute;
  top: 50%;
  right: 40px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: translate(50%, -50%);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.motif--orbital .orbit-orbiter {
  position: absolute;
  top: 50%;
  right: 40px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  transform-origin: 0 0;
  animation: orbital-travel 30s linear infinite;
}

@keyframes orbital-pulse {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50%      { opacity: 0.6; transform: translateY(-50%) scale(1.015); }
}

@keyframes orbital-travel {
  from { transform: rotate(0deg) translateX(179px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(179px) rotate(-360deg); }
}

/* ============================================================
   Motif 2 — Who We Are · Bracket Frame
   Four viewfinder brackets that draw in around the content
   on a continuous rhythm loop.
   ============================================================ */

.motif--brackets .bracket {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: none;
}
.motif--brackets .bracket::before,
.motif--brackets .bracket::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.25);
}

/* Corners */
.motif--brackets .bracket.tl { top: 18%; left: 6%; }
.motif--brackets .bracket.tl::before { top: 0; left: 0; width: 40px; height: 1px; transform-origin: left;
  animation: bracket-h var(--motif-fast) ease-in-out infinite; }
.motif--brackets .bracket.tl::after  { top: 0; left: 0; height: 40px; width: 1px; transform-origin: top left;
  animation: bracket-v var(--motif-fast) ease-in-out infinite 0.15s; }

.motif--brackets .bracket.tr { top: 18%; right: 6%; }
.motif--brackets .bracket.tr::before { top: 0; right: 0; width: 40px; height: 1px; transform-origin: right;
  animation: bracket-h var(--motif-fast) ease-in-out infinite 0.30s; }
.motif--brackets .bracket.tr::after  { top: 0; right: 0; height: 40px; width: 1px; transform-origin: top right;
  animation: bracket-v var(--motif-fast) ease-in-out infinite 0.45s; }

.motif--brackets .bracket.bl { bottom: 18%; left: 6%; }
.motif--brackets .bracket.bl::before { bottom: 0; left: 0; width: 40px; height: 1px; transform-origin: left;
  animation: bracket-h var(--motif-fast) ease-in-out infinite 0.60s; }
.motif--brackets .bracket.bl::after  { bottom: 0; left: 0; height: 40px; width: 1px; transform-origin: bottom left;
  animation: bracket-v var(--motif-fast) ease-in-out infinite 0.75s; }

.motif--brackets .bracket.br { bottom: 18%; right: 6%; }
.motif--brackets .bracket.br::before { bottom: 0; right: 0; width: 40px; height: 1px; transform-origin: right;
  animation: bracket-h var(--motif-fast) ease-in-out infinite 0.90s; }
.motif--brackets .bracket.br::after  { bottom: 0; right: 0; height: 40px; width: 1px; transform-origin: bottom right;
  animation: bracket-v var(--motif-fast) ease-in-out infinite 1.05s; }

@keyframes bracket-h {
  0%, 100% { transform: scaleX(0); opacity: 0; }
  25%, 75% { transform: scaleX(1); opacity: 1; }
}
@keyframes bracket-v {
  0%, 100% { transform: scaleY(0); opacity: 0; }
  25%, 75% { transform: scaleY(1); opacity: 1; }
}

/* ============================================================
   Motif 3 — Track Record · Data Wall
   Eight columns of metrics scrolling vertically at staggered
   durations. Density as argument.
   ============================================================ */

.motif--data-wall {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  opacity: 0.3;
}

.motif--data-wall .wall-col {
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.motif--data-wall .wall-col:last-child {
  border-right: none;
}

.motif--data-wall .wall-col span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mute);
  line-height: 1.9;
  text-align: center;
  animation: wall-scroll 14s linear infinite;
}
.motif--data-wall .wall-col:nth-child(even) span {
  animation-duration: 17s;
  animation-delay: -3s;
}
.motif--data-wall .wall-col:nth-child(3n) span {
  animation-duration: 12s;
  animation-delay: -6s;
}
.motif--data-wall .wall-col:nth-child(5n) span {
  animation-duration: 19s;
  animation-delay: -8s;
}

/* Seamless loop: each .wall-col span in fund.html repeats its content
   list twice. translateY(-50%) then lands exactly on the start of the
   second copy, so the scroll wraps without a visible seam. Do not
   change -50% without also adjusting the content duplication. */
@keyframes wall-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* ============================================================
   Motif 4 — Research · Stacked Rules
   Horizontal rules at varying widths growing from the left edge
   in sequence, then collapsing to the right. Order-book echo.
   ============================================================ */

.motif--rules {
  padding: 22px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}

/* .grid-base base rules come from the shared block at top of file. */

.motif--rules .rule {
  height: 1px;
  background: rgba(255, 255, 255, 1);
  transform-origin: left;
  transform: scaleX(0);
  animation: rule-grow 7s ease-out infinite;
  z-index: 1;
}
.motif--rules .rule:nth-child(2) { width: 82%; opacity: 0.35; animation-delay: 0s; }
.motif--rules .rule:nth-child(3) { width: 64%; opacity: 0.28; animation-delay: 0.3s; }
.motif--rules .rule:nth-child(4) { width: 48%; opacity: 0.22; animation-delay: 0.6s; }
.motif--rules .rule:nth-child(5) { width: 38%; opacity: 0.17; animation-delay: 0.9s; }
.motif--rules .rule:nth-child(6) { width: 26%; opacity: 0.13; animation-delay: 1.2s; }
.motif--rules .rule:nth-child(7) { width: 18%; opacity: 0.10; animation-delay: 1.5s; }

@keyframes rule-grow {
  0%, 8%   { transform: scaleX(0); transform-origin: left; }
  40%, 60% { transform: scaleX(1); transform-origin: left; }
  92%, 100%{ transform: scaleX(0); transform-origin: right; }
}

/* ============================================================
   Motif 5 — Footer · Ticker Tape
   Single slow horizontal scroll of fund symbols at the top
   edge of the footer. Ledger reprise.
   ============================================================ */

.motif--ticker {
  /* Override the default .motif positioning — ticker only
     occupies a thin strip at the top edge. */
  bottom: auto;
  height: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.motif--ticker .ticker-tape {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  animation: ticker-scroll 40s linear infinite;
  will-change: transform;
}

.motif--ticker .ticker-tape span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mute);
  opacity: 0.5;
  letter-spacing: 0.08em;
  padding-right: 32px;
  white-space: nowrap;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Give the footer's own content room below the ticker strip,
   without modifying fund-shared.css. */
.motif--ticker ~ .container {
  padding-top: 28px;
}

/* ============================================================
   Responsive
   Mobile breakpoint matches fund-shared.css @media (max-width: 800px)
   ============================================================ */

@media (max-width: 800px) {
  /* Hero orbital — shrink rings, re-center */
  .motif--orbital .orbit-ring--outer { width: 260px; height: 260px; right: -80px; }
  .motif--orbital .orbit-ring--mid   { width: 190px; height: 190px; right: -80px; }
  .motif--orbital .orbit-ring--inner { width: 120px; height: 120px; right: -80px; }
  .motif--orbital .orbit-core        { right: 0; }
  .motif--orbital .orbit-orbiter     { right: 0; animation-name: orbital-travel-mobile; }

  @keyframes orbital-travel-mobile {
    from { transform: rotate(0deg) translateX(130px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(130px) rotate(-360deg); }
  }

  /* Brackets — smaller frame, pulled in tighter */
  .motif--brackets .bracket { width: 28px; height: 28px; }
  .motif--brackets .bracket.tl,
  .motif--brackets .bracket.tr { top: 12%; }
  .motif--brackets .bracket.bl,
  .motif--brackets .bracket.br { bottom: 12%; }
  .motif--brackets .bracket.tl,
  .motif--brackets .bracket.bl { left: 4%; }
  .motif--brackets .bracket.tr,
  .motif--brackets .bracket.br { right: 4%; }
  .motif--brackets .bracket::before { width: 28px !important; }
  .motif--brackets .bracket::after  { height: 28px !important; }

  /* Data wall — drop to 4 columns to preserve breathing room.
     :last-child still points at hidden child 8, so reset the border
     on child 4 (the rightmost visible column). */
  .motif--data-wall { grid-template-columns: repeat(4, 1fr); }
  .motif--data-wall .wall-col:nth-child(n+5) { display: none; }
  .motif--data-wall .wall-col:nth-child(4) { border-right: none; }

  /* Rules — slightly tighter */
  .motif--rules { padding: 16px 20px; gap: 8px; }

  /* Ticker — unchanged (reads fine at 10px) */
}

/* ============================================================
   Reduced motion
   - Hide data wall and ticker entirely (pure motion, no
     standalone value when static).
   - Freeze other motifs on their "visible" frame so they still
     contribute texture without moving.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  /* Hide motion-only motifs */
  .motif--data-wall,
  .motif--ticker {
    display: none;
  }

  /* Stop all motif animations */
  .motif .orbit-ring,
  .motif .orbit-core,
  .motif .orbit-orbiter,
  .motif .bracket::before,
  .motif .bracket::after,
  .motif .rule,
  .motif .wall-col span,
  .motif .ticker-tape {
    animation: none !important;
  }

  /* Orbital — show rings as static concentric circles */
  .motif--orbital .orbit-ring { opacity: 1; transform: translateY(-50%) scale(1); }
  .motif--orbital .orbit-orbiter { display: none; }

  /* Brackets — show fully drawn, no pulsing */
  .motif--brackets .bracket::before { transform: scaleX(1); opacity: 0.6; }
  .motif--brackets .bracket::after  { transform: scaleY(1); opacity: 0.6; }

  /* Rules — show all lines at full width, static */
  .motif--rules .rule { transform: scaleX(1); }

  /* Also compensate for the footer ticker removal:
     drop the top padding since the ticker no longer exists. */
  .motif--ticker ~ .container { padding-top: 0; }
}