/* ===========================================================================
   Traclie — Motion & cinematic layer  ("luxury betting lounge")
   Slow, premium motion. Everything continuous is gated behind
   prefers-reduced-motion: no-preference so reduced-motion users get a calm,
   fully-visible, static site.
   =========================================================================== */

/* ---- Breathing aurora background (injected by motion.js) ----------------- */
.mo-aurora {
    position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
    background:
        radial-gradient(38vmax 30vmax at 18% 14%, rgba(143, 188, 166, 0.10), transparent 60%),
        radial-gradient(42vmax 34vmax at 84% 8%,  rgba(185, 190, 196, 0.07), transparent 62%),
        radial-gradient(46vmax 38vmax at 70% 96%, rgba(196, 122, 110, 0.08), transparent 60%);
    filter: blur(8px); opacity: 0.9;
}

/* ---- Chrome / glass sheen on accent cards -------------------------------- */
.card--accent::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(135deg, rgba(242, 232, 212, 0.06), transparent 38%);
    opacity: 0.8;
}

@media (prefers-reduced-motion: no-preference) {

    /* ---- Scroll reveal --------------------------------------------------- */
    .mo-reveal {
        opacity: 0; transform: translateY(22px);
        transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
        transition-delay: var(--mo-delay, 0ms); will-change: opacity, transform;
    }
    .mo-reveal.is-in { opacity: 1; transform: none; }

    /* ---- Pointer tilt (cards lift + reflect) ----------------------------- */
    .mo-tilt {
        transform: perspective(900px)
                   rotateX(var(--mo-rx, 0deg)) rotateY(var(--mo-ry, 0deg))
                   translateY(var(--mo-lift, 0px));
        transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease);
        transform-style: preserve-3d; will-change: transform;
    }
    .mo-tilt.is-hover { box-shadow: var(--sh-3); }
    /* moving glass glint follows the cursor */
    .mo-tilt .mo-glint {
        position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
        background: radial-gradient(220px 180px at var(--mo-gx, 50%) var(--mo-gy, 0%),
                    rgba(242, 232, 212, 0.16), transparent 60%);
        transition: opacity 0.32s var(--ease);
    }
    .mo-tilt.is-hover .mo-glint { opacity: 1; }

    /* ---- Bet button: slow chrome reflection sweep ------------------------ */
    .btn--bet { overflow: hidden; }
    .btn--bet::after {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(115deg, transparent 32%,
                    rgba(255, 255, 255, 0.5) 50%, transparent 68%);
        transform: translateX(-130%);
    }
    .btn--bet:hover::after { animation: mo-sweep 0.9s var(--ease); }
    @keyframes mo-sweep { to { transform: translateX(130%); } }

    /* ---- Live pill: keep the existing pulse, add soft glow --------------- */
    .pill--live { box-shadow: 0 0 0 0 rgba(127, 179, 156, 0.5); animation: mo-liveglow 2.4s var(--ease) infinite; }
    @keyframes mo-liveglow {
        0%, 100% { box-shadow: 0 0 0 0 rgba(127, 179, 156, 0.45); }
        50%      { box-shadow: 0 0 14px 2px rgba(127, 179, 156, 0.0); }
    }

    /* ---- Odds chip price flash on change (toggled by JS) ------------------ */
    .odds-chip.mo-flash { animation: mo-flash 0.6s var(--ease); }
    @keyframes mo-flash {
        0% { background: var(--accent-soft); }
        100% { background: var(--bg-150); }
    }

    /* ---- Cinematic hero atmosphere --------------------------------------- */
    .hero__beam {
        position: absolute; top: -40%; right: -10%; width: 70%; height: 180%;
        background: conic-gradient(from 210deg at 50% 50%,
                    transparent 0deg, rgba(143, 188, 166, 0.10) 24deg, transparent 60deg);
        filter: blur(14px); transform: rotate(8deg);
        animation: mo-beam 16s var(--ease) infinite alternate;
    }
    @keyframes mo-beam { from { opacity: 0.5; transform: rotate(6deg) translateY(0); }
                          to   { opacity: 0.9; transform: rotate(11deg) translateY(-18px); } }
    .hero__smoke {
        position: absolute; inset: 0;
        background:
            radial-gradient(60% 50% at 20% 90%, rgba(242, 232, 212, 0.05), transparent 60%),
            radial-gradient(50% 40% at 90% 20%, rgba(185, 190, 196, 0.06), transparent 60%);
        animation: mo-drift 22s var(--ease) infinite alternate;
    }
    @keyframes mo-drift { from { transform: translate3d(0,0,0) scale(1); }
                          to   { transform: translate3d(-3%, 2%, 0) scale(1.05); } }
}

/* ---- Hero layered atmosphere (structure, always present) ----------------- */
.hero { isolation: isolate; }
.hero__atmos { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.hero__chrome {
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(185, 190, 196, 0.08) 50%, transparent 60%);
    mix-blend-mode: screen; opacity: 0.7;
}
/* parallax offset vars set by JS (no transition needed for scroll-linked) */
.hero__atmos { transform: translate3d(var(--mo-px, 0px), var(--mo-py, 0px), 0); }