/*
 * Malleable Reality Theme Core - Hypnotic Abyssal Edition
 * A modular, dynamic CSS theme built on actively shifting gradients, 
 * rotating void colors, and hypnotic pulse effects.
 */

:root {
    /* Dynamic Void Colors - Derived from the Eye Mandala */
    --mr-void-1: #06000a;
    /* Deepest black-purple */
    --mr-void-2: #1c0036;
    /* Heavy violet */
    --mr-void-3: #2a0005;
    /* Deep abyssal red */

    --mr-primary: #d91c1c;
    /* The striking crimson of the eye */
    --mr-secondary: #ff7300;
    /* Swirling fiery orange */
    --mr-accent: #ffcc00;
    /* Hypnotic yellow/gold */
    --mr-purple: #5c18a8;
    /* The vibrant, twisting purple */

    --mr-text-main: #f4ecf9;
    --mr-text-muted: #957ca6;

    /* Core Thematic Glows */
    --mr-glow-crimson: 0 0 30px rgba(217, 28, 28, 0.6);
    --mr-glow-gold: 0 0 25px rgba(255, 204, 0, 0.5);
    --mr-glow-purple: 0 0 35px rgba(92, 24, 168, 0.7);

    /* Glass and Shadows */
    --mr-bg-panel: rgba(10, 2, 15, 0.85);
    /* Very dark glass */
    --mr-shadow-void: 0 20px 60px 0 rgba(0, 0, 0, 0.95), inset 0 0 30px rgba(0, 0, 0, 0.8);

    --mr-border-radius: 12px;
    --mr-font-family: 'Outfit', 'Inter', system-ui, sans-serif;
}

/* ==========================================================================
   Hypnotic Foundation
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body.mr-theme {
    margin: 0;
    padding: 0;
    font-family: var(--mr-font-family);
    color: var(--mr-text-main);
    min-height: 100vh;
    line-height: 1.7;
    overflow-x: hidden;
    background-color: var(--mr-void-1);
}

/* 
   The Hypnotic Background 
   Uses layered, moving radial gradients to simulate the swirling depths
*/
.mr-hypnotic-bg {
    position: fixed;
    top: -10%;
    left: -10%;
    width: 120vw;
    height: 120vh;
    z-index: -2;
    background:
        radial-gradient(circle at 50% 50%, var(--mr-void-2) 0%, transparent 60%),
        radial-gradient(circle at 30% 70%, var(--mr-void-3) 0%, transparent 70%),
        radial-gradient(circle at 70% 30%, var(--mr-purple) 0%, transparent 50%);
    background-color: var(--mr-void-1);
    background-blend-mode: screen;
    opacity: 0.8;
}

/* A secondary overlay for texture and deeper shadows */
.mr-hypnotic-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    pointer-events: none;
}

/* Background swirl removed for a more static theme */

/* ==========================================================================
   Typography Utilities
   ========================================================================== */
.mr-theme h1,
.mr-theme h2,
.mr-theme h3 {
    font-weight: 700;
    margin-top: 0;
}

.mr-text-gradient {
    background: linear-gradient(to right, var(--mr-accent), var(--mr-secondary), var(--mr-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
}

.mr-text-accent {
    color: var(--mr-accent);
    text-shadow: var(--mr-glow-gold);
}

.mr-text-primary {
    color: var(--mr-primary);
    text-shadow: var(--mr-glow-crimson);
}

.mr-text-muted {
    color: var(--mr-text-muted);
}

/* ==========================================================================
   Universe Elements (Starfield & Floating)
   ========================================================================== */

@keyframes mr-float-global {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-15px);
    }
}

@keyframes mr-star-drift-slow {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-400px);
    }
}

@keyframes mr-star-drift-medium {
    0% {
        transform: translateY(0) translateX(0);
    }

    100% {
        transform: translateY(-600px) translateX(-50px);
    }
}

@keyframes mr-star-drift-fast {
    0% {
        transform: translateY(0) translateX(0);
    }

    100% {
        transform: translateY(-800px) translateX(50px);
    }
}

.mr-starfield {
    position: fixed;
    top: -100%;
    left: -50%;
    width: 200vw;
    height: 300vh;
    z-index: -1;
    pointer-events: none;
    opacity: 0.85;
    background: transparent;
}

/* Layer 1: Slow, tiny background stars */
.mr-starfield::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        10vw 20vh rgba(255, 204, 0, 0.4), 30vw 50vh rgba(255, 255, 255, 0.3), 50vw 80vh rgba(255, 204, 0, 0.5),
        70vw 10vh rgba(255, 255, 255, 0.4), 90vw 40vh rgba(255, 204, 0, 0.3), 15vw 75vh rgba(255, 255, 255, 0.5),
        45vw 15vh rgba(255, 204, 0, 0.4), 65vw 60vh rgba(255, 255, 255, 0.3), 85vw 90vh rgba(255, 204, 0, 0.5),
        25vw 35vh rgba(255, 255, 255, 0.4), 55vw 25vh rgba(255, 204, 0, 0.3), 80vw 5vh rgba(255, 255, 255, 0.5),
        110vw 120vh rgba(255, 204, 0, 0.4), 130vw 150vh rgba(255, 255, 255, 0.3), 150vw 180vh rgba(255, 204, 0, 0.5),
        170vw 110vh rgba(255, 255, 255, 0.4), 190vw 140vh rgba(255, 204, 0, 0.3), 115vw 175vh rgba(255, 255, 255, 0.5),
        145vw 115vh rgba(255, 204, 0, 0.4), 165vw 160vh rgba(255, 255, 255, 0.3), 185vw 190vh rgba(255, 204, 0, 0.5),
        125vw 135vh rgba(255, 255, 255, 0.4), 155vw 125vh rgba(255, 204, 0, 0.3), 180vw 105vh rgba(255, 255, 255, 0.5),
        5vw 190vh rgba(255, 204, 0, 0.4), 35vw 160vh rgba(255, 255, 255, 0.3), 60vw 130vh rgba(255, 204, 0, 0.5),
        80vw 170vh rgba(255, 255, 255, 0.4), 95vw 115vh rgba(255, 204, 0, 0.3), 20vw 145vh rgba(255, 255, 255, 0.5);
    animation: mr-star-drift-slow 200s linear infinite;
    will-change: transform;
}

/* Layer 2: Medium speed, slightly larger stars */
.mr-starfield::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        20vw 15vh rgba(255, 204, 0, 0.6), 60vw 45vh rgba(255, 230, 100, 0.5), 85vw 75vh rgba(255, 215, 60, 0.7),
        10vw 85vh rgba(255, 204, 0, 0.8), 40vw 30vh rgba(255, 240, 150, 0.6), 75vw 10vh rgba(255, 204, 0, 0.5),
        95vw 55vh rgba(255, 230, 100, 0.7), 35vw 90vh rgba(255, 215, 60, 0.6), 5vw 40vh rgba(255, 204, 0, 0.8),
        50vw 65vh rgba(255, 240, 150, 0.5), 120vw 115vh rgba(255, 204, 0, 0.6), 160vw 145vh rgba(255, 230, 100, 0.5),
        185vw 175vh rgba(255, 215, 60, 0.7), 110vw 185vh rgba(255, 204, 0, 0.8), 140vw 130vh rgba(255, 240, 150, 0.6),
        175vw 110vh rgba(255, 204, 0, 0.5), 195vw 155vh rgba(255, 230, 100, 0.7), 135vw 190vh rgba(255, 215, 60, 0.6),
        105vw 140vh rgba(255, 204, 0, 0.8), 150vw 165vh rgba(255, 240, 150, 0.5);
    animation: mr-star-drift-medium 150s linear infinite;
    will-change: transform;
}

/* Layer 3: Fast, brightest/largest foreground stars */
.mr-starfield-foreground {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow:
        15vw 30vh rgba(255, 204, 0, 0.9), 45vw 80vh rgba(255, 240, 150, 0.8), 80vw 25vh rgba(255, 215, 60, 0.9),
        25vw 60vh rgba(255, 204, 0, 0.7), 65vw 15vh rgba(255, 230, 100, 0.9), 90vw 70vh rgba(255, 204, 0, 0.8),
        115vw 130vh rgba(255, 204, 0, 0.9), 145vw 180vh rgba(255, 240, 150, 0.8), 180vw 125vh rgba(255, 215, 60, 0.9),
        125vw 160vh rgba(255, 204, 0, 0.7), 165vw 115vh rgba(255, 230, 100, 0.9), 190vw 170vh rgba(255, 204, 0, 0.8);
    animation: mr-star-drift-fast 100s linear infinite;
    will-change: transform;
}

/* Base floating classes for components */
.mr-floating {
    animation: mr-float-global 6s ease-in-out infinite alternate;
    will-change: transform;
}

.mr-floating-delay-1 {
    animation: mr-float-global 6.5s ease-in-out infinite alternate;
    animation-delay: -1s;
    will-change: transform;
}

.mr-floating-delay-2 {
    animation: mr-float-global 5.5s ease-in-out infinite alternate;
    animation-delay: -2.5s;
    will-change: transform;
}

.mr-floating-delay-3 {
    animation: mr-float-global 7s ease-in-out infinite alternate;
    animation-delay: -4s;
    will-change: transform;
}


/* ==========================================================================
   Structural Elements
   ========================================================================== */
.mr-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 4rem 2rem;
    position: relative;
    z-index: 10;
}

/* Hypnotic Panels */
.mr-panel {
    background: var(--mr-bg-panel);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    border-radius: var(--mr-border-radius);
    box-shadow: var(--mr-shadow-void);
    padding: 3rem;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
    min-height: 450px;
    /* Animated breathing effect on panels */
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.6s ease, box-shadow 0.6s ease;

    /* Persistent gold glowing trim by default, can be overridden via --panel-glow */
    --panel-glow: rgba(255, 204, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--mr-shadow-void), inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.mr-panel:hover {
    transform: translateY(-5px) scale(1.01);
    border-color: var(--panel-glow);
    box-shadow: var(--mr-shadow-void), inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 35px var(--panel-glow);
}

/* ==========================================================================
   Interactive Elements
   ========================================================================== */
.mr-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 3rem;
    font-family: var(--mr-font-family);
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    background: linear-gradient(135deg, rgba(217, 28, 28, 0.8), rgba(92, 24, 168, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: var(--mr-glow-crimson), inset 0 0 15px rgba(0, 0, 0, 0.8);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.mr-button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 204, 0, 0.4) 0%, transparent 60%);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.5s ease;
}

.mr-button:hover {
    transform: translateY(-3px) scale(1.05);
    border-color: rgba(255, 204, 0, 0.6);
    box-shadow: var(--mr-glow-gold), 0 15px 30px rgba(0, 0, 0, 0.9);
    background: linear-gradient(135deg, rgba(92, 24, 168, 0.9), rgba(217, 28, 28, 0.9));
    color: var(--mr-accent);
}

.mr-button:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* ==========================================================================
   Animations
   ========================================================================== */
.mr-animate-pulse {
    animation: mr-pulse-crimson 4s ease-in-out infinite alternate;
}

@keyframes mr-pulse-crimson {
    0% {
        box-shadow: 0 0 10px rgba(217, 28, 28, 0.4);
        transform: scale(1);
    }

    100% {
        box-shadow: 0 0 40px rgba(217, 28, 28, 0.9);
        transform: scale(1.05);
    }
}

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

@keyframes mr-float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-15px) rotate(2deg);
    }

    66% {
        transform: translateY(5px) rotate(-2deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/* ==========================================================================
   Interactive Learning Module
   ========================================================================== */
.mr-module-container {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    min-height: 600px;
}

/* ==========================================================================
   Navigation Bar
   ========================================================================== */
.mr-navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 204, 0, 0.15);
    background: rgba(10, 2, 15, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mr-nav-link {
    color: var(--mr-text-muted);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border-radius: var(--mr-border-radius);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.mr-nav-link:hover {
    color: var(--mr-text-main);
    background: rgba(255, 204, 0, 0.1);
}

.mr-nav-link.active {
    color: var(--mr-accent);
    text-shadow: var(--mr-glow-gold);
}

.mr-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-bottom: 2rem;
    overflow: hidden;
}

.mr-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, var(--mr-secondary), var(--mr-primary));
    transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes mr-slide-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mr-slide {
    display: none;
}

.mr-slide.active {
    display: block;
    animation: mr-slide-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Completion slide needs flex for centering */
#slide-10.mr-slide.active {
    display: flex;
}

.mr-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.mr-quiz-btn {
    background: rgba(10, 2, 15, 0.6);
    border: 1px solid rgba(255, 204, 0, 0.2);
    color: var(--mr-text-main);
    padding: 1.25rem 2rem;
    text-align: left;
    border-radius: var(--mr-border-radius);
    cursor: pointer;
    font-family: var(--mr-font-family);
    font-size: 1.15rem;
    transition: all 0.4s ease;
}

.mr-quiz-btn:hover {
    background: rgba(255, 204, 0, 0.05);
    border-color: var(--mr-accent);
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.2);
    transform: translateX(8px);
}

.mr-quiz-btn.correct {
    background: rgba(46, 204, 113, 0.15);
    border-color: #2ecc71;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.3);
}

.mr-quiz-btn.wrong {
    background: rgba(217, 28, 28, 0.15);
    border-color: var(--mr-primary);
    box-shadow: 0 0 15px rgba(217, 28, 28, 0.3);
}

.mr-button-small {
    padding: 0.8rem 2.5rem;
    font-size: 1.1rem;
    margin-top: 2rem;
    letter-spacing: 1px;
}

.mr-feedback {
    margin-top: 1.5rem;
    min-height: 1.5rem;
    font-weight: 600;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

/* ==========================================================================
   Sleek Action Links (Replacing Chunky Buttons)
   ========================================================================== */
.mr-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--mr-text-main);
    font-family: var(--mr-font-family);
    font-size: 1.15rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 1rem 0;
    transition: all 0.4s ease;
    position: relative;
}

.mr-action-link::after {
    content: '';
    position: absolute;
    bottom: 0.5rem;
    left: 0;
    width: 0%;
    height: 1px;
    background: var(--mr-accent);
    transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: var(--mr-glow-gold);
}

.mr-action-link:hover {
    color: var(--mr-accent);
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.6);
}

.mr-action-link:hover::after {
    width: 100%;
}

.mr-action-icon {
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.4s ease;
    color: var(--mr-accent);
}

.mr-action-link:hover .mr-action-icon {
    transform: translateX(8px);
}

/* ==========================================================================
   The Mystic Eye (Global Iconography)
   ========================================================================== */
.mystic-eye {
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, #ff1a1a 0%, #8a0000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--mr-glow-crimson);
    position: relative;
    overflow: hidden;
    border: 3px solid #000;
    transition: transform 0.3s;
}

.mystic-eye:hover {
    transform: scale(1.05) rotate(5deg);
}

.mystic-eye::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, #000 0%, transparent 70%);
    transform: scaleY(0.4);
}

.mystic-eye .pupil {
    width: 25px;
    height: 70px;
    background: #000;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    z-index: 2;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
    transition: transform 0.3s;
}

.mystic-eye:hover .pupil {
    transform: scaleY(1.2);
}

/* ==========================================================================
   Responsive Breakpoints — Tablet & Mobile
   All rules below are scoped to media queries; desktop is untouched.
   ========================================================================== */

/* ── Tablet (≤ 900px) ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {

    /* Hub grid: 2 cols → 1 col */
    main[style*="grid"] {
        display: block !important;
    }

    /* Reduce panel padding slightly */
    .mr-panel {
        padding: 2rem;
        min-height: auto;
    }

    /* Module container can use full width */
    .mr-module-container {
        max-width: 100%;
    }

    /* Navbar links tighten up */
    .mr-navbar {
        gap: 1rem;
        padding: 1rem 1.5rem;
    }

    .mr-nav-link {
        font-size: 1.1rem;
    }

    /* Slightly smaller quiz buttons */
    .mr-quiz-btn {
        font-size: 1.05rem;
        padding: 1rem 1.5rem;
    }
}

/* ── Mobile (≤ 600px) ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {

    /* Tighter container padding */
    .mr-container {
        padding: 1.5rem 1rem;
    }

    /* Panels: single-column tight layout */
    .mr-panel {
        padding: 1.5rem;
        border-radius: 10px;
        min-height: auto;
        margin-bottom: 1.5rem;
    }

    /* Hover scale effect too aggressive on touch devices */
    .mr-panel:hover {
        transform: none;
    }

    /* Navbar stacks vertically on very small screens */
    .mr-navbar {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        justify-content: center;
    }

    .mr-nav-link {
        font-size: 1rem;
        padding: 0.4rem 0.75rem;
    }

    /* Hero headings scale down */
    .mr-theme h1 {
        font-size: 2rem !important;
    }

    .mr-theme h2 {
        font-size: 1.5rem !important;
    }

    /* Module slide headings */
    .mr-slide h2 {
        font-size: 1.6rem !important;
    }

    /* Essay text tighter */
    .mr-essay-text,
    .mr-text-main {
        font-size: 1rem !important;
        line-height: 1.7;
    }

    /* Quiz buttons full width, stacked, comfortable tap size */
    .mr-quiz-options {
        gap: 0.75rem;
    }

    .mr-quiz-btn {
        font-size: 1rem;
        padding: 1rem 1.25rem;
    }

    /* Quiz header row — stack icon below headline on very narrow screens */
    .mr-slide>div[style*="justify-content: space-between"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* Action links more tappable */
    .mr-action-link {
        font-size: 1.05rem;
        padding: 0.85rem 0;
    }

    /* Watcher eye: smaller + moved in from edges */
    div[style*="position: fixed"][style*="top: 1.5rem"][style*="right: 2rem"] {
        top: 0.75rem !important;
        right: 0.75rem !important;
    }

    /* Slide images: reduce height on mobile */
    .mr-slide img[style*="height: 280px"] {
        height: 180px !important;
    }

    /* Module hub cards: don't let card image be too tall */
    .mr-panel div[style*="height: 250px"] {
        height: 180px !important;
    }

    /* Completion screen eye: shrink proportionally */
    #slide-10 .mystic-eye {
        width: 80px !important;
        height: 80px !important;
    }

    #slide-10 .mystic-eye .pupil {
        width: 16px !important;
        height: 46px !important;
    }

    #slide-10 h2 {
        font-size: 2rem !important;
    }

    #slide-10 p {
        font-size: 1.05rem !important;
    }

    /* Button in completion CTA panel */
    #slide-10 .mr-panel {
        padding: 2rem 1.25rem;
    }
}