/* ===========================================================================
   TABtouch — FX layer · PULSE
   Aurora hero, live odds drift, micro-interactions, countdowns, ticker.
   GPU-friendly; fully degrades under prefers-reduced-motion.
   =========================================================================== */

/* ---- Keyframes ---- */
@keyframes aurora     { 0% { transform: translate3d(-6%,-4%,0) rotate(0deg); } 50% { transform: translate3d(6%,4%,0) rotate(8deg); } 100% { transform: translate3d(-6%,-4%,0) rotate(0deg); } }
@keyframes sheen      { 0% { transform: translateX(-120%) skewX(-18deg); } 60%,100% { transform: translateX(220%) skewX(-18deg); } }
@keyframes pulsering  { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes blink      { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes badgebump  { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes driftpop   { 0% { transform: translateY(3px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes tickerflow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes floaty     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---- Gradient display text ---- */
.hero-band__title em, .tile__title em, .grad-text {
    background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Aurora hero ---- */
.hero-band { position: relative; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(120% 140% at 8% -10%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 55%),
        radial-gradient(110% 130% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 52%),
        linear-gradient(180deg, var(--bg-surface), var(--bg-sunk));
}
.hero-band::before {
    content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
    background:
        radial-gradient(38% 38% at 30% 35%, color-mix(in srgb, var(--brand) 42%, transparent), transparent 70%),
        radial-gradient(34% 34% at 72% 60%, color-mix(in srgb, var(--accent) 36%, transparent), transparent 70%),
        radial-gradient(30% 30% at 55% 20%, color-mix(in srgb, #7b6bff 40%, transparent), transparent 70%);
    filter: blur(46px) saturate(120%); opacity: .65;
    animation: aurora 18s var(--ease) infinite;
}
.hero-band::after { /* fine grid texture */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background-image: linear-gradient(color-mix(in srgb, var(--brand) 8%, transparent) 1px, transparent 1px),
                      linear-gradient(90deg, color-mix(in srgb, var(--brand) 8%, transparent) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(120% 100% at 20% 0%, #000 30%, transparent 80%);
            mask-image: radial-gradient(120% 100% at 20% 0%, #000 30%, transparent 80%);
}
.hero-band__kicker { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--brand) 14%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); color: var(--brand-2); }
.hero-band__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: blink 1.6s infinite; }

/* ---- Section title with accent bar ---- */
.section__title { position: relative; padding-left: 14px; }
.section__title::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 4px; border-radius: 4px; background: var(--grad-brand); }

/* ---- Card lift on hover ---- */
.panel, .racecard, .promo-card, .step, .faq__item, .acct-tile, .contact-tile, .catbox { transition: transform var(--t-base) var(--ease), border-color var(--t-base), box-shadow var(--t-base); }
.racecard:hover, .promo-card:hover, .step:hover, .acct-tile:hover, .contact-tile:hover { transform: translateY(-3px); border-color: var(--brand-line); box-shadow: var(--sh-2); }

/* ---- Buttons: sheen sweep + glow ---- */
.btn--bet, .btn--primary, .btn--chrome { position: relative; overflow: hidden; }
.btn--bet::after, .btn--primary::after, .btn--chrome::after {
    content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-120%) skewX(-18deg); pointer-events: none;
}
.btn--bet:hover::after, .btn--primary:hover::after, .btn--chrome:hover::after { animation: sheen .9s var(--ease); }
.btn--bet:hover, .btn--primary:hover { box-shadow: var(--glow-brand); }
.btn--lg { letter-spacing: .01em; }

/* ---- Odds chip: price drift ▲▼ + flash ---- */
.odds-chip { position: relative; }
.odds-chip__drift { position: absolute; top: 5px; right: 6px; font-family: var(--font-mono); font-size: .62rem; line-height: 1; animation: driftpop var(--t-base) var(--ease); }
.odds-chip--shorten .odds-chip__drift { color: var(--win); }
.odds-chip--drift   .odds-chip__drift { color: var(--loss); }
.odds-chip--shorten { border-color: color-mix(in srgb, var(--win) 36%, var(--bg-line)); }
.odds-chip--drift   { border-color: color-mix(in srgb, var(--loss) 36%, var(--bg-line)); }
.odds-chip.flash { animation: chipflash .5s var(--ease); }
.odds-chip:hover { transform: translateY(-1px); }

/* ---- Live dot ---- */
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: blink 1.4s infinite; }

/* ---- Racecard meta row ---- */
.racecard__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-soft); }
.racecard__meta .racecard__next { color: var(--brand-2); }
.racecard__head { gap: var(--sp-3); }

/* ---- Next-to-jump ticker ---- */
.ticker { position: relative; overflow: hidden; border: 1px solid var(--bg-line-2); border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--bg-surface), var(--bg-raised)); margin-top: var(--sp-5); }
.ticker__label { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
    padding: 0 var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em;
    color: var(--brand-ink); background: var(--grad-brand); border-radius: var(--r-pill) 0 0 var(--r-pill); }
.ticker__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; }
.ticker__mask { overflow: hidden; padding: 10px 0 10px 132px; }
.ticker__track { display: inline-flex; gap: var(--sp-6); white-space: nowrap; will-change: transform; animation: tickerflow 32s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { font-size: var(--fs-sm); color: var(--fg); }
.ticker__item b { color: var(--fg-strong); }
.ticker__item .t-when { font-family: var(--font-mono); color: var(--brand-2); margin-left: 6px; }

/* ---- Countdown pill ---- */
.countdown { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
    padding: 3px 9px; border-radius: var(--r-pill); color: var(--brand-2);
    background: color-mix(in srgb, var(--brand) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); }
.countdown::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-2); }
.countdown.is-soon { color: var(--accent-2); background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 36%, transparent); }
.countdown.is-soon::before { background: var(--accent); animation: pulsering 1.2s infinite; }
.countdown.is-off { color: var(--fg-soft); background: transparent; border-color: var(--bg-line); }
.countdown.is-off::before { background: var(--fg-faint); }

/* ---- Bet-slip polish ---- */
.slip-card__count.bump { animation: badgebump .4s var(--ease); }
.slip-handle { position: relative; overflow: hidden; }
.slip-handle::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transform: translateX(-120%) skewX(-18deg); }
.betslip.is-open .slip-handle::after { animation: sheen 1.1s var(--ease); }
.slip-line { animation: driftpop var(--t-base) var(--ease); }

/* ---- Staggered reveal ---- */
[data-reveal] { transition-delay: calc(var(--i, 0) * 70ms); }

/* ---- Trust strip / chips shimmer on focus ---- */
.trust-strip__item { position: relative; }

/* ---- Refined focus ring ---- */
:focus-visible { outline: none !important; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* ---- Custom scrollbar ---- */
* { scrollbar-width: thin; scrollbar-color: var(--bg-line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--bg-line); border-radius: var(--r-pill); border: 2px solid var(--bg-base); }
*::-webkit-scrollbar-thumb:hover { background: var(--brand-line); }

@media (prefers-reduced-motion: reduce) {
    .hero-band::before, .live-dot::before, .hero-band__kicker::before, .ticker__track,
    .countdown.is-soon::before, .slip-card__count.bump, .btn--bet:hover::after,
    .btn--primary:hover::after, .btn--chrome:hover::after, .betslip.is-open .slip-handle::after { animation: none !important; }
    .racecard:hover, .promo-card:hover, .step:hover, .acct-tile:hover, .contact-tile:hover, .odds-chip:hover { transform: none; }
    [data-reveal] { transition-delay: 0ms !important; }
}