/* Premium Scoreboard Flip Animation for Hero Title */
/* Scope styles to the hero H1 via .scoreboard-hero to avoid side-effects */

.scoreboard-hero {
  line-height: 1.12;
  letter-spacing: 0.01em;
  white-space: nowrap; /* keep the whole phrase on one line */
}

/* Plain brand accent for the word Big. */
.scoreboard-hero .sb-plain-brand {
  color: #10B981; /* brand green */
  font-weight: 800;
}

.scoreboard-hero .scoreboard-word {
  display: inline-block;
  position: relative;
  perspective: 900px; /* 3D depth */
  padding: .06em .34em; /* room for the frame */
  margin: 0 .08em; /* small gap between framed words */
  border: 2px solid #FACC15; /* amber-400 */
  border-radius: .4em;
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, .20) inset,
    0 4px 16px rgba(250, 204, 21, .24),
    0 1px 0 rgba(0,0,0,.25);
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(250, 204, 21, .12), rgba(0,0,0,0) 60%);
}

/* Subtle hinge line to enhance split-flap feel */
.scoreboard-hero .scoreboard-word::before {
  content: '';
  position: absolute;
  left: .36em; right: .36em;
  top: 50%; height: 1px;
  transform: translateY(-.5px);
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.22), rgba(255,255,255,.0));
  opacity: .35;
  pointer-events: none;
}

/* Outer glow ring */
.scoreboard-hero .scoreboard-word::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 22px rgba(250, 204, 21, .18);
  pointer-events: none;
}

.scoreboard-hero .sb-text {
  display: inline-block;
  transform-origin: 50% 100%; /* bottom center like split-flap */
  transform: rotateX(-90deg) translateZ(0);
  opacity: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  position: relative; /* ensure above hinge line */
  /* Luxury golden gradient text */
  background: linear-gradient(180deg, #ffffff 0%, #fde68a 28%, #f59e0b 62%, #fcd34d 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari support */
  /* Subtle depth glow */
  text-shadow: 0 1px 0 rgba(0,0,0,.25), 0 6px 18px rgba(250, 204, 21, .18);
  will-change: transform, opacity, background-position;
  /* animation variables with sensible defaults */
  --sb-dur: .9s;
  --sb-ease: cubic-bezier(.18,.84,.22,1);
  --sb-delay: 0s;
}

/* Triggered when in view */
.scoreboard-hero.is-visible .sb-text {
  animation: sbFlipIn var(--sb-dur) var(--sb-ease) var(--sb-delay) forwards;
}

/* Optional classy shimmer after reveal */
.scoreboard-hero.is-visible .sb-text.sb-shimmer {
  background-size: 200% 200%;
  animation: sbFlipIn var(--sb-dur) var(--sb-ease) var(--sb-delay) forwards, sbShimmer 2.2s ease .2s both;
}

/* Replayable flip when jackpot phase triggers */
.scoreboard-hero.is-visible .sb-text.flip-now {
  animation: none;
  transform: rotateX(-90deg);
  opacity: 0;
  /* instant restart without initial delay */
  animation: sbFlipIn var(--sb-dur) var(--sb-ease) 0s forwards, sbShimmer 2.2s ease .2s both;
}

@keyframes sbFlipIn {
  0%   { transform: rotateX(-90deg); opacity: 0; filter: saturate(.9) brightness(.95); }
  55%  { transform: rotateX(18deg);  opacity: 1; }
  70%  { transform: rotateX(-6deg);  opacity: 1; }
  100% { transform: rotateX(0deg);   opacity: 1; filter: none; }
}

@keyframes sbShimmer {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 120% 0%; }
  100% { background-position: 100% 0%; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scoreboard-hero .sb-text {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
}

/* Force-motion override: allow animations even when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scoreboard-hero[data-motion="force"] .sb-text {
    transform: rotateX(-90deg) !important;
    opacity: 0 !important;
    animation: sbFlipIn var(--sb-dur, .9s) var(--sb-ease, cubic-bezier(.18,.84,.22,1)) var(--sb-delay, 0s) forwards !important;
  }
  .scoreboard-hero[data-motion="force"].is-visible .sb-text.sb-shimmer {
    animation: sbFlipIn var(--sb-dur, .9s) var(--sb-ease, cubic-bezier(.18,.84,.22,1)) var(--sb-delay, 0s) forwards, sbShimmer 2.2s ease .2s both !important;
  }
  .scoreboard-hero[data-motion="force"].is-visible .sb-text.flip-now {
    animation: none !important;
    transform: rotateX(-90deg) !important;
    opacity: 0 !important;
    animation: sbFlipIn var(--sb-dur, .9s) var(--sb-ease, cubic-bezier(.18,.84,.22,1)) 0s forwards, sbShimmer 2.2s ease .2s both !important;
  }
}

/* -------------------------------------------------------
   Compatibility: support sample flip markup from demo page
   (.flip-loop > .flip-inner > .flip-face/.flip-back)
   Scoped under .scoreboard-hero to avoid global side-effects
-------------------------------------------------------- */
.scoreboard-hero .flip-loop {
  display: inline-block;
  perspective: 900px;
}
.scoreboard-hero .flip-inner {
  display: inline-block;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}
.scoreboard-hero .flip-face {
  display: inline-block;
  backface-visibility: hidden;
}
.scoreboard-hero .flip-back {
  position: absolute;
  left: 0; top: 0;
  transform: rotateX(180deg);
}

/* Auto-loop variant: add .flip-auto on an ancestor to enable CSS-only looping */
.scoreboard-hero.flip-auto .flip-inner,
.scoreboard-hero .flip-auto .flip-inner {
  animation: flipWord 6.5s cubic-bezier(.5,0,.2,1) infinite;
}

/* Stagger helpers from sample */
.scoreboard-hero .delay-0 .flip-inner { animation-delay: .2s; }
.scoreboard-hero .delay-1 .flip-inner { animation-delay: 1.1s; }
.scoreboard-hero .delay-2 .flip-inner { animation-delay: 2.1s; }

@keyframes flipWord {
  0%, 14%   { transform: rotateX(0); }
  18%, 30%  { transform: rotateX(-180deg); }
  36%, 100% { transform: rotateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .scoreboard-hero .flip-inner { animation: none !important; }
}

  /* -------------------------------------------------------
     Sample-only mode (data-flip="sample"): mirror the demo's flip
     Uses simple .word spans and rotateY flip with shimmer
  -------------------------------------------------------- */
  .scoreboard-hero[data-flip="sample"] {
    white-space: nowrap;
    perspective: 1000px;
  }
  .scoreboard-hero[data-flip="sample"] .word {
    display: inline-block;
    transform: rotateY(90deg);
    opacity: 0;
  }
   /* initial reveal handled by JS when hero becomes visible */

  @keyframes sampleFlipIn {
    0% { transform: rotateY(90deg); opacity: 0; }
    100% { transform: rotateY(0deg);  opacity: 1; }
  }