/* ===== PAC.CO Store sign-in modal v2 =====================================
   The Drop sign-in screen, brought to the store: artwork rail on the left,
   form on the right; on a phone the artwork becomes a header and the form a
   sheet over it. Same markup classes as Drop (pacco-auth.js drives both), but
   scoped to .st-auth-modal and carrying its own white palette, because store
   pages never load drop.css.

   The one deliberate difference is the mark: the yellow PAC.CO character
   instead of the Drop dot logo. It looks around and hops into place on open,
   follows the pointer (and the caret while typing), shuts its eyes for the
   password, and changes face for busy / error / success. The motion is
   js/pacco-store-auth.js; this file only holds the faces it switches between.
   Keyframes are st-auth-* so nothing here can collide with a Drop name.
   ========================================================================= */

.st-auth-modal {
  --dp-ink: #111318;
  --dp-ink-soft: #3f4652;
  --dp-ink-strong: #15171b;
  --dp-grey: #747b86;
  --dp-line: #e5e7eb;
  --dp-line-strong: #cfd4dc;
  --dp-bg: #ffffff;
  --dp-bg-soft: #f7f8fa;
  --dp-on-ink: #ffffff;
  --dp-muted-soft: #8a929c;
  --dp-ring: #9aa0a8;
  --dp-red: #b42318;
  --dp-radius: 8px;
  --st-yellow: #ffc801;
  --st-face-ink: #231f20;
  --st-good: #1f9d55;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--dp-ink); line-height: 1.4; text-align: left; letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: contain;
}
/* Root layout carries the id so it outranks store.css, which still styles
   #authModal for the old sheet (z-index 100, and a <=767px flex-end/overflow
   rule) — that would put the modal under the header and break the phone sheet. */
#authModal.st-auth-modal {
  position: fixed; z-index: 1200; inset: 0; display: none; place-items: center;
  /* Optically centred, as on Drop: the extra top padding drops the panel. */
  padding: 62px 18px 18px; margin: 0; overflow: hidden;
  background: rgba(17, 19, 24, .42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 1; visibility: visible;
  /* Scrim and artwork never pan the page behind; the form is its own scroll
     container, so touches inside it still scroll it. */
  touch-action: none;
}
#authModal.st-auth-modal[hidden] { display: none !important; }
#authModal.st-auth-modal.open { display: grid !important; z-index: 1200; }
.st-auth-modal *, .st-auth-modal *::before, .st-auth-modal *::after { box-sizing: border-box; }
/* Store base.css dims every disabled button to .55 and sets its own button
   reset; the modal keeps the Drop values instead. */
.st-auth-modal button { font: inherit; -webkit-tap-highlight-color: transparent; }
.st-auth-modal h2, .st-auth-modal h3, .st-auth-modal p { font-family: inherit; text-transform: none; }

.st-auth-modal .dp-auth-panel {
  position: relative; display: flex; overflow: hidden;
  width: min(914px, 100%); min-height: min(604px, 84vh); max-height: min(680px, 88vh);
  border: 1px solid var(--dp-line); border-radius: var(--dp-radius);
  background: var(--dp-bg);
  box-shadow: 0 26px 70px rgba(18, 22, 30, .26);
}

/* ── Artwork rail ─────────────────────────────────────────────────────────── */
.st-auth-modal .dp-auth-art { position: relative; flex: 1 1 auto; min-width: 0; align-self: stretch; background: var(--dp-ink-strong); overflow: hidden; }
.st-auth-modal .dp-auth-art[data-empty="true"] { display: none; }
.st-auth-modal .dp-auth-art-stack { position: absolute; inset: 0; overflow: hidden; }
.st-auth-modal .dp-auth-art-img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center; display: block; opacity: 0;
  transition: opacity .9s ease;
}
.st-auth-modal .dp-auth-art-img.is-on { opacity: 1; }
.st-auth-modal .dp-auth-art-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.01) 36%, rgba(0,0,0,.52) 100%);
}
.st-auth-modal .dp-auth-art-copy { position: absolute; left: 26px; right: 26px; bottom: 24px; display: grid; gap: 8px; }
/* pre-line so a two-line headline set in Studio breaks where it was broken. */
.st-auth-modal .dp-auth-art-title { color: #fff; font-size: 26px; font-weight: 900; line-height: 1.12; letter-spacing: -.5px; white-space: pre-line; }
.st-auth-modal .dp-auth-art-caption { color: rgba(255,255,255,.8); font-size: 12.5px; line-height: 1.5; max-width: 300px; }
.st-auth-modal .dp-auth-art-title[hidden], .st-auth-modal .dp-auth-art-caption[hidden] { display: none; }

/* ── Form column ──────────────────────────────────────────────────────────── */
.st-auth-modal .dp-auth-form {
  position: relative; flex: 0 0 494px; max-width: 100%; min-width: 0;
  display: flex; flex-direction: column;
  padding: 30px 42px 24px; background: var(--dp-bg);
  overflow-x: hidden; overflow-y: auto;
}
.st-auth-modal .dp-auth-panel .auth-view { flex-direction: column; flex: 1; min-height: 0; padding: 18px 0 0; }
.st-auth-modal .dp-auth-close {
  position: absolute; right: 16px; top: 16px; z-index: 2;
  width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--dp-line-strong); border-radius: 6px;
  background: var(--dp-bg-soft); color: var(--dp-grey);
  font-size: 13px; line-height: 1; cursor: pointer;
  transition: border-color .14s ease, color .14s ease;
}
.st-auth-modal .dp-auth-close:hover { border-color: var(--dp-ink); color: var(--dp-ink); }
.st-auth-modal .dp-auth-title { margin: 0; text-align: center; font-size: 29px; font-weight: 900; line-height: 1.2; letter-spacing: -.8px; color: var(--dp-ink); }
.st-auth-modal .dp-auth-sub { margin: 5px 0 0; text-align: center; font-size: 13.5px; line-height: 1.4; color: var(--dp-grey); }

.st-auth-modal .dp-auth-notice {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 16px 18px 0; padding: 13px 14px;
  border: 1px solid; border-radius: 6px;
  animation: st-auth-banner .25s ease both;
}
.st-auth-modal .dp-auth-notice[hidden] { display: none; }
.st-auth-modal .dp-auth-notice-icon {
  width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px;
  display: grid; place-items: center;
  border: 1.5px solid currentColor; border-radius: 50%;
  font-size: 12px; font-weight: 800; line-height: 1;
}
.st-auth-modal .dp-auth-notice-copy { min-width: 0; }
.st-auth-modal .dp-auth-notice-title { margin-bottom: 3px; font-size: 13px; font-weight: 800; }
.st-auth-modal .dp-auth-notice-text { font-size: 12px; font-weight: 500; line-height: 1.45; }
.st-auth-modal .dp-auth-notice-text[hidden] { display: none; }
.st-auth-modal .dp-auth-notice.is-error { border-color: #f2b8b5; background: #fff8f7; color: var(--dp-red); }
.st-auth-modal .dp-auth-notice.is-error .dp-auth-notice-text { color: #7a271a; }
.st-auth-modal .dp-auth-notice.is-success { border-color: #a9dfc2; background: #f4fbf7; color: #16794a; }
.st-auth-modal .dp-auth-notice.is-success .dp-auth-notice-text { color: #1d6b41; }
.st-auth-modal .dp-auth-notice.is-warning { border-color: #ead08a; background: #fff8e8; color: #9a6700; }
.st-auth-modal .dp-auth-notice.is-warning .dp-auth-notice-text { color: #7a5200; }
.st-auth-modal .dp-auth-notice.is-info { border-color: #b2ddff; background: #f4f9ff; color: #175cd3; }
.st-auth-modal .dp-auth-notice.is-info .dp-auth-notice-text { color: #17507d; }

.st-auth-modal form { margin: 0; }
.st-auth-modal .dp-auth-field { position: relative; display: grid; gap: 6px; margin: 0 0 16px; color: var(--dp-ink-soft); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: normal; }
.st-auth-modal .dp-auth-field input {
  width: 100%; min-height: 40px; margin: 0; padding: 6px 2px;
  border: 0; border-bottom: 1.5px solid var(--dp-line-strong); border-radius: 0;
  background: none; box-shadow: none; color: var(--dp-ink); font-size: 14.5px; font-weight: 400;
  -webkit-appearance: none; appearance: none;
}
.st-auth-modal .dp-auth-field input:focus { outline: none; border-bottom-color: var(--dp-ink); box-shadow: none; }
.st-auth-modal .dp-auth-field input::placeholder { color: var(--dp-muted-soft); opacity: 1; }
.st-auth-modal .dp-auth-field-pw input { padding-right: 34px; }
.st-auth-modal .dp-auth-field input:-webkit-autofill,
.st-auth-modal .dp-auth-field input:-webkit-autofill:hover,
.st-auth-modal .dp-auth-field input:-webkit-autofill:focus,
.st-auth-modal .dp-auth-field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--dp-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--dp-bg) inset !important;
  -webkit-text-fill-color: var(--dp-ink) !important;
  caret-color: var(--dp-ink);
  transition: background-color 100000s ease-in-out 0s;
}
.st-auth-modal .dp-auth-eye {
  position: absolute; right: 4px; bottom: 4px; width: 30px; height: 30px;
  display: grid; place-items: center; padding: 0;
  border: 0; background: none; color: var(--dp-grey); cursor: pointer;
}
.st-auth-modal .dp-auth-eye svg { width: 19px; height: 19px; }
.st-auth-modal .dp-auth-eye.is-on { color: var(--dp-ink); }

.st-auth-modal .dp-auth-remember { position: relative; display: flex; align-items: center; gap: 9px; margin: 2px 0 18px; font-size: 12.5px; font-weight: 400; color: var(--dp-ink-soft); cursor: pointer; }
.st-auth-modal .dp-auth-remember input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.st-auth-modal .dp-auth-check { display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 16px; border: 1.5px solid var(--dp-line-strong); border-radius: 4px; background: var(--dp-bg-soft); }
.st-auth-modal .dp-auth-remember input:checked + .dp-auth-check {
  border-color: var(--dp-ink);
  background: var(--dp-ink) no-repeat center/10px 10px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.st-auth-modal .dp-auth-remember input:focus-visible + .dp-auth-check { outline: 2px solid var(--dp-ring); outline-offset: 2px; }

.st-auth-modal .dp-auth-submit,
.st-auth-modal .dp-google-button {
  width: 100%; min-height: 46px; margin: 0; padding: 0 16px; border-radius: 24px;
  font-size: 14px; font-weight: 800; letter-spacing: normal; text-transform: none; cursor: pointer;
  box-shadow: none; transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.st-auth-modal .dp-auth-submit {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid var(--dp-ink); background: var(--dp-ink); color: var(--dp-on-ink);
}
.st-auth-modal .dp-auth-submit:active, .st-auth-modal .dp-google-button:active { transform: scale(.985); }
.st-auth-modal .dp-auth-submit[disabled] { opacity: .85; cursor: default; }
.st-auth-modal .dp-google-button {
  margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--dp-line-strong); background: var(--dp-bg-soft); color: var(--dp-ink);
}
.st-auth-modal .dp-google-button:hover { border-color: #b9c0ca; }
.st-auth-modal .dp-google-icon { width: 17px; height: 17px; flex: 0 0 17px; display: block; }
.st-auth-modal .dp-auth-spinner { width: 15px; height: 15px; animation: st-auth-spin .8s linear infinite; }

.st-auth-modal .dp-auth-swap { margin: auto 0 0; padding-top: 30px; text-align: center; font-size: 12.5px; color: var(--dp-grey); }
.st-auth-modal .dp-auth-swap button { display: inline; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--dp-ink); cursor: pointer; text-decoration: none; }
.st-auth-modal .dp-auth-swap button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Per-field errors: a red rule under the field and one line beneath it. */
.st-auth-modal .dp-auth-field.has-error input { border-bottom-color: var(--dp-red); }
.st-auth-modal .dp-auth-field-error { display: flex; align-items: center; gap: 6px; margin: 7px 0 14px; color: var(--dp-red); animation: st-auth-banner .25s ease both; }
.st-auth-modal .dp-auth-field-error svg { width: 12px; height: 12px; flex: none; }
.st-auth-modal .dp-auth-field-error span { font-size: 11.5px; color: var(--dp-red); font-weight: 600; }

/* ── The character mark ───────────────────────────────────────────────────── */
.st-auth-modal .dp-auth-mark { display: flex; justify-content: center; padding: 0 0 10px; overflow: visible; position: relative; z-index: 1; }
.st-char { display: block; width: 50px; height: 52px; overflow: visible; }
/* The logo can be poked ("> <" + small bounce); the success one cannot. */
.st-auth-modal .dp-auth-mark .st-char { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.st-auth-modal .dp-auth-success-mark .st-char { cursor: default; }
.st-char .st-eye { stroke: var(--st-face-ink, #231f20); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.st-char .st-eye-dot { stroke: none; fill: var(--st-face-ink, #231f20); }
/* Every face sits on top of the others; the one for the current mood is the
   only one shown. A face swaps with a small overshoot, so moods pop rather
   than fade. transform-box keeps each glyph scaling around its own middle. */
.st-char .st-eye, .st-char .st-char-q, .st-char .st-char-sweat, .st-char .st-char-cheeks {
  transform-box: fill-box; transform-origin: center;
  transition: opacity .16s ease, transform .42s cubic-bezier(.34, 1.56, .64, 1);
}
.st-char .st-eye-happy, .st-char .st-eye-upset, .st-char .st-eye-shut { opacity: 0; transform: scale(.35); }
.st-char .st-char-cheeks { opacity: 0; transform: scale(.6); }
.st-char .st-char-q { opacity: 0; transform: translateY(40px) scale(.4) rotate(-20deg); fill: var(--st-face-ink, #231f20); font: 900 210px/1 -apple-system, "Segoe UI", Arial, sans-serif; }
.st-char .st-char-sweat { opacity: 0; transform: translateY(-30px) scale(.5); }

.st-char[data-face="happy"] .st-eye-dot,
.st-char[data-face="upset"] .st-eye-dot,
.st-char[data-face="shut"] .st-eye-dot { opacity: 0; transform: scale(.3); }
.st-char[data-face="happy"] .st-eye-happy,
.st-char[data-face="upset"] .st-eye-upset,
.st-char[data-face="shut"] .st-eye-shut { opacity: 1; transform: none; }
/* Peeking: the password is shown, so one eye opens again. */
.st-char[data-face="peek"] .st-eye-l .st-eye-dot { opacity: 0; transform: scale(.3); }
.st-char[data-face="peek"] .st-eye-l .st-eye-shut { opacity: 1; transform: none; }
.st-char[data-face="happy"] .st-char-cheeks { opacity: .6; transform: none; }
.st-char[data-face="upset"] .st-char-sweat { opacity: 1; transform: none; animation: st-char-sweat 1.5s .25s ease-in both; }
.st-char[data-face="confused"] .st-char-q { opacity: 1; transform: none; }
.st-char[data-face="confused"] .st-eye-r .st-eye-dot { transform: scale(.72); }

@keyframes st-char-sweat {
  0% { transform: none; opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(70px); opacity: 0; }
}

/* ── Entrance cascade ─────────────────────────────────────────────────────
   Same shape as Drop: the panel opens at form width and widens to reveal the
   artwork. The character's own entrance (pop in, look around, hop up) runs
   in JS and lands at ~1.25s, so the text rises in behind it from there. */
@keyframes st-auth-open { 0%, 36% { width: 494px; } 100% { width: min(914px, 100%); } }
@keyframes st-auth-close {
  0% { opacity: 1; transform: scale(1); width: min(914px, 100%); }
  55% { opacity: 1; transform: scale(1); width: 494px; }
  100% { opacity: 0; transform: scale(.95); width: 494px; }
}
@keyframes st-auth-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes st-auth-pan { from { transform: translateX(-7%) scale(1.12); } to { transform: none; } }
@keyframes st-auth-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); } 35% { transform: translateX(5px); }
  55% { transform: translateX(-3px); } 75% { transform: translateX(2px); }
}
@keyframes st-auth-banner { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes st-auth-spin { to { transform: rotate(360deg); } }
@keyframes st-auth-drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes st-auth-bar { from { width: 0; } to { width: 100%; } }

/* No `both` on the panel: the real width is the rule above; the keyframes only
   borrow it while they run (a paused timeline must not freeze it narrow). */
.st-auth-modal.is-entering .dp-auth-panel { animation: st-auth-open 1.05s cubic-bezier(.5, 0, .15, 1); }
.st-auth-modal.is-closing .dp-auth-panel { animation: st-auth-close .5s cubic-bezier(.5, 0, .25, 1) both; }
.st-auth-modal.is-entering .dp-auth-art-stack { animation: st-auth-pan 1.3s .6s cubic-bezier(.22, .8, .16, 1) both; }
/* Until the script takes the mark it simply fades in where it sits. */
.st-auth-modal.is-entering .dp-auth-mark:not(.is-live) { animation: st-auth-rise .5s .2s cubic-bezier(.2, .85, .2, 1) both; }
.st-auth-modal.is-entering .dp-auth-title { animation: st-auth-rise .45s 1.25s cubic-bezier(.2, .85, .2, 1) both; }
.st-auth-modal.is-entering .dp-auth-sub { animation: st-auth-rise .45s 1.31s cubic-bezier(.2, .85, .2, 1) both; }
.st-auth-modal.is-entering .auth-view:not([style*="none"]) .dp-auth-field:nth-of-type(1) { animation: st-auth-rise .45s 1.37s cubic-bezier(.2, .85, .2, 1) both; }
.st-auth-modal.is-entering .auth-view:not([style*="none"]) .dp-auth-field:nth-of-type(2) { animation: st-auth-rise .45s 1.43s cubic-bezier(.2, .85, .2, 1) both; }
.st-auth-modal.is-entering .auth-view:not([style*="none"]) .dp-auth-field:nth-of-type(3) { animation: st-auth-rise .45s 1.49s cubic-bezier(.2, .85, .2, 1) both; }
.st-auth-modal.is-entering .auth-view:not([style*="none"]) .dp-auth-remember { animation: st-auth-rise .45s 1.49s cubic-bezier(.2, .85, .2, 1) both; }
.st-auth-modal.is-entering .auth-view:not([style*="none"]) .dp-auth-submit { animation: st-auth-rise .45s 1.55s cubic-bezier(.2, .85, .2, 1) both; }
.st-auth-modal.is-entering .auth-view:not([style*="none"]) .dp-google-button { animation: st-auth-rise .45s 1.61s cubic-bezier(.2, .85, .2, 1) both; }
.st-auth-modal.is-entering .auth-view:not([style*="none"]) .dp-auth-swap { animation: st-auth-rise .45s 1.67s cubic-bezier(.2, .85, .2, 1) both; }

/* Log In <-> Create Account is a swap, not a cold open: same entrance, fast. */
.st-auth-modal .dp-auth-panel.is-swapping .auth-view:not([style*="none"]) .dp-auth-field:nth-of-type(1) { animation: st-auth-rise .3s 0s cubic-bezier(.2, .85, .2, 1) both; }
.st-auth-modal .dp-auth-panel.is-swapping .auth-view:not([style*="none"]) .dp-auth-field:nth-of-type(2) { animation: st-auth-rise .3s .05s cubic-bezier(.2, .85, .2, 1) both; }
.st-auth-modal .dp-auth-panel.is-swapping .auth-view:not([style*="none"]) .dp-auth-field:nth-of-type(3) { animation: st-auth-rise .3s .1s cubic-bezier(.2, .85, .2, 1) both; }
.st-auth-modal .dp-auth-panel.is-swapping .auth-view:not([style*="none"]) .dp-auth-remember { animation: st-auth-rise .3s .1s cubic-bezier(.2, .85, .2, 1) both; }
.st-auth-modal .dp-auth-panel.is-swapping .auth-view:not([style*="none"]) .dp-auth-submit { animation: st-auth-rise .3s .15s cubic-bezier(.2, .85, .2, 1) both; }
.st-auth-modal .dp-auth-panel.is-swapping .auth-view:not([style*="none"]) .dp-google-button { animation: st-auth-rise .3s .2s cubic-bezier(.2, .85, .2, 1) both; }
.st-auth-modal .dp-auth-panel.is-swapping .auth-view:not([style*="none"]) .dp-auth-swap { animation: st-auth-rise .3s .25s cubic-bezier(.2, .85, .2, 1) both; }

.st-auth-modal.is-open .dp-auth-panel.is-shaking,
.st-auth-modal .dp-auth-panel.is-shaking { animation: st-auth-shake .42s ease !important; }
.st-auth-modal .dp-auth-panel.is-shaking .dp-auth-art { animation: none; }

/* ── Success takeover ─────────────────────────────────────────────────────
   pacco-auth.js swaps the form for .dp-auth-success; the store script puts a
   second character in it (happy face, hop down from the logo slot, bounce,
   sparkles, green tick) in place of Drop's green disc. */
.st-auth-modal .dp-auth-success { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 232px; padding-bottom: 26px; }
.st-auth-modal .dp-auth-success-mark { position: relative; width: 92px; height: 96px; }
.st-auth-modal .dp-auth-success-mark > svg:not(.st-char) { display: none; }
.st-auth-modal .dp-auth-success-halo { display: none; }
.st-auth-modal .dp-auth-success-mark .st-char { width: 92px; height: 96px; position: relative; z-index: 1; }
.st-auth-modal .st-success-shadow {
  position: absolute; left: 50%; bottom: -10px; width: 64px; height: 10px; margin-left: -34px;
  border-radius: 50%; background: rgba(17, 19, 24, .16); filter: blur(3px);
}
.st-auth-modal .st-success-tick {
  position: absolute; z-index: 2; right: -6px; bottom: 2px; width: 30px; height: 30px;
  display: grid; place-items: center; border: 3px solid var(--dp-bg); border-radius: 50%;
  background: var(--st-good); transform: scale(0);
}
.st-auth-modal .st-success-tick svg { width: 14px; height: 14px; }
.st-auth-modal .st-success-tick path { stroke-dasharray: 26; stroke-dashoffset: 26; }
.st-auth-modal .st-success-tick.is-on { animation: st-auth-tick .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.st-auth-modal .st-success-tick.is-on path { animation: st-auth-draw .32s .22s ease forwards; }
@keyframes st-auth-tick { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
@keyframes st-auth-draw { to { stroke-dashoffset: 0; } }
.st-auth-modal .st-spark {
  position: absolute; z-index: 0; left: 50%; top: 46%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--st-yellow); pointer-events: none; opacity: 0;
}
.st-auth-modal .st-spark.is-ink { background: var(--dp-ink); width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.st-auth-modal .st-spark.is-star { background: none; width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.st-auth-modal .st-spark.is-star::before {
  content: ""; position: absolute; inset: 0; background: var(--st-yellow);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.st-auth-modal .dp-auth-success h3 { margin: 0; text-align: center; font-size: 27px; font-weight: 900; line-height: 1.2; letter-spacing: -.8px; color: var(--dp-ink); animation: st-auth-drop .5s 1.05s cubic-bezier(.2, .9, .2, 1) both; }
.st-auth-modal .dp-auth-success p { margin: 0; text-align: center; font-size: 13px; color: var(--dp-grey); animation: st-auth-drop .5s 1.18s ease both; }
.st-auth-modal .dp-auth-success-bar { width: 180px; height: 3px; border-radius: 2px; background: var(--dp-line); overflow: hidden; animation: st-auth-drop .5s 1.3s ease both; }
.st-auth-modal .dp-auth-success-bar i { display: block; height: 100%; background: var(--dp-ink); animation: st-auth-bar 1.5s 1.4s ease-out both; }

/* ── Phone: a full-screen sheet over the artwork ────────────────────────── */
@keyframes st-auth-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes st-auth-sheet-down { from { transform: none; } to { transform: translateY(100%); } }
@keyframes st-auth-hero-follow {
  from { transform: translateY(210px) scale(1.04); opacity: 0; filter: blur(7px); }
  45% { opacity: .7; filter: blur(4px); }
  to { transform: none; opacity: 1; filter: blur(0); }
}
@keyframes st-auth-hero-down {
  from { transform: none; opacity: 1; filter: blur(0); }
  45% { opacity: .8; filter: blur(4px); }
  to { transform: translateY(210px) scale(1.04); opacity: 0; filter: blur(7px); }
}
@media (max-width: 720px) {
  #authModal.st-auth-modal { padding: 0; align-items: end; }
  .st-auth-modal .dp-auth-panel { flex-direction: column; width: 100%; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .st-auth-modal .dp-auth-art { flex: 1 1 auto; min-height: 210px; }
  .st-auth-modal .dp-auth-art-copy { bottom: 42px; }
  .st-auth-modal .dp-auth-form {
    flex: 0 0 auto; max-height: 74dvh; margin-top: -26px; padding: 24px 22px calc(34px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.18);
  }
  .st-auth-modal .dp-auth-panel .auth-view { flex: 0 0 auto; }
  .st-auth-modal .dp-auth-swap { margin-top: 0; padding-top: 30px; }
  .st-auth-modal .dp-auth-art[data-empty="true"] + .dp-auth-form { margin-top: 0; border-radius: 0; box-shadow: none; flex: 1 1 auto; max-height: none; }
  .st-auth-modal .dp-auth-title { font-size: 25px; }
  /* The width reveal is a desktop gesture; the phone sheet slides instead. */
  .st-auth-modal.is-entering .dp-auth-panel,
  .st-auth-modal.is-closing .dp-auth-panel { animation: none; }
  .st-auth-modal.is-entering .dp-auth-art { animation: st-auth-hero-follow .85s .34s cubic-bezier(.2, .85, .2, 1) both; }
  .st-auth-modal.is-entering .dp-auth-form { animation: st-auth-sheet-up .68s cubic-bezier(.2, .85, .2, 1) both; }
  .st-auth-modal.is-closing .dp-auth-art { animation: st-auth-hero-down .44s cubic-bezier(.5, 0, .25, 1) both; }
  .st-auth-modal.is-closing .dp-auth-form { animation: st-auth-sheet-down .5s .1s cubic-bezier(.5, 0, .25, 1) both; }
  .st-auth-modal .dp-auth-panel.is-shaking .dp-auth-art,
  .st-auth-modal .dp-auth-panel.is-shaking .dp-auth-form { animation: none; }
  /* The success hop needs room above it, so the sheet takes the height. */
  .st-auth-modal .dp-auth-panel.is-success .dp-auth-art { flex: 0 0 34%; min-height: 0; }
  .st-auth-modal .dp-auth-panel.is-success .dp-auth-form { flex: 1 1 auto; max-height: none; }
}

/* Page behind stays put while the modal is up (the store body lock only
   counts .modal elements, which this is not). */
html.st-auth-lock, html.st-auth-lock body { overflow: hidden !important; }

/* Every entrance above holds its first frame until the timeline runs, so
   under reduced motion the whole set is switched off rather than shortened. */
@media (prefers-reduced-motion: reduce) {
  .st-auth-modal.is-entering .dp-auth-panel,
  .st-auth-modal.is-closing .dp-auth-panel,
  .st-auth-modal.is-entering .dp-auth-art,
  .st-auth-modal.is-closing .dp-auth-art,
  .st-auth-modal.is-entering .dp-auth-art-stack,
  .st-auth-modal.is-entering .dp-auth-form,
  .st-auth-modal.is-closing .dp-auth-form,
  .st-auth-modal.is-entering .dp-auth-mark,
  .st-auth-modal.is-entering .dp-auth-title,
  .st-auth-modal.is-entering .dp-auth-sub,
  .st-auth-modal .dp-auth-panel.is-swapping .auth-view *,
  .st-auth-modal.is-entering .auth-view *,
  .st-auth-modal .dp-auth-panel.is-shaking,
  .st-auth-modal .dp-auth-success h3,
  .st-auth-modal .dp-auth-success p,
  .st-auth-modal .dp-auth-success-bar { animation: none !important; }
  .st-auth-modal .dp-auth-art-img { transition: none; }
  .st-char .st-eye, .st-char .st-char-q, .st-char .st-char-sweat, .st-char .st-char-cheeks { transition: none; }
  .st-char[data-face="upset"] .st-char-sweat { animation: none; }
  .st-auth-modal .st-success-tick { transform: none; }
  .st-auth-modal .st-success-tick path { stroke-dashoffset: 0; }
}