/*==========================================================
    RESERVATIONS PAGE
    Kiyomi Ryokan
==========================================================*/


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

:root{

    --reservation-orange:#D57530;
    --reservation-peach:#FFBC92;
    --reservation-paper:#FBF8E0;
    --reservation-gold:#EEE47D;
    --reservation-olive:#9FB768;

    --reservation-charcoal:#534740;
    --reservation-stone:#7C7165;
    --reservation-mist:#F8F5E8;

}


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

.reservation-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:var(--reservation-paper);

    color:#fff;

}

.hero-image{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    filter:

        brightness(.82)

        saturate(.9);

}


/*==========================================================
    OVERLAYS
==========================================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(251,248,224,.18),

            rgba(213,117,48,.28),

            rgba(83,71,64,.52)

        );

}

.light-overlay{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(

            circle at 18% 22%,

            rgba(255,255,255,.32),

            transparent 35%

        ),

        radial-gradient(

            circle at 82% 70%,

            rgba(255,241,200,.22),

            transparent 45%

        );

}


/*==========================================================
    FLOATING DUST
==========================================================*/

.floating-dust{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.floating-dust::before,

.floating-dust::after{

    content:"";

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

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

    filter:blur(1px);

}

.floating-dust::before{

    left:18%;

    top:12%;

    animation:dustOne 14s linear infinite;

}

.floating-dust::after{

    right:22%;

    top:20%;

    animation:dustTwo 18s linear infinite;

}

@keyframes dustOne{

    from{

        transform:translateY(0);

        opacity:.35;

    }

    to{

        transform:

            translateY(120vh)

            translateX(60px);

        opacity:0;

    }

}

@keyframes dustTwo{

    from{

        transform:translateY(0);

        opacity:.4;

    }

    to{

        transform:

            translateY(120vh)

            translateX(-80px);

        opacity:0;

    }

}


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

.reservation-hero .container{

    position:relative;

    z-index:5;

}

.hero-content{

    position:relative;

    z-index:5;

    max-width:760px;

}

.reservation-hero h1{

    margin:1.5rem 0;

    color:#fff;

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

    line-height:.92;

}

.reservation-hero p{

    max-width:640px;

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

    font-size:1.08rem;

}


/*==========================================================
    BUTTONS
==========================================================*/

.reservation-btn{

    margin-top:3rem;

    background:var(--reservation-orange);

    color:#fff;

    border:none;

    transition:.35s ease;

}

.reservation-btn:hover{

    background:var(--reservation-gold);

    color:var(--reservation-charcoal);

    transform:translateY(-4px);

}

.reservation-hero .btn-secondary{

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

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

    backdrop-filter:blur(16px);

    color:#fff;

}

.reservation-hero .btn-secondary:hover{

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

}


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

.reservation-hanko{

    position:absolute;

    top:6%;

    right:3%;

    width:150px;

    height:150px;

    border:8px solid rgba(255,240,200,.95);

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

    color:#fff5d4;

    backdrop-filter:blur(12px);

}


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

.vertical-jp{

    position:absolute;

    writing-mode:vertical-rl;

    text-orientation:upright;

    white-space:nowrap;

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

    pointer-events:none;

    user-select:none;

    z-index:1;

}

.hero-jp{

    top:50%;

    right:2rem;

    transform:translateY(-50%);

    font-size:11rem;

    color:rgba(255,248,220,.26);

}

.intro-jp{

    left:-4rem;

    top:4rem;

    font-size:10rem;

    color:rgba(213,117,48,.16);

}


/*==========================================================
    BOOKING INTRO
==========================================================*/

.booking-intro{

    position:relative;

    overflow:hidden;

    padding:9rem 0;

    background:var(--reservation-paper);

}

.intro-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6rem;

    align-items:center;

}

.intro-content{

    position:relative;

    z-index:2;

}

.intro-content h2{

    margin:1.5rem 0 2rem;

    color:var(--reservation-charcoal);

}

.intro-content p{

    margin-bottom:1.8rem;

    color:#666;

    line-height:1.9;

}

.section-accent{

    width:80px;

    height:3px;

    margin:2rem 0;

    border-radius:999px;

    background:

        linear-gradient(

            90deg,

            var(--reservation-orange),

            var(--reservation-olive)

        );

}

.intro-image{

    overflow:hidden;

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

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

}

.intro-image img{

    width:100%;

    height:720px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}

.intro-image:hover img{

    transform:scale(1.05);

}
/*==========================================================
    BOOKING SECTION
==========================================================*/

.booking-section{

    position:relative;

    padding:9rem 0;

    overflow:hidden;

    background:linear-gradient(

        180deg,

        #fdfcf5,

        #f7f2df

    );

}

.booking-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    right:-180px;

    top:120px;

    background:

        radial-gradient(

            rgba(159,183,104,.12),

            transparent 70%

        );

    filter:blur(35px);

    pointer-events:none;

}



/*==========================================================
    BOOKING LAYOUT
==========================================================*/

.booking-layout{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:4rem;

    margin-top:4rem;

    align-items:start;

}



/*==========================================================
    BOOKING FORM
==========================================================*/

.booking-form{

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

    backdrop-filter:blur(18px);

    border-radius:32px;

    padding:3rem;

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

    position:relative;

    overflow:hidden;

}

.booking-form::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(

            transparent,

            rgba(255,255,255,.4)

        );

}



/*==========================================================
    PAPER TEXTURE
==========================================================*/

.booking-form::after{

    content:"";

    position:absolute;

    inset:0;

    opacity:.04;

    pointer-events:none;

    background-image:

        radial-gradient(

            circle,

            #444 1px,

            transparent 1px

        );

    background-size:22px 22px;

}



/*==========================================================
    FORM GROUP
==========================================================*/

.form-group{

    display:flex;

    flex-direction:column;

    margin-bottom:2rem;

}

.form-row{

    display:grid;

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

    gap:2rem;

}

.form-group label{

    margin-bottom:.8rem;

    font-size:.92rem;

    font-weight:600;

    letter-spacing:.08em;

    color:var(--reservation-stone);

    text-transform:uppercase;

}



/*==========================================================
    INPUTS
==========================================================*/

.form-group input,

.form-group select,

.form-group textarea{

    border:none;

    border-radius:18px;

    background:#fffef8;

    padding:1.2rem 1.4rem;

    font-family:inherit;

    font-size:1rem;

    color:var(--reservation-charcoal);

    transition:.35s ease;

    box-shadow:

        inset 0 0 0 1px rgba(0,0,0,.06);

}

.form-group textarea{

    resize:vertical;

    min-height:180px;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    outline:none;

    background:#fff;

    box-shadow:

        0 0 0 4px rgba(213,117,48,.18);

}



/*==========================================================
    LITTLE STATUS BADGES
==========================================================*/

.form-status{

    display:flex;

    gap:1rem;

    margin-top:2rem;

    flex-wrap:wrap;

}

.status-pill{

    padding:.7rem 1.2rem;

    border-radius:999px;

    background:#eef4dc;

    color:#56723d;

    font-size:.82rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}



/*==========================================================
    SUMMARY
==========================================================*/

.booking-summary{

    position:sticky;

    top:130px;

    background:#ffffff;

    border-radius:30px;

    padding:2.8rem;

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

    overflow:hidden;

}

.booking-summary::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(

            transparent,

            rgba(255,188,146,.08)

        );

}

.summary-tag{

    display:inline-block;

    padding:.45rem .9rem;

    border-radius:999px;

    background:#fff3e8;

    color:var(--reservation-orange);

    font-size:.78rem;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.booking-summary h3{

    margin:1.8rem 0;

    color:var(--reservation-charcoal);

}

.summary-divider{

    height:1px;

    background:rgba(0,0,0,.08);

    margin-bottom:1.5rem;

}

.summary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:1rem 0;

    color:#666;

}

.summary-item strong{

    color:var(--reservation-charcoal);

}

.summary-item.total{

    margin-top:2rem;

    padding-top:2rem;

    border-top:1px dashed rgba(0,0,0,.1);

    font-size:1.15rem;

}

.summary-item.total strong{

    color:var(--reservation-orange);

    font-size:1.5rem;

}

.summary-button{

    width:100%;

    margin-top:2.5rem;

}



/*==========================================================
    FLOATING AVAILABILITY
==========================================================*/

.availability{

    margin-top:2rem;

    padding:1.2rem;

    border-radius:18px;

    background:#eef5de;

    display:flex;

    align-items:center;

    gap:1rem;

}

.availability-dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#79b84d;

    animation:pulseDot 2s infinite;

}

@keyframes pulseDot{

    50%{

        transform:scale(1.4);

        opacity:.5;

    }

}



/*==========================================================
    SOFT GLOW
==========================================================*/

.booking-summary:hover{

    transform:translateY(-6px);

    transition:.4s;

}
/*==========================================================
    EXPERIENCE SECTION
==========================================================*/

.experience-section{

    position:relative;
    padding:9rem 0;
    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #fffdf8,
            #f8f4e8
        );

}

.experience-section::before{

    content:"";

    position:absolute;

    left:-180px;
    bottom:-120px;

    width:520px;
    height:520px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(238,228,125,.16),
            transparent 70%
        );

    filter:blur(45px);

    pointer-events:none;

}

.experience-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.experience-card{

    background:#fff;

    overflow:hidden;

    border-radius:30px;

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

    transition:.45s ease;

    cursor:pointer;

    position:relative;

}

.experience-card:hover{

    transform:translateY(-10px);

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

}

.experience-card img{

    width:100%;
    height:300px;

    object-fit:cover;

    transition:transform .8s ease;

}

.experience-card:hover img{

    transform:scale(1.06);

}

.experience-content{

    padding:2rem;

}

.experience-content h3{

    margin:1rem 0;

    color:var(--reservation-charcoal);

}

.experience-content p{

    color:#666;

    line-height:1.8;

}

.experience-content button{

    margin-top:2rem;

    border:none;

    padding:1rem 1.6rem;

    border-radius:999px;

    background:var(--reservation-orange);

    color:#fff;

    cursor:pointer;

    transition:.35s;

}

.experience-content button:hover{

    background:var(--reservation-olive);

    transform:translateY(-3px);

}



/*==========================================================
    SELECTED EXPERIENCE
==========================================================*/

.experience-card.selected{

    border:2px solid var(--reservation-orange);

    transform:translateY(-6px);

}

.experience-card.selected::after{

    content:"✓ Added";

    position:absolute;

    top:20px;
    right:20px;

    padding:.45rem .9rem;

    border-radius:999px;

    background:var(--reservation-orange);

    color:#fff;

    font-size:.75rem;

    letter-spacing:.08em;

}



/*==========================================================
    JOURNEY
==========================================================*/

.reservation-journey{

    position:relative;

    padding:9rem 0;

    background:
        linear-gradient(
            #f8f4e8,
            #fbf8ef
        );

}

.journey-timeline{

    display:grid;

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

    gap:2rem;

    position:relative;

    margin-top:5rem;

}

.journey-line{

    position:absolute;

    left:8%;
    right:8%;

    top:40px;

    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--reservation-orange),
            var(--reservation-olive)
        );

    opacity:.3;

}

.journey-step{

    position:relative;

    text-align:center;

    z-index:2;

}

.journey-circle{

    width:80px;
    height:80px;

    margin:auto auto 1.5rem;

    border-radius:50%;

    display:flex;

    justify-content:center;
    align-items:center;

    background:var(--reservation-orange);

    color:#fff;

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

    letter-spacing:.1em;

    transition:.4s;

}

.journey-step:hover .journey-circle{

    background:var(--reservation-olive);

    transform:translateY(-8px);

}

.journey-step h3{

    margin-bottom:1rem;

    color:var(--reservation-charcoal);

}

.journey-step p{

    color:#666;

    line-height:1.7;

}



/*==========================================================
    FINAL CTA
==========================================================*/

.reservation-cta{

    position:relative;

    overflow:hidden;

    text-align:center;

    color:#fff;

    padding:10rem 0;

    background:

        linear-gradient(

            rgba(48,40,35,.58),

            rgba(48,40,35,.58)

        ),

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

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}

.reservation-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at 20% 25%,

            rgba(255,255,255,.12),

            transparent 38%

        ),

        radial-gradient(

            circle at 75% 70%,

            rgba(238,228,125,.12),

            transparent 42%

        );

    animation:goldFloat 20s ease-in-out infinite;

}

@keyframes goldFloat{

    50%{

        transform:translateY(-20px);

    }

}

.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:650px;

    margin:0 auto 2.5rem;

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

}

.cta-jp{

    left:50%;

    top:-4rem;

    transform:translateX(-50%);

    font-size:10rem;

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

}



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

@media(max-width:1100px){

    .intro-grid,
    .booking-layout{

        grid-template-columns:1fr;

    }

    .experience-grid{

        grid-template-columns:1fr;

    }

    .journey-timeline{

        grid-template-columns:1fr;

    }

    .journey-line{

        display:none;

    }

    .booking-summary{

        position:relative;

        top:0;

    }

}

@media(max-width:768px){

    .booking-section,
    .experience-section,
    .reservation-journey,
    .reservation-cta{

        padding:6rem 0;

    }

    .form-row{

        grid-template-columns:1fr;

    }

    .experience-card img{

        height:240px;

    }

    .reservation-cta{

        background-attachment:scroll;

    }

}

@media(max-width:480px){

    .reservation-hero h1{

        font-size:3rem;

    }

    .intro-image img{

        height:320px;

    }

    .booking-form{

        padding:2rem;

    }

}