/* ══════════════════════════════════════════════════════════════════
   Glass Effects — sitewide ambient background + glassmorphism utilities
   Adapted from a reference project's dark navy/orange system into
   AIStoreShop's existing purple brand (#6610f2 / #1a1040) — same
   techniques (drifting ambient blobs, backdrop-filter glass, reveal-on-
   scroll), different palette.
   ══════════════════════════════════════════════════════════════════ */

:root {
    --brand-950: #0d0820;
    --brand-900: #1a1040;
    --brand-800: #2d1b69;
    --brand-700: #4c1d95;
    --brand-600: #6610f2;
    --brand-500: #8b5cf6;
    --accent-pink: #ec4899;
    --accent-sky: #38bdf8;

    /* Dark theme surfaces (public site base) */
    --surface-0: #0a0618;
    --surface-1: #120a2e;
    --surface-2: #170d3a;
    --surface-3: #1c1044;
    --text-heading: #ffffff;
    --text-body: #cbc4e0;
    --text-muted: #9a8fc0;
    --border-soft: rgba(255, 255, 255, 0.1);
    --border-soft-strong: rgba(255, 255, 255, 0.16);

    --glass-light-bg: rgba(255, 255, 255, 0.6);
    --glass-light-bg-strong: rgba(255, 255, 255, 0.78);
    --glass-light-border: rgba(102, 16, 242, 0.14);
    --glass-light-shadow: 0 8px 32px rgba(79, 70, 229, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);

    --glass-dark-bg: rgba(255, 255, 255, 0.06);
    --glass-dark-bg-strong: rgba(255, 255, 255, 0.1);
    --glass-dark-border: rgba(255, 255, 255, 0.14);
    --glass-dark-shadow: 0 8px 32px rgba(5, 2, 15, 0.55);

    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 180ms;
    --duration-medium: 380ms;
}

/* ── Public-site dark base ────────────────────────────────────────
   Body + shared chrome go dark; each page's own CSS overrides its
   section backgrounds to the --surface-* scale below. */
body {
    background: var(--surface-0);
    color: var(--text-body);
}

/* ── Sitewide ambient background ─────────────────────────────────
   Fixed behind all content; drifts slowly across the whole viewport
   so it reads through glass panels as you scroll — the public site
   now has a dark base (see `body` rule above), so blobs are tuned to
   read clearly against it, same as the reference project. ── */
.site-ambient-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.site-ambient-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    will-change: transform;
}

.site-ambient-blob--1 {
    background: radial-gradient(circle at 30% 30%, var(--brand-600), transparent 70%);
    width: 44vw; height: 44vw;
    top: -10vw; left: -12vw;
    opacity: .35;
    animation: ambientDriftA 36s var(--ease-standard) infinite;
}
.site-ambient-blob--2 {
    background: radial-gradient(circle at 70% 70%, var(--brand-700), transparent 70%);
    width: 50vw; height: 50vw;
    top: 32vh; right: -18vw;
    opacity: .32;
    animation: ambientDriftB 44s var(--ease-standard) infinite;
}
.site-ambient-blob--3 {
    background: radial-gradient(circle at 50% 50%, var(--accent-pink), transparent 70%);
    width: 30vw; height: 30vw;
    bottom: -8vw; left: 22vw;
    opacity: .22;
    animation: ambientDriftC 30s var(--ease-standard) infinite;
}
.site-ambient-blob--4 {
    background: radial-gradient(circle at 50% 50%, var(--accent-sky), transparent 70%);
    width: 26vw; height: 26vw;
    top: 58vh; left: 4vw;
    opacity: .2;
    animation: ambientDriftD 40s var(--ease-standard) infinite;
}
.site-ambient-blob--5 {
    background: radial-gradient(circle at 50% 50%, var(--brand-500), transparent 70%);
    width: 20vw; height: 20vw;
    top: 6vh; right: 14vw;
    opacity: .25;
    animation: ambientDriftE 26s var(--ease-standard) infinite;
}

@keyframes ambientDriftA {
    0%   { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(16vw, 9vh) scale(1.1); }
    50%  { transform: translate(9vw, 24vh) scale(.95); }
    75%  { transform: translate(-7vw, 11vh) scale(1.05); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes ambientDriftB {
    0%   { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(-15vw, 7vh) scale(.93); }
    50%  { transform: translate(-22vw, -5vh) scale(1.08); }
    75%  { transform: translate(-6vw, -13vh) scale(1); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes ambientDriftC {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(11vw, -9vh) scale(1.1); }
    66%  { transform: translate(-9vw, -16vh) scale(.94); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes ambientDriftD {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(13vw, -14vh) scale(1.1); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes ambientDriftE {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-9vw, 13vh) scale(.9); }
    100% { transform: translate(0, 0) scale(1); }
}

/* .site-ambient-bg uses z-index:-1 (above) so it paints behind normal-flow
   page content automatically — main/footer don't need their own stacking
   context for this, which would otherwise trap fixed-position descendants
   like Bootstrap modals inside a low z-index layer. */

/* ── Glass panel utilities ───────────────────────────────────────
   .glass-panel        — light glass, for cards on the site's normal
                          white/light backgrounds
   .glass-panel-dark   — dark glass, for use inside existing dark
                          purple hero/CTA sections
   ── */
.glass-panel {
    background: var(--glass-light-bg);
    border: 1px solid var(--glass-light-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--glass-light-shadow);
}
.glass-panel-strong {
    background: var(--glass-light-bg-strong);
    border: 1px solid var(--glass-light-border);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--glass-light-shadow);
}
.glass-panel-dark {
    background: var(--glass-dark-bg);
    border: 1px solid var(--glass-dark-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--glass-dark-shadow);
}
.glass-panel-dark-strong {
    background: var(--glass-dark-bg-strong);
    border: 1px solid var(--glass-dark-border);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--glass-dark-shadow);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-panel, .glass-panel-strong { background: #fff; }
    .glass-panel-dark, .glass-panel-dark-strong { background: var(--brand-800); }
}

/* ── Reveal on scroll ─────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity var(--duration-medium) var(--ease-standard),
                transform var(--duration-medium) var(--ease-standard);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .site-ambient-blob { animation: none !important; }
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 640px) {
    .site-ambient-blob { filter: blur(70px); }
}

/* ── Bootstrap outline buttons ──────────────────────────────────────
   site.css sets --bs-btn-color/border to the dark navy brand (#1a1040)
   for use on light backgrounds; on this dark public theme that reads
   as near-invisible dark-on-dark text. Lighten for readability. ── */
.btn-outline-primary {
    --bs-btn-color: #a78bfa;
    --bs-btn-border-color: #a78bfa;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6610f2;
    --bs-btn-hover-border-color: #6610f2;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6610f2;
    --bs-btn-active-border-color: #6610f2;
    --bs-btn-disabled-color: #6b6690;
    --bs-btn-disabled-border-color: #6b6690;
}

.btn-outline-secondary {
    --bs-btn-color: #cbc4e0;
    --bs-btn-border-color: rgba(255, 255, 255, .35);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, .12);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .5);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, .16);
    --bs-btn-active-border-color: rgba(255, 255, 255, .5);
}