/* ==========================================================================
   AURORA GLASS — homepage prototype (turned-up version of the refresh layer)
   Linked ONLY on index.html so it stays scoped to the homepage and is
   fully reversible (remove the two <link>/<script> lines to roll back).
   Builds on refresh.css tokens + the .rsx-aurora element refresh.js mounts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reactive aurora — brighter, deeper, follows the cursor + scroll
   JS sets --rsx-ax/--rsx-ay (mouse parallax) and --rsx-intensity (scroll).
   -------------------------------------------------------------------------- */
body .rsx-aurora {
  opacity: 0.38 !important;
  filter: blur(64px) saturate(130%) !important;
  transform: none !important;
  transition: opacity 0.5s var(--rs-ease), filter 0.5s var(--rs-ease);
}

body .rsx-orb3 {
  display: none !important;
}

/* a third drifting orb for depth — colours come from the product palette */
body .rsx-aurora::before {
  background: radial-gradient(circle at 30% 30%, var(--rsx-c1, rgba(10, 92, 255, 0.95)), transparent 60%),
              radial-gradient(circle at 70% 60%, var(--rsx-c2, rgba(124, 58, 237, 0.9)), transparent 60%);
}
body .rsx-orb3 {
  position: fixed;
  z-index: -2;
  width: 46vmax;
  height: 46vmax;
  top: 32%;
  left: 36%;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: multiply;
  filter: blur(60px) saturate(150%);
  opacity: 0.5;
  background: radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.7), transparent 62%);
  transform: translate3d(calc(var(--rsx-ax, 0px) * -1.4), calc(var(--rsx-ay, 0px) * -1.4), 0);
  transition: transform 0.6s var(--rs-ease);
  animation: rsx-orb3-float 28s var(--rs-ease) infinite alternate;
}
@keyframes rsx-orb3-float {
  0%   { top: 30%; left: 34%; }
  100% { top: 42%; left: 52%; }
}

/* --------------------------------------------------------------------------
   2. Floating glass header — detaches into a rounded pill bar on scroll
   -------------------------------------------------------------------------- */
body.rsx-scrolled #header .headerFixed,
body.rsx-scrolled .headerFixed,
body.rsx-scrolled .themes_global_header.headerFixed {
  left: 0;
  transform: none;
  width: 100%;
  border-radius: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.28) !important;
  background-color: rgba(255, 255, 255, 0.28) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 8px 30px -18px rgba(11, 16, 32, 0.25);
}

/* --------------------------------------------------------------------------
   3. Liquid-chrome sheen sweeping across hero carousel titles
   -------------------------------------------------------------------------- */
body [class*="ly_carousel_"] .carousel_title.themes_box_title {
  background: linear-gradient(
      100deg,
      #0a5cff 0%,
      #7c3aed 28%,
      #ffffff 46%,
      #ec4899 64%,
      #7c3aed 100%
  ) !important;
  background-size: 280% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: rsx-sheen 6s linear infinite;
}
@keyframes rsx-sheen {
  0%   { background-position: 0% 50%; }
  100% { background-position: 280% 50%; }
}

/* --------------------------------------------------------------------------
   4. Section reveal gets a touch more drama on the homepage
   -------------------------------------------------------------------------- */
body [data-rsx-reveal] {
  transform: translateY(46px) scale(0.985);
}
body [data-rsx-reveal].rsx-in {
  transform: none;
}

/* --------------------------------------------------------------------------
   5. Loader — metallic sweep on the wordmark
   -------------------------------------------------------------------------- */
body .rsx-loader { background: #04050d; }
body .rsx-loader__mark {
  background: linear-gradient(100deg, #7c3aed, #22d3ee 30%, #ffffff 50%, #ec4899 70%, #0a5cff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rsx-sheen 2.6s linear infinite;
}

/* --------------------------------------------------------------------------
   6. Category accent rail — gradient strip under the hero (JS-mounted)
   -------------------------------------------------------------------------- */
body .rsx-accent-rail {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 16px;
  position: relative;
  z-index: 2;
  background: transparent;
}
body .rsx-accent-rail a {
  font-family: var(--rs-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: var(--rs-pill);
  color: #fff;
  box-shadow: 0 12px 30px -16px rgba(11, 16, 32, 0.5);
  transition: transform 0.3s var(--rs-ease-bounce), box-shadow 0.3s var(--rs-ease);
}
body .rsx-accent-rail a:hover { transform: translateY(-3px) scale(1.04); }
body .rsx-accent-rail a.rail-watch  { background: var(--rs-grad-cool); }
body .rsx-accent-rail a.rail-audio  { background: var(--rs-grad-hero); }
body .rsx-accent-rail a.rail-charge { background: var(--rs-grad-warm); color: var(--rs-ink); }
body .rsx-accent-rail a.rail-ring   { background: var(--rs-grad-lime); color: var(--rs-ink); }

/* --------------------------------------------------------------------------
   7. Comet-trail cursor (desktop, motion on) — mounted by JS
   -------------------------------------------------------------------------- */
body .rsx-comet {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

@media (max-width: 1000px) {
  body .rsx-comet { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body .rsx-aurora,
  body .rsx-orb3,
  body [class*="ly_carousel_"] .carousel_title.themes_box_title,
  body .rsx-loader__mark { animation: none !important; transition: none !important; }
  body .rsx-comet { display: none; }
}