/* River Cats lite mode: simple fast dark look for phones and tablets.
   Loaded on every effect page after the other stylesheets. Every rule is
   scoped under html.rc-lite, which the inline head detector adds only when
   the device is not a desktop (min-width 1024px, hover and fine pointer).
   Desktop never matches these rules, so desktop rendering is unchanged. */

/* 1. Variables: kill every backdrop-filter that uses var(--blur)
   (navbar, player, gallery chrome) and flatten the 3d shadow used by
   button and card hovers. Fixed body attachment repaints on every
   scroll frame on mobile, so switch it to scroll. */
html.rc-lite {
    --blur: none;
    --shadow-3d: 0 8px 20px rgba(0, 0, 0, 0.3);
}
html.rc-lite body {
    background-attachment: scroll;
}

/* 2. Hero: the storm canvas, skyline image, lights canvas and fog layer
   never load in lite mode. Hide their elements and paint the hero with
   the same night gradient storm.js uses as its reduced-motion fallback.
   .hero-overlay stays for text contrast. */
html.rc-lite #storm-canvas,
html.rc-lite #skyline-img,
html.rc-lite #lights-canvas,
html.rc-lite #vanta-fog-bg {
    display: none;
}
html.rc-lite .hero {
    background: linear-gradient(180deg, #0b1628 0%, #1a1a2e 50%, #060610 100%);
}

/* 3. Instant visibility: script.js hides these with inline styles until
   they scroll into view, and an animation-timeline block does the same
   where supported. On lite everything is visible immediately. */
html.rc-lite .show-card,
html.rc-lite .member-card,
html.rc-lite .stat-item,
html.rc-lite .social-link {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}
html.rc-lite .animate-on-scroll {
    opacity: 1 !important;
    animation: none !important;
}

/* 4. Infinite animations off. */
html.rc-lite .section-divider::after {
    animation: none;
}
html.rc-lite .scroll-arrow {
    animation: none;
}
html.rc-lite .members-orb {
    display: none;
}
html.rc-lite .show-snackbar::before,
html.rc-lite .show-snackbar::after,
html.rc-lite .show-modal::after {
    display: none;
}
html.rc-lite .snackbar-live-dot,
html.rc-lite .snackbar-eq-bar {
    animation: none !important;
}
html.rc-lite .member-card:hover .eq-bar {
    animation: none;
}

/* 5. Shimmer sweeps off. .social-link::before stays: it is a brand
   colour hover fill, not a shimmer. */
html.rc-lite .btn::before,
html.rc-lite .show-card::after,
html.rc-lite .media-item::after,
html.rc-lite .past-shows-toggle::after {
    display: none;
}

/* 6. Literal backdrop-filter surfaces become solid panels. Backgrounds
   keep their colours with the alpha nudged up so text stays readable
   without the blur. */
html.rc-lite .nav-menu.mobile-open {
    background: rgba(10, 10, 10, 0.99);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.rc-lite .btn-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.rc-lite .image-modal {
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.rc-lite .bio-btn {
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.rc-lite .bio-modal-backdrop {
    background: rgba(6, 6, 8, 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.rc-lite .bio-modal-close {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.rc-lite .gear-detail-backdrop {
    background: rgba(4, 4, 7, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.rc-lite .modal {
    background-color: rgba(0, 0, 0, 0.88);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.rc-lite .show-modal-backdrop {
    background: rgba(6, 6, 8, 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.rc-lite .blog-modal {
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.rc-lite .blog-modal-close {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.rc-lite .blog-page-btn,
html.rc-lite .gallery-page-btn {
    background: rgba(10, 10, 12, 0.85);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.rc-lite .lightbox-meta span {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.rc-lite .booking-overlay {
    background: rgba(0, 0, 0, 0.94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 7. Flatten the 3 layer hover glows to one cheap shadow. The hover
   lift transforms are already off via section 3. */
html.rc-lite .show-card:hover,
html.rc-lite .member-card:hover,
html.rc-lite .media-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}