/* ======================================
   bada.style v2 — Avant-Garde Fashion Lookbook
   Horizontal Theater / Frosted Glass Depth
   ====================================== */

/* --- CSS Custom Properties --- */
:root {
    --parchment-frost: #F0EDE8;
    --ink-stone: #1C1917;
    --sienna-thread: #A0522D;
    --mist-layer: rgba(240, 237, 232, 0.65);
    --ash-veil: #B8B2A8;
    --deep-walnut: #3E2A1F;
    --bone-white: #FAF8F5;

    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Crimson Pro', serif;
    --font-accent: 'Anybody', sans-serif;

    --cursor-x: 50%;
    --cursor-y: 50%;
}

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

html {
    overflow: hidden;
    height: 100%;
}

body {
    overflow: hidden;
    height: 100%;
    background: var(--parchment-frost);
    color: var(--ink-stone);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Selection --- */
::selection {
    background: var(--sienna-thread);
    color: var(--bone-white);
}

/* --- Lookbook Container (Horizontal Scroll) --- */
.lookbook-container {
    display: flex;
    flex-direction: row;
    width: max-content;
    height: 100vh;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.lookbook-container::-webkit-scrollbar {
    display: none;
}

/* --- Panel Base --- */
.panel {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
}

.panel-interstitial {
    width: 30vw;
    min-width: 200px;
}

/* --- Panel Backgrounds --- */
.panel-light {
    background: var(--parchment-frost);
}

.panel-dark {
    background: var(--ink-stone);
}

/* --- Depth Container (3D Perspective) --- */
.panel-depth-container {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 800px;
    transform-style: preserve-3d;
}

/* --- Frost Layers (Light Panels) --- */
.frost-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.frost-layer-back {
    transform: translateZ(0px);
    background: var(--parchment-frost);
}

.frost-layer-mid {
    transform: translateZ(20px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: var(--mist-layer);
}

.frost-layer-front {
    transform: translateZ(40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --- Frost Layers (Dark Panels) --- */
.frost-layer-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.frost-layer-dark.frost-layer-back {
    transform: translateZ(0px);
    background: var(--ink-stone);
}

.frost-layer-dark.frost-layer-mid {
    transform: translateZ(20px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(28, 25, 23, 0.5);
}

.frost-layer-dark.frost-layer-front {
    transform: translateZ(40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --- Opening Panel --- */
.panel-opening {
    opacity: 0;
    animation: panelFadeIn 600ms ease forwards;
}

@keyframes panelFadeIn {
    to {
        opacity: 1;
    }
}

.panel-opening .frost-layer-back {
    background: var(--parchment-frost);
}

.opening-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.logotype {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(36px, 6vw, 120px);
    letter-spacing: 0.25em;
    color: var(--ink-stone);
    text-transform: lowercase;
    display: flex;
    align-items: baseline;
}

.logo-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(15px);
}

.logo-letter.animate-in {
    animation: letterReveal 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

.guide-line {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: clamp(100px, 12vw, 300px);
    height: 1px;
    background: var(--sienna-thread);
    width: 0;
    transform: translateY(0.3em);
    transition: none;
}

.guide-line.animate-in {
    animation: lineExtend 1000ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes lineExtend {
    to {
        width: calc(50vw - clamp(100px, 12vw, 300px));
    }
}

/* --- Typographic Fragments (Background) --- */
.typographic-fragment {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(60px, 10vw, 200px);
    color: rgba(184, 178, 168, 0.12);
    position: absolute;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    user-select: none;
    pointer-events: none;
}

.frag-1 {
    top: 10%;
    left: 5%;
    transform: rotate(-5deg);
}

.frag-2 {
    bottom: 20%;
    right: 10%;
    transform: rotate(3deg);
}

.frag-3 {
    top: 50%;
    left: 40%;
    transform: rotate(-2deg);
}

.frag-4 {
    top: 25%;
    right: 20%;
    transform: rotate(1deg);
    font-size: clamp(40px, 7vw, 140px);
}

/* --- Interstitial Panels --- */
.panel-interstitial {
    display: flex;
    align-items: center;
    justify-content: center;
}

.interstitial-word {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(24px, 4vw, 72px);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: var(--ash-veil);
    transition: color 0.4s ease;
}

.panel-dark .interstitial-word {
    color: var(--deep-walnut);
}

/* --- Monumental Typography --- */
.monumental-type {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.mono-text {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(80px, 15vw, 300px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bone-white);
    opacity: 0.12;
    transform: translateX(15%);
}

.mono-text-small {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(40px, 6vw, 120px);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--bone-white);
    opacity: 0.08;
}

.mono-text-huge {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(120px, 25vw, 500px);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ash-veil);
    opacity: 0.2;
    transform: translateX(20%);
}

.monumental-offset {
    bottom: 10%;
    left: 5%;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 5%;
}

.monumental-crop-right {
    justify-content: flex-end;
    align-items: center;
}

/* --- Thread-Line SVGs --- */
.thread-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.thread-path {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.thread-line-large {
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
}

.thread-line-garment {
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 90%;
}

.thread-line-diagonal {
    opacity: 0.7;
}

/* --- Look Captions --- */
.look-caption {
    position: absolute;
    top: 8%;
    left: 6%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

.look-caption-dark {
    color: var(--bone-white);
}

.caption-label {
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sienna-thread);
}

.caption-season {
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ash-veil);
}

/* --- Look Text --- */
.look-text {
    position: absolute;
    bottom: 12%;
    left: 6%;
    max-width: 480px;
    z-index: 2;
}

.look-text-centered {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.look-description {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.8;
    color: var(--ink-stone);
}

.panel-dark .look-description {
    color: var(--bone-white);
}

/* --- Breathing Panels --- */
.panel-breathing {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.breathing-word {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.3em;
    color: var(--ash-veil);
    position: absolute;
    bottom: 25%;
    right: 15%;
}

.panel-breathing.panel-light .breathing-word {
    color: var(--ash-veil);
}

.breathing-element-dark {
    display: flex;
    align-items: center;
    justify-content: center;
}

.breathing-thread {
    width: 80px;
    height: 80px;
    opacity: 0.6;
}

/* --- Layered Text Background --- */
.layered-text-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(60px, 10vw, 200px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(184, 178, 168, 0.1);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

/* --- Cursor Spotlight (Dark Panels) --- */
.cursor-spotlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(
        circle 250px at var(--cursor-x) var(--cursor-y),
        rgba(240, 237, 232, 0.04),
        transparent
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.panel-dark:hover .cursor-spotlight {
    opacity: 1;
}

/* --- Closing Panel --- */
.closing-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    gap: 24px;
}

.closing-logotype {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(28px, 4vw, 80px);
    letter-spacing: 0.25em;
    color: var(--bone-white);
    text-transform: lowercase;
}

.closing-tagline {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.8;
    color: var(--ash-veil);
    letter-spacing: 0.05em;
}

.closing-season {
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sienna-thread);
    margin-top: 40px;
}

/* --- Progress Bar --- */
.progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: transparent;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.progress-bar.visible {
    opacity: 1;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: var(--sienna-thread);
    transition: width 0.1s linear;
}

/* --- Scroll Reveal Animations --- */
.panel-look,
.panel-breathing,
.panel-interstitial {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-look.in-view,
.panel-breathing.in-view,
.panel-interstitial.in-view {
    opacity: 1;
}

/* --- Hover states for interactive elements --- */
.closing-logotype {
    transition: color 0.4s ease;
}

.closing-logotype:hover {
    color: var(--sienna-thread);
}

.interstitial-word:hover {
    color: var(--sienna-thread);
}

/* --- Responsive: Vertical on Mobile --- */
@media (max-width: 768px) {
    html {
        overflow: auto;
        overflow-x: hidden;
    }

    body {
        overflow: auto;
        overflow-x: hidden;
    }

    .lookbook-container {
        flex-direction: column;
        width: 100%;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
    }

    .panel {
        width: 100vw;
        height: 100vh;
        scroll-snap-align: start;
    }

    .panel-interstitial {
        width: 100vw;
        height: 30vh;
        min-width: unset;
    }

    .interstitial-word {
        writing-mode: horizontal-tb;
        text-orientation: initial;
    }

    /* Reduce frost layers for mobile performance */
    .frost-layer-mid {
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .panel-depth-container {
        perspective: none;
        transform-style: flat;
    }

    .frost-layer,
    .frost-layer-dark {
        transform: none;
    }

    .look-text {
        left: 5%;
        right: 5%;
        max-width: none;
    }

    .look-text-centered {
        left: 5%;
        right: 5%;
        transform: none;
        text-align: center;
    }

    .logotype {
        font-size: clamp(28px, 8vw, 60px);
        letter-spacing: 0.15em;
    }

    .guide-line {
        margin-left: clamp(60px, 10vw, 150px);
    }

    .mono-text {
        font-size: clamp(60px, 20vw, 150px);
    }

    .mono-text-huge {
        font-size: clamp(80px, 30vw, 250px);
    }

    .mono-text-small {
        font-size: clamp(24px, 8vw, 60px);
    }

    .cursor-spotlight {
        display: none;
    }

    .breathing-word {
        position: static;
        display: block;
        text-align: center;
    }
}