/* =========================================================
   BETTORTOKEN VISUAL-NEXT LAYER v1
   Additive enhancement pack. Safe to remove: nothing else
   depends on this file. Everything degrades gracefully.
   =========================================================
   Contents:
   1. Cross-page view transitions
   2. Scroll progress hairline
   3. Hero probability-field canvas (WebGL mount point)
   4. Hero typographic refinements (em shimmer)
   5. Glass elevation + tilt for hero data card
   6. Primary button sheen + magnetic transform hooks
   7. Reduced-motion guards
   ========================================================= */

/* ---------- 1. View transitions (cross-fade between pages) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: 0.22s; }
  ::view-transition-new(root) { animation-duration: 0.28s; }
}

/* ---------- 2. Scroll progress hairline (under the ticker) ---------- */
.bt-scroll-progress {
  position: fixed;
  top: calc(36px + env(safe-area-inset-top, 0px));
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 201;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(var(--bt-scroll, 0));
  background: linear-gradient(90deg, var(--bt-gold, #B38E5D), var(--bt-gold-champagne, #E8C97A));
  opacity: 0.9;
  will-change: transform;
}

/* ---------- 3. Hero probability field ---------- */
.bt-field-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s ease 0.2s;
}
.bt-field-canvas.is-live { opacity: 1; }

/* When the WebGL field is live, quiet the static hex layer so the
   two ambient systems don't compete. */
.bt-home-hero.bt-field-active .bt-hero-ambient { opacity: 0.045 !important; }

/* Keep hero content above the field (bt-ux-upgrade already sets
   .bt-container z-index:1; this is belt-and-suspenders). */
.bt-home-hero > .bt-container { position: relative; z-index: 1; }

/* ---------- 4. Hero typographic refinement ---------- */
/* Emphasis words in the hero headline get a slow champagne shimmer.
   One animated element; everything around it stays still. */
.bt-home-hero .bt-home-hero-title em {
  font-style: italic;
  background: linear-gradient(
    100deg,
    var(--bt-gold-champagne, #E8C97A) 0%,
    #FFF3D6 28%,
    var(--bt-gold-champagne, #E8C97A) 55%,
    var(--bt-gold, #B38E5D) 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--bt-gold-champagne, #E8C97A); /* fallback if clip unsupported */
}
@media (prefers-reduced-motion: no-preference) {
  .bt-home-hero .bt-home-hero-title em {
    animation: bt-shimmer 9s ease-in-out infinite;
  }
}
@keyframes bt-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---------- 5. Hero data card: glass elevation + pointer tilt ---------- */
.bt-home-hero-data {
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  background:
    linear-gradient(155deg, rgba(255,255,255,0.075), rgba(255,255,255,0.028)) !important;
  border: 1px solid rgba(232,201,122,0.16) !important;
  box-shadow:
    0 24px 60px -24px rgba(1,11,32,0.75),
    inset 0 1px 0 rgba(255,255,255,0.10);
  transform:
    perspective(1100px)
    rotateX(var(--bt-tilt-x, 0deg))
    rotateY(var(--bt-tilt-y, 0deg));
  transition: transform 0.18s ease-out, box-shadow 0.3s ease;
  will-change: transform;
}

/* ---------- 6. Primary button: sheen sweep + magnetic hooks ---------- */
.bt-btn-primary {
  position: relative;
  overflow: hidden;
  transform: translate(var(--bt-mag-x, 0px), var(--bt-mag-y, 0px));
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s ease, background 0.25s ease;
  will-change: transform;
}
.bt-btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0.22) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .bt-btn-primary:hover::after,
  .bt-btn-primary:focus-visible::after {
    animation: bt-sheen 0.85s ease forwards;
  }
}
@keyframes bt-sheen {
  to { left: 160%; }
}

/* ---------- 7. Count-up numbers: settle without layout shift ---------- */
[data-count-to] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ---------- Reduced-motion global guard ---------- */
@media (prefers-reduced-motion: reduce) {
  .bt-field-canvas { transition: none; }
  .bt-btn-primary { transform: none !important; }
  .bt-home-hero-data { transform: none !important; }
}