/* ============================================================================
   PrimeBet Predict — Premium UI/UX Enhancement Layer
   ----------------------------------------------------------------------------
   Additive only. Loaded AFTER site.css/home.css on every user-facing page
   (public layout + dashboard layout). Nothing here removes or restructures
   existing markup, classes, or functionality — it only upgrades animation,
   depth, and interactivity on top of the existing "Violet Signal" design
   system (same CSS variables, same component classes).
   ============================================================================ */

/* ----------------------------------------------------------------------
   0. Global easing tokens + safety
   ---------------------------------------------------------------------- */
:root {
    --pn-ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
    --pn-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --pn-dur-fast: 0.18s;
    --pn-dur-base: 0.32s;
    --pn-dur-slow: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
    .pn-global-loader,
    .pn-page-fade,
    [data-reveal],
    .pn-card,
    .pn-btn,
    body {
        animation: none !important;
        transition: none !important;
    }
}

/* ----------------------------------------------------------------------
   1. Global Loading Screen (site-wide)
   Markup injected once via components.loading-screen include in both
   the public and dashboard layouts. Self-hides via premium-ui.js as soon
   as the window fires 'load', with a minimum-visible time so it never
   feels like a flicker on fast connections.
   ---------------------------------------------------------------------- */
.pn-global-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    background:
        radial-gradient(60% 60% at 50% 35%, rgba(139, 92, 246, 0.16), transparent 65%),
        radial-gradient(50% 50% at 85% 80%, rgba(212, 175, 55, 0.08), transparent 60%),
        var(--pn-bg-base);
    transition: opacity 0.5s var(--pn-ease-premium), visibility 0.5s var(--pn-ease-premium);
    overflow: hidden;
}
.pn-global-loader::before {
    content: '';
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.35) 0, transparent 60%),
        radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,0.25) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,0.2) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,255,255,0.22) 0, transparent 60%);
    animation: pnLoaderDrift 9s ease-in-out infinite alternate;
    opacity: 0.6;
    pointer-events: none;
}
@keyframes pnLoaderDrift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-2%, -1.5%, 0) scale(1.04); }
}
.pn-global-loader.pn-global-loader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.pn-global-loader__mark {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--pn-turf-bright), var(--pn-turf));
    font-family: var(--pn-font-display);
    font-weight: 800;
    font-size: 1.8rem;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 0 60px rgba(139, 92, 246, 0.45);
    animation: pnLoaderPulse 1.7s ease-in-out infinite;
}
@keyframes pnLoaderPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 0 44px rgba(139, 92, 246, 0.38); }
    50% { transform: scale(1.06); box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 0 68px rgba(139, 92, 246, 0.55); }
}
.pn-global-loader__ring {
    position: absolute;
    inset: -8px;
    border-radius: 26px;
    border: 2px solid transparent;
    border-top-color: var(--pn-turf-glow);
    border-right-color: rgba(167, 139, 250, 0.25);
    animation: pnLoaderSpin 1.1s linear infinite;
}
@keyframes pnLoaderSpin { to { transform: rotate(360deg); } }

.pn-global-loader__word {
    font-family: var(--pn-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--pn-text-primary);
}

.pn-global-loader__bar-track {
    width: min(240px, 68vw);
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.pn-global-loader__bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--pn-turf), var(--pn-turf-bright), var(--pn-turf-glow));
    background-size: 200% 100%;
    border-radius: 3px;
    transition: width 0.3s var(--pn-ease-soft);
    animation: pnLoaderShimmer 1.4s linear infinite;
}
@keyframes pnLoaderShimmer { to { background-position: -200% 0; } }

.pn-global-loader__status {
    font-family: var(--pn-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--pn-text-secondary);
    min-height: 1.2em;
}

@media (prefers-reduced-motion: reduce) {
    .pn-global-loader { display: none !important; }
}

/* ----------------------------------------------------------------------
   1b. Skeleton hint inside the homepage's own loading screen
   ---------------------------------------------------------------------- */
.pn-load__skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0.5;
    margin-top: 4px;
}

/* ----------------------------------------------------------------------
   2. Skeleton loading (generic utility classes, used anywhere content
   is fetched async or while the loader is still up)
   ---------------------------------------------------------------------- */
.pn-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--pn-bg-surface-2);
    border-radius: var(--pn-radius-md);
    isolation: isolate;
}
.pn-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(168, 140, 255, 0.14) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: pnSkeletonShimmer 1.5s ease-in-out infinite;
}
@keyframes pnSkeletonShimmer {
    0% { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}
.pn-skeleton--text { height: 0.9em; border-radius: 6px; margin-bottom: 8px; }
.pn-skeleton--title { height: 1.6em; border-radius: 8px; width: 60%; margin-bottom: 14px; }
.pn-skeleton--card { height: 180px; border-radius: var(--pn-radius-lg); }
.pn-skeleton--avatar { width: 44px; height: 44px; border-radius: 50%; }

/* ----------------------------------------------------------------------
   3. Page transition fade-in (whole-document, on every navigation)

   IMPORTANT: this must never animate `transform` on <body>. A `transform`
   on an ancestor (even a finished one held by animation-fill-mode: both)
   creates a new containing block for every `position: fixed` descendant,
   which silently breaks every fixed-position overlay in the app (modals,
   the rewarded-ad confirmation dialog, toasts, etc.) — they stop
   positioning against the viewport and instead position against <body>,
   which is exactly why the "Watch to earn credits" dialog was appearing
   low on the page instead of centered. Opacity-only keeps the fade effect
   without creating that containing block.
   ---------------------------------------------------------------------- */
body {
    animation: pnPageFadeIn 0.45s var(--pn-ease-premium) both;
}
@keyframes pnPageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Exit transition helper toggled briefly by premium-ui.js before same-origin navigations */
html.pn-navigating body {
    animation: pnPageFadeOut 0.22s var(--pn-ease-soft) forwards;
}
@keyframes pnPageFadeOut {
    to { opacity: 0; }
}

/* ----------------------------------------------------------------------
   4. Scroll reveal utility (site-wide, opt-in via [data-reveal])
   The existing homepage already uses .pn-reveal/.in-view for its own
   sections — this is a separate, generic attribute-based utility so any
   page (dashboard, pricing, contact, etc.) can opt in without touching
   home.js's homepage-only observer.
   ---------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--pn-ease-premium), transform 0.6s var(--pn-ease-premium);
}
[data-reveal].pn-in-view {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal="zoom"] { transform: scale(0.94); }
[data-reveal="zoom"].pn-in-view { transform: scale(1); }
[data-reveal="left"] { transform: translateX(-24px); }
[data-reveal="left"].pn-in-view { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="right"].pn-in-view { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ----------------------------------------------------------------------
   5. Card upgrades — glass depth, lift, animated border glow on hover
   Applies to the existing .pn-card class site-wide (dashboard + public),
   plus the homepage's bespoke card classes, without altering their
   layout, only their motion/depth.
   ---------------------------------------------------------------------- */
.pn-card,
.pn-home-trust-card,
.pn-home-price-card,
.pn-home-stat-tile,
.pn-home-float-card,
.pn-dash-pred-row,
.pn-upload-preview {
    transition:
        transform var(--pn-dur-base) var(--pn-ease-premium),
        box-shadow var(--pn-dur-base) var(--pn-ease-premium),
        border-color var(--pn-dur-base) var(--pn-ease-soft);
    will-change: transform;
}

.pn-card:hover,
.pn-home-trust-card:hover,
.pn-home-price-card:hover,
.pn-home-stat-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(168, 140, 255, 0.12);
}

/* Animated gradient border glow — opt-in via .pn-card--glow so it's not
   forced onto every dense admin-style card, but easy to sprinkle onto
   featured/premium surfaces (pricing featured card, hero card, etc.) */
.pn-card--glow,
.pn-home-price-card--featured,
.pn-home-tilt-card {
    position: relative;
}
.pn-card--glow::before,
.pn-home-price-card--featured::before,
.pn-home-tilt-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, var(--pn-turf-glow), transparent 30%, transparent 70%, var(--pn-turf-bright));
    background-size: 220% 220%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: pnBorderGlow 5s linear infinite;
    opacity: 0.6;
    pointer-events: none;
}
@keyframes pnBorderGlow {
    0% { background-position: 0% 0%; }
    100% { background-position: 220% 220%; }
}

/* Premium badge micro-shine, used on plan/featured badges */
.pn-home-price-card__badge,
.pn-badge--premium {
    position: relative;
    overflow: hidden;
}
.pn-home-price-card__badge::after,
.pn-badge--premium::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
    animation: pnBadgeShine 3.2s ease-in-out infinite;
}
@keyframes pnBadgeShine {
    0% { left: -60%; }
    50%, 100% { left: 140%; }
}

/* ----------------------------------------------------------------------
   6. Buttons — ripple, glow-hover, loading + success states
   ---------------------------------------------------------------------- */
.pn-btn,
.pn-home-btn {
    position: relative;
    overflow: hidden;
    transition:
        transform var(--pn-dur-fast) var(--pn-ease-soft),
        box-shadow var(--pn-dur-base) var(--pn-ease-soft),
        background var(--pn-dur-base) var(--pn-ease-soft),
        border-color var(--pn-dur-base) var(--pn-ease-soft),
        filter var(--pn-dur-base) var(--pn-ease-soft);
}
.pn-btn:hover,
.pn-home-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}
.pn-btn:active,
.pn-home-btn:active {
    transform: translateY(0) scale(0.97);
}
.pn-btn:focus-visible,
.pn-home-btn:focus-visible {
    outline: 2px solid var(--pn-turf-glow);
    outline-offset: 3px;
}

/* Ripple element injected by premium-ui.js on pointerdown */
.pn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    pointer-events: none;
    animation: pnRippleAnim 0.6s var(--pn-ease-soft) forwards;
}
@keyframes pnRippleAnim {
    to { transform: scale(2.6); opacity: 0; }
}

/* Loading state — toggled via data-loading="true" by any form/button that
   wants a built-in spinner without each page writing its own CSS */
.pn-btn[data-loading="true"],
.pn-home-btn[data-loading="true"] {
    color: transparent !important;
    pointer-events: none;
}
.pn-btn[data-loading="true"]::after,
.pn-home-btn[data-loading="true"]::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: pnBtnSpin 0.6s linear infinite;
}
@keyframes pnBtnSpin { to { transform: rotate(360deg); } }

/* Success state — brief checkmark flash, toggled via data-success="true" */
.pn-btn[data-success="true"],
.pn-home-btn[data-success="true"] {
    background: linear-gradient(135deg, #34d399, #10b981) !important;
    color: #fff !important;
}

/* ----------------------------------------------------------------------
   7. Hover-glow utility for icon tiles / interactive chips
   ---------------------------------------------------------------------- */
.pn-home-trust-card__icon,
.pn-dial,
.pn-score-ring {
    transition: filter var(--pn-dur-base) var(--pn-ease-soft), transform var(--pn-dur-base) var(--pn-ease-soft);
}
.pn-home-trust-card:hover .pn-home-trust-card__icon {
    filter: drop-shadow(0 0 14px rgba(139, 92, 246, 0.55));
    transform: scale(1.08);
}

/* ----------------------------------------------------------------------
   8. Floating ambient utility (reusable orb class beyond the homepage)
   ---------------------------------------------------------------------- */
.pn-float-slow { animation: pnFloatSlow 7s ease-in-out infinite; }
.pn-float-slower { animation: pnFloatSlow 11s ease-in-out infinite; }
@keyframes pnFloatSlow {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -14px, 0); }
}

/* ----------------------------------------------------------------------
   9. Navbar polish — subtle blur/elevation once scrolled
   ---------------------------------------------------------------------- */
.pn-navbar {
    transition: background var(--pn-dur-base) var(--pn-ease-soft), box-shadow var(--pn-dur-base) var(--pn-ease-soft), border-color var(--pn-dur-base) var(--pn-ease-soft);
}
.pn-navbar.pn-navbar--scrolled {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    border-bottom-color: var(--pn-border-strong);
}

/* ----------------------------------------------------------------------
   9b. Sidebar link polish (dashboard) — subtle slide + glow on hover/active
   ---------------------------------------------------------------------- */
.pn-sidebar__link {
    position: relative;
    overflow: hidden;
    transition: color var(--pn-dur-fast) var(--pn-ease-soft), background var(--pn-dur-fast) var(--pn-ease-soft), transform var(--pn-dur-fast) var(--pn-ease-soft);
}
.pn-sidebar__link:hover {
    transform: translateX(3px);
}
.pn-sidebar__link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 60%;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--pn-turf-glow), var(--pn-turf));
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
}

/* ----------------------------------------------------------------------
   10. Mobile experience polish
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Slightly reduce hover-lift translate distances so nothing looks odd
       on touch (hover states can stick after tap on some mobile browsers) */
    .pn-card:hover,
    .pn-home-trust-card:hover,
    .pn-home-price-card:hover,
    .pn-home-stat-tile:hover {
        transform: translateY(-2px);
    }
    .pn-btn:hover,
    .pn-home-btn:hover {
        transform: none;
    }
    [data-reveal] {
        transform: translateY(12px);
    }
    .pn-global-loader__mark { width: 60px; height: 60px; font-size: 1.5rem; }
    .pn-global-loader__word { font-size: 0.95rem; }
}

/* Respect safe-area on notch devices for any fixed bottom bars already present */
@supports (padding: max(0px)) {
    .pn-report-mobile-bar,
    .pn-result-actions-bar {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* ----------------------------------------------------------------------
   11. Toast / alert entrance polish (existing .pn-toast / .pn-alert)
   ---------------------------------------------------------------------- */
.pn-toast {
    animation: pnToastIn 0.35s var(--pn-ease-premium) both;
}
@keyframes pnToastIn {
    from { opacity: 0; transform: translateX(24px) scale(0.96); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
.pn-alert[data-flash] {
    animation: pnAlertIn 0.4s var(--pn-ease-premium) both;
}
@keyframes pnAlertIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}