/* ==============================================================
   KKD STUDIO — BLOG PREMIUM EFFECTS
   Custom cursor / curtain preloader / marquee / split-text reveal
   / magnetic buttons / scroll parallax
   ============================================================== */

/* ---------- PAGE CURTAIN (load-in reveal) ---------- */
.kkd-curtain{
    position:fixed;
    inset:0;
    background:#000;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.kkd-curtain-text{
    color:#fff;
    font-size:13px;
    letter-spacing:6px;
    font-weight:500;
    text-transform:uppercase;
    opacity:.85;
}

/* ---------- CUSTOM CURSOR (desktop only) ---------- */
@media (hover:hover) and (pointer:fine){
    body.kkd-cursor-active{ cursor:none; }
    body.kkd-cursor-active a,
    body.kkd-cursor-active button{ cursor:none; }
}
.kkd-cursor-dot,
.kkd-cursor-ring{
    position:fixed;
    top:0;
    left:0;
    pointer-events:none;
    z-index:99998;
    border-radius:50%;
    transform:translate(-50%,-50%);
    will-change:transform;
}
.kkd-cursor-dot{
    width:6px;
    height:6px;
    background:#000;
}
.kkd-cursor-ring{
    width:38px;
    height:38px;
    border:1px solid rgba(0,0,0,.5);
    transition:width .3s ease, height .3s ease, border-color .3s ease, background .3s ease;
}
.kkd-cursor-ring.is-active{
    width:64px;
    height:64px;
    background:rgba(0,0,0,.06);
    border-color:rgba(0,0,0,.15);
}
@media (max-width:900px){
    .kkd-cursor-dot, .kkd-cursor-ring{ display:none; }
}

/* ---------- MARQUEE TICKER ---------- */
.kkd-marquee{
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    border-top:1px solid #e5e5e5;
    border-bottom:1px solid #e5e5e5;
    padding:16px 0;
    margin:36px 0 44px;
}
.kkd-marquee-track{
    display:inline-flex;
    align-items:center;
    animation:kkd-marquee-scroll 26s linear infinite;
}
.kkd-marquee-track span{
    font-size:13px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#999;
    padding:0 26px;
    font-weight:500;
    display:inline-flex;
    align-items:center;
    gap:26px;
}
.kkd-marquee-track span::after{
    content:'\2022';
    color:#ccc;
}
@keyframes kkd-marquee-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}

/* ---------- SPLIT TEXT REVEAL ---------- */
.kkd-split-reveal{
    overflow:hidden;
}
.kkd-split-reveal .word{
    display:inline-block;
    will-change:transform, opacity;
}

/* ---------- MAGNETIC BUTTON ---------- */
.kkd-magnetic{
    display:inline-flex;
    will-change:transform;
}

/* ---------- SCROLL REVEAL (fallback / base state) ---------- */
.kkd-reveal{
    opacity:0;
    transform:translateY(46px);
}

/* ---------- CROSS-DOCUMENT PAGE TRANSITIONS (slide) ---------- */
@media (prefers-reduced-motion: no-preference){
    ::view-transition-old(root){
        animation: kkd-vt-slide-out-left .45s cubic-bezier(.65,0,.35,1) both;
    }
    ::view-transition-new(root){
        animation: kkd-vt-slide-in-right .45s cubic-bezier(.65,0,.35,1) both;
    }
    html.kkd-vt-back::view-transition-old(root){
        animation-name: kkd-vt-slide-out-right;
    }
    html.kkd-vt-back::view-transition-new(root){
        animation-name: kkd-vt-slide-in-left;
    }
}
@keyframes kkd-vt-slide-out-left{ to{ transform:translateX(-6%); opacity:0; } }
@keyframes kkd-vt-slide-in-right{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
@keyframes kkd-vt-slide-out-right{ to{ transform:translateX(6%); opacity:0; } }
@keyframes kkd-vt-slide-in-left{ from{ transform:translateX(-100%); } to{ transform:translateX(0); } }

/**/