/* ============================================
   mystical.quest — Art-Deco Grimoire Styles
   ============================================ */

/* === CSS Custom Properties === */
:root {
    --neon-green: #39FF14;
    --amber: #FFB800;
    --neon-pink: #FF6EC7;
    --deep-purple: #1A0A2E;
    --parchment: #E0D8C8;
    --cyan: #00D4FF;
    --sage: #A8B89C;
    --void: #0D0D0D;
    --purple: #9B00FF;

    --font-display: 'Poiret One', 'Josefin Sans', cursive;
    --font-body: 'Source Sans 3', 'Inter', sans-serif;
    --font-mono: 'Fira Code', 'Space Mono', monospace;
}

/* === Reset & Base === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
}

body {
    background-color: var(--void);
    color: var(--parchment);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.7;
    overflow-x: hidden;
}

/* === Chapter (Full Viewport Sections) === */
.chapter {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    scroll-snap-align: start;
    overflow: hidden;
}

/* === The Gateway (Hero) === */
#gateway {
    background: radial-gradient(ellipse at 50% 80%, #1A0A2E 0%, #0D0D0D 70%);
}

.deco-arch {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.arch-left,
.arch-right {
    position: absolute;
    top: 5%;
    width: 3px;
    height: 90%;
    background: linear-gradient(to bottom, transparent, var(--amber) 20%, var(--amber) 80%, transparent);
    opacity: 0.4;
}

.arch-left { left: 8%; }
.arch-right { right: 8%; }

.arch-keystone {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 84%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--amber) 20%, var(--amber) 80%, transparent);
    opacity: 0.4;
}

.arch-keystone::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--amber);
    transform: translateX(-50%) rotate(45deg);
    opacity: 0.6;
}

.sunburst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(57, 255, 20, 0.03) 5deg, transparent 10deg,
        transparent 20deg, rgba(57, 255, 20, 0.03) 25deg, transparent 30deg,
        transparent 40deg, rgba(57, 255, 20, 0.03) 45deg, transparent 50deg,
        transparent 60deg, rgba(57, 255, 20, 0.03) 65deg, transparent 70deg,
        transparent 80deg, rgba(57, 255, 20, 0.03) 85deg, transparent 90deg,
        transparent 100deg, rgba(57, 255, 20, 0.03) 105deg, transparent 110deg,
        transparent 120deg, rgba(57, 255, 20, 0.03) 125deg, transparent 130deg,
        transparent 140deg, rgba(57, 255, 20, 0.03) 145deg, transparent 150deg,
        transparent 160deg, rgba(57, 255, 20, 0.03) 165deg, transparent 170deg,
        transparent 180deg, rgba(57, 255, 20, 0.03) 185deg, transparent 190deg,
        transparent 200deg, rgba(57, 255, 20, 0.03) 205deg, transparent 210deg,
        transparent 220deg, rgba(57, 255, 20, 0.03) 225deg, transparent 230deg,
        transparent 240deg, rgba(57, 255, 20, 0.03) 245deg, transparent 250deg,
        transparent 260deg, rgba(57, 255, 20, 0.03) 265deg, transparent 270deg,
        transparent 280deg, rgba(57, 255, 20, 0.03) 285deg, transparent 290deg,
        transparent 300deg, rgba(57, 255, 20, 0.03) 305deg, transparent 310deg,
        transparent 320deg, rgba(57, 255, 20, 0.03) 325deg, transparent 330deg,
        transparent 340deg, rgba(57, 255, 20, 0.03) 345deg, transparent 350deg
    );
    border-radius: 50%;
    opacity: 0.6;
    animation: sunburstRotate 120s linear infinite;
}

@keyframes sunburstRotate {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.gateway-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 9vw, 8rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--neon-green);
    text-shadow: 0 0 20px rgba(57, 255, 20, 0.4), 0 0 60px rgba(57, 255, 20, 0.15);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    animation: titleGlow 4s ease-in-out infinite alternate;
}

@keyframes titleGlow {
    from { text-shadow: 0 0 20px rgba(57, 255, 20, 0.4), 0 0 60px rgba(57, 255, 20, 0.15); }
    to { text-shadow: 0 0 30px rgba(57, 255, 20, 0.6), 0 0 80px rgba(57, 255, 20, 0.25); }
}

.hero-subtitle {
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--amber);
    opacity: 0.8;
}

.scroll-indicator {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

.scroll-text {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--parchment);
    opacity: 0.5;
}

.scroll-chevron {
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--amber);
    border-bottom: 2px solid var(--amber);
    transform: rotate(45deg);
    opacity: 0.5;
}

/* Botanical overlays */
.botanical-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.vine-left {
    position: absolute;
    left: 3%;
    top: 10%;
    height: 60%;
    width: auto;
}

.vine-right {
    position: absolute;
    right: 3%;
    top: 15%;
    height: 55%;
    width: auto;
}

/* === Chapter Frames === */
.chapter-frame {
    max-width: 1100px;
    width: 100%;
    padding: 3rem;
    position: relative;
}

.deco-border::before,
.deco-border::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border-color: var(--amber);
    border-style: solid;
    opacity: 0.4;
}

.deco-border::before {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px;
}

.deco-border::after {
    bottom: 0;
    right: 0;
    border-width: 0 2px 2px 0;
}

.chapter-number {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--amber);
    opacity: 0.6;
    margin-bottom: 0.75rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--neon-green);
    text-shadow: 0 0 15px rgba(57, 255, 20, 0.3);
    margin-bottom: 2.5rem;
    text-align: center;
}

/* === Elements Section === */
#elements {
    background: radial-gradient(ellipse at 50% 30%, #1A0A2E 0%, #0D0D0D 70%);
}

.elements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.element-card {
    background: linear-gradient(135deg, rgba(26, 10, 46, 0.8), rgba(13, 13, 13, 0.9));
    border: 1px solid rgba(255, 184, 0, 0.15);
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    transition: border-color 0.4s ease, transform 0.3s ease;
    cursor: pointer;
}

.element-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--amber), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.element-card:hover {
    border-color: rgba(255, 184, 0, 0.4);
    transform: translateY(-4px);
}

.element-card:hover::before {
    opacity: 1;
}

.element-sigil {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    transition: transform 0.6s ease;
}

.element-card:hover .element-sigil {
    transform: rotate(15deg) scale(1.05);
}

.element-sigil svg {
    width: 100%;
    height: 100%;
}

.element-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.element-card[data-element="fire"] .element-name { color: var(--amber); }
.element-card[data-element="water"] .element-name { color: var(--cyan); }
.element-card[data-element="earth"] .element-name { color: var(--sage); }
.element-card[data-element="aether"] .element-name { color: var(--purple); }

.element-desc {
    font-size: 0.85rem;
    color: var(--parchment);
    opacity: 0.7;
    line-height: 1.6;
}

/* === Spellcraft Section === */
#spellcraft {
    background: radial-gradient(ellipse at 50% 50%, #1A0A2E 0%, #0D0D0D 70%);
}

.spell-schematic {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

.spell-step {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 2rem 0;
    position: relative;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.spell-step.visible {
    opacity: 1;
    transform: translateX(0);
}

.step-number {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--amber);
    text-shadow: 0 0 15px rgba(255, 184, 0, 0.3);
    min-width: 60px;
    text-align: center;
    line-height: 1;
    padding-top: 0.25rem;
}

.step-content h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neon-green);
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.2);
    margin-bottom: 0.5rem;
}

.step-content p {
    font-size: 0.9rem;
    color: var(--parchment);
    opacity: 0.75;
}

.step-connector {
    position: absolute;
    left: 30px;
    bottom: -2px;
    width: 1px;
    height: 20px;
    background: linear-gradient(to bottom, var(--amber), transparent);
    opacity: 0.3;
}

/* === Codex Section === */
#codex {
    background: radial-gradient(ellipse at 30% 50%, #1A0A2E 0%, #0D0D0D 70%);
}

.codex-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 768px) {
    .codex-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.codex-illustration {
    display: flex;
    justify-content: center;
}

.mandala {
    width: 100%;
    max-width: 350px;
    animation: mandalaRotate 60s linear infinite;
}

@keyframes mandalaRotate {
    to { transform: rotate(360deg); }
}

.codex-entries {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.codex-entry {
    padding: 1.5rem;
    border-left: 2px solid rgba(168, 184, 156, 0.3);
    transition: border-color 0.3s ease;
}

.codex-entry:hover {
    border-color: var(--sage);
}

.herb-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 0.5rem;
}

.herb-property {
    font-size: 0.85rem;
    color: var(--parchment);
    opacity: 0.7;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.herb-element {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--amber);
    opacity: 0.5;
}

/* === Practicum Section === */
#practicum {
    background: radial-gradient(ellipse at 50% 60%, #1A0A2E 0%, #0D0D0D 70%);
}

.practicum-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 2.5rem;
    font-size: 0.9rem;
    color: var(--parchment);
    opacity: 0.7;
}

.practicum-workspace {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.selector-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.selector-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--amber);
    opacity: 0.6;
    text-align: center;
}

.element-selector,
.geometry-selector {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.selector-btn {
    background: transparent;
    border: 1px solid rgba(255, 184, 0, 0.2);
    color: var(--parchment);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.selector-btn:hover {
    border-color: var(--amber);
    color: var(--amber);
}

.selector-btn.active {
    border-color: var(--neon-green);
    color: var(--neon-green);
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.2), inset 0 0 10px rgba(57, 255, 20, 0.05);
}

.casting-circle {
    position: relative;
}

#spellCanvas {
    display: block;
    border: 1px solid rgba(255, 184, 0, 0.1);
}

.cast-button {
    display: block;
    margin: 0 auto;
    background: transparent;
    border: 2px solid var(--neon-green);
    color: var(--neon-green);
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 1rem 3rem;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.cast-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(57, 255, 20, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.cast-button:hover {
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.3), 0 0 40px rgba(57, 255, 20, 0.1);
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
}

.cast-button:hover::before {
    width: 300px;
    height: 300px;
}

.cast-button.casting {
    animation: castPulse 0.8s ease-out;
}

@keyframes castPulse {
    0% { box-shadow: 0 0 20px rgba(57, 255, 20, 0.3); }
    50% { box-shadow: 0 0 60px rgba(57, 255, 20, 0.6), 0 0 100px rgba(57, 255, 20, 0.2); }
    100% { box-shadow: 0 0 20px rgba(57, 255, 20, 0.3); }
}

/* === Footer / Colophon === */
.chapter-footer {
    min-height: 30vh;
    gap: 1rem;
}

.deco-rule {
    width: 200px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--amber), transparent);
    opacity: 0.4;
}

.colophon-text {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--neon-green);
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.2);
}

.colophon-sub {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--parchment);
    opacity: 0.4;
}

/* === Scroll Reveal Animation === */
.chapter-frame {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.chapter-frame.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* === Responsive === */
@media (max-width: 600px) {
    .chapter {
        padding: 3rem 1.25rem;
    }

    .elements-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .element-card {
        padding: 1.25rem 1rem;
    }

    .spell-step {
        gap: 1rem;
    }

    .practicum-workspace {
        gap: 1.5rem;
    }

    .chapter-frame {
        padding: 2rem 1rem;
    }
}