/* bada.casa - Mid-Century Mediterranean House */

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

:root{
    --stucco:#FAF4ED;
    --terracotta:#F5E6D3;
    --night:#2C1810;
    --clay:#C4956A;
    --sienna:#A0522D;
    --teal:#2A6B5E;
    --fig:#8B6F47;
    --gold:#E8B86D;
}

html{scroll-behavior:smooth}

body{
    background:var(--stucco);
    color:var(--night);
    font-family:'Libre Franklin',sans-serif;
    font-weight:300;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.75;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Terrazzo grain overlay */
body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:9999;
    pointer-events:none;
    background:
        radial-gradient(circle at 20% 30%,var(--clay) 1px,transparent 1px),
        radial-gradient(circle at 60% 15%,var(--fig) 1.5px,transparent 1.5px),
        radial-gradient(circle at 80% 70%,var(--teal) 1px,transparent 1px),
        radial-gradient(circle at 35% 80%,var(--clay) 2px,transparent 2px),
        radial-gradient(circle at 10% 55%,var(--fig) 1px,transparent 1px),
        radial-gradient(circle at 90% 40%,var(--teal) 1.5px,transparent 1.5px),
        radial-gradient(circle at 50% 50%,var(--clay) 1px,transparent 1px);
    background-size:200px 200px;
    opacity:0.03;
}

/* Architectural columns */
.column{
    position:fixed;
    top:0;bottom:0;
    width:1px;
    background:var(--clay);
    z-index:5;
    pointer-events:none;
}

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

/* Room base */
.room{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(60px,10vh,120px) clamp(24px,6vw,80px);
    position:relative;
    overflow:hidden;
}

.room-content{
    max-width:680px;
    width:100%;
    position:relative;
    z-index:2;
}

.room-center{
    text-align:center;
}

/* Slide animations */
.slide-left{
    opacity:0;
    transform:translateX(-40px);
    transition:opacity 600ms cubic-bezier(0.25,0.1,0.25,1),transform 600ms cubic-bezier(0.25,0.1,0.25,1);
}

.slide-right{
    opacity:0;
    transform:translateX(40px);
    transition:opacity 600ms cubic-bezier(0.25,0.1,0.25,1),transform 600ms cubic-bezier(0.25,0.1,0.25,1);
}

.slide-left.revealed,.slide-right.revealed{
    opacity:1;
    transform:translateX(0);
}

/* Fountain SVG */
.fountain-svg{
    position:absolute;
    width:clamp(200px,30vw,300px);
    height:auto;
    opacity:0.4;
    z-index:0;
}

.fountain-small{
    opacity:0.15;
    width:clamp(120px,18vw,180px);
}

.fountain-ring,.fountain-jet{
    stroke-dasharray:800;
    stroke-dashoffset:0;
    animation:fountainFlow 12s linear infinite;
}

@keyframes fountainFlow{
    from{stroke-dashoffset:0}
    to{stroke-dashoffset:-800}
}

/* Hero */
.hero-title{
    font-family:'Bodoni Moda',serif;
    font-weight:400;
    font-size:clamp(2.5rem,6vw,6rem);
    letter-spacing:0.03em;
    line-height:1.1;
    color:var(--night);
    text-align:center;
    position:relative;
    z-index:2;
}

.hero-subtitle{
    font-family:'DM Serif Text',serif;
    font-style:italic;
    font-size:clamp(1.1rem,1.8vw,1.5rem);
    color:var(--fig);
    text-align:center;
    margin-top:16px;
    position:relative;
    z-index:2;
    opacity:0;
    animation:fadeIn 1200ms ease 400ms forwards;
}

@keyframes fadeIn{
    to{opacity:1}
}

/* Corridor */
.corridor{
    height:48px;
    background:var(--terracotta);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.corridor::before{
    content:'';
    position:absolute;
    left:20%;right:20%;
    height:0.5px;
    background:var(--fig);
}

.corridor-diamond{
    width:8px;height:8px;
    background:var(--gold);
    transform:rotate(45deg);
    position:relative;
    z-index:1;
}

/* Section heading */
.section-heading{
    font-family:'Bodoni Moda',serif;
    font-weight:700;
    font-size:clamp(1.8rem,3vw,3rem);
    letter-spacing:0.03em;
    line-height:1.1;
    color:var(--night);
    margin-bottom:24px;
}

/* Body text */
.body-text{
    font-family:'Libre Franklin',sans-serif;
    font-weight:300;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.75;
    color:var(--night);
    margin-bottom:1rem;
}

/* Living room layout */
.room-living .room-content{
    display:flex;
    gap:clamp(24px,4vw,60px);
    align-items:flex-start;
    max-width:900px;
}

.living-text{
    flex:0 0 55%;
}

.fig-leaf-block{
    flex:1;
    min-height:300px;
    background:var(--teal);
    opacity:0.08;
    clip-path:polygon(50% 0%,80% 10%,100% 35%,95% 65%,70% 90%,50% 100%,30% 90%,5% 65%,0% 35%,20% 10%);
    transform:translateY(-80px);
}

/* Tile border */
.tile-border{
    position:absolute;
    top:0;left:0;right:0;
    height:12px;
    background:repeating-linear-gradient(
        45deg,
        var(--clay),
        var(--clay) 4px,
        var(--stucco) 4px,
        var(--stucco) 8px
    );
}

.tile-border-bottom{
    top:auto;
    bottom:0;
}

/* Furniture grid */
.furniture-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    margin-top:16px;
}

.furniture-cell{
    border:1px solid var(--clay);
    padding:32px;
    box-shadow:24px 24px 0px var(--terracotta),26px 26px 0px var(--clay);
}

.cell-title{
    font-family:'Bodoni Moda',serif;
    font-weight:700;
    font-size:clamp(1.2rem,1.8vw,1.6rem);
    color:var(--night);
    margin-bottom:8px;
}

/* Kitchen */
.room-kitchen{
    background:var(--terracotta);
}

.pull-quote{
    font-family:'DM Serif Text',serif;
    font-style:italic;
    font-size:clamp(1.3rem,2vw,1.8rem);
    color:var(--night);
    max-width:50ch;
    margin:0 auto;
    line-height:1.5;
}

.diamond-marker{
    display:block;
    width:12px;height:12px;
    background:var(--gold);
    transform:rotate(45deg);
    margin:24px auto 0;
}

/* Rooftop */
.room-rooftop{
    position:relative;
}

.rooftop-name{
    font-family:'Bodoni Moda',serif;
    font-style:italic;
    font-weight:400;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--night);
    text-align:center;
    position:relative;
    z-index:2;
}

.rooftop-rule{
    border:none;
    height:0.5px;
    width:40%;
    background:var(--clay);
    margin:16px auto;
    position:relative;
    z-index:2;
}

.rooftop-footer{
    font-family:'Libre Franklin',sans-serif;
    font-weight:300;
    font-size:0.85rem;
    color:var(--fig);
    text-align:center;
    position:relative;
    z-index:2;
}

/* Responsive */
@media(max-width:768px){
    .column{display:none}
    .furniture-grid{
        grid-template-columns:1fr;
        gap:24px;
    }
    .furniture-cell{
        box-shadow:12px 12px 0px var(--terracotta),13px 13px 0px var(--clay);
    }
    .room-living .room-content{
        flex-direction:column;
    }
    .fig-leaf-block{
        min-height:150px;
        transform:translateY(0);
    }
}