/* =========================================================
   motion.css — 笨錢社群 editorial-motion layer
   Loaded AFTER tokens.css + shadcn.css on every front page.

   Goals:
   - Converge the legacy warm-orange accent to ONE restrained
     editorial gold (#E7B86A), reserved for numbers / points /
     key accents — black + white/silver for everything else.
   - Provide the shared editorial vocabulary (mono-gold eyebrow,
     serif numerals, signal tape, chips, segmented tabs, refined
     hover) extracted from tasks.html so every page speaks it.
   - A scroll-reveal motion system (fade-rise / mask-wipe /
     line-draw / line-rise) + count-up + magnetic + ticker.
   - Everything is reduced-motion safe.

   Behaviour lives in shared/motion.js (injected by chrome.js).
   ========================================================= */
:root {
  /* — primary accent: warm brand orange (reverted from the muted gold per user
     "暖橘主色回來"). The `--gold*` var NAMES are kept so the 16 swept pages don't
     need re-editing — they now resolve to orange. --gold-num stays gold for the
     few editorial serif numerals that still read better in gold. — */
  --gold: #F7A600;
  --gold-2: #E89400;
  --gold-deep: #B97A12;
  --gold-soft: rgba(247, 166, 0, 0.10);
  --gold-line: rgba(247, 166, 0, 0.34);
  --gold-glow: rgba(247, 166, 0, 0.20);
  --gold-num: #E7B86A;

  /* converge legacy warm-orange tokens → gold (motion.css wins the cascade) */
  --accent-warm: var(--gold);
  --glow: var(--gold-glow);
  --glow-2: rgba(231, 184, 106, 0.06);

  /* market signal colours (aligned with tasks.html) */
  --up: #4FB286;
  --down: #E0655C;

  /* type — guarantee serif + mono on every page */
  --ff-serif: "Playfair Display", "Noto Serif TC", Georgia, serif;
  --ff-sans: "Inter", "Noto Sans TC", system-ui, -apple-system, sans-serif;
  --ff-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* motion grammar — one confident easing pair */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-emph: cubic-bezier(.2, .8, .2, 1);
  --rev-dur: .8s;
  --rev-y: 18px;
}

/* =========================================================
   1) Tame the legacy neon-orange chrome → editorial gold
   ========================================================= */
.topbar .nav-links a::after,
.topbar .nav-links a[aria-current="page"]::after { background: var(--gold) !important; }
.topbar .brand:hover, .topbar .logo:hover { color: var(--gold) !important; }

/* Bybit partner badge — drop neon glow + pulse, hairline pill */
.partner-badge { border-color: var(--border-strong) !important; background: var(--bg-3) !important; box-shadow: none !important; }
.partner-badge:hover { border-color: var(--gold-line) !important; background: var(--gold-soft) !important; box-shadow: none !important; }
.partner-label { color: var(--ink-2) !important; text-shadow: none !important; font-weight: 500 !important; }
.partner-pulse { background: var(--gold) !important; box-shadow: none !important; animation: none !important; }
.partner-divider { background: var(--border-strong) !important; }
.partner-logo-img { filter: none !important; }
.partner-badge:hover .partner-logo-img { filter: none !important; transform: none !important; }

/* tier badges — refined gold outline chip, no infinite shine */
.tier-badge[data-tier="haobangbang_ambassador"],
.tier-badge[data-tier="vip"],
.tier-badge[data-tier="elite"],
.tier-badge[data-tier="svvip"] {
  animation: none !important;
  background: var(--gold-soft) !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold-line) !important;
  box-shadow: none !important;
}

/* mobile nav active/hover */
.mobile-nav-links a:hover,
.mobile-nav-links a[aria-current="page"] { color: var(--gold) !important; }
.mobile-nav-links a[aria-current="page"]::after { background: var(--gold) !important; }

/* admin pill hover (was orange) */
.topbar .nav-cta .admin-btn:hover,
.topbar .nav-cta a[href*="admin"]:hover {
  border-color: var(--gold-line) !important;
  color: var(--gold) !important;
  box-shadow: none !important;
}

/* =========================================================
   2) Editorial vocabulary
   ========================================================= */
/* mono-gold eyebrow w/ leading hairline (overrides tokens.css .eyebrow) */
.eyebrow, .kicker-mono {
  font-family: var(--ff-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before, .kicker-mono::before {
  content: ""; width: 26px; height: 1px;
  background: currentColor; opacity: 0.55; flex-shrink: 0;
}
.eyebrow.center, .kicker-mono.center { justify-content: center; }

/* serif numerals — the gold "ledger" number */
.num-serif {
  font-family: var(--ff-serif); font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em; line-height: 1;
}

/* refined link w/ sliding underline */
.u-link { position: relative; color: var(--ink-2); transition: color .25s var(--ease-out); }
.u-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px;
  height: 1px; background: var(--gold); transition: right .35s var(--ease-out);
}
.u-link:hover { color: var(--ink); }
.u-link:hover::after { right: 0; }

/* chip / filter pill */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--ink-2); font-size: 13px; font-family: var(--ff-sans);
  cursor: pointer; white-space: nowrap;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip[aria-selected="true"], .chip.active {
  color: var(--gold); border-color: var(--gold-line); background: var(--gold-soft);
}

/* segmented tabs w/ animated underline */
.seg { display: flex; gap: 28px; border-bottom: 1px solid var(--border); }
.seg-tab {
  position: relative; padding: 0 0 14px;
  font-size: 15.5px; color: var(--ink-3);
  background: none; border: 0; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: color .2s var(--ease-out);
}
.seg-tab:hover { color: var(--ink-2); }
.seg-tab[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.seg-tab::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -1px;
  height: 2px; background: var(--gold); border-radius: 2px;
  transition: right .3s var(--ease-out), left .3s var(--ease-out);
}
.seg-tab[aria-selected="true"]::after { right: 0; }

/* refined editorial card — border/elevation shift, no bounce */
.card-e {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 28px; position: relative;
  transition: border-color .35s var(--ease-out), background .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.card-e:hover {
  border-color: var(--border-strong);
  background: var(--bg-3);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .85);
}

/* =========================================================
   3) Signal tape — hairline scrolling ticker (financial-native)
   ========================================================= */
.tape {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 13px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.tape-track {
  display: inline-flex; align-items: center;
  white-space: nowrap; will-change: transform;
  animation: tape-scroll 42s linear infinite;
}
.tape:hover .tape-track { animation-play-state: paused; }
.tape-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 26px;
  font-family: var(--ff-mono); font-size: 12.5px;
  letter-spacing: 0.03em; color: var(--ink-3);
}
.tape-item .sym { color: var(--ink-2); }
.tape-item .pos { color: var(--up); }
.tape-item .neg { color: var(--down); }
.tape-item .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: .55; }
@keyframes tape-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================
   4) Scroll-reveal motion system
   ========================================================= */
.reveal {
  opacity: 0; transform: translateY(var(--rev-y));
  transition: opacity var(--rev-dur) var(--ease-out), transform var(--rev-dur) var(--ease-out);
  transition-delay: calc(var(--si, 0) * 70ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* variant: clip-path mask wipe (headlines / images) */
.reveal[data-variant="mask"] {
  opacity: 1; transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease-emph);
  transition-delay: calc(var(--si, 0) * 70ms);
}
.reveal[data-variant="mask"].in { clip-path: inset(0 0 0 0); }

/* variant: hairline draw (dividers / rules) */
.reveal[data-variant="line"] {
  opacity: 1; transform-origin: left center; transform: scaleX(0);
  transition: transform .9s var(--ease-emph);
  transition-delay: calc(var(--si, 0) * 70ms);
}
.reveal[data-variant="line"].in { transform: scaleX(1); }

/* variant: soft focus settle */
.reveal[data-variant="soft"] { filter: blur(8px); }
.reveal[data-variant="soft"].in { filter: blur(0); }

/* line-by-line headline rise (JS wraps each <br>-split line in .line>span) */
.reveal-lines { opacity: 0; }              /* hide until JS splits → no pre-split flash */
.reveal-lines.in { opacity: 1; }
.reveal-lines .line { display: block; overflow: hidden; }
.reveal-lines .line > span {
  display: block; transform: translateY(112%);
  transition: transform .85s var(--ease-emph);
  transition-delay: calc(var(--li, 0) * 90ms);
  will-change: transform;
}
.reveal-lines.in .line > span { transform: none; }

/* magnetic — JS sets the translate; this smooths the return */
.magnetic { transition: transform .35s var(--ease-out); }

/* =========================================================
   5) Scroll engine surfaces — progress bar + parallax base
   ========================================================= */
.scroll-progress {
  position: fixed; top: 64px; left: 0; right: 0; height: 2px;
  z-index: 49; pointer-events: none; background: transparent;
}
.scroll-progress > i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
}
[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal[data-variant], .reveal-lines, .reveal-lines .line > span {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; filter: none !important; transition: none !important;
  }
  .tape-track { animation: none !important; }
  [data-parallax], [data-scrub] { transform: none !important; }
}