/* Website pages: shared 3D and animation styles (pairs with site-fx-core.js; founder 2026-10-09). Each page adds its own
   <page>-fx.css. Nothing here hides content without JS: rising cards are only hidden once site-fx-core.js has run
   (html.sfx-on), and printing shows everything. */

/* A turning 3D shape behind a header: canvas behind the content, fading out at the edges. */
.sfx-scene-host { position: relative; isolation: isolate; }
.sfx-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 40%, transparent 100%);
  opacity: 0; animation: sfx-fade 1.4s ease .2s forwards; }
@keyframes sfx-fade { to { opacity: 1; } }
.sfx-scene.sfx-wide { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

/* Cards that lean toward the pointer, with a glare. The extra class weight beats .reveal.is-visible. */
.sfx-tilt.sfx-tilt.sfx-tilt { position: relative; transform-style: preserve-3d; will-change: transform;
  transform: perspective(900px) rotateX(var(--sfx-rx, 0deg)) rotateY(var(--sfx-ry, 0deg)) translateY(var(--sfx-ty, 0px));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease, opacity .6s ease; }
.sfx-tilt.sfx-hot { --sfx-ty: -5px; transition: transform .1s linear, box-shadow .35s ease, border-color .35s ease, opacity .6s ease;
  box-shadow: 0 26px 50px -24px rgba(31, 123, 255, .55), 0 0 0 1px rgba(120, 170, 255, .14); }
.sfx-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(circle at var(--sfx-gx, 50%) var(--sfx-gy, 50%), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%); }
.sfx-hot > .sfx-glare { opacity: 1; }
:root[data-theme="light"] .sfx-glare { background: radial-gradient(circle at var(--sfx-gx, 50%) var(--sfx-gy, 50%), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 55%); }
:root[data-theme="light"] .sfx-tilt.sfx-hot { box-shadow: 0 26px 50px -24px rgba(91, 69, 255, .35), 0 0 0 1px rgba(91, 69, 255, .12); }

/* Rising in, one after another. */
html.sfx-on .sfx-rise { opacity: 0; transform: perspective(900px) translateY(30px) rotateX(-16deg) scale(.97); transform-origin: 50% 100%;
  transition: opacity .7s ease var(--sfx-d, 0ms), transform .85s cubic-bezier(.2, .8, .2, 1) var(--sfx-d, 0ms); }
html.sfx-on .sfx-rise.sfx-in { opacity: 1; transform: none; }
html.sfx-on .sfx-rise.sfx-done { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease; }

/* Small line icons drawn by the page files. */
.sfx-ic { width: 1em; height: 1em; flex: none; }

/* A number tile row (count-ups). */
.sfx-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 auto 22px; }
.sfx-stat { min-width: 132px; padding: 12px 18px; border: 1px solid var(--border); background: linear-gradient(160deg, rgba(56, 182, 255, .1), rgba(139, 92, 246, .06));
  text-align: center; transform: perspective(600px) rotateX(8deg); transition: transform .4s ease; }
.sfx-stat:hover { transform: perspective(600px) rotateX(0) translateY(-3px); }
.sfx-stat strong { display: block; font-family: var(--font-head); font-size: 1.55rem; line-height: 1.1; color: var(--text);
  background: linear-gradient(90deg, #38b6ff, #8b5cf6 55%, #34d399); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sfx-stat span { display: block; font-size: .8rem; color: var(--text-muted); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .sfx-scene { display: none; }
  .sfx-tilt.sfx-tilt.sfx-tilt { transform: none; }
  .sfx-stat, .sfx-stat:hover { transform: none; }
}
@media print {
  .sfx-scene, .sfx-glare { display: none !important; }
  html.sfx-on .sfx-rise { opacity: 1 !important; transform: none !important; }
}