/* ===========================================================
   Choco Pop v2 — Login / OTP
   Templates: accounts/templates/accounts/sms_login_{form,confirm}.html
   Behaviour: js/choco-motion.js ([data-cp-otp] digit bump); the pages'
   own submit / cooldown scripts are untouched.
   =========================================================== */
main.cp-auth{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 18% 22%, rgba(237,155,51,.1) 0 2.5px, transparent 3px) 0 0/120px 90px,
    radial-gradient(ellipse at 50% 30%, #FFF1DE, transparent 65%),
    linear-gradient(180deg,#FFFBF6,var(--cp-milk));
}
.cp-auth__deco{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.cp-auth__deco img{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);object-fit:contain;filter:drop-shadow(0 12px 12px rgba(79,44,29,.22));animation:cpFloat var(--t,4s) ease-in-out infinite;animation-delay:var(--d,0s);}
@media (max-width:640px){.cp-auth__deco img{opacity:.45;}}
.cp-auth__card{
  border-radius:34px !important;animation:cpPopInT .7s var(--cp-ease-jelly) both;
  background:radial-gradient(ellipse at 20% 0%, #fff, #FFF8EE 55%, #FFF0DC 100%) !important;
  box-shadow:0 10px 0 rgba(166,25,46,.16), 0 26px 44px rgba(79,44,29,.18), inset 0 3px 0 #fff !important;
}
.cp-auth__card::after{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:repeating-linear-gradient(-45deg,var(--clay-wine) 0 10px,var(--clay-gold) 10px 20px);background-size:28px 100%;animation:cpCandyRun 1.2s linear infinite;}
.cp-auth__card header img{transition:transform .4s var(--cp-ease-jelly);}
.cp-auth__card header a:hover img{animation:cpJelly .8s ease;}
.cp-auth__card h1{font-weight:900 !important;color:var(--clay-cocoa-dark) !important;}
.cp-auth__hello{font-size:.95rem;font-weight:800;color:var(--clay-cocoa);}
.cp-wave{display:inline-block;transform-origin:70% 80%;animation:cpWaveHand 2.4s ease-in-out infinite .6s;}
@keyframes cpWaveHand{0%,60%,100%{transform:rotate(0);}10%{transform:rotate(16deg);}20%{transform:rotate(-10deg);}30%{transform:rotate(14deg);}40%{transform:rotate(-6deg);}50%{transform:rotate(8deg);}}
.cp-auth .form-input,.cp-auth .cp-otp{border-radius:999px !important;transition:border-color .2s ease, box-shadow .25s ease, transform .35s var(--cp-ease-jelly) !important;}
.cp-auth .form-input:focus,.cp-auth .cp-otp:focus{outline:none !important;border-color:var(--clay-gold) !important;box-shadow:0 0 0 5px rgba(237,155,51,.18) !important;transform:scale(1.015);}
.cp-otp.is-bump{animation:cpOtpBump .3s var(--cp-ease-jelly);}
@keyframes cpOtpBump{40%{transform:scale(1.04,.94);}}
.cp-otp.is-full{border-color:#2f8a43 !important;box-shadow:0 0 0 5px rgba(47,138,67,.15) !important;}
.cp-auth-error{border-radius:20px !important;animation:cpShakeX .5s ease .3s both;}
.cp-auth button[type=submit]{position:relative;overflow:hidden;}
.cp-auth button[type=submit]::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;background:linear-gradient(115deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:cpShineSweep 3.6s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){
  .cp-auth__deco img,.cp-auth__card,.cp-auth__card::after,.cp-wave,.cp-otp.is-bump,.cp-auth-error,.cp-auth button[type=submit]::after{animation:none !important;}
}