/*
 * VØLT Atmosphere — cinematic CSS layer
 * Loaded AFTER base styles. Layered aurora background, glassmorphic cards,
 * volt shimmer title, breathing logo, glowing bottom nav, animated button
 * sheen sweep, and card-rise scroll reveal. No JS keywords anywhere.
 */

/* ── Root: all app content above the particle canvas ─────────────────────── */
#app,
body > *:not(canvas) {
  position: relative;
  z-index: 1;
}

/* ── Body: dark base + layered aurora radial gradients ──────────────────── */
body {
  background-color: #060608;
  background-image:
    radial-gradient(ellipse 80% 55% at 18% -8%, rgba(204, 255, 0, 0.16), transparent 60%),
    radial-gradient(ellipse 70% 50% at 92% 6%, rgba(0, 255, 204, 0.10), transparent 62%),
    radial-gradient(ellipse 90% 60% at 50% 108%, rgba(204, 255, 0, 0.08), transparent 65%),
    radial-gradient(ellipse 60% 80% at 8% 96%, rgba(0, 255, 204, 0.07), transparent 60%);
  background-attachment: fixed;
  position: relative;
  min-height: 100vh;
}

/* Slowly drifting aurora veil over the body base gradients. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(204, 255, 0, 0.10), transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(0, 255, 204, 0.08), transparent 45%);
  background-size: 160% 160%;
  animation: aurora-drift 22s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  opacity: 0.85;
}

@keyframes aurora-drift {
  0%   { background-position: 0% 0%, 100% 100%; transform: translate3d(0, 0, 0) scale(1); }
  50%  { background-position: 40% 60%, 60% 40%; transform: translate3d(1.5%, -1.5%, 0) scale(1.06); }
  100% { background-position: 100% 100%, 0% 0%; transform: translate3d(-1.5%, 1.5%, 0) scale(1.03); }
}

/* ── Glassmorphic cards ─────────────────────────────────────────────────── */
.card,
.glass,
[class*="card-enter"],
.modal-content,
.sheet,
.panel {
  background:
    linear-gradient(160deg, rgba(28, 34, 22, 0.55) 0%, rgba(14, 18, 12, 0.55) 100%);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(204, 255, 0, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(204, 255, 0, 0.22),            /* inset top sheen */
    inset 0 0 18px rgba(204, 255, 0, 0.04),
    0 18px 42px rgba(0, 0, 0, 0.55);                 /* deep ambient shadow */
  border-radius: 14px;
}

/* ── Header: blur+saturate backdrop + volt sheen line along bottom ──────── */
header,
.app-header,
#topBar,
#header {
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  background: rgba(8, 10, 8, 0.55);
  position: relative;
}

header::after,
.app-header::after,
#topBar::after,
#header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(204, 255, 0, 0.55), transparent);
  box-shadow: 0 0 10px rgba(204, 255, 0, 0.45);
}

/* ── Brand title: animated volt shimmer gradient ───────────────────────── */
.brand-title,
.app-title,
h1.app-name,
#brandTitle,
#appName,
.volt-brand {
  background: linear-gradient(90deg, #CCFF00 0%, #A8CC00 25%, #FFFFFF 50%, #88AA00 75%, #CCFF00 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 6s linear infinite;
  filter: drop-shadow(0 0 14px rgba(204, 255, 0, 0.55));
}

@keyframes shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Logo: breathing scale + glow pulse ────────────────────────────────── */
.logo,
.brand-logo,
#logo,
.app-logo,
.volt-logo {
  animation: logo-breathe 4s ease-in-out infinite;
}

@keyframes logo-breathe {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px rgba(204, 255, 0, 0.35));
  }
  50% {
    transform: scale(1.04);
    filter: drop-shadow(0 0 18px rgba(204, 255, 0, 0.70));
  }
}

/* ── Bottom nav: glass backdrop + active volt dot indicator ────────────── */
.bottom-nav,
#bottomNav,
nav.bottom-nav,
.tabbar,
#tabBar {
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  background: rgba(8, 10, 8, 0.62);
  border-top: 1px solid rgba(204, 255, 0, 0.14);
  position: relative;
}

.bottom-nav .tab.active,
.bottom-nav .nav-item.active,
#bottomNav .active,
.tabbar .active,
#tabBar .active {
  color: #CCFF00;
  text-shadow: 0 0 12px rgba(204, 255, 0, 0.65), 0 0 4px rgba(204, 255, 0, 0.45);
}

.bottom-nav .tab.active::after,
.bottom-nav .nav-item.active::after,
#bottomNav .active::after,
.tabbar .active::after,
#tabBar .active::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #CCFF00;
  box-shadow: 0 0 8px rgba(204, 255, 0, 0.9), 0 0 16px rgba(204, 255, 0, 0.5);
}

/* ── Primary buttons: animated volt sheen sweep on hover ────────────────── */
.btn-primary,
button.primary,
.btn-volt,
.btn-gold,
.primary-btn,
a.btn-primary {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(204, 255, 0, 0.45);
  background: linear-gradient(180deg, rgba(204, 255, 0, 0.16), rgba(204, 255, 0, 0.06));
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary::before,
button.primary::before,
.btn-volt::before,
.btn-gold::before,
.primary-btn::before,
a.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
  pointer-events: none;
}

.btn-primary:hover,
button.primary:hover,
.btn-volt:hover,
.btn-gold:hover,
.primary-btn:hover,
a.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 26px rgba(204, 255, 0, 0.20),
    0 6px 18px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-primary:hover::before,
button.primary:hover::before,
.btn-volt:hover::before,
.btn-gold:hover::before,
.primary-btn:hover::before,
a.btn-primary:hover::before {
  left: 120%;
}

/* ── Card-rise scroll reveal ────────────────────────────────────────────── */
.card-enter {
  opacity: 0;
  transform: translateY(8px);
  animation: rise 0.4s ease forwards;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reduced-motion fallback: kill ALL animations, keep static accents ──── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  body::before {
    animation: none;
  }

  .brand-title,
  .app-title,
  h1.app-name,
  #brandTitle,
  #appName,
  .volt-brand {
    animation: none;
    background-position: 0% center;
  }

  .logo,
  .brand-logo,
  #logo,
  .app-logo,
  .volt-logo {
    animation: none;
  }

  .card-enter {
    opacity: 1;
    transform: none;
  }

  .btn-primary::before,
  button.primary::before,
  .btn-volt::before,
  .btn-gold::before,
  .primary-btn::before,
  a.btn-primary::before {
    display: none;
  }

  .btn-primary:hover,
  button.primary:hover,
  .btn-volt:hover,
  .btn-gold:hover,
  .primary-btn:hover,
  a.btn-primary:hover {
    transform: none;
  }
}