/* mystical.boo - Enchanted Grimoire HUD */
/* Colors: #2a1b3d #f0e6ef #b48ece #d4a0b9 #c9a84c #5c3a6e #eee3f5 #1a0f28 */
/* Fonts: Cormorant Garamond, Nunito Sans, Satisfy */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    letter-spacing: 0.01em;
    line-height: 1.7;
    color: #5c3a6e;
    background: #1a0f28;
    overflow-x: hidden;
}

/* ============================================
   MARBLE SANCTUM BACKGROUND
   ============================================ */
#marble-sanctum {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 30% 70%, #f0e6ef 0%, #2a1b3d 100%),
        linear-gradient(135deg,
            transparent 0%, transparent 10%,
            rgba(26, 15, 40, 0.12) 10%, rgba(26, 15, 40, 0.12) 10.3%,
            transparent 10.3%, transparent 22%,
            rgba(26, 15, 40, 0.08) 22%, rgba(26, 15, 40, 0.08) 22.2%,
            transparent 22.2%, transparent 35%,
            rgba(26, 15, 40, 0.15) 35%, rgba(26, 15, 40, 0.15) 35.4%,
            transparent 35.4%, transparent 48%,
            rgba(26, 15, 40, 0.1) 48%, rgba(26, 15, 40, 0.1) 48.15%,
            transparent 48.15%, transparent 61%,
            rgba(26, 15, 40, 0.12) 61%, rgba(26, 15, 40, 0.12) 61.25%,
            transparent 61.25%, transparent 73%,
            rgba(26, 15, 40, 0.08) 73%, rgba(26, 15, 40, 0.08) 73.2%,
            transparent 73.2%, transparent 86%,
            rgba(26, 15, 40, 0.14) 86%, rgba(26, 15, 40, 0.14) 86.3%,
            transparent 86.3%
        ),
        repeating-conic-gradient(
            rgba(180, 142, 206, 0.03) 0deg,
            transparent 1deg,
            transparent 3deg,
            rgba(180, 142, 206, 0.02) 4deg,
            transparent 5deg
        );
    background-blend-mode: overlay;
    background-size: 100% 100%, 200% 200%, 50px 50px;
    animation: marbleShift 120s linear infinite;
}

@keyframes marbleShift {
    from {
        background-position: 0 0, 0 0, 0 0;
    }
    to {
        background-position: 0 0, 50px 25px, 10px 5px;
    }
}

/* ============================================
   BOTANICAL SILHOUETTES
   ============================================ */
#botanicals {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.botanical {
    position: absolute;
    opacity: 0.06;
    background: #b48ece;
}

.botanical-1 {
    width: 120px;
    height: 200px;
    top: 10%;
    left: 5%;
    clip-path: polygon(50% 0%, 60% 20%, 80% 15%, 70% 35%, 95% 40%, 75% 55%, 85% 70%, 60% 65%, 50% 100%, 40% 65%, 15% 70%, 25% 55%, 5% 40%, 30% 35%, 20% 15%, 40% 20%);
    animation: botanicalDrift1 80s linear infinite;
}

.botanical-2 {
    width: 90px;
    height: 160px;
    top: 30%;
    right: 8%;
    clip-path: polygon(50% 0%, 65% 15%, 85% 25%, 70% 40%, 90% 55%, 65% 60%, 75% 80%, 50% 100%, 25% 80%, 35% 60%, 10% 55%, 30% 40%, 15% 25%, 35% 15%);
    animation: botanicalDrift2 95s linear infinite;
}

.botanical-3 {
    width: 150px;
    height: 100px;
    top: 60%;
    left: 12%;
    clip-path: polygon(0% 50%, 15% 30%, 30% 45%, 45% 20%, 55% 40%, 70% 15%, 80% 35%, 100% 50%, 80% 65%, 70% 85%, 55% 60%, 45% 80%, 30% 55%, 15% 70%);
    animation: botanicalDrift3 110s linear infinite;
}

.botanical-4 {
    width: 80px;
    height: 180px;
    top: 75%;
    right: 15%;
    clip-path: polygon(50% 0%, 55% 12%, 70% 8%, 62% 25%, 80% 30%, 65% 42%, 75% 55%, 58% 58%, 68% 72%, 52% 70%, 55% 85%, 48% 100%, 42% 85%, 45% 70%, 32% 72%, 38% 58%, 25% 55%, 35% 42%, 20% 30%, 38% 25%, 30% 8%, 45% 12%);
    animation: botanicalDrift1 100s linear infinite reverse;
}

.botanical-5 {
    width: 100px;
    height: 140px;
    top: 45%;
    left: 85%;
    clip-path: polygon(50% 0%, 62% 18%, 80% 10%, 72% 32%, 100% 38%, 78% 50%, 90% 68%, 62% 62%, 55% 100%, 42% 62%, 15% 68%, 28% 50%, 0% 38%, 32% 32%, 22% 10%, 42% 18%);
    animation: botanicalDrift2 85s linear infinite reverse;
}

.botanical-6 {
    width: 70px;
    height: 120px;
    top: 15%;
    left: 55%;
    clip-path: polygon(50% 0%, 60% 25%, 85% 20%, 68% 45%, 95% 55%, 65% 65%, 75% 90%, 50% 100%, 25% 90%, 35% 65%, 5% 55%, 32% 45%, 15% 20%, 40% 25%);
    animation: botanicalDrift3 90s linear infinite;
}

@keyframes botanicalDrift1 {
    from { transform: translateY(0); }
    to { transform: translateY(-40px); }
}

@keyframes botanicalDrift2 {
    from { transform: translateY(0); }
    to { transform: translateY(-30px); }
}

@keyframes botanicalDrift3 {
    from { transform: translateY(0); }
    to { transform: translateY(-25px); }
}

/* ============================================
   HUD CONNECTOR SVG
   ============================================ */
#hud-connectors {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.connector-line {
    stroke: #b48ece;
    stroke-opacity: 0.2;
    stroke-width: 1;
    stroke-dasharray: 4 8;
}

.connector-node {
    stroke: #c9a84c;
    stroke-width: 1;
    fill: none;
}

/* ============================================
   FAIRY DUST PARTICLES
   ============================================ */
#fairy-dust-container {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    overflow: hidden;
}

.fairy-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: none;
}

/* ============================================
   SCROLL PROGRESS DIAMOND MARKERS
   ============================================ */
#scroll-progress {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.diamond-marker {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background: rgba(180, 142, 206, 0.2);
    border: 1px solid rgba(180, 142, 206, 0.3);
    transition: all 400ms ease;
    cursor: pointer;
}

.diamond-marker.active {
    background: #c9a84c;
    border-color: #c9a84c;
    box-shadow: 0 0 8px #b48ece;
}

/* ============================================
   CODEX CHAPTERS
   ============================================ */
.codex-chapter {
    position: relative;
    min-height: 100vh;
    z-index: 5;
}

#chapter-2,
#chapter-4 {
    min-height: 120vh;
}

.chapter-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* ============================================
   HUD GRID SYSTEM
   ============================================ */
.hud-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    padding: 40px 32px;
    min-height: 100vh;
    align-content: center;
}

/* ============================================
   HUD PANEL BASE STYLES
   ============================================ */
.hud-panel {
    position: relative;
    background: rgba(240, 230, 239, 0.08);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    border-radius: 4px;
    padding: 0;
    box-shadow: 0 8px 32px rgba(88, 56, 120, 0.15);
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 600ms cubic-bezier(0.4, 0, 1, 1),
                transform 600ms cubic-bezier(0.4, 0, 1, 1),
                filter 600ms cubic-bezier(0.4, 0, 1, 1);
}

.hud-panel.visible {
    opacity: 1;
    transform: scale(1);
}

.hud-panel.dissolving {
    opacity: 0;
    transform: scale(0.98);
    filter: blur(4px);
}

.panel-border-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.panel-border-svg .border-draw {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    fill: none;
    stroke: rgba(212, 175, 232, 0.4);
    stroke-width: 1;
}

.panel-content {
    position: relative;
    z-index: 2;
    padding: 32px;
    opacity: 0;
    transition: opacity 400ms ease;
}

.hud-panel.content-visible .panel-content {
    opacity: 1;
}

/* ============================================
   CORNER FLOURISHES
   ============================================ */
.corner-flourish {
    position: absolute;
    width: 24px;
    height: 24px;
    z-index: 3;
}

.corner-flourish::before,
.corner-flourish::after {
    content: '';
    position: absolute;
    background: rgba(201, 168, 76, 0.6);
}

.corner-flourish.top-left {
    top: 8px;
    left: 8px;
}
.corner-flourish.top-left::before {
    top: 0; left: 0;
    width: 24px; height: 1px;
    border-radius: 0 2px 2px 0;
}
.corner-flourish.top-left::after {
    top: 0; left: 0;
    width: 1px; height: 24px;
    border-radius: 0 0 2px 2px;
}

.corner-flourish.top-right {
    top: 8px;
    right: 8px;
}
.corner-flourish.top-right::before {
    top: 0; right: 0;
    width: 24px; height: 1px;
    border-radius: 2px 0 0 2px;
}
.corner-flourish.top-right::after {
    top: 0; right: 0;
    width: 1px; height: 24px;
    border-radius: 0 0 2px 2px;
}

.corner-flourish.bottom-left {
    bottom: 8px;
    left: 8px;
}
.corner-flourish.bottom-left::before {
    bottom: 0; left: 0;
    width: 24px; height: 1px;
    border-radius: 0 2px 2px 0;
}
.corner-flourish.bottom-left::after {
    bottom: 0; left: 0;
    width: 1px; height: 24px;
    border-radius: 0 0 2px 2px;
}

.corner-flourish.bottom-right {
    bottom: 8px;
    right: 8px;
}
.corner-flourish.bottom-right::before {
    bottom: 0; right: 0;
    width: 24px; height: 1px;
    border-radius: 2px 0 0 2px;
}
.corner-flourish.bottom-right::after {
    bottom: 0; right: 0;
    width: 1px; height: 24px;
    border-radius: 2px 2px 0 0;
}

/* ============================================
   MARGIN ANNOTATIONS
   ============================================ */
.margin-annotation {
    font-family: 'Satisfy', cursive;
    font-size: clamp(0.8rem, 1vw, 1rem);
    letter-spacing: 0.04em;
    color: rgba(180, 142, 206, 0.3);
    position: absolute;
    writing-mode: vertical-rl;
    white-space: nowrap;
    pointer-events: none;
    z-index: 4;
}

.annotation-left {
    left: -28px;
    top: 50%;
    transform: translateY(-50%);
}

.annotation-right {
    right: -28px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
}

.annotation-center {
    position: relative;
    writing-mode: horizontal-tb;
    display: block;
    text-align: center;
    margin-top: 16px;
    z-index: 5;
}

/* ============================================
   DROP CAPITALS
   ============================================ */
.drop-capital {
    float: left;
    font-size: 4em;
    line-height: 0.8;
    padding-right: 0.1em;
    color: #c9a84c;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(201, 168, 76, 0.4);
}

.drop-capital.glow-active {
    animation: capitalGlow 1500ms ease forwards;
}

@keyframes capitalGlow {
    0% {
        text-shadow: 0 0 0px rgba(201, 168, 76, 0);
    }
    60% {
        text-shadow: 0 0 20px rgba(201, 168, 76, 0.5), 0 0 40px rgba(180, 142, 206, 0.2);
    }
    100% {
        text-shadow: 0 0 12px rgba(201, 168, 76, 0.3);
    }
}

/* ============================================
   HEADING UNDERLINE ANIMATION
   ============================================ */
.heading-underline {
    height: 2px;
    background: linear-gradient(to right, #c9a84c, rgba(201, 168, 76, 0.3));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    margin: 8px 0 16px;
    transition: background-size 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms;
}

.hud-panel.content-visible .heading-underline {
    background-size: 100% 2px;
}

/* ============================================
   CHAPTER DIVIDER
   ============================================ */
.chapter-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 24px 0;
}

.divider-line {
    flex: 1;
    max-width: 120px;
    height: 1px;
}

.divider-line.left {
    background: linear-gradient(to right, transparent, #c9a84c);
}

.divider-line.right {
    background: linear-gradient(to left, transparent, #c9a84c);
}

.divider-diamond {
    width: 8px;
    height: 8px;
    background: #c9a84c;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.chapter-title,
.illuminated-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4.5rem);
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: #eee3f5;
    text-align: center;
    margin-bottom: 8px;
}

.title-dot {
    color: #c9a84c;
}

.subtitle {
    font-family: 'Satisfy', cursive;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: #d4a0b9;
    text-align: center;
    letter-spacing: 0.04em;
}

.section-heading {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: #eee3f5;
}

.illuminated-heading {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: #eee3f5;
    text-align: center;
    margin-bottom: 8px;
}

.index-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: #eee3f5;
}

.index-desc {
    font-size: clamp(0.85rem, 0.9vw, 0.95rem);
    color: #d4a0b9;
}

.threshold-verse {
    font-family: 'Nunito Sans', sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    color: #d4a0b9;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.7;
}

p {
    margin-bottom: 12px;
}

p:last-child {
    margin-bottom: 0;
}

/* ============================================
   CHAPTER 1 - THE THRESHOLD
   ============================================ */
.threshold-panel {
    grid-column: 4 / 10;
    grid-row: 1;
    text-align: center;
}

/* Pulse animation for threshold border */
.threshold-panel .panel-border-svg .border-draw {
    animation: borderPulse 4s ease-in-out infinite;
}

@keyframes borderPulse {
    0%, 100% { stroke: rgba(212, 175, 232, 0.3); }
    50% { stroke: rgba(212, 175, 232, 0.6); }
}

/* ============================================
   CHAPTER 2 - THE CATALOGUE
   ============================================ */
.catalogue-grid {
    align-content: start;
    padding-top: 80px;
}

.catalogue-panel-tall {
    grid-column: 2 / 5;
    grid-row: 1 / 3;
    align-self: start;
    margin-top: 40px;
}

.catalogue-panel-wide {
    grid-column: 5 / 10;
    grid-row: 1;
    align-self: start;
}

.catalogue-panel-small {
    grid-column: 10 / 12;
    grid-row: 1;
    align-self: start;
    margin-top: 80px;
}

/* ============================================
   CHAPTER 3 - THE ILLUMINATION
   ============================================ */
.illumination-grid {
    align-content: center;
}

.illumination-panel {
    grid-column: 2 / 12;
    grid-row: 1;
}

.illuminated-page {
    position: relative;
    padding: 40px;
}

.botanical-border {
    position: absolute;
    background: linear-gradient(to right, rgba(201, 168, 76, 0.15), rgba(180, 142, 206, 0.1), rgba(201, 168, 76, 0.15));
}

.botanical-border.top-border {
    top: 0; left: 20px; right: 20px;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.3), rgba(180, 142, 206, 0.2), rgba(201, 168, 76, 0.3), transparent);
}

.botanical-border.bottom-border {
    bottom: 0; left: 20px; right: 20px;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.3), rgba(180, 142, 206, 0.2), rgba(201, 168, 76, 0.3), transparent);
}

.botanical-border.left-border {
    left: 0; top: 20px; bottom: 20px;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(201, 168, 76, 0.3), rgba(180, 142, 206, 0.2), rgba(201, 168, 76, 0.3), transparent);
}

.botanical-border.right-border {
    right: 0; top: 20px; bottom: 20px;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(201, 168, 76, 0.3), rgba(180, 142, 206, 0.2), rgba(201, 168, 76, 0.3), transparent);
}

.illuminated-text {
    max-width: 700px;
    margin: 0 auto;
}

.illuminated-text p {
    text-indent: 1.5em;
    color: #eee3f5;
}

.illuminated-text p:first-child {
    text-indent: 0;
}

/* Dim background for chapter 3 */
#chapter-3 {
    background: rgba(26, 15, 40, 0.5);
}

/* ============================================
   CHAPTER 4 - THE INDEX
   ============================================ */
.index-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    gap: 16px;
    padding: 60px 32px;
}

.index-card {
    transition: opacity 600ms cubic-bezier(0.4, 0, 1, 1),
                transform 600ms cubic-bezier(0.4, 0, 1, 1),
                filter 600ms cubic-bezier(0.4, 0, 1, 1),
                box-shadow 300ms ease;
}

.index-card:nth-child(1) { grid-column: 3 / 5; }
.index-card:nth-child(2) { grid-column: 5 / 7; }
.index-card:nth-child(3) { grid-column: 7 / 9; }
.index-card:nth-child(4) { grid-column: 3 / 5; }
.index-card:nth-child(5) { grid-column: 5 / 7; }
.index-card:nth-child(6) { grid-column: 7 / 9; }

.index-card:hover {
    box-shadow: 0 12px 40px rgba(88, 56, 120, 0.25);
}

.index-card .panel-content {
    padding: 24px;
}

/* ============================================
   CHAPTER 5 - THE SEAL
   ============================================ */
.seal-grid {
    align-content: center;
    justify-content: center;
}

.seal-container {
    grid-column: 4 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seal-circle {
    width: min(70vw, 400px);
    height: min(70vw, 400px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 168, 76, 0.15) 0%, rgba(42, 27, 61, 0.9) 70%, #1a0f28 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1200ms ease, transform 1200ms ease;
}

.seal-circle.visible {
    opacity: 1;
    transform: scale(1);
}

.seal-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seal-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(201, 168, 76, 0.3);
}

.seal-ring.ring-1 {
    width: 90%;
    height: 90%;
    animation: sealRotate 60s linear infinite;
}

.seal-ring.ring-2 {
    width: 75%;
    height: 75%;
    border-style: dashed;
    border-color: rgba(180, 142, 206, 0.2);
    animation: sealRotate 45s linear infinite reverse;
}

.seal-ring.ring-3 {
    width: 60%;
    height: 60%;
    border-color: rgba(201, 168, 76, 0.2);
    animation: sealRotate 30s linear infinite;
}

@keyframes sealRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.seal-text {
    text-align: center;
    z-index: 2;
}

.seal-sigil {
    display: block;
    font-size: 1.5rem;
    color: #c9a84c;
    margin: 8px 0;
}

.seal-inscription {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: #c9a84c;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.seal-subtitle {
    font-family: 'Satisfy', cursive;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    color: #d4a0b9;
    letter-spacing: 0.04em;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .hud-grid {
        grid-template-columns: repeat(6, 1fr);
        padding: 24px 16px;
        gap: 8px;
    }

    .threshold-panel {
        grid-column: 1 / 7;
    }

    .catalogue-panel-tall {
        grid-column: 1 / 7;
        grid-row: auto;
        margin-top: 0;
    }

    .catalogue-panel-wide {
        grid-column: 1 / 7;
    }

    .catalogue-panel-small {
        grid-column: 1 / 7;
        margin-top: 0;
    }

    .illumination-panel {
        grid-column: 1 / 7;
    }

    .index-card:nth-child(1),
    .index-card:nth-child(2),
    .index-card:nth-child(3),
    .index-card:nth-child(4),
    .index-card:nth-child(5),
    .index-card:nth-child(6) {
        grid-column: 1 / 4;
    }

    .index-card:nth-child(2),
    .index-card:nth-child(4),
    .index-card:nth-child(6) {
        grid-column: 4 / 7;
    }

    .seal-container {
        grid-column: 1 / 7;
    }

    #scroll-progress {
        right: 12px;
    }

    .margin-annotation {
        display: none;
    }

    .illuminated-page {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .index-card:nth-child(1),
    .index-card:nth-child(2),
    .index-card:nth-child(3),
    .index-card:nth-child(4),
    .index-card:nth-child(5),
    .index-card:nth-child(6) {
        grid-column: 1 / 7;
    }
}