/*
 * REV108 - Tampilan depan hijau telur asin dengan gerak lembut.
 * Gerakan hanya berlaku pada background halaman login.
 * Seluruh komponen, tombol, kartu, dan menu tetap tanpa animasi.
 */

body#absensi-motion-enabled,
body#absensi-motion-enabled *,
body#absensi-motion-enabled *::before,
body#absensi-motion-enabled *::after {
  -webkit-transition: none !important;
  transition: none !important;
  -webkit-animation: none !important;
  animation: none !important;
}

body#absensi-motion-enabled.modern-login-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  color: #0f2f27 !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.72) 0, rgba(255,255,255,0) 31%),
    radial-gradient(circle at 84% 16%, rgba(167,226,202,.72) 0, rgba(167,226,202,0) 32%),
    radial-gradient(circle at 78% 88%, rgba(111,191,157,.40) 0, rgba(111,191,157,0) 34%),
    linear-gradient(125deg, #e9f8ef 0%, #cdebd9 32%, #a9dac2 66%, #dff4e7 100%) !important;
  background-size: 135% 135%, 145% 145%, 150% 150%, 220% 220% !important;
  -webkit-animation: rev108GreenBackground 16s ease-in-out infinite !important;
  animation: rev108GreenBackground 16s ease-in-out infinite !important;
}

body#absensi-motion-enabled.modern-login-page::before,
body#absensi-motion-enabled.modern-login-page::after {
  content: "" !important;
  position: fixed !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 0 !important;
  border-radius: 50% !important;
  filter: blur(2px) !important;
  opacity: .54 !important;
}

body#absensi-motion-enabled.modern-login-page::before {
  width: 360px !important;
  height: 360px !important;
  left: -105px !important;
  top: -95px !important;
  background: rgba(255,255,255,.58) !important;
  -webkit-animation: rev108FloatLeft 11s ease-in-out infinite !important;
  animation: rev108FloatLeft 11s ease-in-out infinite !important;
}

body#absensi-motion-enabled.modern-login-page::after {
  width: 450px !important;
  height: 450px !important;
  right: -150px !important;
  bottom: -150px !important;
  background: rgba(65,160,119,.24) !important;
  -webkit-animation: rev108FloatRight 14s ease-in-out infinite !important;
  animation: rev108FloatRight 14s ease-in-out infinite !important;
}

@-webkit-keyframes rev108GreenBackground {
  0%,100% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 50%; }
  50% { background-position: 8% 8%, 92% 10%, 88% 92%, 100% 50%; }
}
@keyframes rev108GreenBackground {
  0%,100% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 50%; }
  50% { background-position: 8% 8%, 92% 10%, 88% 92%, 100% 50%; }
}

@-webkit-keyframes rev108FloatLeft {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(42px,30px,0) scale(1.08); }
}
@keyframes rev108FloatLeft {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(42px,30px,0) scale(1.08); }
}

@-webkit-keyframes rev108FloatRight {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-38px,-28px,0) scale(1.06); }
}
@keyframes rev108FloatRight {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-38px,-28px,0) scale(1.06); }
}

body#absensi-motion-enabled .landing-wrap,
body#absensi-motion-enabled .login-footer-modern,
body#absensi-motion-enabled .login-popup-overlay {
  position: relative;
  z-index: 1;
}

body#absensi-motion-enabled .landing-panel {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow: 0 26px 65px rgba(20,93,68,.14) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

body#absensi-motion-enabled .landing-feature {
  background: rgba(255,255,255,.76) !important;
  border-color: rgba(117,185,154,.34) !important;
}

body#absensi-motion-enabled .landing-feature i {
  color: #16865d !important;
}

body#absensi-motion-enabled .login-card-modern {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(255,255,255,.96) !important;
  box-shadow: 0 28px 75px rgba(20,93,68,.18) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  transform: none !important;
}

body#absensi-motion-enabled .login-card-modern:hover,
body#absensi-motion-enabled .btn:hover,
body#absensi-motion-enabled button:hover {
  transform: none !important;
}

body#absensi-motion-enabled .login-card-modern .form-control {
  background: rgba(247,252,249,.96) !important;
  border-color: #bed9cc !important;
}

body#absensi-motion-enabled .login-card-modern .form-control:focus {
  border-color: #26966b !important;
  box-shadow: 0 0 0 4px rgba(38,150,107,.13) !important;
}

body#absensi-motion-enabled .landing-designer {
  color: #126b4d !important;
  background: rgba(157,218,190,.22) !important;
  border-color: rgba(38,150,107,.18) !important;
}

body#absensi-motion-enabled .login-footer-modern {
  color: #275948 !important;
}

/* HP dan tablet: langsung tampilkan kartu login saja. */
@media (max-width: 991px) {
  body#absensi-motion-enabled.modern-login-page {
    display: block !important;
    min-height: 100svh;
  }

  body#absensi-motion-enabled .landing-wrap {
    min-height: 100svh !important;
    padding: 18px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body#absensi-motion-enabled .landing-card {
    display: block !important;
    width: 100% !important;
    max-width: 455px !important;
    margin: 0 auto !important;
  }

  body#absensi-motion-enabled .landing-panel {
    display: none !important;
  }

  body#absensi-motion-enabled .login-card-modern {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 26px 24px !important;
    border-radius: 28px !important;
  }

  body#absensi-motion-enabled .login-logo img {
    width: 82px !important;
  }

  body#absensi-motion-enabled .login-logo span {
    font-size: 30px !important;
  }

  body#absensi-motion-enabled .login-footer-modern {
    display: none !important;
  }
}

@media (max-width: 420px) {
  body#absensi-motion-enabled .landing-wrap {
    padding: 12px !important;
  }

  body#absensi-motion-enabled .login-card-modern {
    padding: 22px 18px !important;
    border-radius: 24px !important;
  }

  body#absensi-motion-enabled .login-logo span {
    font-size: 27px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body#absensi-motion-enabled.modern-login-page,
  body#absensi-motion-enabled.modern-login-page::before,
  body#absensi-motion-enabled.modern-login-page::after {
    -webkit-animation: none !important;
    animation: none !important;
  }
}