/* ─────────────────────────────────────────────────────────────────────────
   E-SO Premium Themes & Glassmorphism
   Extends design-system.css with high-fidelity visual tokens.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    /* ── GLASSMORPHISM TOKENS ── */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(12px);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    
    /* ── PREMIUM NEON ACCENTS ── */
    --neon-blue: #00d2ff;
    --neon-purple: #9d50bb;
    --neon-green: #39ff14;
    --neon-pink: #ff007f;
    --neon-gold: #ffd700;

    /* ── ANIMATION TOKENS ── */
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --float-animation: float 6s ease-in-out infinite;
}

/* ── THEME OVERRIDES ── */

/* Deep Blue Sea - Premium Skin */
body[data-event="deep-blue-sea"] {
    --bg-primary: #040914;
    --accent: var(--neon-blue);
    --glass-bg: rgba(0, 162, 255, 0.05);
    --glass-border: rgba(0, 210, 255, 0.2);
}

/* Backyard Biologist - Nature Theme */
body[data-event="backyard-biologist"],
body[data-event="no-bones-about-it"] {
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('/assets/themes/backyard-biologist.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

/* Deep Blue Sea - Ocean Theme */
body[data-event="deep-blue-sea"],
body[data-event="barge-building"] {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('/assets/themes/deep-blue-sea.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

/* Disease Detectives / Crime Busters / Lab Theme */
body[data-event="disease-detectives"],
body[data-event="crime-busters"],
body[data-event="grab-a-gram"],
body[data-event="data-crunchers"] {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('/assets/themes/disease-detectives.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

/* Starry Night - Space Theme */
body[data-event="starry-night"],
body[data-event="starry-starry-night"] {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url('/assets/themes/starry-night.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

/* Engineering / Build Theme */
body[data-event="bridge-building"],
body[data-event="mystery-architecture"],
body[data-event="simple-machines"],
body[data-event="straw-egg-drop"] {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('/assets/themes/engineering.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

/* Rockets / Aero Theme */
body[data-event="paper-rockets"],
body[data-event="water-rockets"],
body[data-event="weather-or-not"] {
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('/assets/themes/rockets.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

/* Rock Hounds - Geology Theme */
body[data-event="rock-hounds"] {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('/assets/themes/rock-hounds.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

/* ── GLASSMORPHISM UTILITIES ── */
.glass-panel {
    background: var(--glass-bg, rgba(255, 255, 255, 0.03));
    backdrop-filter: var(--glass-blur, blur(12px));
    -webkit-backdrop-filter: var(--glass-blur, blur(12px));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--glass-shadow, 0 8px 32px 0 rgba(0, 0, 0, 0.37));
}

.glass-card {
    background: rgba(12, 21, 38, 0.72) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(190, 222, 255, 0.28) !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 42px rgba(0,0,0,0.45) !important;
    color: #f4f8ff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}

.force-glass {
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}

.glass-card:hover {
    transform: translateY(-5px) scale(1.01) !important;
    background: rgba(20, 34, 57, 0.82) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 14px 44px rgba(0,0,0,0.5) !important;
}

/* Improve readability for legacy card content after auto glass conversion */
[data-event] .glass-card h1,
[data-event] .glass-card h2,
[data-event] .glass-card h3,
[data-event] .glass-card h4,
[data-event] .glass-card h5,
[data-event] .glass-card h6,
[data-event] .glass-card strong,
[data-event] .glass-card .room-title,
[data-event] .glass-card .activity-title,
[data-event] .glass-card .event-card-name {
    color: #f8fbff !important;
}

[data-event] .glass-card p,
[data-event] .glass-card li,
[data-event] .glass-card span,
[data-event] .glass-card small,
[data-event] .glass-card .room-description,
[data-event] .glass-card .activity-description,
[data-event] .glass-card .event-card-desc,
[data-event] .glass-card .resource-link-source {
    color: rgba(233, 243, 255, 0.96) !important;
}

[data-event] .glass-card a:not(.event-card-cta),
[data-event] .glass-card .resource-link-title {
    color: #dff0ff !important;
}

/* ── CONTAINER CLEANSING ── */
/* Ensures legacy solid backgrounds don't hide the new cinematic themes */
[data-event] .container,
[data-event] .main,
[data-event] .content,
[data-event] .header:not(.glass-panel),
[data-event] .wrapper {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
}

/* ── ANIMATIONS ── */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* ── MASCOT STYLES ── */
.mascot-container {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 150px;
    z-index: 1000;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

.mascot-container:hover {
    transform: scale(1.05);
}

.mascot-close {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
    z-index: 1001;
    box-shadow: var(--glass-shadow);
}

.mascot-close:hover {
    background: var(--error);
    color: white;
}

.mascot-img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 10px var(--accent));
}

.mascot-bubble {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: var(--bg-raised);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    margin-bottom: var(--spacing-md);
    width: 200px;
    font-size: 14px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s var(--ease-out-expo);
}

.mascot-container:hover .mascot-bubble {
    opacity: 1;
    transform: translateY(0);
}