/* ============================================
   chloengine.com -- Styles
   Vaporwave / Pastel / Z-Pattern / Variable-Fluid
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --bg-primary: #FBF7F0;
    --bg-secondary: #E8E0F0;
    --accent-primary: #F2C6D0;
    --accent-secondary: #B8A9D4;
    --text-primary: #3D3548;
    --text-secondary: #8B7FA3;
    --peach-glow: #F5D5C8;
    --twilight-iris: #6E5B8E;
    --grid-line: #D4C5E2;

    --font-display: 'Outfit', sans-serif;
    --font-body: 'Epilogue', sans-serif;
    --font-mono: 'Space Mono', monospace;
}

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

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

body {
    font-family: var(--font-body);
    font-weight: 350;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    overflow-x: hidden;
}

/* --- Frames (Full Viewport) --- */
.frame {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    transition: background-color 800ms ease;
    perspective: 1200px;
}

.frame-1 {
    background-color: var(--bg-primary);
}

.frame-2 {
    background-color: var(--bg-secondary);
}

.frame-3 {
    background-color: var(--bg-primary);
}

.frame-4 {
    background-color: var(--bg-secondary);
}

/* --- CRT Barrel Distortion Hint --- */
.frame-content {
    transform: perspective(1200px) rotateY(0deg);
    transform-style: preserve-3d;
}

/* --- Grid Overlay --- */
.grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        repeating-linear-gradient(
            to right,
            rgba(212, 197, 226, 0.2) 0px,
            rgba(212, 197, 226, 0.2) 1px,
            transparent 1px,
            transparent 25%
        ),
        repeating-linear-gradient(
            to bottom,
            rgba(212, 197, 226, 0.2) 0px,
            rgba(212, 197, 226, 0.2) 1px,
            transparent 1px,
            transparent 25%
        );
}

/* Grid cursor glow -- updated via JS */
.grid-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle 120px at var(--mx, -200px) var(--my, -200px),
        rgba(184, 169, 212, 0.5) 0%,
        rgba(184, 169, 212, 0.08) 100%
    );
    pointer-events: none;
    transition: opacity 150ms ease;
}

/* --- Z-Pattern Layout --- */
.z-pattern {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto 1fr;
    gap: 2rem;
    padding: clamp(2rem, 5vw, 5rem);
    min-height: 100vh;
    min-height: 100dvh;
    align-items: center;
}

.z-top-left {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    padding-top: clamp(2rem, 6vh, 4rem);
}

.z-top-right {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    padding-top: clamp(2rem, 6vh, 4rem);
}

.z-diagonal {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
}

.z-center {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    text-align: center;
    max-width: 640px;
}

.z-bottom-left {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    padding-bottom: clamp(2rem, 6vh, 4rem);
}

.z-bottom-right {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    align-self: end;
    padding-bottom: clamp(2rem, 6vh, 4rem);
}

/* --- Typography --- */

/* Hero Title */
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 9rem);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text-primary);
}

.hero-title .letter {
    display: inline-block;
    font-variation-settings: 'wght' 100;
    transition: font-variation-settings 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--delay) * 50ms);
}

.hero-title .letter.loaded {
    font-variation-settings: 'wght' var(--target-weight, 400);
}

/* Section Headings */
.section-heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: 0em;
    line-height: 1.15;
    color: var(--text-primary);
    font-variation-settings: 'wght' var(--wght, 200);
    transition: font-variation-settings 300ms ease;
}

.section-heading.large-type {
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: -0.02em;
}

/* Ghost Title (Frame 4) */
.ghost-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variation-settings: 'wght' var(--wght, 200);
    transition: font-variation-settings 300ms ease;
}

/* Body Text */
.body-text {
    font-family: var(--font-body);
    font-weight: 350;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    max-width: 520px;
    transition: font-weight 200ms ease;
}

.body-text.hover-weight {
    font-variation-settings: 'wght' var(--hover-wght, 350);
    transition: font-variation-settings 200ms ease;
}

/* Mono Annotations */
.mono-annotation {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: block;
    margin-top: 1.5rem;
}

/* --- Sunset Blinds (Frame 1) --- */
.sunset-blinds {
    width: clamp(200px, 30vw, 400px);
    height: clamp(200px, 30vw, 400px);
    border-radius: 8px;
    overflow: hidden;
    background: repeating-linear-gradient(
        180deg,
        var(--bg-secondary) 0px,
        var(--bg-secondary) 12px,
        var(--peach-glow) 12px,
        var(--peach-glow) 24px
    );
    background-size: 100% 48px;
    animation: blinds-shift 8s ease-in-out infinite alternate;
}

@keyframes blinds-shift {
    0% {
        background-position: 0 0;
        filter: brightness(1) hue-rotate(0deg);
    }
    50% {
        background-position: 0 12px;
        filter: brightness(1.05) hue-rotate(5deg);
    }
    100% {
        background-position: 0 24px;
        filter: brightness(0.98) hue-rotate(-5deg);
    }
}

/* --- Vintage Photo Treatment --- */
.vintage-photo-wrapper {
    position: relative;
    display: inline-block;
}

.vintage-photo-wrapper.photo-tilted {
    transform: rotate(3deg);
}

.vintage-photo {
    position: relative;
    width: clamp(180px, 22vw, 320px);
    height: clamp(130px, 16vw, 240px);
    border-radius: 6px;
    overflow: hidden;
    filter: saturate(0.45) contrast(0.88) brightness(1.05) sepia(0.12) hue-rotate(330deg);
    box-shadow: 0 8px 32px rgba(61, 53, 72, 0.12);
}

.vintage-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #F2C6D0 0%, #B8A9D4 100%);
    opacity: 0.10;
    mix-blend-mode: overlay;
    border-radius: 6px;
    pointer-events: none;
}

.vintage-photo.duotone {
    filter: saturate(0.3) contrast(0.8) brightness(1.1) sepia(0.2) hue-rotate(330deg);
}

.vintage-photo.duotone::after {
    opacity: 0.25;
}

/* Photo placeholder content (gradient-based scene approximations) */
.photo-content {
    width: 100%;
    height: 100%;
}

.lobby-photo {
    background: linear-gradient(
        160deg,
        #8da0b5 0%,
        #c9b8a0 30%,
        #d4a088 50%,
        #e8b8a0 70%,
        #7a8fa3 100%
    );
}

.archive-photo-1 {
    background: linear-gradient(
        135deg,
        #6a8fa8 0%,
        #a0c8d0 30%,
        #b8d8e0 50%,
        #88b8c8 100%
    );
}

.archive-photo-2 {
    background: linear-gradient(
        200deg,
        #d0c0a0 0%,
        #b8a888 30%,
        #c8b898 60%,
        #a09078 100%
    );
}

.archive-photo-3 {
    background: linear-gradient(
        170deg,
        #90a8b8 0%,
        #a8b8c0 40%,
        #78a098 70%,
        #608878 100%
    );
}

.archive-photo-4 {
    background: linear-gradient(
        145deg,
        #c8a8b0 0%,
        #b898a8 35%,
        #a88898 65%,
        #987888 100%
    );
}

.signal-photo {
    background: linear-gradient(
        180deg,
        #d0a8c0 0%,
        #b890a8 30%,
        #a07890 60%,
        #886078 100%
    );
}

.fade-photo {
    background: linear-gradient(
        155deg,
        #c0b8c8 0%,
        #b0a8b8 30%,
        #a098a8 60%,
        #908898 100%
    );
}

/* --- Morphing SVG Blobs --- */
.blob-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.morph-blob {
    width: clamp(300px, 50vw, 600px);
    height: clamp(300px, 50vw, 600px);
    opacity: 0.35;
}

.blob-path {
    fill: var(--accent-primary);
    stroke: none;
}

.blob-1 {
    animation: morph-1 12s ease-in-out infinite alternate;
}

.blob-2 {
    animation: morph-2 12s ease-in-out infinite alternate;
}

.blob-3 {
    animation: morph-3 12s ease-in-out infinite alternate;
}

.blob-4 {
    animation: morph-4 12s ease-in-out infinite alternate;
}

@keyframes morph-1 {
    0% { d: path('M250,100 C320,100 400,160 420,250 C440,340 380,420 250,420 C120,420 60,340 80,250 C100,160 180,100 250,100Z'); }
    33% { d: path('M260,80 C350,110 430,180 410,270 C390,360 320,430 230,420 C140,410 70,330 90,230 C110,130 170,50 260,80Z'); }
    66% { d: path('M240,90 C330,70 420,150 430,250 C440,350 370,440 260,430 C150,420 60,350 70,240 C80,130 150,110 240,90Z'); }
    100% { d: path('M270,110 C340,90 410,170 400,270 C390,370 310,430 220,410 C130,390 70,310 100,220 C130,130 200,130 270,110Z'); }
}

@keyframes morph-2 {
    0% { d: path('M250,80 C340,90 430,170 430,260 C430,350 340,440 250,430 C160,420 70,350 70,260 C70,170 160,70 250,80Z'); }
    33% { d: path('M270,90 C360,100 440,190 420,280 C400,370 320,440 230,440 C140,440 60,360 80,260 C100,160 180,80 270,90Z'); }
    66% { d: path('M240,70 C340,80 420,160 440,260 C460,360 370,450 260,440 C150,430 60,350 60,250 C60,150 140,60 240,70Z'); }
    100% { d: path('M260,100 C350,80 430,170 430,270 C430,370 350,440 250,440 C150,440 70,370 70,260 C70,150 170,120 260,100Z'); }
}

@keyframes morph-3 {
    0% { d: path('M230,70 C310,60 420,140 440,240 C460,340 390,430 280,440 C170,450 60,370 60,260 C60,150 150,80 230,70Z'); }
    33% { d: path('M250,80 C340,70 430,150 440,250 C450,350 380,440 270,440 C160,440 70,360 70,250 C70,140 160,90 250,80Z'); }
    66% { d: path('M240,90 C320,80 410,160 430,250 C450,340 380,430 260,430 C140,430 60,350 60,250 C60,150 160,100 240,90Z'); }
    100% { d: path('M260,70 C350,70 430,150 440,260 C450,370 370,440 260,440 C150,440 60,360 60,250 C60,140 170,70 260,70Z'); }
}

@keyframes morph-4 {
    0% { d: path('M260,90 C350,100 440,180 430,280 C420,380 330,440 240,430 C150,420 60,350 70,250 C80,150 170,80 260,90Z'); }
    33% { d: path('M250,80 C340,90 430,170 430,270 C430,370 340,440 240,430 C140,420 70,340 80,240 C90,140 160,70 250,80Z'); }
    66% { d: path('M270,100 C350,90 430,170 420,270 C410,370 320,440 230,430 C140,420 60,340 70,240 C80,140 190,110 270,100Z'); }
    100% { d: path('M250,90 C340,80 430,160 440,260 C450,360 370,440 260,440 C150,440 60,360 60,260 C60,160 160,100 250,90Z'); }
}

/* --- Morph Shape (Frame 3) --- */
.morph-shape-container {
    width: clamp(150px, 22vw, 300px);
    height: clamp(150px, 22vw, 300px);
}

.morph-shape {
    width: 100%;
    height: 100%;
}

.shape-path {
    fill: rgba(242, 198, 208, 0.35);
    stroke: none;
    animation: shape-morph 12s ease-in-out infinite alternate;
}

@keyframes shape-morph {
    0% { d: path('M200,50 C280,50 350,120 350,200 C350,280 280,350 200,350 C120,350 50,280 50,200 C50,120 120,50 200,50Z'); }
    33% { d: path('M210,40 C300,60 360,130 340,220 C320,310 260,360 180,350 C100,340 40,270 60,180 C80,90 120,20 210,40Z'); }
    66% { d: path('M190,60 C270,40 350,110 360,200 C370,290 300,370 210,360 C120,350 40,290 50,200 C60,110 110,80 190,60Z'); }
    100% { d: path('M220,45 C310,55 360,140 340,230 C320,320 250,370 170,350 C90,330 40,260 60,170 C80,80 130,35 220,45Z'); }
}

/* --- Fade Dissolve (Frame 4) --- */
.fade-element {
    opacity: var(--fade-opacity, 1);
    filter: blur(var(--fade-blur, 0px));
    transition: opacity 400ms ease, filter 400ms ease;
}

/* --- Progress Bar --- */
.progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    z-index: 100;
    transition: width 50ms linear;
}

.progress-bar.complete {
    background: linear-gradient(90deg, var(--accent-primary), var(--twilight-iris));
}

/* --- Frame 2 Grid Specifics --- */
.frame-2 .z-pattern {
    grid-template-rows: auto 1fr auto;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .z-pattern {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1.5rem;
    }

    .z-top-left,
    .z-top-right,
    .z-diagonal,
    .z-center,
    .z-bottom-left,
    .z-bottom-right {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        align-self: start;
        padding-top: 0;
        padding-bottom: 0;
    }

    .z-top-right {
        justify-self: end;
    }

    .z-bottom-right {
        justify-self: end;
    }

    .vintage-photo {
        width: clamp(150px, 60vw, 280px);
        height: clamp(110px, 44vw, 210px);
    }

    .hero-title {
        font-size: clamp(2.5rem, 14vw, 5rem);
    }

    .sunset-blinds {
        width: clamp(150px, 40vw, 250px);
        height: clamp(150px, 40vw, 250px);
    }
}

/* --- Selection Color --- */
::selection {
    background: var(--accent-primary);
    color: var(--text-primary);
}