/* miris.quest — Holographic Devotional Magazine */

/* ===== Custom Properties ===== */
:root {
    --burgundy-black: #1A0A12;
    --wine-burgundy: #5C1A2A;
    --berry: #8B2E4A;
    --warm-amber: #D4A574;
    --parchment: #F2E8DC;
    --prismatic-rose: #E8A0BF;
    --spectral-teal: #7ECFCF;
    --prismatic-gold: #F0D48A;
    --deep-shadow: #0D0609;

    --holographic: linear-gradient(135deg, #E8A0BF 0%, #7ECFCF 33%, #F0D48A 66%, #E8A0BF 100%);
    --gutter-width: 24px;
}

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

html {
    font-size: 16px;
}

body {
    font-family: 'Source Serif 4', Georgia, serif;
    font-optical-sizing: auto;
    background-color: var(--burgundy-black);
    color: var(--parchment);
    overflow-x: hidden;
    line-height: 1.72;
}

/* ===== Noise Grain Overlay ===== */
.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: overlay;
    will-change: opacity;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
}

/* ===== Magazine Scroll Container ===== */
.magazine {
    scroll-snap-type: y mandatory;
    overflow-y: auto;
    height: 100vh;
}

/* ===== Typography ===== */
.display-title {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-weight: 900;
    color: var(--parchment);
    line-height: 1.05;
    position: relative;
    z-index: 2;
}

.section-headline {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 700;
    color: var(--parchment);
    line-height: 1.15;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.body-text {
    font-family: 'Source Serif 4', Georgia, serif;
    font-optical-sizing: auto;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    font-weight: 400;
    line-height: 1.72;
    color: var(--parchment);
    max-width: 680px;
    margin-bottom: 1.25rem;
}

.tagline {
    font-family: 'Source Serif 4', Georgia, serif;
    font-style: italic;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: var(--warm-amber);
    margin-top: 1rem;
    position: relative;
    z-index: 2;
}

.spread-label {
    font-family: 'Anybody', 'Source Serif 4', sans-serif;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--warm-amber);
    display: block;
    margin-bottom: 1.5rem;
    opacity: 0.7;
}

.closing-text {
    font-family: 'Source Serif 4', Georgia, serif;
    font-style: italic;
    color: var(--warm-amber);
}

/* ===== Candle Gutter ===== */
.candle-gutter {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--gutter-width);
    height: 100vh;
    z-index: 200;
}

.gutter-track {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
    background: rgba(92, 26, 42, 0.3);
}

.gutter-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--holographic);
    background-size: 300% 300%;
    animation: holographic-shift 8s ease infinite;
    transition: height 150ms linear;
}

.gutter-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 2rem 0;
}

.gutter-diamond {
    width: 8px;
    height: 8px;
    background-color: var(--wine-burgundy);
    transform: rotate(45deg);
    position: relative;
    z-index: 1;
    transition: background-color 400ms ease, box-shadow 400ms ease;
}

.gutter-diamond.active {
    background-color: var(--warm-amber);
    box-shadow: 0 0 10px 3px rgba(212, 165, 116, 0.5);
}

/* ===== Holographic Shift ===== */
@keyframes holographic-shift {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

/* ===== Spreads ===== */
.spread {
    position: relative;
    min-height: 100vh;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-left: var(--gutter-width);
    scroll-snap-align: start;
    contain: paint;
}

/* Spread backgrounds — each unique */
.spread-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.spread-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    opacity: 0.04;
    pointer-events: none;
}

.spread-bg-1 {
    background: linear-gradient(160deg, var(--deep-shadow) 0%, var(--burgundy-black) 40%, var(--wine-burgundy) 100%);
}

.spread-bg-2 {
    background: linear-gradient(135deg, var(--burgundy-black) 0%, var(--wine-burgundy) 60%, var(--burgundy-black) 100%);
}

.spread-bg-3 {
    background: linear-gradient(200deg, var(--wine-burgundy) 0%, var(--burgundy-black) 50%, var(--deep-shadow) 100%);
}

.spread-bg-4 {
    background: linear-gradient(180deg, var(--deep-shadow) 0%, var(--burgundy-black) 40%, var(--wine-burgundy) 80%, var(--burgundy-black) 100%);
}

.spread-bg-5 {
    background: linear-gradient(150deg, var(--burgundy-black) 0%, var(--wine-burgundy) 30%, var(--burgundy-black) 70%, var(--deep-shadow) 100%);
}

/* Spread content */
.spread-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5vh 4vw;
}

/* ===== Layout Grids ===== */

/* Opening Spread */
.spread-opening .spread-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

.title-zone {
    flex: 0 0 38%;
    position: relative;
}

.candle-cluster {
    flex: 0 0 50%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2rem;
    position: relative;
    min-height: 300px;
}

/* 60/40 split */
.layout-60-40 {
    display: flex;
    gap: 4rem;
    align-items: center;
}

.layout-60-40 > .text-column { flex: 0 0 55%; }
.layout-60-40 > .visual-column { flex: 0 0 35%; display: flex; flex-direction: column; align-items: center; gap: 2rem; }

/* 40/60 split */
.layout-40-60 {
    display: flex;
    gap: 4rem;
    align-items: center;
}

.layout-40-60 > .visual-column { flex: 0 0 35%; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.layout-40-60 > .text-column { flex: 0 0 55%; }

/* Centered narrow column */
.layout-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

.centered-inner {
    max-width: 680px;
    position: relative;
}

/* 70/30 split */
.layout-70-30 {
    display: flex;
    gap: 4rem;
    align-items: center;
}

.layout-70-30 > .text-column { flex: 0 0 62%; }
.layout-70-30 > .visual-column { flex: 0 0 28%; display: flex; flex-direction: column; align-items: center; gap: 2rem; }

/* ===== Holographic Elements ===== */
.holographic-divider {
    position: absolute;
    z-index: 3;
    background: var(--holographic);
    background-size: 300% 300%;
    animation: holographic-shift 8s ease infinite;
}

.divider-horizontal {
    left: var(--gutter-width);
    right: 0;
    height: 1px;
    top: 70%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.spread.revealed .divider-horizontal {
    transform: scaleX(1);
}

.holographic-margin {
    position: absolute;
    top: 10%;
    bottom: 10%;
    width: 2px;
    z-index: 3;
    background: linear-gradient(180deg, var(--prismatic-rose), var(--spectral-teal), var(--prismatic-gold));
    background-size: 100% 300%;
    animation: holographic-shift 8s ease infinite;
    opacity: 0;
    transition: opacity 1s ease 0.4s;
}

.spread.revealed .holographic-margin {
    opacity: 0.6;
}

.margin-left { left: calc(var(--gutter-width) + 5vw); }
.margin-right { right: 5vw; }

.holographic-accent {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--prismatic-rose), var(--spectral-teal), var(--prismatic-gold));
    background-size: 300% 100%;
    animation: holographic-shift 6s ease infinite;
}

/* Prismatic line-draw animation */
.prismatic-line {
    width: 100%;
    max-width: 120px;
    height: 1px;
    background: var(--holographic);
    background-size: 300% 300%;
    animation: holographic-shift 8s ease infinite;
    margin: 1rem 0 1.5rem;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.spread.revealed .prismatic-line {
    transform: scaleX(1);
}

/* ===== Candle Forms ===== */
.candle-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.candle-unit-short {
    align-self: flex-end;
    margin-bottom: 0;
}

.candle-unit-solo {
    margin-bottom: 1.5rem;
}

.candle-body {
    background: linear-gradient(180deg, var(--berry) 0%, var(--wine-burgundy) 60%, var(--burgundy-black) 100%);
    border-radius: 4px 4px 0 0;
}

.candle-tall {
    width: 16px;
    height: 96px;
}

.candle-medium {
    width: 14px;
    height: 68px;
}

/* Flame */
.candle-flame {
    position: relative;
    width: 24px;
    height: 36px;
    margin-bottom: -2px;
}

.flame-outer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 32px;
    background: var(--warm-amber);
    clip-path: polygon(50% 0%, 5% 100%, 95% 100%);
    animation: flame-flicker-a 2.8s ease-in-out infinite;
}

.flame-inner {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 22px;
    background: var(--prismatic-gold);
    clip-path: polygon(50% 0%, 10% 100%, 90% 100%);
    animation: flame-flicker-b 3.1s ease-in-out infinite;
}

.flame-glow {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 165, 116, 0.3) 0%, transparent 70%);
    pointer-events: none;
}

.flame-delay-1 .flame-outer { animation-duration: 3.1s; }
.flame-delay-1 .flame-inner { animation-duration: 3.4s; }
.flame-delay-2 .flame-outer { animation-duration: 3.4s; }
.flame-delay-2 .flame-inner { animation-duration: 2.8s; }
.flame-delay-3 .flame-outer { animation-duration: 3.6s; }
.flame-delay-3 .flame-inner { animation-duration: 3.0s; }
.flame-delay-4 .flame-outer { animation-duration: 2.9s; }
.flame-delay-4 .flame-inner { animation-duration: 3.3s; }

@keyframes flame-flicker-a {
    0%, 100% { transform: translateX(-50%) scaleX(1); }
    25% { transform: translateX(-50%) scaleX(0.92); }
    50% { transform: translateX(-50%) scaleX(1.08); }
    75% { transform: translateX(-50%) scaleX(0.95); }
}

@keyframes flame-flicker-b {
    0%, 100% { transform: translateX(-50%) scaleX(1); }
    30% { transform: translateX(-50%) scaleX(1.1); }
    60% { transform: translateX(-50%) scaleX(0.9); }
    80% { transform: translateX(-50%) scaleX(1.05); }
}

/* ===== Crystal Facets ===== */
.crystal-facet {
    display: block;
}

.facet-diamond {
    background: var(--holographic);
    background-size: 300% 300%;
    animation: holographic-shift 8s ease infinite;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.facet-hexagon {
    background: var(--holographic);
    background-size: 300% 300%;
    animation: holographic-shift 10s ease infinite;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.facet-large { width: 80px; height: 80px; }
.facet-medium { width: 48px; height: 48px; }
.facet-small { width: 32px; height: 32px; }
.facet-tiny { width: 16px; height: 16px; }

/* Crystal scatter — positioned decorative facets */
.crystal-scatter {
    position: absolute;
    z-index: 3;
    opacity: 0;
    transition: opacity 1s ease 1.2s;
}

.spread.revealed .crystal-scatter {
    opacity: 0.5;
}

.scatter-1 { top: 20%; right: 8%; }
.scatter-2 { bottom: 15%; right: 25%; }
.scatter-3 { top: 30%; left: calc(var(--gutter-width) + 3%); }
.scatter-4 { top: 25%; right: 10%; }
.scatter-5 { bottom: 20%; left: calc(var(--gutter-width) + 15%); }

/* ===== Geometric Compositions ===== */
.geometric-composition {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    position: relative;
}

/* ===== Concentric Circle Halos ===== */
.halo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    z-index: 0;
    pointer-events: none;
}

.halo-container-centered {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -30%);
    width: 120%;
    height: 200px;
}

.concentric-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid var(--wine-burgundy);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 1.5s ease;
}

.spread.revealed .concentric-halo {
    opacity: 0.4;
}

.halo-container .halo-1 { width: 120%; height: 120%; }
.halo-container .halo-2 { width: 140%; height: 140%; }
.halo-container .halo-3 { width: 160%; height: 160%; }

.halo-wide.halo-1 { width: 80%; height: 80%; }
.halo-wide.halo-2 { width: 100%; height: 100%; }
.halo-wide.halo-3 { width: 120%; height: 120%; }
.halo-wide.halo-4 { width: 140%; height: 140%; }
.halo-wide.halo-5 { width: 160%; height: 160%; }

.halo-small { position: static; transform: none; width: 90px; height: 90px; margin: -45px auto; }
.halo-small.halo-1 { width: 90px; height: 90px; }
.halo-small.halo-2 { width: 130px; height: 130px; margin-top: -110px; }

/* ===== Progressive Disclosure / Reveal ===== */
.reveal-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease, transform 600ms ease;
}

.spread.revealed .reveal-element {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delay classes — applied via JS data-delay attributes */
.spread.revealed .reveal-element[data-delay="400"] { transition-delay: 400ms; }
.spread.revealed .reveal-element[data-delay="600"] { transition-delay: 600ms; }
.spread.revealed .reveal-element[data-delay="700"] { transition-delay: 700ms; }
.spread.revealed .reveal-element[data-delay="800"] { transition-delay: 800ms; }
.spread.revealed .reveal-element[data-delay="900"] { transition-delay: 900ms; }
.spread.revealed .reveal-element[data-delay="1000"] { transition-delay: 1000ms; }
.spread.revealed .reveal-element[data-delay="1200"] { transition-delay: 1200ms; }

/* Line draw stagger */
.spread.revealed .line-draw[data-delay="800"] { transition-delay: 800ms; }
.spread.revealed .line-draw[data-delay="900"] { transition-delay: 900ms; }
.spread.revealed .line-draw[data-delay="1200"] { transition-delay: 1200ms; }

/* Text column internal reveal */
.text-column {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 600ms ease, transform 600ms ease;
}

.spread.revealed .text-column {
    opacity: 1;
    transform: translateX(0);
}

.visual-column {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 700ms ease 1s, transform 700ms ease 1s;
}

.spread.revealed .visual-column {
    opacity: 1;
    transform: scale(1);
}

/* ===== Return to Top ===== */
.return-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--wine-burgundy);
    border: 1px solid var(--warm-amber);
    color: var(--warm-amber);
    cursor: pointer;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease, background-color 300ms ease;
}

.return-top.visible {
    opacity: 1;
    pointer-events: all;
}

.return-top:hover {
    background-color: var(--berry);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    :root {
        --gutter-width: 16px;
    }

    .spread-opening .spread-content,
    .layout-60-40,
    .layout-40-60,
    .layout-70-30 {
        flex-direction: column;
        gap: 2rem;
    }

    .title-zone,
    .layout-60-40 > .text-column,
    .layout-40-60 > .text-column,
    .layout-70-30 > .text-column {
        flex: none;
        width: 100%;
    }

    .candle-cluster,
    .layout-60-40 > .visual-column,
    .layout-40-60 > .visual-column,
    .layout-70-30 > .visual-column {
        flex: none;
        width: 100%;
    }

    .candle-gutter { width: 16px; }
    .spread { padding-left: 16px; }
    .holographic-margin { display: none; }
    .divider-horizontal { left: 16px; }
    .candle-cluster { min-height: 180px; gap: 1.5rem; }
    .candle-tall { height: 64px; }
    .candle-medium { height: 48px; }
    .halo-container { display: none; }
    .halo-container-centered { display: none; }
}

@media (max-width: 480px) {
    .display-title { font-size: 2.4rem; }
    .section-headline { font-size: 1.5rem; }
    .body-text { font-size: 1rem; }
    .spread-content { padding: 4vh 5vw; }
    .candle-gutter { display: none; }
    .spread { padding-left: 0; }
    .divider-horizontal { left: 0; }
    .crystal-scatter { display: none; }
}