/* =========================================================
   LOGIN RANDOM CUTE CAT
   Kucing nongol random, hover = ngumpet lalu pindah
   ========================================================= */
.rz-login-scene{
    position:relative;
    width:min(440px,92vw);
    isolation:isolate;
    margin-inline:auto;
}

.rz-login-scene .rz-login-card{
    width:100%;
    position:relative;
    z-index:3;
}

.rz-login-cat-peek{
    position:absolute;
    width:150px;
    height:140px;
    z-index:2;
    pointer-events:auto;
    cursor:pointer;
    left:var(--rz-cat-left, auto);
    right:var(--rz-cat-right, 20px);
    top:var(--rz-cat-top, -82px);
    bottom:var(--rz-cat-bottom, auto);
    transform:rotate(var(--rz-cat-rotate, -2deg)) scale(var(--rz-cat-scale, 1));
    transform-origin:bottom center;
    opacity:0;
    transition:
        opacity .28s ease,
        transform .38s cubic-bezier(.22,1,.36,1),
        left .38s cubic-bezier(.22,1,.36,1),
        right .38s cubic-bezier(.22,1,.36,1),
        top .38s cubic-bezier(.22,1,.36,1),
        bottom .38s cubic-bezier(.22,1,.36,1);
    animation:rzCatPeekFloat 4.8s ease-in-out infinite;
}

.rz-login-cat-peek.is-peeking{
    opacity:1;
}

.rz-login-cat-peek.is-hiding{
    opacity:0;
    transform:rotate(var(--rz-cat-rotate, -2deg)) translateY(48px) scale(.82);
    pointer-events:none;
}

.rz-login-cat-peek.is-moving{
    transition:none;
}

.rz-login-cat-peek[data-placement="left-side"] .rz-cat-bubble{
    right:auto;
    left:10px;
    border-radius:999px 999px 8px 999px;
    transform:rotate(-4deg);
}

.rz-login-cat-peek[data-placement="right-side"] .rz-cat-bubble{
    right:2px;
}

.rz-cat-head{
    position:absolute;
    left:26px;
    top:18px;
    width:96px;
    height:88px;
    border-radius:38px 38px 34px 34px;
    background:linear-gradient(145deg,#fff7df 0%,#ffd58f 54%,#ffb66a 100%);
    border:3px solid rgba(255,255,255,.82);
    box-shadow:0 18px 36px rgba(90,55,20,.18), inset 0 -8px 18px rgba(160,88,22,.10);
}

.rz-cat-ear{
    position:absolute;
    top:-22px;
    width:34px;
    height:36px;
    background:linear-gradient(145deg,#ffc372,#ff9f5e);
    border:3px solid rgba(255,255,255,.82);
    z-index:-1;
}
.rz-cat-ear.left{
    left:8px;
    border-radius:11px 25px 10px 25px;
    transform:rotate(-18deg);
}
.rz-cat-ear.right{
    right:8px;
    border-radius:25px 11px 25px 10px;
    transform:rotate(18deg);
}
.rz-cat-ear:after{
    content:"";
    position:absolute;
    inset:8px;
    border-radius:inherit;
    background:rgba(255,143,189,.38);
}

.rz-cat-face-glow{
    position:absolute;
    left:50%;
    top:48px;
    width:64px;
    height:32px;
    transform:translateX(-50%);
    border-radius:999px;
    background:rgba(255,255,255,.32);
}

.rz-cat-eye{
    position:absolute;
    top:33px;
    width:11px;
    height:15px;
    border-radius:999px;
    background:#241c35;
    box-shadow:inset 2px 3px 0 rgba(255,255,255,.46);
    animation:rzCatBlink 4.4s ease-in-out infinite;
}
.rz-cat-eye.left{left:29px}
.rz-cat-eye.right{right:29px}

.rz-cat-nose{
    position:absolute;
    left:50%;
    top:52px;
    width:12px;
    height:9px;
    transform:translateX(-50%);
    border-radius:60% 60% 80% 80%;
    background:#ff7aa8;
}

.rz-cat-mouth{
    position:absolute;
    left:50%;
    top:61px;
    width:22px;
    height:11px;
    transform:translateX(-50%);
    border-bottom:3px solid rgba(61,43,56,.72);
    border-radius:0 0 999px 999px;
}

.rz-cat-whisker{
    position:absolute;
    top:58px;
    width:26px;
    height:2px;
    border-radius:999px;
    background:rgba(92,64,52,.54);
}
.rz-cat-whisker.left{left:8px;transform-origin:right center}
.rz-cat-whisker.right{right:8px;transform-origin:left center}
.rz-cat-whisker.left.top{transform:rotate(12deg)}
.rz-cat-whisker.left.bottom{top:67px;transform:rotate(-10deg)}
.rz-cat-whisker.right.top{transform:rotate(-12deg)}
.rz-cat-whisker.right.bottom{top:67px;transform:rotate(10deg)}

.rz-cat-paw{
    position:absolute;
    bottom:20px;
    width:34px;
    height:25px;
    border-radius:999px 999px 14px 14px;
    background:linear-gradient(180deg,#ffd58f,#ffb46b);
    border:3px solid rgba(255,255,255,.82);
    box-shadow:0 10px 18px rgba(90,55,20,.12);
}
.rz-cat-paw.left{left:34px;transform:rotate(-8deg)}
.rz-cat-paw.right{right:34px;transform:rotate(8deg)}
.rz-cat-paw:before,
.rz-cat-paw:after{
    content:"";
    position:absolute;
    top:6px;
    width:5px;
    height:7px;
    border-radius:999px;
    background:rgba(132,78,40,.28);
}
.rz-cat-paw:before{left:9px}
.rz-cat-paw:after{right:9px}

.rz-cat-tail{
    position:absolute;
    right:8px;
    top:56px;
    width:58px;
    height:58px;
    border:12px solid #ffb46b;
    border-left-color:transparent;
    border-bottom-color:transparent;
    border-radius:50%;
    transform:rotate(28deg);
    filter:drop-shadow(0 12px 16px rgba(90,55,20,.12));
    animation:rzCatTailWiggle 2.8s ease-in-out infinite;
}

.rz-cat-bubble{
    position:absolute;
    top:1px;
    right:-10px;
    padding:7px 11px;
    border-radius:999px 999px 999px 8px;
    background:#fff;
    border:1px solid rgba(232,237,247,.95);
    color:#6b5cff;
    font-size:.78rem;
    font-weight:900;
    box-shadow:0 12px 26px rgba(21,31,58,.10);
    transform:rotate(5deg);
    animation:rzCatBubble 3.2s ease-in-out infinite;
}

.rz-login-card:after{
    content:"";
    position:absolute;
    top:-1px;
    right:42px;
    width:92px;
    height:8px;
    border-radius:0 0 999px 999px;
    background:rgba(255,181,106,.30);
    filter:blur(.2px);
    pointer-events:none;
}

html.rz-dark-mode .rz-cat-bubble{
    background:#152133;
    color:#fde68a;
    border-color:rgba(255,255,255,.12);
    box-shadow:0 14px 28px rgba(0,0,0,.24);
}

html.rz-dark-mode .rz-cat-head{
    border-color:rgba(255,255,255,.72);
    box-shadow:0 18px 38px rgba(0,0,0,.22), 0 0 28px rgba(255,217,120,.12);
}

@keyframes rzCatPeekFloat{
    0%,100%{margin-top:0}
    50%{margin-top:-8px}
}

@keyframes rzCatBlink{
    0%, 88%, 100%{transform:scaleY(1)}
    92%, 95%{transform:scaleY(.12)}
}

@keyframes rzCatTailWiggle{
    0%,100%{transform:rotate(28deg)}
    50%{transform:rotate(42deg)}
}

@keyframes rzCatBubble{
    0%,100%{opacity:.92;transform:translateY(0) rotate(5deg)}
    50%{opacity:1;transform:translateY(-5px) rotate(2deg)}
}

@media(max-width:575px){
    .rz-login-scene{width:min(100%,380px)}
    .rz-login-cat-peek{
        width:132px;
        height:124px;
        --rz-cat-scale:.88;
    }
    .rz-login-cat-peek[data-placement="left-side"],
    .rz-login-cat-peek[data-placement="right-side"]{
        top:-72px !important;
        left:auto !important;
        right:12px !important;
    }
    .rz-cat-bubble{display:none}
}