/*==========================================================
    KIYOMI RYOKAN
    ANIMATIONS
    Scroll reveals, stagger choreography, ambient motion
==========================================================*/


/*==========================================================
    SCROLL REVEAL — BASE STATES
    Elements start hidden/offset, main.js toggles
    .is-visible via IntersectionObserver
==========================================================*/

.fade-up,
.fade-in,
.slide-left,
.slide-right,
.scale-in{

    opacity:0;

    transition:
        opacity 1s var(--ease-luxury),
        transform 1s var(--ease-luxury);

    will-change:opacity, transform;

}

.fade-up{

    transform:translateY(42px);

}

.fade-in{

    transform:none;

}

.slide-left{

    transform:translateX(-56px);

}

.slide-right{

    transform:translateX(56px);

}

.scale-in{

    transform:scale(.94);

}

.fade-up.is-visible,
.fade-in.is-visible,
.slide-left.is-visible,
.slide-right.is-visible,
.scale-in.is-visible{

    opacity:1;

    transform:none;

}


/*==========================================================
    STAGGER DELAYS
==========================================================*/

.delay-1{ transition-delay:.12s; }
.delay-2{ transition-delay:.24s; }
.delay-3{ transition-delay:.36s; }
.delay-4{ transition-delay:.48s; }


/* Children of a .stagger-group reveal in sequence automatically */

.stagger-group.is-visible > *{

    transition-delay:calc(var(--stagger-index, 0) * 90ms);

}


/*==========================================================
    PAGE LOAD SEQUENCE — HERO
==========================================================*/

@keyframes hero-rise{

    from{

        opacity:0;

        transform:translateY(28px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes hero-image-settle{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.hero-image,
.about-hero .hero-image{

    animation:hero-image-settle 1.4s var(--ease-luxury) both;

}

.hero-content > *{

    opacity:0;

    animation:hero-rise .9s var(--ease-luxury) both;

}

.hero-content .brand-tag{ animation-delay:.15s; }
.hero-content h1{ animation-delay:.3s; }
.hero-content p{ animation-delay:.5s; }
.hero-content .hero-buttons{ animation-delay:.65s; }

.about-hero-content > *{

    opacity:0;

    animation:hero-rise .9s var(--ease-luxury) both;

}

.about-hero-content .section-label{ animation-delay:.15s; }
.about-hero-content h1{ animation-delay:.3s; }
.about-hero-content p{ animation-delay:.5s; }


/*==========================================================
    AMBIENT MOTION — BRAND MARKS
==========================================================*/

@keyframes drift-vertical{

    0%,100%{ transform:translateY(-50%) translateY(0); }
    50%{ transform:translateY(-50%) translateY(-14px); }

}

.vertical-jp{

    animation:drift-vertical 9s ease-in-out infinite;

}

@keyframes hanko-breathe{

    0%,100%{ opacity:.18; transform:rotate(0deg) scale(1); }
    50%{ opacity:.26; transform:rotate(0deg) scale(1.03); }

}

.hanko-floating .hanko{

    animation:hanko-breathe 6s ease-in-out infinite;

}

@keyframes ring-rotate{

    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }

}

.brand-circle{

    animation:ring-rotate 90s linear infinite;

}


/*==========================================================
    SCROLL INDICATOR PULSE
==========================================================*/

@keyframes scroll-line-pulse{

    0%{ transform:scaleY(0); transform-origin:top; opacity:.9; }
    50%{ transform:scaleY(1); transform-origin:top; opacity:.5; }
    51%{ transform-origin:bottom; }
    100%{ transform:scaleY(0); transform-origin:bottom; opacity:.9; }

}

.scroll-indicator::after{

    animation:scroll-line-pulse 2.6s ease-in-out infinite;

}


/*==========================================================
    BUTTON SHIMMER (see components.css for base .btn)
==========================================================*/

@keyframes shimmer-sweep{

    from{ transform:translateX(-120%) skewX(-12deg); }
    to{ transform:translateX(220%) skewX(-12deg); }

}


/*==========================================================
    CUSTOM CURSOR
==========================================================*/

.cursor-dot,
.cursor-ring{

    position:fixed;

    top:0;

    left:0;

    pointer-events:none;

    z-index:9999;

    border-radius:50%;

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

}

.cursor-dot{

    width:6px;

    height:6px;

    background:var(--color-primary);

    transition:opacity .2s ease, transform .15s ease;

}

.cursor-ring{

    width:38px;

    height:38px;

    border:1px solid rgba(122,90,67,.45);

    transition:
        transform .55s var(--ease-soft),
        opacity .3s ease,
        width .3s var(--ease-soft),
        height .3s var(--ease-soft),
        background .3s ease,
        border-color .3s ease;
}

.cursor-ring.is-hovering{

    width:64px;

    height:64px;

    background:rgba(122,90,67,.06);

    border-color:var(--color-primary);

}

.cursor-ring.is-hidden,
.cursor-dot.is-hidden{

    opacity:0;

}


/*==========================================================
    REDUCED MOTION
==========================================================*/

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

    .fade-up,
    .fade-in,
    .slide-left,
    .slide-right,
    .scale-in{

        transition:opacity .4s ease;

        transform:none !important;

    }

    .hero-image,
    .about-hero .hero-image,
    .hero-content > *,
    .about-hero-content > *{

        animation:none !important;

        opacity:1 !important;

        transform:none !important;

    }

    .vertical-jp,
    .hanko-floating .hanko,
    .brand-circle,
    .scroll-indicator::after{

        animation:none !important;

    }

    .cursor-dot,
    .cursor-ring{

        display:none !important;

    }

}


/*==========================================================
    MOBILE — DISABLE HEAVY AMBIENT MOTION
==========================================================*/

@media(max-width:768px){

    .cursor-dot,
    .cursor-ring{

        display:none !important;

    }

    .vertical-jp,
    .brand-circle{

        animation:none;

    }
    

}