/*
 * site-custom.css — the ONE documented custom stylesheet allowed by migration
 * rule 10, on top of the Ynex Tailwind build.
 *
 * WHY THIS FILE EXISTS: 7 marketing pages (xrplayer, about, apps, rig, studio,
 * studioaccess, welcome) were already bespoke-redesigned by the previous team in
 * pure Tailwind (loaded via CDN + an inline per-page <style> block) with their own
 * dark "celestial" visual language — animated starfields, glassmorphism cards, a
 * shared #ED3237 accent color, Space Grotesk headlines — distinct from the Ynex
 * admin template used everywhere else. Per the owner (2026-07-21): recreate that
 * bespoke look faithfully rather than replacing it with the generic Ynex box/card
 * style. This file consolidates what was duplicated as inline <style> blocks
 * across 5+ old pages into one shared, documented place; every rule here is a
 * fresh utility class, not a byte-for-byte copy of the old stylesheets.
 *
 * Scope: only used by the 7 bespoke marketing pages above (opted in via the
 * `vxr-bespoke` wrapper class) — the rest of the site is untouched Ynex Tailwind.
 */

/* ---- design tokens (old pages' shared :root block) ---- */
.vxr-bespoke {
    --vxr-accent: #ed3237;
    --vxr-accent-strong: #ff4a4f;
    --vxr-accent-pressed: #d92b30;
    --vxr-line: #e5e7eb;
    font-family: Roboto, "Roboto-Light", sans-serif;
}

.vxr-bespoke h1, .vxr-bespoke h2, .vxr-bespoke h3, .vxr-bespoke h4,
.vxr-headline {
    font-family: "Space Grotesk", sans-serif;
}

/* ---- dark celestial hero background (about/apps/xrplayer variant) ---- */
.vxr-hero-celestial {
    background-color: #03040b;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(68, 0, 102, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(0, 41, 141, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(187, 0, 0, 0.1) 0%, transparent 70%),
        radial-gradient(circle at 20% 70%, rgba(0, 80, 100, 0.1) 0%, transparent 40%);
    position: relative;
    overflow: hidden;
}

/* ---- dark galaxy hero background (rig variant) ---- */
.vxr-hero-galaxy {
    background:
        radial-gradient(circle at 20% 30%, rgba(41, 20, 60, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(20, 30, 80, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(10, 10, 20, 1) 0%, #050508 100%);
    position: relative;
    overflow: hidden;
}

/* ---- deep-space hero background (xrplayer variant) ---- */
.vxr-hero-space {
    background: radial-gradient(circle at top right, #0a0b10 0%, #020204 100%);
}
.vxr-space-bg {
    background-color: #020204;
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* ---- red-glow hero background (welcome variant) ---- */
.vxr-hero-red {
    background: radial-gradient(circle at center, #1a0505 0%, #000000 100%);
    position: relative;
    overflow: hidden;
}
/* Welcome hero on big monitors only (1800px+, the theme's own large-screen breakpoint; covers
   1920px desktops and up): less side space than the default px-6 (24px) + max-w-7xl (1280px) —
   16px padding and a 1760px cap, so the margins shrink (about 80px each side at 1920px instead
   of 320px) but it doesn't run edge to edge. Hand-written because the precompiled Tailwind build
   has no padding / max-width utilities for this. Below 1800px (phones, tablets and laptops,
   including ~1536px scaled laptops) the normal px-6 gutters and max-w-7xl stay exactly as they were. */
@media (min-width: 1800px) {
    section.vxr-hero-red { padding-left: 1rem; padding-right: 1rem; }
    section.vxr-hero-red > .max-w-7xl { max-width: 110rem; }
}
.vxr-nebula-red {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(237, 50, 55, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(60, 71, 90, 0.2) 0%, transparent 40%);
    z-index: 1;
}

/* ---- shared nebula glow overlay ---- */
.vxr-nebula-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(131, 58, 180, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(253, 29, 29, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(252, 176, 69, 0.05) 0%, transparent 70%);
    filter: blur(100px);
    z-index: -2;
    pointer-events: none;
}

/* ---- glassmorphism panel (used by xrplayer/rig feature cards) ---- */
.vxr-glass-panel {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---- text glow (accent headline emphasis) ---- */
.vxr-text-glow {
    text-shadow: 0 0 30px rgba(237, 50, 55, 0.5);
}

/* ---- fade-up entrance animation ---- */
@keyframes vxr-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.vxr-animate-fade-up {
    animation: vxr-fade-up 0.8s ease-out forwards;
    opacity: 0;
}
.vxr-delay-100 { animation-delay: 100ms; }
.vxr-delay-200 { animation-delay: 200ms; }
.vxr-delay-300 { animation-delay: 300ms; }

/* ---- star twinkle (used by canvas-based starfields as a CSS fallback dot) ---- */
@keyframes vxr-twinkle {
    from { opacity: 0.2; transform: scale(0.8); }
    to   { opacity: 0.8; transform: scale(1.2); }
}
.vxr-star {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0.5;
    animation: vxr-twinkle var(--vxr-duration, 3s) ease-in-out infinite alternate;
}

/* ---- shooting star effect (about/apps celestial hero, via starfield.js) ---- */
.shooting-star {
    position: absolute;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    height: 1px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}
@keyframes shootingStar {
    0%   { transform: translateX(0) translateY(0) rotate(-45deg); opacity: 0.8; width: 0; }
    50%  { width: 150px; opacity: 1; }
    100% { transform: translateX(-800px) translateY(800px) rotate(-45deg); opacity: 0; width: 0; }
}

/* ---- xrplayer hero ambience: floating bokeh + shooting star sweep ---- */
.vxr-particle-bokeh {
    position: absolute;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(4px);
    animation: vxr-float-particle var(--vxr-duration, 12s) ease-in-out infinite;
}
@keyframes vxr-float-particle {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    50%  { opacity: 0.3; }
    100% { transform: translateY(-150px) translateX(30px); opacity: 0; }
}
.vxr-xrplayer-shooting-star {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 2px;
    background: linear-gradient(-45deg, #ffffff, rgba(0, 0, 255, 0));
    border-radius: 999px;
    filter: drop-shadow(0 0 6px #ffffff);
    animation: vxr-xrplayer-shoot 10s ease-in-out infinite;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}
.vxr-xrplayer-shooting-star::before {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    height: 2px;
    background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #ffffff, rgba(0, 0, 255, 0));
    transform: translateX(50%) rotateZ(45deg);
    border-radius: 100%;
    animation: vxr-xrplayer-shine 10s ease-in-out infinite;
}
@keyframes vxr-xrplayer-shoot {
    0%   { transform: rotateZ(45deg) translateX(-200px); opacity: 0; width: 0; }
    5%   { opacity: 1; width: 150px; }
    15%  { transform: rotateZ(45deg) translateX(1200px); opacity: 0; width: 0; }
    100% { transform: rotateZ(45deg) translateX(1200px); opacity: 0; width: 0; }
}
@keyframes vxr-xrplayer-shine {
    0%   { width: 0; }
    5%   { width: 30px; }
    15%  { width: 0; }
    100% { width: 0; }
}

/* (The black footer's link hover colour lives in landing/_bespokeFooter.cshtml now that every
   page with a landing layout renders that footer, not only these 7.) */

/* ---- larger icons and description text on the marketing pages ---- */
/* Material Symbols: Google's stylesheet loads after the theme CSS and pins every icon to 24px,
   so the text-4xl icons never actually got their 36px. Sizes are set here, one step up from
   what rendered before (24px -> 28px default, 24px -> 40px for the text-4xl feature icons). */
.vxr-bespoke .material-symbols-outlined { font-size: 1.75rem; line-height: 1; }
.vxr-bespoke .material-symbols-outlined.text-4xl { font-size: 2.5rem; }
/* 2.5rem icons for the Welcome page's "Our state of the art XR Player supports" feature grid. */
.vxr-bespoke .material-symbols-outlined.vxr-icon-2-5rem { font-size: 2.5rem; }

/* Descriptions (each one step larger than before). Eyebrow labels (uppercase), footnotes (text-xs),
   headings and the inline form error are left alone. The precompiled Tailwind build has no way to
   do this per-page, so these target the paragraph's existing size class. */
.vxr-bespoke p.text-sm:not(.uppercase):not([id="error-msg"]) { font-size: 1rem; line-height: 1.6; }    /* card bodies: 14 -> 16px */
.vxr-bespoke p.text-lg { font-size: 1.25rem; line-height: 1.6; }                                        /* lead text: 18 -> 20px */
.vxr-bespoke p:not([class*="text-xs"]):not([class*="text-sm"]):not([class*="text-base"]):not([class*="text-lg"]):not([class*="text-xl"]):not([class*="text-2xl"]):not([class*="text-3xl"]):not(.font-semibold):not(.uppercase) {
    font-size: 1.0625rem; line-height: 1.65;                                                            /* section text: 13 -> 17px */
}
@media (min-width: 640px) {
    .vxr-bespoke p.text-sm.sm\:text-base:not(.uppercase):not([id="error-msg"]) { font-size: 1.125rem; line-height: 1.65; }  /* hero text: 16 -> 18px */
}

/* ---- welcome / bespoke landing pages: transparent-on-hero navbar ---- */
/* Applied to #sidebar while the viewport is at the very top of landing/hero pages
   (welcome, xrplayer, studio, rig, about).
   Removes the background so the nav floats over the hero, then a JS scroll
   listener removes this class and the standard dark sidebar background (#0d0d0d) fades back in via
   the transition already on .app-sidebar. */
.landing-body #sidebar.vxr-nav-transparent {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Make menu labels, logo and the Login button legible on dark heroes */
.landing-body #sidebar.vxr-nav-transparent .side-menu__label,
.landing-body #sidebar.vxr-nav-transparent .side-menu__item {
    color: rgba(255, 255, 255, 0.92) !important;
}
.landing-body #sidebar.vxr-nav-transparent .side-menu__item:hover .side-menu__label {
    color: #ffffff !important;
}
.landing-body #sidebar.vxr-nav-transparent .landing-login {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    backdrop-filter: blur(6px);
}
.landing-body #sidebar.vxr-nav-transparent .landing-login:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}
/* Logo visibility on transparent nav with dark hero — stay white */
.landing-body #sidebar.vxr-nav-transparent .responsive-logo-light img,
.landing-body #sidebar.vxr-nav-transparent .responsive-logo-dark img {
    filter: brightness(0) invert(1);
}

/* Variant for light hero (e.g. Studio page with white hero) */
.landing-body #sidebar.vxr-nav-transparent.vxr-nav-transparent-light .side-menu__label,
.landing-body #sidebar.vxr-nav-transparent.vxr-nav-transparent-light .side-menu__item {
    color: rgba(15, 23, 42, 0.85) !important;
}
.landing-body #sidebar.vxr-nav-transparent.vxr-nav-transparent-light .side-menu__item:hover .side-menu__label {
    color: #0f172a !important;
}
.landing-body #sidebar.vxr-nav-transparent.vxr-nav-transparent-light .landing-login {
    background: rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    color: #0f172a !important;
}
.landing-body #sidebar.vxr-nav-transparent.vxr-nav-transparent-light .landing-login:hover {
    background: rgba(0, 0, 0, 0.12) !important;
}
.landing-body #sidebar.vxr-nav-transparent.vxr-nav-transparent-light .responsive-logo-light img,
.landing-body #sidebar.vxr-nav-transparent.vxr-nav-transparent-light .responsive-logo-dark img {
    filter: none !important;
}

/* Mobile header: transparent treatment */
.landing-body .app-header.vxr-nav-transparent {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.landing-body .app-header.vxr-nav-transparent .ri-menu-3-line,
.landing-body .app-header.vxr-nav-transparent .header-link {
    color: #ffffff !important;
}
.landing-body .app-header.vxr-nav-transparent .toggle-logo,
.landing-body .app-header.vxr-nav-transparent .toggle-dark {
    filter: brightness(0) invert(1);
}
.landing-body .app-header.vxr-nav-transparent.vxr-nav-transparent-light .ri-menu-3-line,
.landing-body .app-header.vxr-nav-transparent.vxr-nav-transparent-light .header-link {
    color: #0f172a !important;
}
.landing-body .app-header.vxr-nav-transparent.vxr-nav-transparent-light .toggle-logo,
.landing-body .app-header.vxr-nav-transparent.vxr-nav-transparent-light .toggle-dark {
    filter: none !important;
}

/* Active menu item color: ALWAYS #ED3237 in all states (transparent, scrolled/dark, pinned) */
.landing-body #sidebar .slide.active > .side-menu__item,
.landing-body #sidebar .slide.active > .side-menu__item .side-menu__label,
.landing-body #sidebar .side-menu__item.active,
.landing-body #sidebar .side-menu__item.active .side-menu__label,
.landing-body #sidebar .slide.active > .side-menu__item:hover .side-menu__label,
.landing-body #sidebar .side-menu__item.active:hover .side-menu__label,
.landing-body #sidebar.vxr-nav-transparent .slide.active > .side-menu__item,
.landing-body #sidebar.vxr-nav-transparent .slide.active > .side-menu__item .side-menu__label,
.landing-body #sidebar.vxr-nav-transparent .side-menu__item.active,
.landing-body #sidebar.vxr-nav-transparent .side-menu__item.active .side-menu__label,
.landing-body #sidebar.vxr-nav-transparent .slide.active > .side-menu__item:hover .side-menu__label,
.landing-body #sidebar.vxr-nav-transparent .side-menu__item.active:hover .side-menu__label,
.landing-body #sidebar.vxr-nav-transparent.vxr-nav-transparent-light .slide.active > .side-menu__item,
.landing-body #sidebar.vxr-nav-transparent.vxr-nav-transparent-light .slide.active > .side-menu__item .side-menu__label,
.landing-body #sidebar.vxr-nav-transparent.vxr-nav-transparent-light .side-menu__item.active,
.landing-body #sidebar.vxr-nav-transparent.vxr-nav-transparent-light .side-menu__item.active .side-menu__label,
.landing-body #sidebar.vxr-nav-transparent.vxr-nav-transparent-light .slide.active > .side-menu__item:hover .side-menu__label,
.landing-body #sidebar.vxr-nav-transparent.vxr-nav-transparent-light .side-menu__item.active:hover .side-menu__label,
[data-nav-layout=horizontal] .landing-body .app-sidebar.sticky.sticky-pin .slide.active > .side-menu__item .side-menu__label,
[data-nav-layout=horizontal] .landing-body .app-sidebar.sticky.sticky-pin .side-menu__item.active .side-menu__label,
[data-nav-layout=horizontal] .landing-body .app-sidebar.sticky.sticky-pin .slide.active > .side-menu__item:hover .side-menu__label,
[data-nav-layout=horizontal] .landing-body .app-sidebar.sticky.sticky-pin .side-menu__item.active:hover .side-menu__label {
    color: #ED3237 !important;
    opacity: 1 !important;
}