/* ════════════════════════════════════════════════════════════════
   elevate.css — additive premium layer, loaded AFTER style.css.
   Adds depth, motion and a consistent signature across every page
   without touching a single existing selector (zero regression risk
   for the Supabase-wired dashboards). Everything here is opt-in via
   new classes/pseudo-elements or generic selectors on top of the
   existing design tokens.
   ════════════════════════════════════════════════════════════════ */

/* ---------- Resting depth for surfaces that only had hover shadows ---------- */
.card, .stat-card, .embed-card, .server-tile, .status-chip,
.ann-item, .faq-item, .wiki-link.active, .guild-card, .settings-pop,
.data-table, .login-card{
  box-shadow: var(--shadow-card);
}
.card:hover, .stat-card:hover, .embed-card:hover, .server-tile:hover,
.guild-card:hover{
  box-shadow: var(--shadow-elevated), var(--glow-orange-soft);
}

/* ---------- Shine-sweep on primary actions ---------- */
.btn-primary, .play-btn{
  position:relative; overflow:hidden;
}
.btn-primary::before, .play-btn::before{
  content:""; position:absolute; inset:0;
  background:var(--grad-sheen);
  transform:translateX(-120%);
  transition:transform .6s var(--ease-premium);
  pointer-events:none;
}
.btn-primary:hover::before, .play-btn:hover::before{ transform:translateX(120%); }

/* ---------- Magnetic hover (JS sets --mx/--my via enhance.js) ----------
   Combined selectors so this wins over the existing .btn-primary:hover /
   .play-btn:hover transform rules in style.css (same specificity would
   otherwise let the original rule silently block this one). */
.btn-primary.magnetic:hover{
  transform: translateY(-2px) translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px));
}
.play-btn.magnetic:hover{
  transform: translateY(-2px) translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px));
}
.btn-primary.magnetic, .play-btn.magnetic{
  transition: transform .25s var(--ease-premium), box-shadow .2s ease;
}

/* ---------- Scroll reveal (enhance.js toggles .is-visible) ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease-premium), transform .8s var(--ease-premium);
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{
  opacity:0; transform:translateY(20px);
  transition:opacity .6s var(--ease-premium), transform .6s var(--ease-premium);
}
.reveal-stagger.is-visible > *{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.03s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.09s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.15s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.21s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.27s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:.33s; }
.reveal-stagger.is-visible > *:nth-child(n+7){ transition-delay:.38s; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{ opacity:1; transform:none; transition:none; }
}

/* ---------- Root-network canvas (extends the existing .root-line
   signature into an ambient background — same motif, larger scale) ---------- */
.root-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.5; mix-blend-mode:screen; pointer-events:none;
}
html[data-theme="light"] .root-canvas{ opacity:.22; mix-blend-mode:multiply; }
@media (prefers-reduced-motion: reduce){ .root-canvas{ display:none; } }

/* ---------- Animated gradient on the hero accent text ---------- */
.hero h1 .accent, .hero-word .accent{
  background-size:200% 100%;
  animation:accentDrift 8s ease-in-out infinite;
}
@keyframes accentDrift{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
@media (prefers-reduced-motion: reduce){ .hero h1 .accent, .hero-word .accent{ animation:none; } }

/* ---------- Elevated card tone for nested/secondary surfaces ---------- */
.card-2{ background:var(--card-2); border:1px solid var(--line-soft); border-radius:var(--radius); }

/* ---------- Refined focus ring (accessibility + premium consistency) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Stat numbers: subtle pop when they resolve from "…" ---------- */
.stat-value, #ovWarnings, #ovLeveled{
  transition: opacity .3s ease, transform .3s var(--ease-premium);
}
.stat-value.pop{ animation:statPop .4s var(--ease-premium); }
@keyframes statPop{ 0%{ transform:scale(.9); opacity:.4; } 100%{ transform:scale(1); opacity:1; } }

/* ---------- Live dot: richer layered pulse (dashboards) ---------- */
.live-dot{ box-shadow:0 0 0 0 rgba(139,195,74,.5); }

/* ---------- Section dividers reusing the root motif at small scale ---------- */
.root-divider{
  width:64px; height:14px; margin:0 auto; opacity:.55;
}
.root-divider path{ stroke:var(--orange-dim); stroke-width:1.4; fill:none; }
html[data-theme="light"] .root-divider path{ stroke:var(--orange); }

/* ---------- Sidebar / nav active state gets a soft ambient glow ---------- */
.dash-nav button.active, .rail-btn.active{
  box-shadow: var(--shadow-card), var(--glow-orange-soft);
}

/* ---------- Smoother, slightly deeper card hover lift site-wide ---------- */
.card, .embed-card, .server-tile, .guild-card{
  transition: transform .35s var(--ease-premium), box-shadow .35s var(--ease-premium), border-color .35s var(--ease-premium);
}

/* ---------- Dashboard sidebar polish (admin.c4rr0t.de + bot.c4rr0t.de share
   these classes, so this single pass elevates both at once) ---------- */
.dash-sidebar{
  background:linear-gradient(180deg, var(--bg-alt), var(--bg));
}
.nav-group{ margin-bottom:22px; }
.nav-group:not(:first-child){ padding-top:14px; border-top:1px solid var(--line-soft); }
.group-label{ margin-bottom:2px; }

.dash-nav button.active, .dash-nav a.active{
  background:
    linear-gradient(90deg, rgba(255,122,41,.16), rgba(255,122,41,.02) 65%, transparent),
    var(--card-2);
  border-radius:9px;
  box-shadow: var(--shadow-card);
}
.dash-nav button:hover, .dash-nav a:hover{
  background:var(--card-2);
}

.sidebar-profile{
  margin:10px 10px 14px; padding:12px; border-radius:12px;
  background:var(--card-2); border:1px solid var(--line-soft);
}
.avatar-mark, .profile-avatar{
  box-shadow: var(--glow-orange-soft), 0 0 0 3px var(--card-2);
}

.dash-search{ background:var(--card-2); }
.dash-search:focus-within{ box-shadow: var(--shadow-card), var(--glow-orange-soft); }