/* Aurora admin premium polish — augments the built admin console.
   Uses the admin's own design tokens, so it follows light/dark theme.
   Intentionally excludes storefront/marketing elements. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&display=swap');

/* ---- Premium display typography ---- */
.h1,
.h2,
.topbar h1,
.section-title h3,
.login-hero h1,
.login-card h1 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  letter-spacing: -0.4px;
}

/* ---- Topbar on scroll ---- */
.topbar { transition: box-shadow 250ms ease, background 250ms ease, backdrop-filter 250ms ease; }
.topbar.is-scrolled {
  box-shadow: 0 8px 26px rgba(0,0,0,.12);
  backdrop-filter: saturate(180%) blur(10px);
  background: color-mix(in srgb, var(--background) 86%, transparent);
}

/* ---- Scroll reveal ---- */
.aurora-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
.aurora-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .aurora-reveal { opacity: 1 !important; transform: none !important; transition: none; } }

/* ---- Card / stat micro-interactions ---- */
.card, .stat { transition: transform 150ms ease, box-shadow 250ms ease; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-dark); }
.stat:hover { box-shadow: var(--shadow-dark); }

/* ---- Image fade-in ---- */
img.aurora-fade { opacity: 0; transition: opacity .5s ease; }
img.aurora-fade.loaded { opacity: 1; }

/* ---- Back to top ---- */
#aurora-top {
  position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: #0f0f10; border: none; font-size: 20px; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity 250ms ease, transform 250ms ease; z-index: 90; box-shadow: var(--shadow-dark);
}
#aurora-top.show { opacity: 1; pointer-events: auto; transform: none; }
#aurora-top:hover { filter: brightness(1.07); }
