/* =========================================
   IVRA PARFUMS - LE COFFRET
   ========================================= */

:root {
    --bg-base: #FAF9F6;
    --text-base: #3A3530;
    --accent-gold: #C0A062;
    --ff-serif: 'Cormorant Garamond', serif;
    --ff-sans: 'Montserrat', sans-serif;
    --ff-script: 'Pinyon Script', cursive;
}

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

body {
    background: var(--bg-base);
    color: var(--text-base);
    font-family: var(--ff-sans);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Base UI Elements */
.noise-overlay {
    position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 99998;
    opacity: 0.05; mix-blend-mode: multiply;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E');
    animation: grain 8s steps(10) infinite;
}
@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    30% { transform: translate(7%, -25%); }
    50% { transform: translate(-15%, 10%); }
    70% { transform: translate(0%, 15%); }
    90% { transform: translate(-10%, 10%); }
}

.btn--solid, .btn--outline {
    display: inline-block; padding: 1rem 2rem; font-family: var(--ff-sans); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: all 0.4s ease; text-decoration: none;
}
.btn--solid { background: var(--text-base); color: var(--bg-base); border: 1px solid var(--text-base); }
.btn--solid:hover { background: transparent; color: var(--text-base); }
.btn--outline { background: transparent; color: var(--text-base); border: 1px solid var(--text-base); }
.btn--outline:hover { background: var(--text-base); color: var(--bg-base); }

/* =========================================
   AWWWARDS POLISH EXTENSIONS
   ========================================= */
/* Custom Cursor Hiding */
body, a, button { cursor: none !important; }

/* GSAP Magnetic Cursor */
.custom-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 10px; height: 10px;
    background: var(--accent-gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999999;
    mix-blend-mode: difference;
    transition: width 0.3s ease, height 0.3s ease, background 0.3s ease;
}
.custom-cursor.is-active {
    width: 60px; height: 60px;
    background: transparent;
    border: 1px solid var(--accent-gold);
}

/* Kinetic Text Splitting Wrappers */
.kinetic-text { position: relative; opacity: 1 !important; visibility: visible; }
.char-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}
.char {
    display: inline-block;
    transform: translateY(100%);
}

/* 3D Image Physics */
.img-tilt {
    perspective: 1000px;
    transform-style: preserve-3d;
}
.img-tilt img {
    will-change: transform;
}

/* Navbar Default */
.navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 9000; padding: 1.5rem 4vw; transition: background 0.4s ease, backdrop-filter 0.4s ease; }
.navbar.is-scrolled { background: rgba(250, 249, 246, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(58, 53, 48, 0.05); }
.navbar__inner { display: flex; justify-content: space-between; align-items: center; }
.navbar__logo { font-size: 2rem; font-weight: 500; font-family: var(--ff-serif); color: var(--text-base); }
.navbar__links { display: flex; gap: 3vw; font-family: var(--ff-sans); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.navbar__links a { color: var(--text-base); text-decoration: none; position: relative; display: inline-block; padding: 0.5rem; transition: transform 0.3s ease; }

/* =========================================
   1. HERO MONOLITH
   ========================================= */
.hero-monolith {
    height: 300vh; /* Scroll length for the scale effect */
    position: relative;
}
.hero-monolith__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-monolith__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.hero-monolith__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1); /* for slight scrub parallax */
}
.hero-monolith__mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transform-origin: center center;
    /* We'll use GSAP to scale this mask SVG up massively */
}
.hero-monolith__mask svg {
    width: 100%;
    height: 100%;
}
.hero-monolith__intro {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-family: var(--ff-sans);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--text-base);
    text-shadow: 0 4px 20px rgba(250, 249, 246, 0.7);
    opacity: 0; /* revealed via GSAP after mask breaks */
}

/* Floating Overlay Content (Left) */
.hero-monolith__overlay-left {
    position: absolute;
    left: 12vw;
    top: 40%;
    transform: translateY(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    max-width: 300px;
    opacity: 0; 
}
.hero-monolith__overlay-text-alt .eyebrow {
    font-family: var(--ff-sans);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-gold);
    display: block;
    margin-bottom: 1rem;
    text-shadow: 0 4px 10px rgba(250, 249, 246, 0.8);
}
.hero-monolith__overlay-text-alt h3 {
    font-family: var(--ff-serif);
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--text-base);
    margin-bottom: 1rem;
    line-height:1;
    text-shadow: 0 4px 15px rgba(250, 249, 246, 0.6);
}
.hero-monolith__overlay-text-alt p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-base);
    text-shadow: 0 2px 10px rgba(250, 249, 246, 0.7);
}

/* Floating Overlay Content */
.hero-monolith__overlay {
    position: absolute;
    right: 12vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 400px;
    opacity: 0; /* Revealed via GSAP */
}
.hero-monolith__overlay-img {
    width: 100%;
    height: 40vh; /* Responsive height prevents clipping text below */
    max-height: 400px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(30, 28, 25, 0.4);
}
.hero-monolith__overlay-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-monolith__overlay-text h3 {
    font-family: var(--ff-serif);
    font-size: 2rem;
    font-weight: 300;
    color: var(--text-base);
    margin-bottom: 0.5rem;
    text-shadow: 0 4px 15px rgba(250, 249, 246, 0.6);
}
.hero-monolith__overlay-text p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-base);
    text-shadow: 0 2px 10px rgba(250, 249, 246, 0.7);
}

/* =========================================
   2. ANATOMY OF A GIFT (HORIZONTAL Scroll)
   ========================================= */
.anatomy {
    position: relative;
    background: #EBE8E3;
}
.anatomy__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
.anatomy__track {
    display: flex;
    height: 100vh;
    width: 300vw; /* 3 panels wide */
}

.anatomy__panel {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10vw;
    position: relative;
}
/* Panel Types */
.anatomy__panel--intro {
    justify-content: flex-start;
    gap: 8vw;
}
.anatomy__panel--detail {
    justify-content: center;
    gap: 5vw;
}
.anatomy__panel--full {
    padding: 0;
}
.anatomy__panel--full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.anatomy__content {
    flex: 0 0 400px;
    z-index: 2;
}
.anatomy__content--overlay {
    position: absolute;
    bottom: 15vh;
    right: 15vw;
    background: transparent;
}
.anatomy__content--overlay .anatomy__eyebrow,
.anatomy__content--overlay .anatomy__title,
.anatomy__content--overlay .anatomy__desc {
    text-shadow: 0 4px 15px rgba(30, 28, 25, 0.8);
}
.anatomy__eyebrow {
    font-family: var(--ff-sans); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-gold); display: block; margin-bottom: 2rem;
}
.anatomy__title {
    font-family: var(--ff-serif); font-size: 4rem; font-weight: 300; font-style: italic; line-height: 1.1; margin-bottom: 2rem;
}
.anatomy__desc {
    font-size: 1.1rem; line-height: 1.6; color: rgba(58, 53, 48, 0.7); font-weight: 300;
}

.anatomy__image-wrap {
    flex: 1;
    max-width: 45vw; /* strict bounding */
    height: 70vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.anatomy__image-wrap img {
    max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(58, 53, 48, 0.15));
}
.anatomy__image-wrap--alt {
    max-width: 800px; height: 80vh;
}
.anatomy__image-wrap--alt img {
    object-fit: cover; filter: none; box-shadow: 0 30px 60px rgba(58, 53, 48, 0.15);
}

/* =========================================
   3. LIFESTYLE EDITORIAL
   ========================================= */
.lifestyle {
    position: relative;
    height: 100vh; /* Fixed height to remove blank gap, GSAP Pin will automatically handle scroll duration */
    overflow: hidden;
}
.lifestyle__layer {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh; /* It will be pinned inside GSAP */
}
.lifestyle__layer img {
    width: 100%; height: 100%; object-fit: cover;
}
.lifestyle__layer--mask {
    /* Initially fully clipped, GSAP will scrub this */
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    z-index: 2;
}

.lifestyle__text-overlay {
    position: absolute;
    bottom: 10vh;
    left: 8vw;
    color: var(--bg-base);
    max-width: 500px;
    z-index: 3;
}
.lifestyle__text-overlay h2 {
    font-family: var(--ff-serif); font-size: 4rem; font-weight: 300; line-height: 1.1; margin-bottom: 1.5rem;
    text-shadow: 0 4px 20px rgba(30, 28, 25, 0.8);
}
.lifestyle__text-overlay p {
    font-size: 1.1rem; letter-spacing: 0.1em;
    text-shadow: 0 4px 15px rgba(30, 28, 25, 0.8);
}
.lifestyle__text-overlay--alt {
    bottom: auto; top: 15vh; left: auto; right: 8vw; text-align: right; color: var(--text-base);
}
.lifestyle__text-overlay--alt h2,
.lifestyle__text-overlay--alt p {
    text-shadow: 0 4px 20px rgba(250, 249, 246, 0.8);
}

/* =========================================
   4. ACQUISITION VAULT
   ========================================= */
.vault {
    padding: 15vh 4vw;
    background: var(--bg-base);
    position: relative;
    z-index: 10;
}
.vault__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8vw;
    max-width: 1600px;
    margin: 0 auto;
    align-items: center;
}
.vault__image {
    width: 100%;
    height: 80vh;
    border-radius: 4px;
    overflow: hidden;
}
.vault__image img {
    width: 100%; height: 100%; object-fit: cover;
}

.vault__info {
    max-width: 500px;
}
.vault__eyebrow {
    font-family: var(--ff-sans); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-gold); display: block; margin-bottom: 2rem;
}
.vault__title {
    font-family: var(--ff-serif); font-size: 4.5rem; font-weight: 300; line-height: 1; margin-bottom: 2rem;
}
.vault__desc {
    font-size: 1.1rem; line-height: 1.6; color: rgba(58, 53, 48, 0.7); margin-bottom: 3rem;
}
.vault__price {
    font-family: var(--ff-serif); font-size: 2.5rem; display: block; margin-bottom: 3rem;
}
.vault__cta-container {
    display: flex; gap: 1rem;
}

/* =========================================
   FOOTER (Premium Dark)
   ========================================= */
.footer { padding: 8rem 4vw 2rem 4vw; background: var(--text-base); color: var(--bg-base); position: relative; z-index: 5; overflow: hidden; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 4rem; padding-bottom: 6rem; border-bottom: 1px solid rgba(250, 249, 246, 0.15); }
.footer__col { display: flex; flex-direction: column; gap: 2rem; }
.footer__col--newsletter { max-width: 400px; }
.footer__label { font-family: var(--ff-sans); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-gold); }
.footer__desc { font-size: 0.95rem; line-height: 1.6; color: rgba(250, 249, 246, 0.7); margin-top: -1rem; }
.footer__links { display: flex; flex-direction: column; gap: 1.2rem; font-family: var(--ff-serif); font-size: 1.5rem; font-style: italic; }
.footer__links a { color: var(--bg-base); position: relative; display: inline-block; width: fit-content; transition: opacity 0.3s ease; text-decoration: none; }
.footer__links a:hover { opacity: 0.6; }
.newsletter form { display: flex; border-bottom: 1px solid var(--accent-gold); padding-bottom: 0.5rem; }
.newsletter input { border: none; background: transparent; font-family: var(--ff-sans); font-size: 0.85rem; flex: 1; outline: none; letter-spacing: 0.1em; color: var(--bg-base); }
.newsletter input::placeholder { color: rgba(250, 249, 246, 0.4); }
.newsletter button { color: var(--accent-gold); font-size: 1.5rem; background: none; border: none; cursor: pointer; transition: transform 0.3s ease; }
.newsletter button:hover { transform: translateX(10px); }
.footer__bottom { display: flex; flex-direction: column; align-items: center; padding-top: 4rem; }
.footer__massive-brand { font-family: var(--ff-serif); font-size: 15vw; font-weight: 300; line-height: 0.8; color: var(--bg-base); text-align: center; width: 100%; margin-bottom: 4rem; white-space: nowrap; }
.footer__legal { display: flex; justify-content: space-between; width: 100%; font-family: var(--ff-sans); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(250, 249, 246, 0.5); flex-wrap: wrap; gap: 2rem; }
.footer__legal-links { display: flex; gap: 2rem; }
.footer__legal-links a { color: inherit; transition: color 0.3s ease; text-decoration: none; }
.footer__legal-links a:hover { color: var(--bg-base); }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .anatomy__track { width: 400vw; }
    .vault__grid { grid-template-columns: 1fr; }
    .vault__image { height: 50vh; }
}
@media (max-width: 768px) {
    .hero-monolith__intro { text-align: center; font-size: 0.6rem; padding: 0 2rem; }
    .anatomy__panel { flex-direction: column; justify-content: center !important; text-align: center; padding: 0 5vw; }
    .anatomy__content { flex: 0 0 auto; order: 2; margin-top: 2rem; }
    .anatomy__image-wrap { order: 1; height: 40vh; }
    .lifestyle__text-overlay { bottom: 5vh; left: 5vw; right: 5vw; text-align: center; }
    .lifestyle__text-overlay--alt { top: 15vh; }
    .lifestyle__text-overlay h2 { font-size: 2.5rem; }
}