/* Reveal Labs — view shells (shared cinematic classes come from grade_walk.css) */

#view-reveal-lab-minimal,
#view-reveal-lab-premium,
#view-reveal-lab-athletic,
#view-reveal-lab-glass {
  display: none;
  flex-direction: column;
  background: var(--rl-bg-base, var(--bg0, #06080e));
  overflow: hidden;
  position: fixed;
  inset: 0;
  z-index: 110;
  isolation: isolate;
  /* Ambient palette defaults (overridden per skin) */
  --rl-bg-base: #06080e;
  --rl-glow-1: rgba(120, 140, 170, 0.22);
  --rl-glow-2: rgba(80, 100, 130, 0.18);
  --rl-glow-3: rgba(140, 160, 190, 0.14);
  --rl-glow-4: rgba(60, 80, 110, 0.16);
}

#view-reveal-lab-minimal.view--active,
#view-reveal-lab-premium.view--active,
#view-reveal-lab-athletic.view--active,
#view-reveal-lab-glass.view--active {
  display: flex;
}

/* Smooth color drift — two layers crossfade so hue shifts feel continuous */
#view-reveal-lab-minimal::before,
#view-reveal-lab-premium::before,
#view-reveal-lab-athletic::before,
#view-reveal-lab-glass::before,
#view-reveal-lab-minimal::after,
#view-reveal-lab-premium::after,
#view-reveal-lab-athletic::after,
#view-reveal-lab-glass::after {
  content: '';
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

#view-reveal-lab-minimal::before,
#view-reveal-lab-premium::before,
#view-reveal-lab-athletic::before,
#view-reveal-lab-glass::before {
  background:
    radial-gradient(ellipse 70% 55% at 18% 28%, var(--rl-glow-1) 0%, transparent 58%),
    radial-gradient(ellipse 65% 50% at 82% 72%, var(--rl-glow-2) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.35) 100%);
  animation: rl-bg-a 18s ease-in-out infinite;
}

#view-reveal-lab-minimal::after,
#view-reveal-lab-premium::after,
#view-reveal-lab-athletic::after,
#view-reveal-lab-glass::after {
  background:
    radial-gradient(ellipse 68% 52% at 78% 22%, var(--rl-glow-3) 0%, transparent 56%),
    radial-gradient(ellipse 72% 58% at 22% 78%, var(--rl-glow-4) 0%, transparent 54%),
    radial-gradient(ellipse 100% 80% at 50% 110%, rgba(0, 0, 0, 0.28) 0%, transparent 60%);
  animation: rl-bg-b 18s ease-in-out infinite;
}

#view-reveal-lab-minimal > *,
#view-reveal-lab-premium > *,
#view-reveal-lab-athletic > *,
#view-reveal-lab-glass > * {
  position: relative;
  z-index: 1;
}

@keyframes rl-bg-a {
  0%, 100% {
    opacity: 0.92;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: 0.28;
    transform: translate3d(3%, -2%, 0) scale(1.06);
  }
}

@keyframes rl-bg-b {
  0%, 100% {
    opacity: 0.22;
    transform: translate3d(0, 0, 0) scale(1.04);
  }
  50% {
    opacity: 0.95;
    transform: translate3d(-2.5%, 2%, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-reveal-lab-minimal::before,
  #view-reveal-lab-premium::before,
  #view-reveal-lab-athletic::before,
  #view-reveal-lab-glass::before,
  #view-reveal-lab-minimal::after,
  #view-reveal-lab-premium::after,
  #view-reveal-lab-athletic::after,
  #view-reveal-lab-glass::after {
    animation: none;
    opacity: 0.55;
    transform: none;
  }
}

body:has(#view-reveal-lab-minimal.view--active) .gmd-panel,
body:has(#view-reveal-lab-premium.view--active) .gmd-panel,
body:has(#view-reveal-lab-athletic.view--active) .gmd-panel,
body:has(#view-reveal-lab-glass.view--active) .gmd-panel,
body:has(#view-reveal-lab-minimal.view--active) .gmd-modal,
body:has(#view-reveal-lab-premium.view--active) .gmd-modal,
body:has(#view-reveal-lab-athletic.view--active) .gmd-modal,
body:has(#view-reveal-lab-glass.view--active) .gmd-modal,
body:has(#view-reveal-lab-minimal.view--active) .gmd-overlay,
body:has(#view-reveal-lab-premium.view--active) .gmd-overlay,
body:has(#view-reveal-lab-athletic.view--active) .gmd-overlay,
body:has(#view-reveal-lab-glass.view--active) .gmd-overlay {
  pointer-events: none !important;
}

body:has(#view-reveal-lab-minimal.view--active) .fr-preview-fab,
body:has(#view-reveal-lab-premium.view--active) .fr-preview-fab,
body:has(#view-reveal-lab-athletic.view--active) .fr-preview-fab,
body:has(#view-reveal-lab-glass.view--active) .fr-preview-fab,
body:has(#view-reveal-lab-minimal.view--active) .vp2-preview-fab,
body:has(#view-reveal-lab-premium.view--active) .vp2-preview-fab,
body:has(#view-reveal-lab-athletic.view--active) .vp2-preview-fab,
body:has(#view-reveal-lab-glass.view--active) .vp2-preview-fab,
body:has(#view-reveal-lab-minimal.view--active) .hv2-preview-fab,
body:has(#view-reveal-lab-premium.view--active) .hv2-preview-fab,
body:has(#view-reveal-lab-athletic.view--active) .hv2-preview-fab,
body:has(#view-reveal-lab-glass.view--active) .hv2-preview-fab,
body:has(#view-reveal-lab-minimal.view--active) .fr-style-fab,
body:has(#view-reveal-lab-premium.view--active) .fr-style-fab,
body:has(#view-reveal-lab-athletic.view--active) .fr-style-fab,
body:has(#view-reveal-lab-glass.view--active) .fr-style-fab,
body:has(#view-reveal-lab-minimal.view--active) .fr-reveal-fab,
body:has(#view-reveal-lab-premium.view--active) .fr-reveal-fab,
body:has(#view-reveal-lab-athletic.view--active) .fr-reveal-fab,
body:has(#view-reveal-lab-glass.view--active) .fr-reveal-fab,
body:has(#view-reveal-lab-minimal.view--active) .gmd-gallery-fab,
body:has(#view-reveal-lab-premium.view--active) .gmd-gallery-fab,
body:has(#view-reveal-lab-athletic.view--active) .gmd-gallery-fab,
body:has(#view-reveal-lab-glass.view--active) .gmd-gallery-fab,
body:has(#view-reveal-lab-minimal.view--active) .gw-preview-fab,
body:has(#view-reveal-lab-premium.view--active) .gw-preview-fab,
body:has(#view-reveal-lab-athletic.view--active) .gw-preview-fab,
body:has(#view-reveal-lab-glass.view--active) .gw-preview-fab,
body:has(#view-reveal-lab-minimal.view--active) .rl-lab-fab,
body:has(#view-reveal-lab-premium.view--active) .rl-lab-fab,
body:has(#view-reveal-lab-athletic.view--active) .rl-lab-fab,
body:has(#view-reveal-lab-glass.view--active) .rl-lab-fab {
  display: none !important;
}

body:has(#view-grade-walk.view--active) .rl-lab-fab {
  display: none !important;
}

.rl-lab-fab {
  position: fixed;
  right: 14px;
  z-index: 90;
  min-width: 48px;
  height: 40px;
  padding: 0 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 12, 18, 0.92);
  color: rgba(255, 255, 255, 0.88);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
body:not(.theme-home) .rl-lab-fab {
  display: none;
}
.rl-lab-fab--minimal { bottom: 248px; border-color: rgba(200, 210, 220, 0.35); color: #d7dee8; }
.rl-lab-fab--premium { bottom: 294px; border-color: rgba(212, 175, 55, 0.45); color: #e8c56a; }
.rl-lab-fab--athletic { bottom: 340px; border-color: rgba(255, 80, 60, 0.45); color: #ff6b4a; }
.rl-lab-fab--glass { bottom: 386px; border-color: rgba(140, 200, 255, 0.4); color: #9ad0ff; }