/* miris.bar -- Art Deco olfactory speakeasy */

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

:root{
    --onyx:#0D0D0F;
    --plum:#1A1222;
    --gold:#C9A84C;
    --rose:#8B3A4A;
    --vetiver:#3A5F4B;
    --champagne:#E8DCC8;
    --pewter:#7A7068;
    --amber:#D4891C;
}

html{
    scroll-snap-type:y mandatory;
    scroll-behavior:smooth;
}

body{
    background:var(--onyx);
    color:var(--champagne);
    font-family:'Lora',Georgia,serif;
    font-weight:400;
    font-size:clamp(1rem,1.3vw,1.15rem);
    line-height:1.85;
    letter-spacing:0.02em;
    overflow-x:hidden;
}

/* Diamond navigation */
.diamond-nav{
    position:fixed;
    right:2rem;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:1.2rem;
    z-index:100;
}

.diamond{
    width:12px;
    height:12px;
    background:transparent;
    border:1px solid var(--gold);
    transform:rotate(45deg);
    cursor:pointer;
    transition:background 0.4s ease,border-color 0.4s ease;
    display:block;
    text-decoration:none;
}

.diamond.active{
    background:var(--gold);
    border-color:var(--gold);
}

.diamond:hover{
    background:var(--amber);
    border-color:var(--amber);
}

/* Scent trails */
.scent-trails{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    overflow:hidden;
}

.scent-trail{
    position:absolute;
    bottom:-100px;
    stroke:var(--gold);
    stroke-width:1;
    fill:none;
    opacity:0.12;
}

/* Rooms */
.room{
    min-height:100svh;
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    padding:2rem;
}

/* Room 1: Entrance */
.entrance-pillars{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.pillar{
    position:absolute;
    top:0;
    width:1px;
    height:0;
    background:linear-gradient(to bottom,var(--gold),transparent);
    opacity:0.6;
    transition:height 1.2s cubic-bezier(0.16,1,0.3,1);
}

.pillar-left{left:15%}
.pillar-right{right:15%}

.room.in-view .pillar{
    height:70%;
}

.entrance-content{
    text-align:center;
    z-index:2;
}

.hero-title{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:0.15em;
    color:var(--gold);
    text-transform:uppercase;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 1s ease 0.5s,transform 1s ease 0.5s;
}

.room.in-view .hero-title{
    opacity:1;
    transform:translateY(0);
}

.hero-tagline{
    font-family:'Lora',serif;
    font-style:italic;
    font-size:clamp(1rem,1.8vw,1.3rem);
    color:var(--champagne);
    opacity:0;
    transition:opacity 1s ease 0.8s;
    margin-top:1.5rem;
}

.room.in-view .hero-tagline{
    opacity:0.7;
}

/* Art Deco Gates */
.deco-gate{
    width:100%;
    padding:0;
    overflow:hidden;
    background:var(--onyx);
}

.gate-svg{
    display:block;
    width:100%;
    height:auto;
    max-height:200px;
}

.gate-ray{
    stroke:var(--gold);
    stroke-width:1;
    opacity:0.5;
    stroke-dasharray:400;
    stroke-dashoffset:400;
    transition:stroke-dashoffset 1.5s cubic-bezier(0.16,1,0.3,1);
}

.gate-arc{
    fill:none;
    stroke:var(--gold);
    stroke-width:1;
    opacity:0.4;
    stroke-dasharray:600;
    stroke-dashoffset:600;
    transition:stroke-dashoffset 1.8s cubic-bezier(0.16,1,0.3,1);
}

.deco-gate.in-view .gate-ray{stroke-dashoffset:0}
.deco-gate.in-view .gate-arc{stroke-dashoffset:0}

/* Room titles */
.room-title{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(1.5rem,3vw,2.5rem);
    letter-spacing:0.12em;
    color:var(--gold);
    text-transform:uppercase;
    text-align:center;
    margin-bottom:3rem;
    opacity:0;
    transform:translateY(15px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

[data-reveal].revealed{
    opacity:1 !important;
    transform:translateY(0) !important;
}

/* Room 2: Accord Cabinet */
.accord-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(1rem,2vw,1.5rem);
    max-width:900px;
    width:100%;
}

.accord-card{
    aspect-ratio:3/5;
    background:var(--plum);
    border:1px solid rgba(201,168,76,0.3);
    display:flex;
    flex-direction:column;
    align-items:center;
    overflow:hidden;
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),
               transform 0.6s cubic-bezier(0.16,1,0.3,1),
               border-color 0.4s ease;
}

.accord-card.revealed{
    opacity:1;
    transform:translateY(0);
}

.accord-card:hover{
    border-color:var(--gold);
}

.card-pattern{
    width:100%;
    height:30%;
    opacity:0.4;
    transition:transform 0.6s ease;
}

.accord-card:hover .card-pattern{
    transform:scale(1.05) rotate(2deg);
}

.pattern-chevron{
    background:repeating-linear-gradient(
        135deg,
        transparent,transparent 8px,
        var(--gold) 8px,var(--gold) 9px
    ),repeating-linear-gradient(
        45deg,
        transparent,transparent 8px,
        var(--gold) 8px,var(--gold) 9px
    );
}

.pattern-pyramid{
    background:repeating-linear-gradient(
        to top,
        transparent,transparent 12px,
        var(--gold) 12px,var(--gold) 13px
    ),linear-gradient(
        120deg,
        transparent 45%,var(--gold) 45%,var(--gold) 46%,transparent 46%
    );
}

.pattern-diamond{
    background:
        conic-gradient(from 45deg at 50% 50%,
            transparent 0deg,transparent 89deg,
            var(--gold) 89deg,var(--gold) 91deg,
            transparent 91deg,transparent 179deg,
            var(--gold) 179deg,var(--gold) 181deg,
            transparent 181deg,transparent 269deg,
            var(--gold) 269deg,var(--gold) 271deg,
            transparent 271deg,transparent 359deg,
            var(--gold) 359deg,var(--gold) 361deg
        );
    background-size:24px 24px;
}

.pattern-hex{
    background:
        repeating-linear-gradient(60deg,transparent,transparent 10px,var(--gold) 10px,var(--gold) 11px),
        repeating-linear-gradient(-60deg,transparent,transparent 10px,var(--gold) 10px,var(--gold) 11px),
        repeating-linear-gradient(0deg,transparent,transparent 10px,var(--gold) 10px,var(--gold) 11px);
}

.pattern-fan{
    background:
        radial-gradient(circle at 50% 100%,transparent 40%,var(--gold) 40%,var(--gold) 41%,transparent 41%),
        radial-gradient(circle at 50% 100%,transparent 55%,var(--gold) 55%,var(--gold) 56%,transparent 56%),
        radial-gradient(circle at 50% 100%,transparent 70%,var(--gold) 70%,var(--gold) 71%,transparent 71%);
}

.pattern-lines{
    background:repeating-linear-gradient(
        -45deg,
        transparent,transparent 6px,
        var(--gold) 6px,var(--gold) 7px
    );
}

.card-word{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(1.1rem,2vw,1.6rem);
    letter-spacing:0.12em;
    color:var(--gold);
    text-transform:uppercase;
    margin-top:auto;
    padding:1rem 0 0.5rem;
}

.card-desc{
    font-size:0.85rem;
    color:var(--pewter);
    text-align:center;
    padding:0 1rem 1.5rem;
    line-height:1.5;
}

/* Room 3: Distillation */
.room-distillation{
    padding:15vh 2rem;
}

.distillation-column{
    max-width:38ch;
    position:relative;
    z-index:2;
}

.distillation-border-left,
.distillation-border-right{
    position:absolute;
    top:10%;
    bottom:10%;
    width:20px;
    opacity:0.08;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent,transparent 14px,
            var(--gold) 14px,var(--gold) 15px,
            transparent 15px,transparent 20px,
            var(--gold) 20px,var(--gold) 21px,
            transparent 21px,transparent 28px
        );
}

.distillation-border-left{left:10%}
.distillation-border-right{right:10%}

.distill-text{
    margin-bottom:2.5em;
    opacity:0;
    transform:translateY(15px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.distill-text.revealed{
    opacity:1;
    transform:translateY(0);
}

.has-dropcap::first-letter{
    font-family:'Poiret One',sans-serif;
    font-size:4em;
    float:left;
    line-height:0.8;
    padding-right:0.1em;
    padding-top:0.05em;
    color:var(--gold);
}

.distill-divider{
    width:4ch;
    height:0.5px;
    background:var(--gold);
    opacity:0.3;
    margin:0 auto 2.5em;
}

/* Room 4: Flacon Gallery */
.room-gallery{
    padding:8vh 2rem;
    min-height:auto;
    scroll-snap-align:start;
}

.flacon-panels{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
    width:100%;
    max-width:1000px;
}

.flacon-panel{
    width:80vw;
    max-width:900px;
    min-height:50vh;
    padding:clamp(2rem,4vw,4rem);
    position:relative;
    display:flex;
    align-items:center;
    gap:2rem;
    opacity:0;
    transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.flacon-panel[data-direction="left"]{transform:translateX(-40px)}
.flacon-panel[data-direction="right"]{transform:translateX(40px)}

.flacon-panel.revealed{
    opacity:1;
    transform:translateX(0);
}

.panel-1{
    clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
    background:rgba(139,58,74,0.12);
    margin-bottom:-8vh;
    z-index:3;
}

.panel-2{
    clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);
    background:rgba(58,95,75,0.12);
    margin-bottom:-8vh;
    z-index:2;
}

.panel-3{
    clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);
    background:rgba(212,137,28,0.10);
    z-index:1;
}

.flacon-silhouette{
    width:80px;
    flex-shrink:0;
    color:currentColor;
    opacity:0.06;
}

.panel-content{
    flex:1;
}

.panel-title{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(1.3rem,2.5vw,2rem);
    letter-spacing:0.12em;
    color:var(--gold);
    text-transform:uppercase;
    margin-bottom:1rem;
}

.panel-text{
    color:var(--champagne);
    max-width:50ch;
}

/* Room 5: Finale */
.room-finale{
    padding:25vh 2rem;
}

.finale-frame{
    position:relative;
    border:1px solid rgba(201,168,76,0.3);
    padding:4rem 3rem;
    text-align:center;
}

.frame-diamond{
    position:absolute;
    width:8px;
    height:8px;
    background:var(--gold);
    transform:rotate(45deg);
}

.frame-tl{top:-4px;left:-4px}
.frame-tr{top:-4px;right:-4px}
.frame-bl{bottom:-4px;left:-4px}
.frame-br{bottom:-4px;right:-4px}

.finale-domain{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(1.5rem,3vw,2.5rem);
    letter-spacing:0.12em;
    color:var(--gold);
    text-transform:uppercase;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 1s ease,transform 1s ease;
}

.finale-content.revealed .finale-domain{
    opacity:1;
    transform:translateY(0);
}

.finale-meta{
    font-family:'Space Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--pewter);
    margin-top:1.5rem;
    opacity:0;
    transition:opacity 1s ease 0.4s;
}

.finale-content.revealed .finale-meta{
    opacity:1;
}

/* Responsive */
@media(max-width:768px){
    .accord-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .accord-card{
        aspect-ratio:2/3;
    }
    .diamond-nav{
        right:1rem;
        gap:0.8rem;
    }
    .diamond{
        width:10px;
        height:10px;
    }
    .flacon-panel{
        width:95vw;
        clip-path:none !important;
        margin-bottom:2rem;
    }
    .distillation-border-left,
    .distillation-border-right{
        display:none;
    }
    .pillar-left{left:5%}
    .pillar-right{right:5%}
}

@media(max-width:480px){
    .accord-grid{
        grid-template-columns:1fr;
    }
    .accord-card{
        aspect-ratio:auto;
        min-height:200px;
    }
}

@media(prefers-reduced-motion:reduce){
    html{scroll-snap-type:none}
    .hero-title,.hero-tagline,.room-title,.accord-card,.distill-text,
    .flacon-panel,.finale-domain,.finale-meta,.pillar{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
    .gate-ray,.gate-arc{
        stroke-dashoffset:0 !important;
        transition:none !important;
    }
    .scent-trail{display:none}
}