/* =========================================================================
 * ab.css — ONLY things Tailwind can't do.
 *
 * Use Tailwind utilities for layout, padding, borders, colors, sizing,
 * basic shadows, hover states. This file is just:
 *   - CSS variables for primary/secondary RGB triplets
 *   - Animated mesh blobs + grain
 *   - Per-word rise headline + clamp() font-size
 *   - Eyebrow pulsing dot animation
 *   - Card/CTA rise-in animation
 *   - CTA gradient shine animation
 *   - Avatar gradient halo (::before)
 *   - Radar pulse + timer-ring SVG bits + match-found burst
 *
 * If you find yourself adding generic padding/bg/border rules here, STOP
 * and use Tailwind instead.
 * ========================================================================= */

:root {
    --ab-p: var(--color-primary, 221 174 47);
    --ab-s: var(--color-secondary, 207 87 36);
    --ab-bg-dark: var(--color-bg-dark, 22 25 32);
}

/* ---- animated background ----------------------------------------------- */

.ab-mesh {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
    will-change: transform, opacity;
}
.ab-mesh-a {
    width: 70vw; height: 70vw;
    top: -15vw; left: -10vw;
    background: radial-gradient(circle, rgb(var(--ab-p) / 0.75), rgb(var(--ab-p) / 0) 70%);
    animation: ab-drift-a 18s ease-in-out infinite;
}
.ab-mesh-b {
    width: 80vw; height: 80vw;
    bottom: -25vw; right: -20vw;
    background: radial-gradient(circle, rgb(var(--ab-s) / 0.8), rgb(var(--ab-s) / 0) 70%);
    animation: ab-drift-b 22s ease-in-out infinite;
}
.ab-mesh-c {
    width: 60vw; height: 60vw;
    top: 30%; left: 20%;
    background: radial-gradient(circle, rgb(var(--ab-p) / 0.35), rgb(var(--ab-s) / 0.18) 50%, transparent 70%);
    animation: ab-drift-c 26s ease-in-out infinite;
}
@keyframes ab-drift-a {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50%     { transform: translate3d(8vw,6vw,0) scale(1.12); }
}
@keyframes ab-drift-b {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50%     { transform: translate3d(-10vw,-8vw,0) scale(0.9); }
}
@keyframes ab-drift-c {
    0%,100% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
    50%     { transform: translate3d(4vw,-6vw,0) scale(1.08) rotate(40deg); }
}
.ab-grain {
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: 0.08;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
}

/* ---- pulsing dot inside the eyebrow ----------------------------------- */

.ab-eyebrow-dot {
    background: rgb(var(--ab-p));
    box-shadow: 0 0 10px rgb(var(--ab-p) / 0.8);
    animation: ab-eyebrow-pulse 1.6s ease-in-out infinite;
}
@keyframes ab-eyebrow-pulse {
    0%,100% { opacity: 0.6; transform: scale(1); }
    50%     { opacity: 1;   transform: scale(1.4); }
}

/* ---- headline: clamp() font-size + per-word rise ---------------------- */

.ab-headline {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: clamp(1.875rem, 7.5vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
}
.ab-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: 0 0.05em;
    margin-right: 0.05em;
}
.ab-word > span {
    display: inline-block;
    transform: translateY(110%);
    animation: ab-word-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(0.15s + var(--w, 0) * 0.08s);
}
.ab-word-accent > span {
    background: linear-gradient(105deg, rgb(var(--ab-p)), rgb(var(--ab-s)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@keyframes ab-word-rise { to { transform: translateY(0); } }

/* ---- generic rise-in (used by .ab-rise) ------------------------------- */

.ab-rise {
    opacity: 0;
    transform: translateY(10px);
    animation: ab-rise 0.65s ease forwards;
}
@keyframes ab-rise { to { opacity: 1; transform: translateY(0); } }

/* ---- primary CTA: gradient + shine ------------------------------------ */

.ab-cta {
    background: linear-gradient(105deg, rgb(var(--ab-p)), rgb(var(--ab-s)));
    box-shadow:
        0 18px 36px -10px rgb(var(--ab-p) / 0.55),
        0 6px 14px -6px rgb(var(--ab-s) / 0.4),
        inset 0 1px 0 rgb(255 255 255 / 0.22);
}
.ab-cta-shine {
    position: absolute;
    top: 0; left: -40%;
    width: 35%; height: 100%;
    background: linear-gradient(115deg, transparent, rgb(255 255 255 / 0.32), transparent);
    animation: ab-cta-shine 3.2s ease-in-out infinite;
    animation-delay: 1.4s;
    pointer-events: none;
}
@keyframes ab-cta-shine {
    0%   { left: -40%; }
    45%  { left: 130%; }
    100% { left: 130%; }
}

/* ---- input focus glow (uses primary RGB) ------------------------------ */

.ab-input:focus {
    border-color: rgb(var(--ab-p) / 0.6);
    box-shadow: 0 0 0 4px rgb(var(--ab-p) / 0.12), 0 0 24px -6px rgb(var(--ab-p) / 0.4);
    outline: none;
}

/* ---- chip active state (primary gradient) ----------------------------- */

.ab-chip-active {
    background: linear-gradient(105deg, rgb(var(--ab-p) / 0.25), rgb(var(--ab-s) / 0.18)) !important;
    border-color: rgb(var(--ab-p) / 0.55) !important;
    color: white !important;
    box-shadow: 0 0 16px -4px rgb(var(--ab-p) / 0.5);
}

/* ---- card glow variant (primary gradient + glow shadow) --------------- */

.ab-card-glow {
    background: linear-gradient(180deg, rgb(var(--ab-p) / 0.10), rgb(var(--ab-s) / 0.04)) !important;
    border-color: rgb(var(--ab-p) / 0.18) !important;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.08),
        0 24px 50px -18px rgb(var(--ab-p) / 0.35) !important;
}

/* =========================================================================
 * P2P-specific atoms — only stuff Tailwind can't express
 * ========================================================================= */

/* Avatar gradient halo via ::before. Tailwind has no clean way to put a
 * gradient ring on a circular element with a separate inner background. */
.p2p-avatar { position: relative; }
.p2p-avatar::before {
    content: '';
    position: absolute; inset: -3px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgb(var(--ab-p)), rgb(var(--ab-s)));
    opacity: 0.65;
    z-index: 0;
}
.p2p-avatar-winner::before {
    background: linear-gradient(135deg, #fbbf24, #f59e0b 50%, #d97706);
    opacity: 1;
    box-shadow: 0 0 20px rgb(251 191 36 / 0.55);
}
.p2p-avatar-loser::before { opacity: 0.25; }

/* "VS" badge — primary glow + text-shadow are the only non-Tailwind bits */
.p2p-vs {
    color: white;
    text-shadow: 0 0 12px rgb(var(--ab-p) / 0.8);
    box-shadow:
        0 0 24px -4px rgb(var(--ab-p) / 0.55),
        inset 0 1px 0 rgb(255 255 255 / 0.1);
    border-color: rgb(var(--ab-p) / 0.4) !important;
}

/* Wager pill — primary gradient bg + glow text-shadow */
.p2p-wager-pill {
    background: linear-gradient(135deg, rgb(var(--ab-p) / 0.15), rgb(var(--ab-s) / 0.08));
    border-color: rgb(var(--ab-p) / 0.3) !important;
    text-shadow: 0 0 12px rgb(var(--ab-p) / 0.4);
}

/* Radar pulse rings + breathing core */
.p2p-radar-pulse {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid rgb(var(--ab-p) / 0.55);
    opacity: 0;
    animation: p2p-radar-ping 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
.p2p-radar-pulse:nth-child(2) { animation-delay: 0.8s; }
.p2p-radar-pulse:nth-child(3) { animation-delay: 1.6s; }
.p2p-radar-core {
    background: linear-gradient(135deg, rgb(var(--ab-p) / 0.35), rgb(var(--ab-s) / 0.15));
    border: 1px solid rgb(var(--ab-p) / 0.45);
    box-shadow:
        0 0 32px -4px rgb(var(--ab-p) / 0.65),
        inset 0 1px 0 rgb(255 255 255 / 0.18);
    animation: p2p-radar-breathe 2.4s ease-in-out infinite;
}
@keyframes p2p-radar-ping {
    0%   { transform: scale(0.6); opacity: 0.8; }
    80%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}
@keyframes p2p-radar-breathe {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.06); }
}

/* Timer ring — needs SVG stroke + gradient via url(#) */
.p2p-timer-ring-track {
    fill: none;
    stroke: rgb(255 255 255 / 0.08);
    stroke-width: 6;
}
.p2p-timer-ring-progress {
    fill: none;
    stroke: url(#p2p-timer-grad);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}

/* Match-found modal entrance + outcome winner glow */
.p2p-fade-in {
    animation: ab-rise 0.35s ease forwards;
    opacity: 0;
}
.p2p-card-winner {
    background: linear-gradient(180deg, rgb(251 191 36 / 0.18), rgb(245 158 11 / 0.04)) !important;
    border-color: rgb(251 191 36 / 0.4) !important;
    box-shadow: 0 0 30px -8px rgb(251 191 36 / 0.4) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ab-mesh, .ab-cta-shine, .ab-eyebrow-dot,
    .p2p-radar-pulse, .p2p-radar-core {
        animation: none !important;
    }
    .ab-word > span, .ab-rise, .p2p-fade-in {
        animation-duration: 0.3s !important;
        animation-delay: 0s !important;
    }
}