/* Illustration from login-jelly-guard.html, scoped to the left panel. */
.customer-auth-intro.customer-jelly {
  --card:#fff; --ink:#191b22; --field:#f3f4f8; --danger:#d94c55;
  --c-berry-2:#4a2fc0; --c-coal-2:#14151c; --c-cream-2:#f0bf6a; --c-mint-2:#16a88f;
  min-width:0; padding:28px; border-radius:28px; background:#fff;
  box-shadow:0 26px 70px rgba(18,20,40,.10); text-align:left;
}
.customer-jelly h1 {margin:0 0 6px;font-size:30px;line-height:1.3;letter-spacing:-.4px;color:var(--ink)}
.customer-jelly>p.customer-jelly-sub {margin:0 0 20px;font-size:13.5px;line-height:1.6;color:#767d8c}
.jg-stage{
  position:relative;border-radius:22px;overflow:hidden;
  background:
    radial-gradient(90% 70% at 50% 108%, rgba(58,217,189,.20), transparent 62%),
    radial-gradient(60% 50% at 18% 12%, rgba(108,75,232,.14), transparent 70%),
    var(--field);
  aspect-ratio:400/300;margin-bottom:22px;
  --lx:0px;--ly:0px;                     
}
.jg-cast{position:absolute;inset:0;width:100%;height:100%;display:block}


.jg-jelly{transform-box:fill-box;transform-origin:50% 100%;animation:jg-breathe 3.6s ease-in-out infinite}
.jg-jelly.jg-b{animation-duration:4.3s;animation-delay:-.9s}
.jg-jelly.jg-c{animation-duration:3.1s;animation-delay:-1.8s}
.jg-jelly.jg-d{animation-duration:4.8s;animation-delay:-2.4s}
@keyframes jg-breathe{
  0%,100%{transform:translateY(0) scale(1,1)}
  50%{transform:translateY(-3px) scale(.985,1.02)}
}
.jg-eyes{transform-box:fill-box;transform-origin:50% 50%;animation:jg-blink 5.2s infinite}
.jg-eyes.jg-b{animation-duration:6.7s;animation-delay:-2s}
.jg-eyes.jg-c{animation-duration:4.4s;animation-delay:-3.3s}
.jg-eyes.jg-d{animation-duration:7.9s;animation-delay:-1.1s}
@keyframes jg-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.06)}}
.jg-pupil{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.jg-hero-pupil{transform:translate(var(--lx),var(--ly))}
.jg-blush{opacity:0;transition:opacity .4s}
.jg-shadow-el{transition:transform .35s ease,opacity .35s ease;transform-box:fill-box;transform-origin:50% 50%}


.jg-lens{transform-box:fill-box;transform-origin:50% 60%;opacity:0;transform:scale(.4) rotate(-28deg);
  transition:opacity .35s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.jg-is-phone .jg-lens{opacity:1;transform:scale(1) rotate(0)}
.jg-is-phone .jg-hero{transform:translateY(-5px) scale(1.035)}
.jg-hero{transform-box:fill-box;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.34,1.4,.64,1)}

.jg-eye-zoom{transform-box:fill-box;transform-origin:50% 50%;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.jg-is-phone .jg-eye-zoom{transform:scale(1.45)}


.jg-dot{fill:rgba(125,135,155,.30);opacity:0;transition:fill .3s ease,opacity .3s ease,transform .35s cubic-bezier(.34,1.56,.64,1);
  transform-box:fill-box;transform-origin:50% 50%}
.jg-is-code .jg-dot,.jg-is-success .jg-dot{opacity:1}
.jg-dot.jg-on{fill:#ffcf4a;transform:scale(1.5);filter:drop-shadow(0 0 6px rgba(255,207,74,.9))}


.jg-glass{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(158deg,rgba(255,255,255,.46),rgba(255,255,255,.10) 46%,rgba(255,255,255,.34));
  backdrop-filter:blur(0) saturate(1);-webkit-backdrop-filter:blur(0) saturate(1);
  transition:backdrop-filter .55s ease,-webkit-backdrop-filter .55s ease,opacity .5s ease,transform .8s cubic-bezier(.3,1.1,.3,1);
}
.jg-is-secret .jg-glass{opacity:1;backdrop-filter:blur(14px) saturate(.65);-webkit-backdrop-filter:blur(14px) saturate(.65)}
.jg-is-success .jg-glass{transform:translateY(-105%);opacity:0}
.jg-fog{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .55s ease;
  background:radial-gradient(130% 90% at 50% 16%,rgba(255,255,255,.80),rgba(255,255,255,.30) 66%,transparent)}
.jg-is-secret .jg-fog{opacity:1}
.jg-fog{background:radial-gradient(130% 90% at 50% 16%,rgba(226,232,246,.55),rgba(200,210,230,.20) 66%,transparent)}
.jg-drip{position:absolute;top:-14%;width:3px;height:0;border-radius:3px;
  background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.85));opacity:0}
.jg-is-secret .jg-drip{animation:jg-drip 2.6s ease-in infinite}
@keyframes jg-drip{0%{height:0;opacity:0}20%{opacity:.9}100%{height:120%;opacity:0}}


.jg-crack{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .3s}
.jg-is-error .jg-crack{opacity:1}
.jg-is-error .jg-glass{opacity:1;background:linear-gradient(158deg,rgba(255,92,92,.34),rgba(255,92,92,.10) 50%,rgba(255,92,92,.26))}
.jg-crack path{stroke-dasharray:240;stroke-dashoffset:240}
.jg-is-error .jg-crack path{animation:jg-draw .5s ease forwards}
@keyframes jg-draw{to{stroke-dashoffset:0}}
.jg-is-error .jg-cast{animation:jg-headshake .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes jg-headshake{
  0%,100%{transform:translateX(0) rotate(0)}
  18%{transform:translateX(-7px) rotate(-1.6deg)}
  38%{transform:translateX(7px) rotate(1.6deg)}
  60%{transform:translateX(-4px) rotate(-.9deg)}
  82%{transform:translateX(3px) rotate(.5deg)}
}
.jg-is-error .jg-blush{opacity:0}


.jg-is-success .jg-jelly{animation:jg-hop .95s cubic-bezier(.3,1.2,.4,1) both}
.jg-is-success .jg-jelly.jg-b{animation-delay:.07s}
.jg-is-success .jg-jelly.jg-c{animation-delay:.14s}
.jg-is-success .jg-jelly.jg-d{animation-delay:.21s}
@keyframes jg-hop{
  0%{transform:translateY(0) scale(1,1)}
  16%{transform:translateY(0) scale(1.12,.84)}
  46%{transform:translateY(-36px) scale(.93,1.09)}
  74%{transform:translateY(0) scale(1.07,.93)}
  100%{transform:translateY(0) scale(1,1)}
}
.jg-is-success .jg-shadow-el{transform:scale(.72);opacity:.5}
.jg-is-success .jg-blush{opacity:1}
.jg-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.jg-confetti i{position:absolute;top:-8%;width:8px;height:11px;border-radius:2px;animation:jg-fall linear forwards}
@keyframes jg-fall{
  0%{transform:translateY(0) rotate(0);opacity:1}
  100%{transform:translateY(340px) rotate(720deg);opacity:0}
}


.jg-bubble{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);
  max-width:84%;padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:600;
  background:var(--card);color:var(--ink);box-shadow:0 8px 22px rgba(15,18,35,.14);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:3;
}
.jg-bubble::after{
  content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;
  background:var(--card);transform:translateX(-50%) rotate(45deg);border-radius:0 0 3px 0;
}
.jg-bubble span{display:inline-block;animation:jg-pop .34s cubic-bezier(.34,1.56,.64,1)}
@keyframes jg-pop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.jg-is-error .jg-bubble{color:var(--danger)}


.customer-jelly .jg-stage {margin-bottom:0}
.customer-jelly .jg-bubble {max-width:92%;font-size:12px;line-height:1.6}
@media(max-width:760px) {
  .customer-auth-intro.customer-jelly {padding:22px; width:100%; max-width:420px; justify-self:center}
  .customer-jelly h1 {font-size:26px}
}
@media(max-width:380px) {
  .customer-jelly .jg-bubble {font-size:11px; padding:7px 10px}
}
@media(prefers-reduced-motion:reduce) {
  .customer-jelly *, .customer-jelly *::before, .customer-jelly *::after {animation:none!important;transition:none!important}
}