/* Centhead effects. Everything that moves, glows or shimmers lives in this file and in fx.js.
   To switch every effect off, remove the <link> to this file and the <script> for fx.js (see docs/ARCHITECTURE.md): the site stays complete.
   Rules for everything below: transforms and opacity only (the two deliberate exceptions are the slow gradient on a few headings and the
   hover glow, which only repaint while visible or hovered); nothing runs while the tab is hidden (fx.js sets html.fx-paused) or off screen;
   and prefers-reduced-motion switches all of it off or to a still equivalent (see the block at the end). */

/* ------------------------------------------------------------------ keyframes */
@keyframes fx-page-in { from { opacity: 0; } }
@keyframes fx-bar-in { from { transform: translateY(-100%); opacity: 0; } }
@keyframes fx-glow { 0%, 100% { opacity: 0.3; transform: scale(0.97); } 50% { opacity: 0.85; transform: scale(1.04); } }
@keyframes fx-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.22) rotate(14deg); } }
@keyframes fx-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(70px, 50px, 0) scale(1.12); } }
@keyframes fx-drift-b { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-80px, 40px, 0) scale(0.94); } }
@keyframes fx-drift-c { from { transform: translate3d(0, 0, 0) scale(0.95); } to { transform: translate3d(-50px, -60px, 0) scale(1.1); } }
@keyframes fx-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(0, -14px, 0) rotate(6deg); } }
@keyframes fx-spin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes fx-grad { to { background-position: 100% 0; } }
@keyframes fx-shimmer { 0%, 62% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes fx-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes fx-marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes fx-line-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes fx-pop-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
@keyframes fx-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.09); } 100% { transform: scale(1); } }
@keyframes fx-ring-out { from { opacity: 0.7; transform: scale(0.9); } to { opacity: 0; transform: scale(1.5); } }
@keyframes fx-burst { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx, 0), var(--dy, -30px)) scale(0.3); opacity: 0; } }

/* ------------------------------------------------------------------ always-on refinements (no motion) */
:focus-visible { outline: 2px solid var(--info); outline-offset: 3px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--info) 22%, transparent); }
.btn:focus-visible, .nav-plus:focus-visible { border-radius: 12px; }
.content .card { box-shadow: 0 1px 2px rgba(22, 24, 29, 0.04), 0 14px 30px -18px rgba(60, 40, 10, 0.22); }
:root[data-theme="dark"] .content .card { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 16px 32px -18px rgba(0, 0, 0, 0.7); }
.side a.item[aria-current="page"] { background: linear-gradient(90deg, var(--accent-bg), transparent 92%); box-shadow: inset 3px 0 0 var(--accent), 0 0 26px -8px var(--glow); }
.footer a, .nav-quiet, .section-head a, .audience .go, .small > a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 1px; }
.footer a:hover, .nav-quiet:hover, .section-head a:hover, .audience a:hover .go, .small > a:hover { text-decoration: none; background-size: 100% 1.5px; }
.nav-quiet[aria-current="page"] { text-decoration: none; background-size: 100% 1.5px; }
.skeleton { animation: none; position: relative; overflow: hidden; background: var(--surface-2); }
.skeleton-text { position: relative; overflow: hidden; }
.section-head h2::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 14px; border-radius: 4px; background: var(--grad-accent); transform-origin: left; }
.mega-card:nth-child(1) { --k: 0; } .mega-card:nth-child(2) { --k: 1; } .mega-card:nth-child(3) { --k: 2; } .mega-card:nth-child(4) { --k: 3; } .mega-card:nth-child(5) { --k: 4; } .mega-card:nth-child(6) { --k: 5; } .mega-card:nth-child(7) { --k: 6; } .mega-card:nth-child(8) { --k: 7; }
[data-parallax] { translate: 0 var(--py, 0px); }

/* ------------------------------------------------------------------ motion (only for visitors who have not asked for less) */
@media (prefers-reduced-motion: no-preference) {
  /* page transitions: the content fades in; links to other pages fade it out first (fx.js) */
  main, .footer { animation: fx-page-in 0.38s ease-out backwards; }
  html.fx-leaving main, html.fx-leaving .footer { opacity: 0; transition: opacity 0.16s ease-in; }

  /* scroll reveal with staggered children: fx.js numbers the siblings (--rd), site.js adds .in */
  .js .reveal { transition: opacity 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd, 0ms), transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd, 0ms); }
  .js .reveal.reveal-pop { transform: translateY(18px) scale(0.97); }
  .js .reveal.reveal-pop.in { transform: none; }
  .js .section-head h2::after { transform: scaleX(0); transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s; }
  .js .section-head.in h2::after { transform: scaleX(1); }

  /* announcement bar and header */
  .promo-bar { animation: fx-bar-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .promo-bar-ico { animation: fx-twinkle 3.6s ease-in-out infinite; }
  .nav-plus { isolation: isolate; }
  .nav-plus::after { content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: inherit; box-shadow: 0 0 22px 5px var(--glow); animation: fx-glow 3.4s ease-in-out infinite; pointer-events: none; }
  .nav-plus .plus-spark { animation: fx-twinkle 3.4s ease-in-out infinite; }
  .has-menu.open > .mega .mega-card { animation: fx-pop-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--k, 0) * 30ms + 40ms); }

  /* buttons: a soft sweep on hover for primary ones, a looping one on the marked call to action */
  .btn.primary, .btn.accent, .btn.shimmer { position: relative; overflow: hidden; isolation: isolate; }
  .btn.primary::after, .btn.accent::after, .btn.shimmer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%); transform: translateX(-130%); pointer-events: none; }
  .btn.primary:hover::after, .btn.accent:hover::after { transform: translateX(130%); transition: transform 0.7s ease; }
  .btn.shimmer::after { animation: fx-shimmer 5s ease-in-out infinite; }
  .btn:disabled::after { display: none; }

  /* gradient lettering: slow drift, only while the heading is on screen (fx.js adds .fx-live) */
  .gradient-text { background-size: 200% 100%; }
  .gradient-text.fx-live { animation: fx-grad 9s ease-in-out infinite alternate; }

  /* hero: aurora, floating motif, ledger lines that land one by one */
  .aurora i, .plus-glow i { will-change: transform; }
  .aurora .a1 { animation: fx-drift-a 24s ease-in-out infinite alternate; }
  .aurora .a2 { animation: fx-drift-b 28s ease-in-out infinite alternate; }
  .aurora .a3 { animation: fx-drift-c 32s ease-in-out infinite alternate; }
  .plus-glow .g1 { animation: fx-drift-a 20s ease-in-out infinite alternate; }
  .plus-glow .g2 { animation: fx-drift-b 26s ease-in-out infinite alternate; }
  .plus-glow .g3 { animation: fx-drift-c 22s ease-in-out infinite alternate; }
  .hero-motif circle, .hero-motif path { transform-box: fill-box; transform-origin: center; }
  .hero-motif .mc1 { animation: fx-float 7s ease-in-out infinite; } .hero-motif .mc2 { animation: fx-float 9s ease-in-out -2s infinite; }
  .hero-motif .mc3 { animation: fx-float 8s ease-in-out -4s infinite; } .hero-motif .mc4 { animation: fx-float 6s ease-in-out -1s infinite; }
  .js .hero-visual:not(.in) .ledger .ln, .js .hero-visual:not(.in) .ledger-foot { opacity: 0; }
  .hero-visual.in .ledger .ln, .hero-visual.in .ledger-foot { animation: fx-line-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .hero-visual.in .ledger .ln:nth-child(1) { animation-delay: 0.35s; } .hero-visual.in .ledger .ln:nth-child(2) { animation-delay: 0.65s; }
  .hero-visual.in .ledger .ln:nth-child(3) { animation-delay: 0.95s; } .hero-visual.in .ledger-foot { animation-delay: 1.25s; }

  /* animated gradient border: a large conic gradient turns behind an inner panel (transform only) */
  .gradient-border { border: 0; background: none; }
  .gradient-border::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -2; width: max(170%, 900px); aspect-ratio: 1; background: conic-gradient(from 0deg, var(--g-a), var(--g-b), var(--g-c), var(--g-d), var(--g-a)); animation: fx-spin 12s linear infinite; transform: translate(-50%, -50%); }
  .gradient-border::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 28px; background: var(--plus-bg); }
  .plus-card .fig-v { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

  /* games marquee */
  .marquee-set[data-dup] { display: flex; }
  .marquee-track { animation: fx-marquee 48s linear infinite; will-change: transform; }
  .marquee:hover .marquee-track { animation-play-state: paused; }

  /* skeletons: a sweep instead of a repainted background */
  .skeleton::after, .skeleton-text::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--line-strong) 70%, transparent), transparent); animation: fx-sweep 1.3s ease-in-out infinite; }

  /* the member app: balance pill, celebration, tab underline */
  .balance-chip { position: relative; }
  .balance-chip.fx-pulse { animation: fx-pulse 0.7s ease-out; }
  .balance-chip.fx-pulse::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--pos); animation: fx-ring-out 0.7s ease-out forwards; pointer-events: none; }
  .fx-dot { position: fixed; z-index: 200; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--c, var(--accent)); pointer-events: none; animation: fx-burst 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
  .seg button { position: relative; }
  .seg button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--grad-accent); transform: scaleX(0); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .seg button[aria-selected="true"]::after { transform: scaleX(1); }
  .tabbar a { position: relative; }
  .tabbar a::after { content: ""; position: absolute; left: 28%; right: 28%; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--grad-accent); transform: scaleX(0); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .tabbar a[aria-current="page"]::after { transform: scaleX(1); }
  .ring .fill { transition: stroke-dashoffset 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }

  /* everything pauses with the tab and off screen */
  html.fx-paused *, html.fx-paused *::before, html.fx-paused *::after { animation-play-state: paused !important; }
  .fx-offscreen, .fx-offscreen *, .fx-offscreen::before, .fx-offscreen::after { animation-play-state: paused !important; }
}

/* ------------------------------------------------------------------ hover glow that follows the pointer (fx.js sets --mx and --my on the card) */
@media (hover: hover) and (pointer: fine) {
  .card:hover, .mega-card:hover, .plus-calc:hover, .fig:hover, .dl-band:hover { background-image: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--glow-soft), transparent 72%); }
  .card:hover { border-color: color-mix(in srgb, var(--g-b) 28%, var(--line)); }
  .audience a.card:hover .go svg { transform: translateX(4px); }
  .audience .go svg { transition: transform 0.2s ease; }
}

/* ------------------------------------------------------------------ prefers-reduced-motion: everything off, or a still equivalent */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal, .js .reveal.reveal-pop { opacity: 1; transform: none; }
  .js .hero-visual:not(.in) .ledger .ln, .js .hero-visual:not(.in) .ledger-foot { opacity: 1; }
  .section-head h2::after { transform: none; }
  [data-parallax] { translate: none; }
  .gradient-border::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -2; width: max(170%, 900px); aspect-ratio: 1; background: conic-gradient(from 0deg, var(--g-a), var(--g-b), var(--g-c), var(--g-d), var(--g-a)); transform: translate(-50%, -50%) rotate(35deg); }
  .gradient-border { border: 0; background: none; }
  .gradient-border::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 28px; background: var(--plus-bg); }
  .marquee { overflow-x: auto; scrollbar-width: thin; }
  .marquee-set[data-dup] { display: none; }
  .btn::after, .nav-plus::after, .skeleton::after, .skeleton-text::after { display: none; }
  .fx-dot { display: none; }
  .seg button[aria-selected="true"]::after, .tabbar a[aria-current="page"]::after { transform: scaleX(1); }
  .gradient-text { background-size: 100% 100%; }
}