/* ===========================================
   rational.monster - Luxurious Retro-Futurism
   Art-Deco meets Cosmic Maximalism
   =========================================== */

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

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

body {
    background-color: #E6D5B8;
    color: #3A3A3A;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.75;
    overflow-x: hidden;
    position: relative;
    background-image:
        linear-gradient(180deg,
            #E6D5B8 0%,
            #E6D5B8 30%,
            #ddd0b5 50%,
            #d6ccb8 70%,
            #c8c4c0 85%,
            #b8bcc8 100%
        );
    background-attachment: fixed;
    min-height: 100vh;
}

/* ---- Retro Pattern Overlay ---- */
.retro-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.06;
    background-image:
        repeating-linear-gradient(
            15deg,
            transparent,
            transparent 14px,
            #8B4513 14px,
            #8B4513 15px
        );
}

/* ---- Cosmic Background Shapes ---- */
.cosmic-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.cosmic-circle {
    position: absolute;
    border-radius: 50%;
}

.cosmic-circle-1 {
    width: 450px;
    height: 450px;
    top: -100px;
    right: -80px;
    background: radial-gradient(circle, rgba(147,112,219,0.12) 0%, transparent 70%);
    animation: cosmicRotate 40s linear infinite;
}

.cosmic-circle-2 {
    width: 350px;
    height: 350px;
    bottom: 20%;
    left: -120px;
    background: radial-gradient(circle, rgba(255,179,71,0.1) 0%, transparent 70%);
    animation: cosmicRotate 50s linear infinite reverse;
}

.cosmic-circle-3 {
    width: 280px;
    height: 280px;
    top: 55%;
    right: 5%;
    background: radial-gradient(circle, rgba(47,79,127,0.08) 0%, transparent 70%);
    animation: cosmicRotate 35s linear infinite;
}

.cosmic-hexagon {
    position: absolute;
}

.cosmic-hex-1 {
    width: 200px;
    height: 200px;
    top: 35%;
    left: 10%;
    background: linear-gradient(135deg, rgba(255,160,122,0.08), rgba(147,112,219,0.06));
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: cosmicRotate 60s linear infinite;
}

.cosmic-triangle {
    position: absolute;
}

.cosmic-tri-1 {
    width: 180px;
    height: 180px;
    bottom: 10%;
    right: 15%;
    background: linear-gradient(180deg, rgba(139,69,19,0.06), rgba(255,179,71,0.08));
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    animation: cosmicRotate 45s linear infinite reverse;
}

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

/* ---- Typography ---- */
.hero-title,
.section-headline,
.closing-headline {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.1;
    color: #8B4513;
}

.hero-title {
    font-size: clamp(3.2rem, 8vw, 6.5rem);
}

.section-headline {
    font-size: clamp(2.4rem, 6vw, 5rem);
    margin-bottom: 1.5rem;
}

.headline-light {
    color: #E6D5B8;
}

.sub-headline {
    font-family: 'Commissioner', 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: #8B4513;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.body-text {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.75;
    color: #3A3A3A;
    margin-bottom: 1.2rem;
    max-width: 60ch;
}

.body-text-italic {
    font-style: italic;
    color: #8B4513;
}

.body-text-light {
    color: #E6D5B8;
}

.card-accent-number {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.card-text {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1rem;
    line-height: 1.65;
}

.footer-text {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #8B4513;
    opacity: 0.5;
}

/* Light salmon secondary highlight accent */
.pull-quote-float-1 blockquote::first-letter {
    color: #FFA07A;
}

/* ---- Hero Section ---- */
.hero {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-cosmic-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(80vw, 500px);
    height: min(80vw, 500px);
    animation: cosmicRotate 40s linear infinite;
    z-index: 1;
}

.hero-ring-svg {
    width: 100%;
    height: 100%;
}

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

.hero-title-accent {
    color: #9370DB;
    display: block;
}

.hero-tagline {
    font-family: 'Commissioner', 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    color: #2F4F7F;
    margin-top: 1.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1.2s ease 0.6s forwards;
}

.hero-deco-corner {
    position: absolute;
    z-index: 3;
}

.hero-deco-tl {
    top: 2rem;
    left: 2rem;
}

.hero-deco-br {
    bottom: 2rem;
    right: 2rem;
}

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

/* ---- Diagonal Dividers ---- */
.diagonal-divider {
    position: relative;
    z-index: 2;
    height: 80px;
    margin: -1px 0;
}

.diagonal-divider-1 {
    background: linear-gradient(172deg, #E6D5B8 49.5%, transparent 50.5%);
}

.diagonal-divider-2 {
    background: linear-gradient(188deg, transparent 49.5%, #E6D5B8 50.5%);
}

/* ---- Art Deco Dividers ---- */
.deco-divider {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.deco-divider-svg {
    width: min(80%, 400px);
    height: auto;
}

/* ---- Editorial Spreads ---- */
.editorial-spread {
    position: relative;
    z-index: 2;
    padding: 4rem 2rem;
}

/* Spread 1: Left-heavy asymmetric */
.spread-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

@media (min-width: 768px) {
    .spread-1 {
        grid-template-columns: 60% 35%;
        gap: 5%;
    }
}

.spread-content-left {
    padding: 2rem 0;
}

.spread-content-right {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 4rem;
}

/* Pull Quotes */
.pull-quote {
    position: relative;
    z-index: 3;
}

.pull-quote blockquote {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: #9370DB;
    font-style: italic;
    line-height: 1.4;
    letter-spacing: 0.02em;
    max-width: 40ch;
}

.pull-quote-float-1 {
    margin-top: 2rem;
    padding-left: 2rem;
    border-left: 3px solid #FFB347;
}

@media (min-width: 768px) {
    .pull-quote-float-1 {
        position: absolute;
        bottom: -2rem;
        right: 5%;
        margin-top: 0;
        max-width: 35%;
    }
}

.pull-quote-float-2 {
    margin-top: 2rem;
    padding-left: 2rem;
    border-left: 3px solid #9370DB;
}

@media (min-width: 768px) {
    .pull-quote-float-2 {
        position: absolute;
        bottom: 3rem;
        left: 3%;
        margin-top: 0;
        max-width: 30%;
    }
}

/* Floating Cards */
.floating-card {
    padding: 2rem;
    position: relative;
    max-width: 340px;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.floating-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.card-burnt {
    background: rgba(139,69,19,0.08);
    border: 1px solid rgba(139,69,19,0.15);
    color: #3A3A3A;
}

.card-burnt .card-accent-number {
    color: #8B4513;
}

.card-lavender {
    background: rgba(147,112,219,0.08);
    border: 1px solid rgba(147,112,219,0.15);
    color: #3A3A3A;
}

.card-lavender .card-accent-number {
    color: #9370DB;
}

.card-apricot {
    background: rgba(255,179,71,0.1);
    border: 1px solid rgba(255,179,71,0.2);
    color: #3A3A3A;
}

.card-apricot .card-accent-number {
    color: #FFB347;
}

.card-sienna {
    background: rgba(139,69,19,0.06);
    border: 1px solid rgba(139,69,19,0.12);
    color: #3A3A3A;
}

.card-sienna .card-accent-number {
    color: #8B4513;
}

/* Spread 2: Wide block + narrow aside */
.spread-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .spread-2 {
        grid-template-columns: 55% 40%;
        gap: 5%;
    }
}

.color-island {
    padding: 3rem;
    position: relative;
}

.island-slate {
    background: linear-gradient(135deg, #2F4F7F 0%, #3a5f94 100%);
    clip-path: polygon(0 3%, 100% 0, 98% 97%, 2% 100%);
}

.spread-narrow-aside {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: flex-end;
    padding-top: 3rem;
}

.constellation-lines {
    width: 200px;
    opacity: 0.7;
}

.constellation-svg {
    width: 100%;
    height: auto;
}

/* Spread 3: Pullquote hero + stagger */
.spread-3 {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.spread-pullquote-hero {
    padding: 3rem 0;
    text-align: center;
}

.large-pullquote {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    color: #2F4F7F;
    font-style: italic;
    line-height: 1.25;
    letter-spacing: 0.02em;
    max-width: 20ch;
    margin: 0 auto;
}

.spread-content-stagger {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .spread-content-stagger {
        grid-template-columns: 55% 40%;
        gap: 5%;
    }
}

.stagger-block {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.stagger-block.visible {
    opacity: 1;
    transform: translateY(0);
}

.stagger-right {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

@media (min-width: 768px) {
    .stagger-right {
        padding-top: 4rem;
    }
}

/* Spread 4: Asymmetric grid */
.spread-4 {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.spread-grid-asymmetric {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .spread-grid-asymmetric {
        grid-template-columns: 45% 25% 25%;
        gap: 2.5%;
    }
}

.grid-cell-wide {
    padding: 2rem 0;
}

.grid-cell-narrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.molecular-diagram {
    width: 200px;
    height: 200px;
}

.molecular-svg {
    width: 100%;
    height: 100%;
    animation: cosmicRotate 50s linear infinite;
}

.grid-cell-accent {
    display: flex;
    align-items: flex-start;
    padding-top: 2rem;
}

/* ---- Closing Section ---- */
.closing-section {
    position: relative;
    z-index: 2;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: radial-gradient(ellipse at center, rgba(147,112,219,0.06) 0%, transparent 60%);
}

.closing-cosmic-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(60vw, 300px);
    height: min(60vw, 300px);
    animation: cosmicRotate 35s linear infinite reverse;
    opacity: 0.7;
}

.closing-ring-svg {
    width: 100%;
    height: 100%;
}

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

.closing-headline {
    font-size: clamp(2.6rem, 7vw, 5.5rem);
    margin-bottom: 1.5rem;
    color: #2F4F7F;
}

.closing-text {
    font-family: 'Commissioner', 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: #8B4513;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.closing-deco {
    display: flex;
    justify-content: center;
}

.closing-deco-svg {
    width: 200px;
    height: auto;
}

/* ---- Footer ---- */
.site-footer {
    position: relative;
    z-index: 2;
    padding: 2rem;
    text-align: center;
    border-top: 1px solid rgba(139,69,19,0.1);
}

/* ---- Scroll Reveal Animation ---- */
.editorial-spread {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.editorial-spread.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Deco divider reveal ---- */
.deco-divider {
    opacity: 0;
    transition: opacity 0.5s ease 0.2s;
}

.deco-divider.visible {
    opacity: 1;
}

/* ---- Hover accents: reveal lavender-purple ---- */
.floating-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(147,112,219,0.05), rgba(147,112,219,0.02));
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.floating-card:hover::after {
    opacity: 1;
}

/* ---- Section slide-reveal for clip-path borders ---- */
@keyframes slideReveal {
    from {
        clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    }
    to {
        clip-path: polygon(0 0, 100% 3%, 98% 97%, 2% 100%);
    }
}

.island-slate {
    animation: none;
}

.island-slate.revealed {
    animation: slideReveal 0.5s ease forwards;
}

/* ---- Responsive Adjustments ---- */
@media (max-width: 767px) {
    .hero-deco-tl {
        top: 1rem;
        left: 1rem;
    }
    .hero-deco-br {
        bottom: 1rem;
        right: 1rem;
    }

    .editorial-spread {
        padding: 3rem 1.5rem;
    }

    .color-island {
        padding: 2rem;
        clip-path: none;
    }

    .floating-card {
        max-width: 100%;
    }

    .pull-quote-float-1,
    .pull-quote-float-2 {
        position: relative;
        bottom: auto;
        right: auto;
        left: auto;
        max-width: 100%;
    }
}