/* ============================================================
   Halaman login (pages/login.php) -- logo Sabrina 3D + animasi status.
   Logo ditebalkan dengan menumpuk siluet berwarna di belakangnya
   (markup di views/login_logo.php), jadi tanpa library dan tanpa
   request tambahan selain logo itu sendiri.
   Dipisah dari style.css karena hanya dipakai satu halaman.
   ============================================================ */

.login-wrap{flex-direction:column;justify-content:center;gap:0}

/* ---- Panggung ---- */
.login-stage{
  --lw:min(320px,80vw);                 /* lebar logo */
  --lh:calc(var(--lw) * 191 / 900);      /* tinggi mengikuti rasio PNG 900x191 */
  --ext-a:#f0b562;                       /* warna tepi tebal, lapis terdepan */
  --ext-b:#5c3209;                       /* warna tepi tebal, lapis terbelakang */
  --glow:rgba(232,161,77,.0);
  position:relative;
  width:100%;
  max-width:460px;
  height:176px;
  margin:0 auto 6px;
  perspective:900px;
  perspective-origin:50% 45%;
}
.logo-scene,.logo-spin,.logo-bodi{transform-style:preserve-3d}
.logo-scene{position:absolute;left:50%;top:50%;width:0;height:0;animation:logo-float 5s ease-in-out infinite}
.logo-spin{position:absolute;left:0;top:0;width:0;height:0;transform:rotateX(8deg) rotateY(0);animation:logo-sway 8s ease-in-out infinite}
/* Titik putar dipindah ke tengah ketebalan logo, bukan ke bidang depannya. */
.logo-bodi{
  position:absolute;
  width:var(--lw);
  height:var(--lh);
  left:calc(var(--lw) / -2);
  top:calc(var(--lh) / -2);
  transform:translateZ(17px);
}

/* ---- Tebal: siluet logo ---- */
.logo-lapis{
  position:absolute;inset:0;display:block;
  background:var(--ext-a);
  background:color-mix(in srgb,var(--ext-a),var(--ext-b) calc(var(--i) * 4.2%));
  -webkit-mask:url(logo-sabrina.png) center / 100% 100% no-repeat;
          mask:url(logo-sabrina.png) center / 100% 100% no-repeat;
  transform:translateZ(calc(var(--i) * -2.4px));
}

/* ---- Muka depan ---- */
.logo-depan{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  filter:drop-shadow(0 0 10px var(--glow));
}
/* Kilap: pita cahaya yang menyapu bentuk logo, bukan kotaknya. */
.logo-kilap{
  position:absolute;inset:0;display:block;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%) -160% 0 / 60% 100% no-repeat;
  -webkit-mask:url(logo-sabrina.png) center / 100% 100% no-repeat;
          mask:url(logo-sabrina.png) center / 100% 100% no-repeat;
  transform:translateZ(.5px);
  mix-blend-mode:soft-light;
  animation:logo-kilap 5.5s ease-in-out 1s infinite;
}

/* ---- Bayangan di lantai ---- */
.logo-bayang{
  position:absolute;left:6%;bottom:-34px;width:88%;height:22px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(74,47,18,.28),rgba(74,47,18,0) 70%);
  filter:blur(5px);
  transform:translateZ(-22px) rotateX(90deg);
}

/* ---- Animasi idle ---- */
@keyframes logo-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@keyframes logo-sway{
  0%,100%{transform:rotateX(8deg) rotateY(-24deg)}
  50%{transform:rotateX(8deg) rotateY(24deg)}
}
@keyframes logo-kilap{
  0%,55%{background-position:-160% 0}
  100%{background-position:260% 0}
}

/* ---- Status: login GAGAL ---- */
.login-stage.gagal{--ext-a:#d97a63;--ext-b:#6e2e1d;--glow:rgba(217,122,99,.75)}
.login-stage.gagal .logo-scene{animation:none}
.login-stage.gagal .logo-spin{animation:logo-gagal .6s ease-in-out}
.login-stage.gagal ~ .login-box,
.login-box.gagal{animation:box-gagal .5s ease-in-out}
@keyframes logo-gagal{
  0%,100%{transform:rotateX(8deg) rotateY(0)}
  15%{transform:rotateX(8deg) rotateY(-32deg) rotateZ(-3deg)}
  35%{transform:rotateX(8deg) rotateY(30deg) rotateZ(3deg)}
  55%{transform:rotateX(8deg) rotateY(-20deg) rotateZ(-2deg)}
  75%{transform:rotateX(8deg) rotateY(10deg)}
}
@keyframes box-gagal{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-9px)}
  40%{transform:translateX(8px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(3px)}
}

/* ---- Status: login BERHASIL ---- */
.login-stage.ok{--ext-a:#8fd3ac;--ext-b:#1f4d35;--glow:rgba(111,185,143,.85)}
.login-stage.ok .logo-scene{animation:logo-ok-naik 1.1s cubic-bezier(.3,.7,.3,1) forwards}
.login-stage.ok .logo-spin{animation:logo-ok-putar 1.05s cubic-bezier(.45,.05,.25,1) forwards}
.login-stage.ok .logo-kilap{animation:logo-kilap-ok .9s ease-out .15s forwards}
.login-stage.ok ~ .login-box,
.login-box.ok{animation:box-ok .5s ease-out}
@keyframes logo-ok-naik{
  0%{transform:translateY(0) scale(1)}
  55%{transform:translateY(-16px) scale(1.12)}
  100%{transform:translateY(-6px) scale(1.06)}
}
@keyframes logo-ok-putar{
  0%{transform:rotateX(8deg) rotateY(0)}
  100%{transform:rotateX(8deg) rotateY(360deg)}
}
@keyframes logo-kilap-ok{
  0%{background-position:-160% 0}
  100%{background-position:260% 0}
}
@keyframes box-ok{
  0%{transform:scale(1)}
  50%{transform:scale(1.03)}
  100%{transform:scale(1)}
}

/* ---- Hormati preferensi "kurangi gerakan" ---- */
@media (prefers-reduced-motion:reduce){
  .logo-scene,.logo-spin,.logo-kilap,.login-box{animation:none!important}
  .logo-spin{transform:rotateX(8deg) rotateY(-12deg)}
}