/* ================================================================
   PROJECT RACER SIM HUB — OFFICIAL MOTION SYSTEM
   pr-motion.css — Version 1.0

   Motion Identity:  Authoritative · Precise · Institutional
   Reference:        FIA timing displays, SRO official interfaces,
                     ACO race control panels, F1 broadcast graphics

   NOT a reference:  Esport platforms, military HUDs,
                     shooter game UIs, arcade aesthetics

   Core Principle:
   Every motion communicates STATE, HIERARCHY, or SEQUENCE.
   Motion here is consequence — not decoration.

   "White space is authority. Motion is consequence."
   ================================================================ */


/* ── MOTION TOKENS ──────────────────────────────────────────────
   The atomic building blocks of all motion on this platform.
   Every duration and easing curve has a name and a reason.
   ────────────────────────────────────────────────────────────── */
:root {
    /* Duration scale */
    --dur-micro:        120ms;  /* Hover bg, focus ring — immediate feedback */
    --dur-swift:        220ms;  /* Buttons, badges, icon states */
    --dur-standard:     340ms;  /* Cards, links, dropdowns, nav */
    --dur-deliberate:   520ms;  /* Sections, modals, panels */
    --dur-grand:        800ms;  /* Hero, major stat reveals, page entrances */
    --dur-authoritative: 1100ms; /* Highest-level entrance moments */

    /* Easing library */
    /* Decisive: fast start → controlled stop. For entrances.
       Like a steward's ruling — no hesitation, clear arrival. */
    --ease-decisive:    cubic-bezier(0.0, 0.0, 0.2, 1.0);

    /* Considered: balanced travel. For sustained transforms.
       Like a car carrying full fuel — deliberate, measured. */
    --ease-considered:  cubic-bezier(0.4, 0.0, 0.2, 1.0);

    /* Retreat: clean departure. For exits.
       Brief acknowledgement then gone — no lingering. */
    --ease-retreat:     cubic-bezier(0.4, 0.0, 1.0, 1.0);

    /* Fine: precision micro-interactions.
       Used for state changes where subtlety is paramount. */
    --ease-fine:        cubic-bezier(0.25, 0.1, 0.25, 1.0);

    /* PROHIBITED: spring/bounce curves on primary UI.
       cubic-bezier(0.34, 1.56, 0.64, 1) — the hover-lift default.
       Overridden below. Playful physics do not belong here. */
}


/* ── GLOBAL TRANSITION BASELINE ─────────────────────────────────
   All interactive elements inherit micro-duration as a base.
   Specific components override this with their own transitions.
   ────────────────────────────────────────────────────────────── */
button,
a,
input,
select,
textarea,
[role="button"],
[role="tab"],
[role="menuitem"],
[role="option"] {
    transition-property: color, background-color, border-color,
                         box-shadow, opacity;
    transition-duration: var(--dur-micro);
    transition-timing-function: var(--ease-decisive);
}


/* ── NAVBAR ──────────────────────────────────────────────────────
   On scroll: the navbar transitions from translucent to solid.
   JS adds .scrolled class via IntersectionObserver on hero sentinel.
   ────────────────────────────────────────────────────────────── */
#main-nav {
    transition:
        background-color  var(--dur-standard) var(--ease-considered),
        border-color      var(--dur-standard) var(--ease-considered),
        backdrop-filter   var(--dur-standard) var(--ease-considered),
        box-shadow        var(--dur-standard) var(--ease-considered) !important;
}

#main-nav.scrolled {
    background-color: rgba(11, 17, 32, 0.98) !important;
    border-bottom-color: rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(24px) saturate(1.5) !important;
}


/* ── NAV LINKS — ANIMATED UNDERLINE ─────────────────────────────
   The active indicator draws in from left — like a timing line
   being laid down on the circuit. Precise. Intentional.
   Overrides Tailwind's border-color approach with scaleX transform
   for a more controlled reveal.
   ────────────────────────────────────────────────────────────── */
.nav-link {
    border-bottom: none !important;
    position: relative;
    transition: color var(--dur-standard) var(--ease-decisive) !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--brand-bright-blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-standard) var(--ease-decisive);
}

.nav-link:hover::after {
    transform: scaleX(1);
}

.nav-link.active::after {
    transform: scaleX(1);
    transition-duration: 0ms; /* Active state is immediate, not animated in */
}


/* ── CONTENT VIEW TRANSITIONS (SPA) ─────────────────────────────
   When JS switches between content views, the incoming view
   performs a precise entrance. Like a results board flipping.
   The .is-entering class is added by pr-motion.js momentarily.
   ────────────────────────────────────────────────────────────── */
@keyframes view-enter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes view-exit {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}

.content-view.active {
    animation: view-enter var(--dur-deliberate) var(--ease-decisive) forwards;
}


/* ── HERO SECTION ENTRANCE ───────────────────────────────────────
   Homepage hero elements cascade in on load — like a race
   broadcast sequence: status pill first, headline second,
   tagline and CTAs follow with precision timing.
   Apply data-pr-hero="status|headline|tagline|cta" to elements.
   ────────────────────────────────────────────────────────────── */
@keyframes hero-status-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-headline-in {
    from {
        opacity: 0;
        transform: translateY(22px);
        letter-spacing: 0.25em;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: inherit;
    }
}

@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

[data-pr-hero="status"] {
    animation: hero-status-in var(--dur-standard) var(--ease-decisive) 80ms both;
}

[data-pr-hero="headline"] {
    animation: hero-headline-in var(--dur-grand) var(--ease-decisive) 220ms both;
}

[data-pr-hero="tagline"] {
    animation: hero-fade-up var(--dur-deliberate) var(--ease-decisive) 520ms both;
}

[data-pr-hero="cta"] {
    animation: hero-fade-up var(--dur-deliberate) var(--ease-decisive) 680ms both;
}


/* ── SCROLL REVEAL SYSTEM ────────────────────────────────────────
   Elements with data-pr-reveal attribute start invisible.
   JS (IntersectionObserver) adds .is-visible to trigger entrance.
   Fires once per element. Respects reduced-motion.

   Usage:
   <div data-pr-reveal="up">    — slides up from below
   <div data-pr-reveal="left">  — slides in from left
   <div data-pr-reveal="right"> — slides in from right
   <div data-pr-reveal="scale"> — scales up from 97%
   <div data-pr-reveal="fade">  — opacity only
   ────────────────────────────────────────────────────────────── */

/* Base: invisible until observed */
[data-pr-reveal] {
    opacity: 0;
    will-change: opacity, transform;
}

[data-pr-reveal="up"] {
    transform: translateY(28px);
    transition:
        opacity    var(--dur-deliberate) var(--ease-decisive),
        transform  var(--dur-deliberate) var(--ease-decisive);
}

[data-pr-reveal="left"] {
    transform: translateX(-24px);
    transition:
        opacity    var(--dur-deliberate) var(--ease-decisive),
        transform  var(--dur-deliberate) var(--ease-decisive);
}

[data-pr-reveal="right"] {
    transform: translateX(24px);
    transition:
        opacity    var(--dur-deliberate) var(--ease-decisive),
        transform  var(--dur-deliberate) var(--ease-decisive);
}

[data-pr-reveal="scale"] {
    transform: scale(0.96);
    transition:
        opacity    var(--dur-deliberate) var(--ease-decisive),
        transform  var(--dur-deliberate) var(--ease-decisive);
}

[data-pr-reveal="fade"] {
    transition: opacity var(--dur-deliberate) var(--ease-decisive);
}

/* Triggered state */
[data-pr-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger delay variants — add alongside data-pr-reveal */
[data-pr-delay="1"] { transition-delay: 60ms !important; }
[data-pr-delay="2"] { transition-delay: 120ms !important; }
[data-pr-delay="3"] { transition-delay: 180ms !important; }
[data-pr-delay="4"] { transition-delay: 240ms !important; }
[data-pr-delay="5"] { transition-delay: 300ms !important; }
[data-pr-delay="6"] { transition-delay: 360ms !important; }


/* ── GRID STAGGER SYSTEM ─────────────────────────────────────────
   For card grids and lists. Parent gets data-pr-stagger,
   children animate in sequence. Like a starting grid forming.

   Usage:
   <div data-pr-stagger>
     <div class="card">...</div>   ← enters first
     <div class="card">...</div>   ← enters 70ms later
     ...
   </div>
   ────────────────────────────────────────────────────────────── */
[data-pr-stagger] > * {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity    var(--dur-standard) var(--ease-decisive),
        transform  var(--dur-standard) var(--ease-decisive);
}

/* Stagger delays: 70ms between each child */
[data-pr-stagger].is-visible > *:nth-child(1)   { transition-delay:   0ms; }
[data-pr-stagger].is-visible > *:nth-child(2)   { transition-delay:  70ms; }
[data-pr-stagger].is-visible > *:nth-child(3)   { transition-delay: 140ms; }
[data-pr-stagger].is-visible > *:nth-child(4)   { transition-delay: 210ms; }
[data-pr-stagger].is-visible > *:nth-child(5)   { transition-delay: 280ms; }
[data-pr-stagger].is-visible > *:nth-child(6)   { transition-delay: 350ms; }
[data-pr-stagger].is-visible > *:nth-child(7)   { transition-delay: 420ms; }
[data-pr-stagger].is-visible > *:nth-child(8)   { transition-delay: 490ms; }
[data-pr-stagger].is-visible > *:nth-child(n+9) { transition-delay: 560ms; }

[data-pr-stagger].is-visible > * {
    opacity: 1;
    transform: none;
}


/* ── CARD SYSTEM — AUTHORITATIVE HOVER ───────────────────────────
   The existing hover-lift uses a spring curve that belongs on
   a gaming platform, not a governing institution.
   Replaced with a precise, measured upward shift.
   ────────────────────────────────────────────────────────────── */

/* Override the spring physics */
.hover-lift {
    transition:
        transform   var(--dur-standard) var(--ease-considered),
        box-shadow  var(--dur-standard) var(--ease-considered) !important;
}

.hover-lift:hover {
    transform: translateY(-3px) !important; /* Removed scale — scaling feels playful */
    box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.6),
                0 6px 12px -4px rgba(0, 0, 0, 0.3) !important;
    z-index: 10;
}

/* card-official: precise multi-property transition */
.card-official {
    transition:
        border-color var(--dur-standard) var(--ease-decisive),
        box-shadow   var(--dur-standard) var(--ease-decisive),
        transform    var(--dur-standard) var(--ease-considered) !important;
}

.card-official:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.5);
}

/* Gold accent reveal — smoother than the default opacity jump */
.card-official::before {
    transition:
        opacity  var(--dur-standard) var(--ease-decisive),
        height   var(--dur-deliberate) var(--ease-decisive) !important;
}


/* ── BUTTONS ─────────────────────────────────────────────────────
   Primary: the gold accent bar grows on hover — a precise signal.
   Both buttons have a subtle press-down on active.
   ────────────────────────────────────────────────────────────── */
.btn-primary {
    transition:
        background-color var(--dur-swift) var(--ease-decisive),
        color            var(--dur-swift) var(--ease-decisive),
        transform        var(--dur-micro) var(--ease-decisive),
        box-shadow       var(--dur-swift) var(--ease-decisive) !important;
    position: relative;
    overflow: hidden;
}

/* Subtle surface highlight sweeps across on hover — like a
   timing board illuminating a grid position */
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 100%
    );
    transition: left var(--dur-deliberate) var(--ease-decisive);
    pointer-events: none;
    z-index: 0;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:active {
    transform: translateY(1px);
    box-shadow: none !important;
}

.btn-secondary {
    transition:
        background-color var(--dur-swift) var(--ease-decisive),
        border-color     var(--dur-swift) var(--ease-decisive),
        color            var(--dur-swift) var(--ease-decisive),
        transform        var(--dur-micro) var(--ease-decisive) !important;
}

.btn-secondary:active {
    transform: translateY(1px);
}


/* ── MODAL SYSTEM ────────────────────────────────────────────────
   Modal entrance: the panel descends from slightly above —
   like a stewards' decision board lowering into position.
   Overlay fades in independently from the panel.
   ────────────────────────────────────────────────────────────── */
@keyframes modal-panel-enter {
    from {
        opacity: 0;
        transform: translateY(-16px) scale(0.975);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modal-overlay-in {
    from { opacity: 0; backdrop-filter: blur(0px); }
    to   { opacity: 1; backdrop-filter: blur(8px); }
}

@keyframes modal-panel-exit {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(8px) scale(0.99); }
}

/* All modal overlays */
.modal-overlay.active {
    animation: modal-overlay-in var(--dur-standard) var(--ease-decisive) forwards;
}

/* Modal panel — the direct child container inside the overlay */
.modal-overlay.active > div {
    animation: modal-panel-enter var(--dur-standard) var(--ease-decisive) 40ms both;
}

/* Telemetry Event Modal */
#telemetry-event-modal:not(.hidden) > div {
    animation: modal-panel-enter var(--dur-standard) var(--ease-decisive) 40ms both;
}

/* Quick Profile Modal */
#quick-profile-modal:not(.hidden) > div {
    animation: modal-panel-enter var(--dur-standard) var(--ease-decisive) 40ms both;
}


/* ── DROPDOWN / POPOVER MENUS ────────────────────────────────────
   Dropdowns descend from origin — like a results board lowering.
   Transform-origin at top keeps it anchored to its trigger.
   ────────────────────────────────────────────────────────────── */
@keyframes dropdown-enter {
    from {
        opacity: 0;
        transform: translateY(-8px) scaleY(0.95);
        transform-origin: top center;
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
        transform-origin: top center;
    }
}

#profile-dropdown:not(.hidden),
#desktop-lang-dropdown:not(.hidden),
#header-search-results:not(.hidden) {
    animation: dropdown-enter var(--dur-swift) var(--ease-decisive) forwards;
    transform-origin: top;
}


/* ── MOBILE MENU ─────────────────────────────────────────────────
   Slides in from the left — a panel opening, not a page flip.
   ────────────────────────────────────────────────────────────── */
@keyframes mobile-menu-enter {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

#mobile-menu:not(.hidden) {
    animation: mobile-menu-enter var(--dur-standard) var(--ease-decisive) forwards;
}


/* ── FORM INPUTS ─────────────────────────────────────────────────
   Focus transition should feel like a precision instrument
   acknowledging input — deliberate, not jerky.
   ────────────────────────────────────────────────────────────── */
.input-official {
    transition:
        border-color     var(--dur-swift) var(--ease-decisive),
        box-shadow       var(--dur-swift) var(--ease-decisive),
        background-color var(--dur-swift) var(--ease-decisive) !important;
}


/* ── PROGRESS BARS ───────────────────────────────────────────────
   Clearance level progress bar animates width on mount.
   The width is set via inline style by JS — we ensure the
   transition is there when JS updates it.
   ────────────────────────────────────────────────────────────── */
#clearance-progress-bar,
[id*="progress-bar"],
[class*="progress-fill"] {
    transition: width var(--dur-grand) var(--ease-decisive) !important;
    transition-delay: 400ms !important; /* Let the view load first */
}


/* ── NOTIFICATION BADGE ──────────────────────────────────────────
   Badge pops in with a precise scale animation — no bounce.
   ────────────────────────────────────────────────────────────── */
@keyframes badge-appear {
    0%   { transform: scale(0);    opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

#notification-badge:not(.hidden) {
    animation: badge-appear var(--dur-swift) var(--ease-decisive) forwards;
}


/* ── LIVE STATUS INDICATOR ───────────────────────────────────────
   Red live indicator pulse — refined for a timing display.
   The existing Tailwind animate-pulse is generic (fade only).
   This version adds a radial glow — like an active telemetry dot.
   ────────────────────────────────────────────────────────────── */
@keyframes pr-live-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 29, 67, 0.5);
        opacity: 1;
    }
    60% {
        box-shadow: 0 0 0 5px rgba(255, 29, 67, 0);
        opacity: 0.75;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 29, 67, 0);
        opacity: 1;
    }
}

/* Target the specific live-dot pattern used throughout the platform */
.animate-pulse.bg-brand-red,
.animate-pulse.rounded-full.bg-brand-red,
span.animate-pulse.w-2\.5.h-2\.5,
span.animate-pulse.w-2.h-2 {
    animation: pr-live-pulse 2.4s var(--ease-considered) infinite !important;
    border-radius: 50% !important;
}

/* Skeleton loading pulse — calmer than the live pulse */
@keyframes pr-skeleton-breathe {
    0%, 100% { opacity: 0.35; }
    50%       { opacity: 0.60; }
}

/* Override generic Tailwind pulse on skeleton/loading elements */
.animate-pulse:not(.bg-brand-red):not(.bg-red-500):not(.rounded-full):not([class*="w-1"]):not([class*="w-2"]) {
    animation: pr-skeleton-breathe 2s var(--ease-considered) infinite !important;
}


/* ── SECTION ACCENT BAR ──────────────────────────────────────────
   The red vertical/horizontal accent bars draw in.
   Add class .pr-accent-bar to the bar elements.
   ────────────────────────────────────────────────────────────── */
@keyframes accent-bar-draw {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); transform-origin: left; }
}

@keyframes accent-bar-draw-y {
    from { transform: scaleY(0); transform-origin: top; }
    to   { transform: scaleY(1); transform-origin: top; }
}

.pr-accent-bar-h {
    animation: accent-bar-draw var(--dur-deliberate) var(--ease-decisive) 200ms both;
}

.pr-accent-bar-v {
    animation: accent-bar-draw-y var(--dur-deliberate) var(--ease-decisive) 200ms both;
}


/* ── DATA TABLE / STANDINGS ROWS ─────────────────────────────────
   Row hover should be an immediate, clean response.
   ────────────────────────────────────────────────────────────── */
tr,
[class*="standings-row"],
[class*="result-row"],
[class*="leaderboard-row"] {
    transition: background-color var(--dur-micro) var(--ease-decisive) !important;
}


/* ── AUTH CONTAINER ──────────────────────────────────────────────
   Smooth swap between logged-in and logged-out states.
   ────────────────────────────────────────────────────────────── */
#auth-container-public,
#auth-container-private {
    transition: opacity var(--dur-standard) var(--ease-decisive) !important;
}


/* ── ICON TRANSITIONS ────────────────────────────────────────────
   SVG icons within interactive elements transition color
   at the same speed as text color.
   ────────────────────────────────────────────────────────────── */
svg {
    transition: color var(--dur-swift) var(--ease-decisive),
                opacity var(--dur-swift) var(--ease-decisive);
}


/* ── PROFILE AVATAR ──────────────────────────────────────────────
   Profile images scale slightly on hover in the dashboard area.
   ────────────────────────────────────────────────────────────── */
#dashboard-profile-picture,
#header-profile-picture {
    transition: transform var(--dur-standard) var(--ease-considered),
                box-shadow var(--dur-standard) var(--ease-decisive);
}

#dashboard-profile-picture:hover {
    transform: scale(1.04);
}


/* ── CHIP / BADGE ELEMENTS ───────────────────────────────────────
   Status chips and inline badges transition on state change.
   ────────────────────────────────────────────────────────────── */
[class*="badge"],
[class*="chip"],
[id*="badge"],
[id*="license"] {
    transition:
        background-color var(--dur-swift) var(--ease-decisive),
        border-color     var(--dur-swift) var(--ease-decisive),
        color            var(--dur-swift) var(--ease-decisive) !important;
}


/* ── FLIP CARD TIMING REFINEMENT ─────────────────────────────────
   The existing flip card utilities are good. We refine timing
   to be slightly slower — more deliberate.
   ────────────────────────────────────────────────────────────── */
.transform-style-preserve-3d {
    transition: transform var(--dur-deliberate) var(--ease-considered);
}


/* ── TOAST / NOTIFICATION ANIMATIONS ────────────────────────────
   Toasts slide in from the side — like a timing split display.
   ────────────────────────────────────────────────────────────── */
@keyframes toast-enter {
    from {
        opacity: 0;
        transform: translateX(100%) translateX(16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toast-exit {
    from {
        opacity: 1;
        transform: translateX(0);
        max-height: 100px;
        margin-bottom: 0.5rem;
    }
    to {
        opacity: 0;
        transform: translateX(calc(100% + 16px));
        max-height: 0;
        margin-bottom: 0;
    }
}

.pr-toast-enter {
    animation: toast-enter var(--dur-standard) var(--ease-decisive) forwards;
}

.pr-toast-exit {
    animation: toast-exit var(--dur-standard) var(--ease-retreat) forwards;
}


/* ── ODOMETER — REFINE EXISTING ──────────────────────────────────
   The existing odometer-scan animation is good.
   We align its duration to our token system.
   ────────────────────────────────────────────────────────────── */
.animate-odometer {
    animation-duration: var(--dur-swift) !important;
    animation-timing-function: var(--ease-decisive) !important;
}


/* ── SEARCH INPUT EXPANSION ──────────────────────────────────────
   The search input's container grows cleanly on focus.
   ────────────────────────────────────────────────────────────── */
#header-search-container input {
    transition: width var(--dur-standard) var(--ease-decisive) !important;
}


/* ── CLEARANCE LEVEL BADGE ───────────────────────────────────────
   The badge icon container in the dashboard has a subtle
   glow pulse to indicate rank status.
   ────────────────────────────────────────────────────────────── */
@keyframes clearance-ready {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.05); }
    50%       { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08); }
}

#clearance-badge-container {
    animation: clearance-ready 4s var(--ease-considered) infinite;
}


/* ── STAT COUNTER — REVEAL ON SCROLL ────────────────────────────
   Elements with [data-pr-counter] animate their numeric value
   from 0 to target when entering viewport.
   JS handles the count — this CSS just ensures visibility.
   ────────────────────────────────────────────────────────────── */
[data-pr-counter] {
    transition: color var(--dur-standard) var(--ease-decisive);
}


/* ── LINK TRANSITIONS IN COPY ────────────────────────────────────
   In-text links (privacy policy, terms) transition colour
   cleanly.
   ────────────────────────────────────────────────────────────── */
p a,
.text-content a {
    transition: color var(--dur-micro) var(--ease-decisive),
                text-decoration-color var(--dur-micro) var(--ease-decisive);
}


/* ── COOKIE BANNER ───────────────────────────────────────────────
   Enters from the bottom edge.
   ────────────────────────────────────────────────────────────── */
@keyframes cookie-rise {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

#cookie-consent-banner:not(.hidden) {
    animation: cookie-rise var(--dur-deliberate) var(--ease-decisive) 800ms both;
}


/* ── CHAMPIONSHIP / EVENT CARD HEADER BARS ───────────────────────
   The skewed red accent bars on section headers get a draw-in.
   These are the `transform -skew-x-12` bars used in WHAT'S NEW etc.
   ────────────────────────────────────────────────────────────── */
.is-visible .block.transform.-skew-x-12,
.is-visible span.block.-skew-x-12 {
    animation: accent-bar-draw-y var(--dur-deliberate) var(--ease-decisive) both;
}


/* ── PRIMARY BUTTON GLOW ON HOVER ───────────────────────────────
   A precise red glow beneath the CTA — signals action authority.
   Per Colour Guide: Red is the action colour. This reinforces it.
   ────────────────────────────────────────────────────────────── */
.btn-primary:hover {
    box-shadow:
        0 0 0 1px rgba(255, 30, 0, 0.4),
        0 4px 20px -4px rgba(255, 30, 0, 0.55),
        0 12px 32px -8px rgba(0, 0, 0, 0.6) !important;
}


/* ── EVENT CARDS / NEWS CARDS / SHOP ITEMS — HOVER LIFT ─────────
   Cards translate up 4px with a deepened shadow and a thin red
   top-edge accent line. Communicates "selectable" without bounce.
   Apply .pr-card-interactive to any interactive card element.
   ────────────────────────────────────────────────────────────── */
.pr-card-interactive {
    transition:
        transform    var(--dur-standard) var(--ease-considered),
        box-shadow   var(--dur-standard) var(--ease-considered),
        border-color var(--dur-standard) var(--ease-decisive) !important;
    border-top: 2px solid transparent;
}

.pr-card-interactive:hover {
    transform: translateY(-4px) !important;
    border-top-color: rgba(255, 30, 0, 0.5) !important;
    box-shadow:
        0 16px 40px -12px rgba(0, 0, 0, 0.7),
        0 6px 16px -4px rgba(255, 30, 0, 0.12) !important;
}


/* ── FORUM POST CARDS — SUBTLE HOVER ────────────────────────────
   Forum posts lift 2px — less assertive than event cards.
   White border tint on hover instead of red — community, not
   competitive context. Per Colour Guide principle 01.
   ────────────────────────────────────────────────────────────── */
.pr-forum-post {
    transition:
        transform    var(--dur-standard) var(--ease-considered),
        box-shadow   var(--dur-standard) var(--ease-considered),
        border-color var(--dur-standard) var(--ease-decisive) !important;
}

.pr-forum-post:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5);
}


/* ── AUTH MODAL TABS ─────────────────────────────────────────────
   Tab indicator slides between Login and Sign Up tabs.
   The active tab uses a Red bottom border — precise signal.
   ────────────────────────────────────────────────────────────── */
.auth-tab {
    position: relative;
    transition:
        color     var(--dur-swift) var(--ease-decisive),
        opacity   var(--dur-swift) var(--ease-decisive) !important;
}

.auth-tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #FF1E00;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-standard) var(--ease-decisive);
}

.auth-tab.active-tab::after {
    transform: scaleX(1);
}

.auth-tab-panel {
    animation: hero-fade-up var(--dur-standard) var(--ease-decisive) both;
}


/* ── ACCESSIBILITY: REDUCED MOTION ──────────────────────────────
   All motion disabled for users who prefer it.
   This is not optional — it is required.
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    /* Keep live indicators visible but static */
    .animate-pulse.bg-brand-red {
        animation: none !important;
        opacity: 1 !important;
    }
}