/* Seven Stags motion layer — loaded last on every page.
   One orchestrated moment (the homepage hero), live market detail, and motion that answers the pointer.
   Decorative motion is switched off under prefers-reduced-motion. */

/* cross-page transitions (Chromium and Safari; other browsers navigate normally) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ss-page-out .2s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: ss-page-in .45s cubic-bezier(.16, 1, .3, 1) both; }
.site-header { view-transition-name: ss-header; }
@keyframes ss-page-out { to { opacity: 0; } }
@keyframes ss-page-in { from { opacity: 0; transform: translateY(10px); } }

:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

/* reading progress: a gold hairline along the bottom of the header */
.site-header { position: relative; }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--stag-gold), var(--champagne)); transform: scaleX(var(--progress, 0)); transform-origin: left; pointer-events: none; }

/* pointer spotlight on cards: a soft gold light plus a brighter edge that follows the cursor */
.spot { position: relative; isolation: isolate; }
.spot::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .45s ease; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(201, 164, 92, .13), transparent 65%); }
.spot::before { content: ""; position: absolute; inset: -1px; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .45s ease; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(229, 201, 128, .8), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.spot:hover::after, .spot:hover::before { opacity: 1; }

/* a slow sheen across gold buttons on hover */
@media (hover: hover) {
  .button-gold, .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
  .button-gold::after, .btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 248, 230, .45) 50%, transparent 70%); translate: -110% 0; transition: translate .8s cubic-bezier(.16, 1, .3, 1); }
  .button-gold:hover::after, .btn-primary:hover::after { translate: 110% 0; }
}

/* price ticks: briefly colour a price in the direction it moved, then settle */
[data-q], .tk .price { transition: color .45s ease; }
.tick-up { color: var(--positive) !important; transition: none; }
.tick-down { color: var(--negative) !important; transition: none; }
.live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--stag-gold); vertical-align: 1px; animation: ss-pulse 2.4s ease-out infinite; }
@keyframes ss-pulse { 0% { box-shadow: 0 0 0 0 rgba(201, 164, 92, .6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(201, 164, 92, 0); } }

/* inner page banners: the gold rule draws in, the grid drifts */
.page-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 2; background: linear-gradient(90deg, var(--stag-gold), rgba(201, 164, 92, .25) 45%, transparent 80%); transform-origin: left; animation: ss-draw 1.6s cubic-bezier(.16, 1, .3, 1) .15s both; }
.page-hero::after { animation: ss-grid-drift 70s linear infinite; }
@keyframes ss-draw { from { transform: scaleX(0); } }
@keyframes ss-grid-drift { to { background-position: 64px 64px; } }

.final-glow { animation: ss-breathe 7s ease-in-out infinite alternate; }
@keyframes ss-breathe { from { opacity: .6; } to { opacity: 1; } }

/* ── homepage hero: the one orchestrated entrance ── */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 6; background: linear-gradient(90deg, transparent, var(--stag-gold) 25%, var(--champagne) 50%, var(--stag-gold) 75%, transparent); transition: transform 2s cubic-bezier(.16, 1, .3, 1) 1s; }

@media (prefers-reduced-motion: no-preference) {
  .js-motion .hero-image { transition: opacity 1.4s ease, scale 3.4s cubic-bezier(.16, 1, .3, 1); will-change: scale, translate; }
  .js-motion .hero:not(.is-ready) .hero-image { opacity: 0; scale: 1.12; }

  .js-motion .hero .eyebrow { transition: opacity .8s ease .35s; }
  .js-motion .hero .eyebrow i { transform-origin: left; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) .45s; }
  .js-motion .hero:not(.is-ready) .eyebrow { opacity: 0; }
  .js-motion .hero:not(.is-ready) .eyebrow i { transform: scaleX(0); }

  .js-motion .hero h1 .line { overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
  .js-motion .hero h1 .line > span { display: inline-block; transition: translate 1.25s cubic-bezier(.16, 1, .3, 1) .55s; }
  .js-motion .hero h1 .line + .line > span { transition-delay: .68s; }
  .js-motion .hero:not(.is-ready) h1 .line > span { translate: 0 110%; }

  .js-motion .hero-content > p, .js-motion .hero-actions, .js-motion .hero-trust { transition: opacity .9s ease, translate 1.1s cubic-bezier(.16, 1, .3, 1); }
  .js-motion .hero-content > p { transition-delay: 1s; }
  .js-motion .hero-actions { transition-delay: 1.15s; }
  .js-motion .hero-trust { transition-delay: 1.3s; }
  .js-motion .hero:not(.is-ready) .hero-content > p,
  .js-motion .hero:not(.is-ready) .hero-actions,
  .js-motion .hero:not(.is-ready) .hero-trust { opacity: 0; translate: 0 16px; }

  .js-motion .quote-card { transition: opacity 1s ease 1.3s, translate 1.3s cubic-bezier(.16, 1, .3, 1) 1.3s; }
  .js-motion .quote-row { transition: opacity .6s ease 1.65s, translate .7s cubic-bezier(.16, 1, .3, 1) 1.65s; }
  .js-motion .quote-row + .quote-row { transition-delay: 1.77s; }
  .js-motion .quote-row + .quote-row + .quote-row { transition-delay: 1.89s; }
  .js-motion .hero:not(.is-ready) .quote-card { opacity: 0; translate: 32px 0; }
  .js-motion .hero:not(.is-ready) .quote-row { opacity: 0; translate: 0 8px; }

  .js-motion .hero:not(.is-ready)::after { transform: scaleX(0); }

  /* the platform chart draws itself the first time it scrolls into view */
  .chart .line { stroke-dasharray: 1; transition: stroke-dashoffset 1.9s cubic-bezier(.65, 0, .35, 1); }
  .chart .area { transition: opacity 1.2s ease 1s; }
  .chart-dot, .chart-level { transition: opacity .6s ease 1.7s; }
  .js-motion .terminal:not(.drawn) .chart .line { stroke-dashoffset: 1; }
  .js-motion .terminal:not(.drawn) .chart .area,
  .js-motion .terminal:not(.drawn) .chart-dot,
  .js-motion .terminal:not(.drawn) .chart-level { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .live-dot, .page-hero::before, .page-hero::after, .final-glow { animation: none; }
  .spot::before, .spot::after { transition: none; }
  .tick-up, .tick-down { color: inherit !important; }
}