/*==========================================================
    WELLNESS PAGE
    Ryokan Website
==========================================================*/


/*==========================================================
    COLOR PALETTE
==========================================================*/

:root{

    --wellness-charcoal:#2F332E;
    --wellness-stone:#6C665A;
    --wellness-sand:#D7CFBE;
    --wellness-cream:#F7F4EE;

    --wellness-water:#A9C5C9;
    --wellness-cedar:#8B6B4D;

    --wellness-mist:#E6EEF0;
    --wellness-steam:#F9FAF8;

}


/*==========================================================
    HERO
==========================================================*/

.wellness-hero{

    position:relative;
    min-height:100vh;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:#232723;
    color:#fff;

}

.hero-image{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
        brightness(.72)
        saturate(.82);

}

.hero-overlay{

    position:absolute;
    inset:0;

    background:

        linear-gradient(

            rgba(38,55,65,.28),

            rgba(25,28,24,.78)

        );

}

.steam-overlay{

    position:absolute;
    inset:0;

    pointer-events:none;

    background:

        radial-gradient(circle at 20% 25%,
        rgba(255,255,255,.14),
        transparent 36%),

        radial-gradient(circle at 75% 35%,
        rgba(255,255,255,.12),
        transparent 38%),

        radial-gradient(circle at 55% 82%,
        rgba(255,255,255,.12),
        transparent 42%);

    mix-blend-mode:screen;

    animation:steamFloat 18s ease-in-out infinite;

}

@keyframes steamFloat{

    0%{

        transform:translateY(0);

        opacity:.55;

    }

    50%{

        transform:translateY(-24px);

        opacity:.9;

    }

    100%{

        transform:translateY(0);

        opacity:.55;

    }

}


/*==========================================================
    HERO CONTENT
==========================================================*/

.wellness-hero .container{

    position:relative;
    z-index:5;

}

.hero-content{

    position:relative;
    z-index:5;

    max-width:760px;

}

.wellness-hero h1{

    color:#fff;

    margin:1.5rem 0;

    font-size:clamp(4.8rem,8vw,7.5rem);

    line-height:.92;

}

.wellness-hero p{

    max-width:620px;

    color:rgba(255,255,255,.88);

    font-size:1.08rem;

}


/*==========================================================
    BUTTON
==========================================================*/

.wellness-btn{

    margin-top:3rem;

    background:#31494c;

    color:#fff;

    border:none;

    transition:.35s ease;

}

.wellness-btn:hover{

    background:var(--wellness-water);

    color:var(--wellness-charcoal);

    transform:translateY(-4px);

}


/*==========================================================
    HANKO
==========================================================*/

.wellness-hanko{

    position:absolute;

    right:3.5%;
    top:6%;

    width:150px;
    height:150px;

    border:8px solid rgba(230,177,196,.92);

    background:rgba(230,177,196,.08);

    color:#f7d5df;

    backdrop-filter:blur(10px);

}


/*==========================================================
    JAPANESE TYPOGRAPHY
==========================================================*/

.vertical-jp{

    position:absolute;

    writing-mode:vertical-rl;

    text-orientation:upright;

    white-space:nowrap;

    font-family:"Noto Serif JP",serif;

    letter-spacing:.2rem;

    line-height:1.1;

    pointer-events:none;

    user-select:none;

    z-index:1;

}

/* HERO */

.hero-jp{

    top:50%;
    right:2.5rem;

    transform:translateY(-50%);
    opacity:.6;

    font-size:12rem;

    color:rgba(88, 130, 153, 0.756);

}

/* PHILOSOPHY */

.philosophy-jp{

    left:-4rem;
    top:6rem;

    font-size:11rem;

    color:rgba(102, 136, 140, 0.754);
    opacity:0.99rem;

}

/* TREATMENTS */

.treatment-jp{

    left:-4rem;
    top:4rem;

    font-size:10rem;

    color:rgba(48, 78, 96, 0.58);

}

/* QUOTE */

.quote-jp{

    left:50%;
    top:-2rem;

    transform:translateX(-50%);

    font-size:12rem;

    color:rgba(32, 88, 137, 0.398);

}
/*==========================================================
    WELLNESS INTRO
==========================================================*/

.wellness-intro{

    position:relative;

    padding:9rem 0;

    background:rgba(180, 201, 223, 0.328);

    overflow:hidden;

}


/*==========================================================
    STONE TEXTURE
==========================================================*/

.stone-background{

    position:relative;

}

.stone-background::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.035;

    background-image:

        radial-gradient(

            circle,

            var(--wellness-stone) 1px,

            transparent 1px

        );

    background-size:26px 26px;

}


/*==========================================================
    INTRO GRID
==========================================================*/

.wellness-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6rem;

    align-items:center;

}


/*==========================================================
    INTRO CONTENT
==========================================================*/

.wellness-content{

    position:relative;

    z-index:2;

}

.wellness-content .brand-tag{

    color:var(--wellness-cedar);

}

.wellness-content h2{

    margin:1.5rem 0 2rem;

    color:var(--wellness-charcoal);

}

.wellness-content p{

    margin-bottom:1.8rem;

    color:#555;

    line-height:1.9;

}


/* decorative accent */

.section-accent{

    width:80px;

    height:3px;

    margin:2rem 0;

    border-radius:999px;

    background:

        linear-gradient(

            90deg,

            var(--wellness-water),

            var(--wellness-cedar)

        );

}


/*==========================================================
    INTRO IMAGE
==========================================================*/

.wellness-image{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-lg);

}

.wellness-image img{

    width:100%;

    height:720px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}

.wellness-image:hover img{

    transform:scale(1.05);

    filter:brightness(.98);

}


/*==========================================================
    IMAGE GLOW
==========================================================*/

.wellness-image::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(

            transparent,

            rgba(255,255,255,.08)

        );

}


/*==========================================================
    FLOATING LIGHT
==========================================================*/

.wellness-intro::after{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    border-radius:50%;

    right:-120px;

    top:120px;

    background:

        radial-gradient(

            rgba(169,197,201,.16),

            transparent 70%

        );

    filter:blur(30px);

    pointer-events:none;

}


/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1100px){

    .wellness-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .wellness-image{

        order:-1;

    }

}

@media(max-width:768px){

    .wellness-intro{

        padding:6rem 0;

    }

    .wellness-image img{

        height:420px;

    }

}
/*==========================================================
    SIGNATURE RITUALS
==========================================================*/

.signature-rituals{

    position:relative;

    padding:9rem 0;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #faf8f3,
            #f3efe7
        );

}

.signature-rituals::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-140px;

    top:120px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(169,197,201,.12),

            transparent 70%

        );

    filter:blur(40px);

    pointer-events:none;

}


/*==========================================================
    RITUAL GRID
==========================================================*/

.ritual-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2.5rem;

    margin-top:4rem;

}

.ritual-card{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-xl);

    background:#fff;

    box-shadow:var(--shadow-md);

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}

.ritual-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}


/*==========================================================
    RITUAL IMAGE
==========================================================*/

.ritual-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:transform .9s ease;

}

.ritual-card:hover img{

    transform:scale(1.06);

}


/*==========================================================
    RITUAL CONTENT
==========================================================*/

.ritual-content{

    padding:2rem;

}

.ritual-content h3{

    margin:1rem 0;

    color:var(--wellness-charcoal);

}

.ritual-content p{

    color:#666;

    line-height:1.8;

}


/*==========================================================
    ONSEN RITUAL
==========================================================*/

.onsen-ritual{

    position:relative;

    padding:9rem 0;

    background:

        linear-gradient(

            rgba(169,197,201,.08),

            rgba(245,243,238,.98)

        );

}


/*==========================================================
    TIMELINE
==========================================================*/

.ritual-timeline{

    position:relative;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:2rem;

    margin-top:5rem;

}

.timeline-line{

    position:absolute;

    left:10%;

    right:10%;

    top:62px;

    height:2px;

    opacity:.35;

    background:

        linear-gradient(

            90deg,

            var(--wellness-water),

            var(--wellness-cedar)

        );

}


/*==========================================================
    TIMELINE STEP
==========================================================*/

.timeline-step{

    position:relative;

    text-align:center;

    z-index:2;

}

.step-circle{

    width:68px;

    height:68px;

    margin:0 auto 1.3rem;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--wellness-charcoal);

    color:#fff;

    font-family:var(--font-heading);

    letter-spacing:.12em;

    box-shadow:0 18px 35px rgba(47,51,46,.18);

    transition:all .45s ease;

}

.timeline-step:hover .step-circle{

    background:var(--wellness-water);

    color:var(--wellness-charcoal);

    transform:

        translateY(-8px)

        scale(1.08);

}

.step-icon{

    font-size:2rem;

    margin-bottom:1rem;

}

.timeline-step h3{

    margin-bottom:1rem;

    color:var(--wellness-charcoal);

}

.timeline-step p{

    max-width:220px;

    margin:auto;

    font-size:.95rem;

    color:#666;

    line-height:1.7;

}


/*==========================================================
    FEATURED TREATMENTS
==========================================================*/

.treatments-section{

    position:relative;

    padding:9rem 0;

    overflow:hidden;

    background:#fff;

}

.treatments-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:6rem;

    align-items:center;

}


/*==========================================================
    TREATMENT IMAGE
==========================================================*/

.treatment-image{

    overflow:hidden;

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-lg);

}

.treatment-image img{

    width:100%;

    height:760px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}

.treatment-image:hover img{

    transform:scale(1.05);

    filter:brightness(.98);

}


/*==========================================================
    TREATMENT CONTENT
==========================================================*/

.treatment-content{

    position:relative;

    z-index:2;

    max-width:560px;

}

.treatment-content .brand-tag{

    color:var(--wellness-cedar);

}

.treatment-content h2{

    margin:1.5rem 0 2rem;

    color:var(--wellness-charcoal);

}

.treatment-content p{

    color:#666;

    line-height:1.85;

}
/*==========================================================
    TREATMENT LIST
==========================================================*/

.treatment-list{

    margin-top:2.5rem;

}

.treatment-item{

    display:flex;

    align-items:flex-start;

    gap:1.5rem;

    margin-bottom:2.25rem;

}

.treatment-icon{

    width:64px;

    height:64px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(169,197,201,.12);

    color:var(--wellness-charcoal);

    font-size:1.5rem;

    transition:all .35s ease;

}

.treatment-item:hover .treatment-icon{

    background:var(--wellness-water);

    transform:translateY(-4px);

}

.treatment-item h4{

    margin-bottom:.5rem;

    color:var(--wellness-charcoal);

}

.treatment-item p{

    color:#666;

    line-height:1.75;

}



/*==========================================================
    RELAXATION SPACES
==========================================================*/

.relaxation-spaces{

    position:relative;

    overflow:hidden;

    padding:9rem 0;

    background:

        linear-gradient(

            #f7f4ee,

            #efebe3

        );

}

.spaces-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    grid-template-rows:340px 340px;

    gap:2rem;

    margin-top:4rem;

}

.space-card{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-md);

    cursor:pointer;

}

.space-card.large{

    grid-row:span 2;

}

.space-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}

.space-card:hover img{

    transform:scale(1.08);

    filter:brightness(.84);

}

.space-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:2rem;

    background:

        linear-gradient(

            transparent,

            rgba(20,20,20,.72)

        );

}

.space-overlay span{

    color:#fff;

    font-family:var(--font-heading);

    font-size:1.35rem;

    letter-spacing:.08em;

}



/*==========================================================
    WELLNESS QUOTE
==========================================================*/

.wellness-quote{

    position:relative;

    overflow:hidden;

    padding:10rem 0;

    background:

        linear-gradient(

            135deg,

            #faf8f3,

            #ece8df

        );

}

.quote-content{

    position:relative;

    max-width:900px;

    margin:auto;

    text-align:center;

}

.quote-content blockquote{

    position:relative;

    z-index:2;

    font-family:var(--font-heading);

    font-size:clamp(2.8rem,4vw,4rem);

    line-height:1.3;

    font-style:italic;

    color:var(--wellness-charcoal);

}

.quote-content span{

    display:block;

    margin-top:2rem;

    color:var(--wellness-cedar);

    letter-spacing:.18em;

    text-transform:uppercase;

    font-size:.85rem;

}

.wellness-quote::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:1px solid rgba(169,197,201,.15);

    animation:ripple 8s linear infinite;

}

.wellness-quote::after{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:1px solid rgba(169,197,201,.12);

    animation:ripple 8s linear infinite 2s;

}

@keyframes ripple{

    0%{

        transform:translate(-50%,-50%) scale(.75);

        opacity:.45;

    }

    100%{

        transform:translate(-50%,-50%) scale(1.45);

        opacity:0;

    }

}



/*==========================================================
    WELLNESS CTA
==========================================================*/

.wellness-cta{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:10rem 0;

    color:#fff;

    background:

        linear-gradient(

            rgba(38,40,35,.72),

            rgba(38,40,35,.72)

        ),

        url("../images/image55.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}

.cta-content{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:auto;

}

.cta-content h2{

    color:#fff;

    margin:1.5rem 0 2rem;

}

.cta-content p{

    max-width:640px;

    margin:0 auto 2.5rem;

    color:rgba(255,255,255,.86);

}

.wellness-cta .hero-buttons{

    display:flex;

    justify-content:center;

    gap:1.5rem;

    flex-wrap:wrap;

}

.wellness-cta .btn-secondary{

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.24);

    color:#fff;

    backdrop-filter:blur(12px);

}

.wellness-cta .btn-secondary:hover{

    background:rgba(255,255,255,.22);

}

.wellness-cta::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(circle at 20% 25%,

        rgba(255,255,255,.10),

        transparent 35%),

        radial-gradient(circle at 80% 75%,

        rgba(169,197,201,.14),

        transparent 45%);

    animation:steamFloat 18s ease-in-out infinite;

}



/*==========================================================
    FOOTER
==========================================================*/

.site-footer{

    background:#2b2e28;

    color:rgba(255,255,255,.82);

}

.site-footer h3,

.site-footer h4{

    color:#fff;

}

.site-footer a{

    color:rgba(255,255,255,.72);

    transition:.3s ease;

}

.site-footer a:hover{

    color:var(--wellness-water);

    padding-left:.35rem;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

}



/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1100px){

    .ritual-grid{

        grid-template-columns:1fr;

    }

    .ritual-timeline{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .timeline-line{

        display:none;

    }

    .treatments-grid{

        grid-template-columns:1fr;

    }

    .spaces-grid{

        grid-template-columns:1fr;

        grid-template-rows:auto;

    }

    .space-card.large{

        grid-row:auto;

    }

    .space-card{

        height:340px;

    }

}

@media(max-width:768px){

    .signature-rituals,

    .onsen-ritual,

    .treatments-section,

    .relaxation-spaces,

    .wellness-quote,

    .wellness-cta{

        padding:6rem 0;

    }

    .ritual-card img{

        height:260px;

    }

    .treatment-image img{

        height:420px;

    }

    .space-card{

        height:260px;

    }

    .quote-content blockquote{

        font-size:2.2rem;

    }

    .wellness-hanko{

        display:none;

    }

    .wellness-cta{

        background-attachment:scroll;

    }

    .wellness-cta .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .wellness-btn,

    .wellness-cta .btn-secondary{

        width:100%;

        max-width:320px;

    }

}

@media(max-width:480px){

    .wellness-hero h1{

        font-size:3rem;

    }

    .wellness-image img,

    .treatment-image img{

        height:300px;

    }

    .ritual-card img,

    .space-card{

        height:220px;

    }

    .quote-content blockquote{

        font-size:1.85rem;

    }

}