/* =============================================
   iggi.boo — Design Language Implementation
   McBling-meets-luxury-hotel, ma-negative-space
   ============================================= */

:root {
    --obsidian: #0D0B08;
    --nero: #1A1410;
    --parchment: #F5EDE0;
    --gold: #C9A84C;
    --gold-burnished: #B8985A;
    --vellum: #FAF6EF;
    --charcoal: #3D3228;
    --marble-white: #E8E0D4;
    --gold-leaf: #DFC06F;
    --vein-grey: #9B8E7E;

    --font-headline: 'EB Garamond', Georgia, serif;
    --font-body: 'Cormorant Garamond', Georgia, serif;
    --font-script: 'Pinyon Script', cursive;

    --ease-reveal: cubic-bezier(0.23, 1, 0.32, 1);
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--obsidian);
    color: var(--charcoal);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
}

/* =============================================
   Monogram — fixed top-left, pulsing
   ============================================= */
.monogram {
    position: fixed;
    top: 2rem;
    left: 2rem;
    font-family: var(--font-script);
    font-size: 1.6rem;
    color: var(--gold);
    text-decoration: none;
    z-index: 100;
    animation: monogramPulse 4s ease-in-out infinite;
    cursor: pointer;
}

@keyframes monogramPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* =============================================
   Sparkle Container — fixed overlay for crystals
   ============================================= */
#sparkle-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

.sparkle {
    position: absolute;
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
    background-color: var(--gold);
    animation: sparkleGlow var(--sparkle-duration, 3s) ease-in-out infinite;
    animation-delay: var(--sparkle-delay, 0s);
}

@keyframes sparkleGlow {
    0%, 100% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: var(--sparkle-max-opacity, 0.25);
        transform: scale(1);
    }
}

/* =============================================
   Marble Overlay — CSS-only procedural marble
   ============================================= */
.marble-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(232, 224, 212, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(155, 142, 126, 0.02) 0%, transparent 45%),
        radial-gradient(ellipse at 60% 20%, rgba(201, 168, 76, 0.01) 0%, transparent 40%),
        linear-gradient(22deg, transparent 42%, rgba(155, 142, 126, 0.018) 43%, transparent 44%),
        linear-gradient(158deg, transparent 55%, rgba(201, 168, 76, 0.012) 56%, transparent 57%),
        linear-gradient(85deg, transparent 30%, rgba(155, 142, 126, 0.015) 31%, transparent 32%),
        linear-gradient(195deg, transparent 68%, rgba(232, 224, 212, 0.02) 69%, transparent 70%),
        radial-gradient(ellipse at 45% 80%, rgba(155, 142, 126, 0.015) 0%, transparent 35%);
}

.marble-overlay--light {
    background:
        radial-gradient(ellipse at 25% 35%, rgba(232, 224, 212, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 65%, rgba(155, 142, 126, 0.06) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 15%, rgba(201, 168, 76, 0.03) 0%, transparent 40%),
        linear-gradient(22deg, transparent 38%, rgba(155, 142, 126, 0.04) 39%, transparent 40%),
        linear-gradient(158deg, transparent 50%, rgba(201, 168, 76, 0.025) 51%, transparent 52%),
        linear-gradient(110deg, transparent 62%, rgba(155, 142, 126, 0.035) 63%, transparent 64%),
        linear-gradient(200deg, transparent 72%, rgba(232, 224, 212, 0.05) 73%, transparent 74%),
        radial-gradient(ellipse at 40% 75%, rgba(155, 142, 126, 0.04) 0%, transparent 35%);
}

.marble-overlay--visible {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(232, 224, 212, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(155, 142, 126, 0.1) 0%, transparent 45%),
        radial-gradient(ellipse at 55% 25%, rgba(201, 168, 76, 0.04) 0%, transparent 40%),
        linear-gradient(22deg, transparent 30%, rgba(155, 142, 126, 0.06) 31%, transparent 32%),
        linear-gradient(158deg, transparent 45%, rgba(201, 168, 76, 0.04) 46%, transparent 47%),
        linear-gradient(75deg, transparent 60%, rgba(155, 142, 126, 0.05) 61%, transparent 62%),
        linear-gradient(195deg, transparent 35%, rgba(232, 224, 212, 0.07) 36%, transparent 37%),
        radial-gradient(ellipse at 15% 70%, rgba(155, 142, 126, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at 85% 30%, rgba(201, 168, 76, 0.03) 0%, transparent 35%);
}

/* =============================================
   Digital Patina Grid — geometric lattice
   ============================================= */
.digital-patina {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        linear-gradient(0deg, rgba(201, 168, 76, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
}

.digital-patina--visible {
    background-image:
        linear-gradient(0deg, rgba(201, 168, 76, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, 0.05) 1px, transparent 1px);
    background-size: 80px 80px;
}

.digital-patina-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.patina-dot {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: var(--gold);
    animation: patinaPulse 6s ease-in-out infinite;
}

@keyframes patinaPulse {
    0%, 100% { opacity: 0.04; }
    50% { opacity: 0.12; }
}

/* =============================================
   Hero Void — Opening section
   ============================================= */
.hero-void {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--obsidian);
}

.hero-text {
    font-family: var(--font-headline);
    font-weight: 500;
    font-size: clamp(3rem, 8vw, 7rem);
    color: var(--gold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

/* =============================================
   Passages — Text sections
   ============================================= */
.passage {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.passage-cream {
    background-color: var(--parchment);
    margin-top: 40vh;
}

.passage-dark {
    background-color: var(--obsidian);
    margin-top: 30vh;
}

.passage-content {
    max-width: 38ch;
    padding: 6rem 3rem;
    position: relative;
    z-index: 2;
}

.passage-right {
    margin-left: auto;
    margin-right: 12%;
}

.passage-left {
    margin-left: 12%;
}

.body-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.85;
    color: var(--charcoal);
    margin-bottom: 1.8rem;
}

.body-text:last-child {
    margin-bottom: 0;
}

.body-text--light {
    color: var(--parchment);
}

.body-text em {
    font-style: italic;
    color: var(--gold-burnished);
}

/* =============================================
   Marble Gallery — Full viewport showcase
   ============================================= */
.marble-gallery {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    background-color: var(--obsidian);
    overflow: hidden;
}

.marble-gallery--cream {
    background-color: var(--parchment);
}

.gallery-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.4rem, 2.8vw, 2.2rem);
    color: var(--gold);
    line-height: 1.7;
    padding-left: 12%;
    position: relative;
    z-index: 2;
}

.gallery-text--dark {
    color: var(--nero);
}

/* =============================================
   Gold Leaf — Floating metallic debris
   ============================================= */
.gold-leaf {
    position: absolute;
    background-color: var(--gold-leaf);
    z-index: 1;
}

.gold-leaf--1 {
    width: 100px;
    height: 40px;
    top: 20%;
    right: 18%;
    opacity: 0.18;
    clip-path: polygon(5% 0%, 92% 4%, 100% 48%, 90% 100%, 8% 95%, 0% 52%);
    transform: rotate(15deg);
}

.gold-leaf--2 {
    width: 65px;
    height: 28px;
    top: 50%;
    right: 32%;
    opacity: 0.12;
    clip-path: polygon(3% 2%, 95% 0%, 98% 42%, 93% 98%, 6% 100%, 0% 58%);
    transform: rotate(-22deg);
}

.gold-leaf--3 {
    width: 120px;
    height: 35px;
    top: 72%;
    right: 12%;
    opacity: 0.15;
    clip-path: polygon(7% 0%, 94% 6%, 100% 50%, 96% 96%, 4% 100%, 0% 45%);
    transform: rotate(8deg);
}

.gold-leaf--4 {
    width: 50px;
    height: 22px;
    top: 35%;
    right: 55%;
    opacity: 0.1;
    clip-path: polygon(2% 5%, 96% 0%, 100% 55%, 92% 98%, 5% 95%, 0% 40%);
    transform: rotate(-10deg);
}

.gold-leaf--5 {
    width: 80px;
    height: 30px;
    top: 85%;
    right: 45%;
    opacity: 0.08;
    clip-path: polygon(4% 0%, 98% 3%, 100% 48%, 94% 100%, 3% 97%, 0% 50%);
    transform: rotate(25deg);
}

.gold-leaf--6 {
    width: 90px;
    height: 32px;
    top: 25%;
    right: 22%;
    opacity: 0.14;
    clip-path: polygon(6% 0%, 93% 5%, 100% 46%, 91% 100%, 7% 96%, 0% 50%);
    transform: rotate(-18deg);
}

.gold-leaf--7 {
    width: 55px;
    height: 24px;
    top: 60%;
    right: 10%;
    opacity: 0.1;
    clip-path: polygon(3% 3%, 97% 0%, 100% 52%, 95% 97%, 4% 100%, 0% 48%);
    transform: rotate(12deg);
}

.gold-leaf--8 {
    width: 110px;
    height: 38px;
    top: 78%;
    right: 40%;
    opacity: 0.09;
    clip-path: polygon(5% 0%, 94% 4%, 100% 50%, 92% 98%, 6% 100%, 0% 45%);
    transform: rotate(-6deg);
}

/* =============================================
   Whispers — Detail text fragments
   ============================================= */
.whispers {
    padding: 25vh 0;
    background-color: var(--parchment);
    position: relative;
    overflow: hidden;
}

.whispers--dark {
    background-color: var(--obsidian);
    margin-top: 30vh;
}

.whisper {
    font-family: var(--font-body);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    color: var(--gold-burnished);
    opacity: 0.7;
    padding: 12vh 12%;
    max-width: 50ch;
    position: relative;
    z-index: 2;
}

.whisper:nth-child(odd) {
    margin-left: 0;
}

.whisper:nth-child(even) {
    margin-left: auto;
    text-align: right;
    padding-right: 12%;
    padding-left: 0;
}

.whisper--light {
    color: var(--gold-burnished);
}

/* =============================================
   Ornament Divider — Diamond flourish
   ============================================= */
.ornament-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6rem 0;
    background-color: var(--parchment);
}

.ornament-divider--closing {
    background-color: transparent;
    padding: 4rem 0;
}

.divider-line {
    width: 12vw;
    height: 1px;
    background-color: var(--gold);
    opacity: 0.4;
}

.divider-diamond {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background-color: var(--gold);
    opacity: 0.5;
    flex-shrink: 0;
}

/* =============================================
   Gold Rule — Floating horizontal accent
   ============================================= */
.gold-rule {
    width: 20vw;
    height: 1px;
    background-color: var(--gold);
    opacity: 0.4;
    margin: 8vh auto;
}

/* =============================================
   Closing Section
   ============================================= */
.closing-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--obsidian);
    margin-top: 30vh;
    overflow: hidden;
}

.closing-content {
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 4rem 2rem;
}

.closing-headline {
    font-family: var(--font-headline);
    font-weight: 500;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    color: var(--gold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.closing-subline {
    font-family: var(--font-body);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    color: var(--gold-burnished);
    opacity: 0.7;
    letter-spacing: 0.02em;
}

/* =============================================
   Final Void / Footer
   ============================================= */
.final-void {
    min-height: 60vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4rem;
    position: relative;
    background-color: var(--obsidian);
}

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

.footer-mark {
    font-family: var(--font-headline);
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--gold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.footer-colophon {
    font-family: var(--font-body);
    font-weight: 300;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--gold-burnished);
    opacity: 0.6;
    line-height: 1.8;
    max-width: 360px;
    margin: 0 auto;
}

/* =============================================
   Fade Reveal Animation
   ============================================= */
.fade-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s var(--ease-reveal), transform 1.2s var(--ease-reveal);
}

.fade-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero text has special delayed reveal */
.hero-text.fade-reveal {
    transition-delay: 0s;
}

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 768px) {
    .passage-content {
        padding: 4rem 2rem;
    }

    .passage-right {
        margin-right: 5%;
    }

    .passage-left {
        margin-left: 5%;
    }

    .gallery-text {
        padding-left: 6%;
    }

    .whisper {
        padding: 8vh 6%;
    }

    .whisper:nth-child(even) {
        padding-right: 6%;
    }

    .passage-cream {
        margin-top: 25vh;
    }

    .whispers {
        padding: 15vh 0;
    }
}

@media (max-width: 480px) {
    .passage-content {
        max-width: 100%;
        padding: 3rem 1.5rem;
    }

    .body-text {
        font-size: 1rem;
    }

    .passage-cream {
        margin-top: 18vh;
    }

    .closing-section {
        margin-top: 15vh;
    }

    .hero-text {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .monogram {
        top: 1.2rem;
        left: 1.2rem;
        font-size: 1.3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sparkle,
    .monogram,
    .patina-dot {
        animation: none;
    }

    .sparkle {
        opacity: 0.15;
        transform: scale(1);
    }

    .monogram {
        opacity: 0.6;
    }

    .patina-dot {
        opacity: 0.08;
    }

    .fade-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}