/*==========================================================
    KIYOMI RYOKAN
    GLOBAL STYLES
==========================================================*/

/*==========================================================
    DESIGN TOKENS
==========================================================*/

:root {

    /* ---------- COLORS ---------- */

    --color-background: #F8F5F0;
    --color-background-alt: #EFE9DF;
    --color-surface: #FFFFFF;

    --color-text: #1F1F1F;
    --color-text-light: #66645F;

    --color-primary: #7A5A43;
    --color-primary-dark: #5E4332;

    --color-accent: #B08A4A;
    --color-success: #6B7A5D;

    --color-border: #DDD6CB;

    /* ---------- EXTENDED PALETTE ---------- */

    --color-ink: #1A1613;
    --color-moss: #6B7A5D;
    --color-clay: #A85C42;
    --color-mist: rgba(122,90,67,.08);

    /* ---------- MOTION ---------- */

    --ease-luxury: cubic-bezier(.16,.84,.44,1);
    --ease-soft: cubic-bezier(.22,.61,.36,1);

    /* ---------- TYPOGRAPHY ---------- */

    --font-heading: "Cormorant Garamond", serif;
    --font-body: "Inter", sans-serif;

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.5rem;
    --fs-xl: clamp(2rem,4vw,3rem);
    --fs-2xl: clamp(3rem,6vw,4.5rem);
    --fs-hero: clamp(4rem,9vw,7rem);

    /* ---------- SPACING ---------- */

    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4rem;
    --space-7: 6rem;
    --space-8: 8rem;

    /* ---------- CONTAINER ---------- */

    --container-width: 1280px;

    /* ---------- BORDER RADIUS ---------- */

    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 40px;
    --radius-pill: 999px;

    /* ---------- SHADOWS ---------- */

    --shadow-sm: 0 6px 20px rgba(0,0,0,.05);
    --shadow-md: 0 14px 35px rgba(0,0,0,.08);
    --shadow-lg: 0 22px 60px rgba(0,0,0,.12);

    /* ---------- TRANSITIONS ---------- */

    --transition-fast: .2s ease;
    --transition: .35s ease;
    --transition-slow: .6s ease;

}

/*==========================================================
    RESET
==========================================================*/

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

/*==========================================================
    HTML
==========================================================*/

html{

    scroll-behavior:smooth;

    font-size:16px;

    scrollbar-color:var(--color-primary) var(--color-background-alt);

}

/*==========================================================
    BODY
==========================================================*/

body{

    background:var(--color-background);

    color:var(--color-text);

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

    line-height:1.7;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}

/*==========================================================
    MEDIA
==========================================================*/

img,
picture,
video,
canvas,
svg{

    display:block;

    max-width:100%;

}

img{

    height:auto;

}

/*==========================================================
    LINKS
==========================================================*/

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

/*==========================================================
    LISTS
==========================================================*/

ul,
ol{

    list-style:none;

}

/*==========================================================
    FORMS
==========================================================*/

button,
input,
textarea,
select{

    font:inherit;

}

button{

    cursor:pointer;

    background:none;

    border:none;

}

input,
textarea,
select{

    outline:none;

    border:none;

}

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

h1,
h2,
h3,
h4,
h5,
h6{

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

    color:var(--color-text);

    line-height:1.1;

    font-weight:600;

    letter-spacing:-.01em;

    text-wrap:balance;

}

h1{

    font-size:var(--fs-hero);

    letter-spacing:-.02em;

}

h2{

    font-size:var(--fs-2xl);

}

h3{

    font-size:var(--fs-xl);

}

p{

    color:var(--color-text-light);

    text-wrap:pretty;

}

/*==========================================================
    CUSTOM CURSOR (enabled via JS on non-touch devices)
==========================================================*/

body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button{

    cursor:none;

}

/*==========================================================
    SCROLL PROGRESS
==========================================================*/

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    height:3px;

    width:0%;

    background:linear-gradient(90deg, var(--color-accent), var(--color-primary));

    z-index:2000;

    transition:width .1s linear;

}

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

.container{

    width:min(90%, var(--container-width));

    margin-inline:auto;

}

section{

    padding:var(--space-8) 0;

}

/*==========================================================
    ACCESSIBILITY
==========================================================*/

:focus-visible{

    outline:2px solid var(--color-primary);

    outline-offset:4px;

}

/*==========================================================
    SELECTION
==========================================================*/

::selection{

    background:var(--color-primary);

    color:#fff;

}

/*==========================================================
    SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--color-background-alt);

}

::-webkit-scrollbar-thumb{

    background:var(--color-primary);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--color-primary-dark);

}
/*==========================================================
    GLOBAL UI ENGINE
    Shared Systems for Every Page
==========================================================*/



/*==========================================================
    GLOBAL VARIABLES
==========================================================*/

:root{

    --page-transition-duration:.9s;

    --page-transition-ease:cubic-bezier(.77,0,.18,1);

    --overlay-blur:18px;

    --glass-highlight:
        rgba(255,255,255,.12);

    --canvas-opacity:.8;

    --loading-bg:#f8f5ef;

    --loading-ink:#2f332e;

    --loading-accent:#b68d57;

}



/*==========================================================
    CANVAS ENGINE
==========================================================*/

#kiyomi-canvas{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:2;

    opacity:var(--canvas-opacity);

    mix-blend-mode:screen;

}



/*==========================================================
    ATMOSPHERE CONTAINER
==========================================================*/

.atmosphere-engine{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:3;

}



/*==========================================================
    PAGE TRANSITION
==========================================================*/

.page-transition{

    position:fixed;

    inset:0;

    background:var(--loading-bg);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

    transform:translateY(-100%);

    transition:

        transform var(--page-transition-duration)

        var(--page-transition-ease);

}



.page-transition.active{

    transform:translateY(0);

}



/*==========================================================
    TRANSITION CONTENT
==========================================================*/

.transition-content{

    position:relative;

    text-align:center;

}



.transition-logo{

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

    font-size:3rem;

    letter-spacing:.4rem;

    color:var(--loading-ink);

    opacity:0;

    transform:translateY(20px);

}



.page-transition.active

.transition-logo{

    animation:

        transitionLogo

        1.1s ease forwards;

}



/*==========================================================
    BRUSH STROKE
==========================================================*/

.transition-brush{

    width:320px;

    height:8px;

    margin:2rem auto;

    border-radius:999px;

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--loading-accent),

            transparent

        );

    transform:scaleX(0);

    transform-origin:left;

}



.page-transition.active

.transition-brush{

    animation:

        brushReveal

        1.2s ease forwards;

}



/*==========================================================
    LOADING SCREEN
==========================================================*/

.site-loader{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--loading-bg);

    z-index:1000000;

    overflow:hidden;

}



.site-loader.hidden{

    opacity:0;

    visibility:hidden;

    transition:

        opacity .8s ease,

        visibility .8s;

}



/*==========================================================
    LOADER CONTENT
==========================================================*/

.loader-inner{

    position:relative;

    text-align:center;

}



.loader-logo{

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

    font-size:3.4rem;

    letter-spacing:.35rem;

    color:var(--loading-ink);

}



.loader-sub{

    margin-top:.8rem;

    font-size:.8rem;

    letter-spacing:.45rem;

    text-transform:uppercase;

    color:#777;

}
/*==========================================================
    GLOBAL ATMOSPHERE PARTICLES
==========================================================*/

.particle{

    position:absolute;

    bottom:-120px;

    left:0;

    pointer-events:none;

    will-change:transform,opacity;

    animation:particleFloat linear forwards;

}



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

.particle.sakura{

    width:14px;

    height:10px;

    border-radius:70% 30% 70% 30%;

    background:#f3d7e2;

    opacity:.7;

    transform:rotate(35deg);

    filter:blur(.2px);

}



/*==========================================================
    MIST
==========================================================*/

.particle.mist{

    width:90px;

    height:90px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(255,255,255,.22),

            transparent 72%

        );

    filter:blur(18px);

}



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

.particle.steam{

    width:36px;

    height:120px;

    border-radius:50%;

    background:

        linear-gradient(

            rgba(255,255,255,.22),

            transparent

        );

    filter:blur(10px);

}



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

.particle.dust{

    width:4px;

    height:4px;

    border-radius:50%;

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

    box-shadow:

        0 0 10px

        rgba(255,255,255,.4);

}



/*==========================================================
    GOLD PARTICLES
==========================================================*/

.particle.gold{

    width:5px;

    height:5px;

    border-radius:50%;

    background:#d6b66f;

    box-shadow:

        0 0 16px

        rgba(214,182,111,.55);

}



/*==========================================================
    PAPER FIBRES
==========================================================*/

.particle.paper{

    width:18px;

    height:2px;

    border-radius:999px;

    background:

        rgba(230,226,215,.75);

    transform:rotate(25deg);

}



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

.particle.petal{

    width:16px;

    height:12px;

    border-radius:

        80% 40%

        80% 40%;

    background:#ebb8c9;

    transform:rotate(22deg);

}



/*==========================================================
    LEAVES
==========================================================*/

.particle.leaf{

    width:18px;

    height:12px;

    border-radius:

        0 100%

        0 100%;

    background:#96a87e;

    transform:rotate(-35deg);

}
/*==========================================================
    PARTICLE ANIMATION
==========================================================*/

@keyframes particleFloat{

    0%{

        transform:

            translate3d(

                0,

                0,

                0

            )

            rotate(0deg);

        opacity:0;

    }

    12%{

        opacity:.75;

    }

    50%{

        transform:

            translate3d(

                var(--drift),

                -45vh,

                0

            )

            rotate(140deg);

    }

    100%{

        transform:

            translate3d(

                calc(var(--drift)*1.5),

                -120vh,

                0

            )

            rotate(300deg);

        opacity:0;

    }

}
/*==========================================================
    ATMOSPHERE DEPTH
==========================================================*/

.particle::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    opacity:.35;

    filter:blur(8px);

    background:inherit;

}
/*==========================================================
    STEAM MOTION
==========================================================*/

.particle.steam{

    animation:

        particleFloat linear forwards,

        steamWave

        5s ease-in-out infinite;

}



@keyframes steamWave{

    0%{

        margin-left:0;

    }

    50%{

        margin-left:12px;

    }

    100%{

        margin-left:0;

    }

}
/*==========================================================
    PERFORMANCE
==========================================================*/

@media(prefers-reduced-motion:reduce){

    .particle{

        display:none;

    }

}