/*==========================================================
    CONTACT PAGE
    Kiyomi Ryokan
==========================================================*/


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

:root{

    --contact-pink:#C49796;
    --contact-blush:#D2C5C2;
    --contact-stone:#8C7A77;
    --contact-charcoal:#3A3434;
    --contact-paper:#F8F6F5;

    --contact-mist:#F4EFEE;
    --contact-light:#E9DDD9;

}


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

.contact-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:var(--contact-pink);

    color:#fff;

}

.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    filter:

        brightness(.72)

        saturate(.82);

}


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

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(196,151,150,.45),

            rgba(58,52,52,.72)

        );

}


/*==========================================================
    STEAM
==========================================================*/

.steam-overlay{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(circle at 15% 25%,
        rgba(255, 185, 185, 0.16),
        transparent 34%),

        radial-gradient(circle at 78% 32%,
        rgba(210, 117, 150, 0.322),
        transparent 38%),

        radial-gradient(circle at 52% 82%,
        rgba(86, 10, 39, 0.325),
        transparent 40%);

    mix-blend-mode:screen;

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

}

@keyframes contactSteam{

    0%{

        transform:translateY(0);

        opacity:.5;

    }

    50%{

        transform:translateY(-30px);

        opacity:.95;

    }

    100%{

        transform:translateY(0);

        opacity:.5;

    }

}


/*==========================================================
    PETALS
==========================================================*/

.petal-overlay{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.petal-overlay::before,

.petal-overlay::after{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50% 50% 45% 45%;

    background:rgba(255,235,238,.8);

    filter:blur(.2px);

}

.petal-overlay::before{

    left:12%;

    top:-5%;

    animation:petalOne 14s linear infinite;

}

.petal-overlay::after{

    right:20%;

    top:-8%;

    animation:petalTwo 18s linear infinite;

}

@keyframes petalOne{

    from{

        transform:translateY(0) rotate(0deg);

    }

    to{

        transform:

            translateY(120vh)

            translateX(120px)

            rotate(620deg);

    }

}

@keyframes petalTwo{

    from{

        transform:translateY(0) rotate(0deg);

    }

    to{

        transform:

            translateY(120vh)

            translateX(-140px)

            rotate(-640deg);

    }

}


/*==========================================================
    AMBIENT LIGHT
==========================================================*/

.ambient-light{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(

            circle at 30% 25%,

            rgba(255,243,224,.22),

            transparent 35%

        ),

        radial-gradient(

            circle at 78% 65%,

            rgba(255,214,214,.18),

            transparent 40%

        );

    animation:ambientGlow 8s ease-in-out infinite alternate;

}

@keyframes ambientGlow{

    from{

        opacity:.5;

    }

    to{

        opacity:1;

    }

}


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

.contact-hero .container{

    position:relative;

    z-index:5;

}

.hero-content{

    max-width:760px;

    position:relative;

    z-index:5;

}

.contact-hero h1{

    margin:1.5rem 0;

    color:#fff;

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

    line-height:.92;

}

.contact-hero p{

    max-width:620px;

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

    font-size:1.05rem;

}


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

.contact-btn{

    margin-top:3rem;

    background:var(--contact-pink);

    color:#fff;

    border:none;

    transition:.35s ease;

}

.contact-btn:hover{

    transform:translateY(-4px);

    background:#d3abaa;

}

.contact-hero .btn-secondary{

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

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

    backdrop-filter:blur(14px);

    color:#fff;

}

.contact-hero .btn-secondary:hover{

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

}


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

.contact-hanko{

    position:absolute;

    top:6%;

    right:3%;

    width:150px;

    height:150px;

    border:8px solid rgba(255,226,229,.92);

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

    color:#ffe6e8;

    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{

    right:2rem;

    top:50%;

    transform:translateY(-50%);

    font-size:12rem;

    color:rgba(96, 1, 38, 0.712);

    letter-spacing:.2rem;

}


/*==========================================================
    WELCOME LETTER
==========================================================*/

.welcome-letter{

    position:relative;

    padding:9rem 0;

    overflow:hidden;

    background:var(--contact-blush);

}

.letter-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6rem;

    align-items:center;

}

.letter-content{

    position:relative;

    z-index:2;

}

.letter-jp{

    left:-4rem;

    top:4rem;

    font-size:11rem;

    color:rgba(120, 52, 76, 0.609);

}

.section-accent{

    width:80px;

    height:3px;

    margin:2rem 0;

    border-radius:999px;

    background:linear-gradient(

        90deg,

        var(--contact-pink),

        var(--contact-stone)

    );

}
/*==========================================================
    WELCOME LETTER
==========================================================*/

.letter-content h2{

    margin:1.5rem 0 2rem;

    color:var(--contact-charcoal);

}

.letter-content p{

    margin-bottom:1.8rem;

    color:#555;

    line-height:1.9;

}

.letter-image{

    overflow:hidden;

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

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

}

.letter-image img{

    width:100%;

    height:720px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}

.letter-image:hover img{

    transform:scale(1.05);

    filter:brightness(.98);

}



/*==========================================================
    CONCIERGE
==========================================================*/

.concierge-section{

    position:relative;

    padding:9rem 0;

    background:

        linear-gradient(

            180deg,

            #f8f5f4,

            #efe8e6

        );

}

.concierge-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}



/*==========================================================
    INFO CARD
==========================================================*/

.info-card{

    position:relative;

    overflow:hidden;

    padding:2.8rem 2rem;

    text-align:center;

    border-radius:26px;

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

    backdrop-filter:blur(18px);

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

    transition:

        transform .4s ease,

        box-shadow .4s ease;

}

.info-card:hover{

    transform:translateY(-10px);

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

}

.info-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            transparent,

            rgba(196,151,150,.06)

        );

    pointer-events:none;

}

.info-icon{

    width:74px;

    height:74px;

    margin:0 auto 1.5rem;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(196,151,150,.12);

    font-size:1.8rem;

    transition:.35s ease;

}

.info-card:hover .info-icon{

    background:var(--contact-pink);

    transform:translateY(-5px);

}

.info-card h3{

    margin-bottom:1rem;

    color:var(--contact-charcoal);

}

.info-card p{

    color:#666;

    line-height:1.8;

}



/*==========================================================
    ARRIVAL GUIDE
==========================================================*/

.arrival-guide{

    position:relative;

    overflow:hidden;

    padding:9rem 0;

    background:var(--contact-paper);

}

.arrival-guide::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    left:-140px;

    top:100px;

    background:

        radial-gradient(

            rgba(196,151,150,.14),

            transparent 70%

        );

    filter:blur(35px);

}

.arrival-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6rem;

    align-items:center;

}

.arrival-content{

    position:relative;

}

.arrival-jp{

    left:-4rem;

    top:4rem;

    font-size:10rem;

    color:rgba(120, 52, 76, 0.609);

}

.arrival-content h2{

    margin:1.5rem 0 2rem;

    color:var(--contact-charcoal);

}

.arrival-content p{

    margin-bottom:1.8rem;

    color:#666;

    line-height:1.9;

}

.arrival-map{

    overflow:hidden;

    border-radius:28px;

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

}

.arrival-map img{

    width:100%;

    height:650px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}

.arrival-map:hover img{

    transform:scale(1.05);

}



/*==========================================================
    CONTACT FORM
==========================================================*/

.contact-form-section{

    position:relative;

    overflow:hidden;

    padding:9rem 0;

    background:

        linear-gradient(

            180deg,

            #f8f6f5,

            #efe8e6

        );

}

.form-layout{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:5rem;

    margin-top:4rem;

}



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

.contact-form{

    padding:3rem;

    border-radius:28px;

    background:#fff;

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

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:1.5rem;

    margin-bottom:1.5rem;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:1.2rem 1.4rem;

    border:none;

    border-radius:18px;

    background:#faf8f7;

    color:var(--contact-charcoal);

    font-family:inherit;

    font-size:1rem;

    transition:.35s ease;

}

.contact-form textarea{

    resize:vertical;

    margin:1.5rem 0 2rem;

    min-height:220px;

}

.contact-form input:focus,

.contact-form textarea:focus{

    outline:none;

    background:#fff;

    box-shadow:

        0 0 0 3px rgba(196,151,150,.18);

}

.contact-form button{

    width:100%;

}



/*==========================================================
    GUESTBOOK CARD
==========================================================*/

.guestbook-card{

    position:relative;

    overflow:hidden;

    padding:3rem;

    border-radius:28px;

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

    backdrop-filter:blur(16px);

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

}

.guestbook-card h3{

    margin:1.5rem 0;

    color:var(--contact-charcoal);

}

.guestbook-card p{

    color:#666;

    line-height:1.9;

}

.guestbook-card img{

    width:100%;

    margin-top:2.5rem;

    border-radius:20px;

    height:300px;

    object-fit:cover;

    transition:.8s ease;

}

.guestbook-card:hover img{

    transform:scale(1.04);

}
/*==========================================================
    CONTACT QUOTE
==========================================================*/

.contact-quote{

    position:relative;

    overflow:hidden;

    padding:10rem 0;

    background:

        linear-gradient(

            135deg,

            #faf7f6,

            #eee6e4

        );

}

.quote-content{

    position:relative;

    max-width:900px;

    margin:auto;

    text-align:center;

}

.quote-jp{

    left:50%;

    top:-2rem;

    transform:translateX(-50%);

    font-size:12rem;

    color:rgba(120, 52, 76, 0.609);

}

.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(--contact-charcoal);

}

.quote-content span{

    display:block;

    margin-top:2rem;

    color:var(--contact-pink);

    letter-spacing:.18em;

    text-transform:uppercase;

    font-size:.85rem;

}

.contact-quote::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:50%;

    top:50%;

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

    border-radius:50%;

    border:1px solid rgba(196,151,150,.14);

    animation:contactRipple 8s linear infinite;

}

.contact-quote::after{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    left:50%;

    top:50%;

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

    border-radius:50%;

    border:1px solid rgba(196,151,150,.12);

    animation:contactRipple 8s linear infinite 2s;

}

@keyframes contactRipple{

    0%{

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

        opacity:.45;

    }

    100%{

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

        opacity:0;

    }

}



/*==========================================================
    GOODBYE
==========================================================*/

.goodbye-section{

    position:relative;

    padding:10rem 0;

    background:

        linear-gradient(

            180deg,

            #f8f6f4,

            #ece5e3

        );

}

.goodbye-card{

    position:relative;

    overflow:hidden;

    max-width:900px;

    margin:auto;

    padding:5rem;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

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

}

.page-number{

    position:absolute;

    top:2rem;

    right:2.5rem;

    font-size:.8rem;

    letter-spacing:.2em;

    text-transform:uppercase;

    color:rgba(58,52,52,.45);

}

.goodbye-jp{

    position:absolute;

    right:2.5rem;

    top:50%;

    transform:translateY(-50%);

    font-size:10rem;

    color:rgba(120, 52, 76, 0.609);

}

.goodbye-card h2{

    margin:2rem 0;

    color:var(--contact-charcoal);

}

.goodbye-card p{

    color:#666;

    line-height:1.95;

    margin-bottom:1.8rem;

}

.signature{

    margin-top:3rem;

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

    font-size:1.4rem;

    color:var(--contact-pink);

}

.closing-line{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:1.5rem;

    margin-top:4rem;

}

.closing-line span{

    width:90px;

    height:1px;

    background:rgba(58,52,52,.25);

}

.closing-line p{

    margin:0;

    letter-spacing:.2em;

    font-size:.85rem;

    color:var(--contact-stone);

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

}



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

.contact-cta{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:10rem 0;

    color:#fff;

    background:

        linear-gradient(

            rgba(58,52,52,.74),

            rgba(58,52,52,.74)

        ),

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

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}

.contact-cta::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(

            circle at 25% 30%,

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

            transparent 35%

        ),

        radial-gradient(

            circle at 78% 70%,

            rgba(196,151,150,.16),

            transparent 45%

        );

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

}

.cta-content{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:auto;

}

.cta-content h2{

    margin:1.5rem 0 2rem;

    color:#fff;

}

.cta-content p{

    max-width:640px;

    margin:0 auto 2.5rem;

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

}

.contact-cta .hero-buttons{

    display:flex;

    justify-content:center;

    gap:1.5rem;

    flex-wrap:wrap;

}

.contact-cta .btn-secondary{

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

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

    color:#fff;

    backdrop-filter:blur(14px);

}

.contact-cta .btn-secondary:hover{

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

}



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

.site-footer{

    background:#2b2524;

    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(--contact-pink);

    padding-left:.35rem;

}

.footer-bottom{

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

}



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

@media(max-width:1100px){

    .letter-grid,

    .arrival-grid,

    .form-layout{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .letter-image,

    .arrival-map{

        order:-1;

    }

    .concierge-grid{

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

    }

}

@media(max-width:768px){

    .welcome-letter,

    .concierge-section,

    .arrival-guide,

    .contact-form-section,

    .contact-quote,

    .goodbye-section,

    .contact-cta{

        padding:6rem 0;

    }

    .letter-image img,

    .arrival-map img{

        height:420px;

    }

    .form-row{

        grid-template-columns:1fr;

    }

    .contact-form{

        padding:2rem;

    }

    .guestbook-card{

        padding:2rem;

    }

    .guestbook-card img{

        height:240px;

    }

    .goodbye-card{

        padding:3rem 2rem;

    }

    .contact-hanko{

        display:none;

    }

    .contact-cta{

        background-attachment:scroll;

    }

    .contact-cta .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .contact-btn,

    .contact-cta .btn-secondary{

        width:100%;

        max-width:320px;

    }

}

@media(max-width:580px){

    .concierge-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:480px){

    .contact-hero h1{

        font-size:3rem;

    }

    .letter-image img,

    .arrival-map img{

        height:300px;

    }

    .quote-content blockquote{

        font-size:1.9rem;

    }

    .closing-line{

        flex-direction:column;

        gap:1rem;

    }

    .closing-line span{

        width:60px;

    }

}