/* --- signup product mark: Totaly P / ring-swoosh (not legacy T or star) --- */
html body.is-auth-page .auth-logo.auth-logo--mark {
  width: 88px !important;
  height: 88px !important;
  max-width: 88px !important;
  margin: 0 auto 14px !important;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  filter: none;
}
html body.is-auth-page .auth-card--glass .auth-logo.auth-logo--mark {
  width: 88px !important;
  height: 88px !important;
}

.auth-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  color: #D2D2D2;
  /* Scale the whole mark (svg + shimmer) together — scaling only the
     svg left a smaller bright shimmer “tiny one” sitting in front. */
  transform-origin: 50% 52%;
  animation: auth-mark-idle 7.2s ease-in-out infinite;
}
.auth-mark--btn {
  width: 20px;
  height: 20px;
  color: #1A1A1A;
  flex: 0 0 20px;
  animation-duration: 8s;
}
.auth-mark-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(210, 210, 210, 0.22));
}
.auth-mark--btn .auth-mark-svg {
  filter: none;
}
.auth-mark-wings {
  animation: auth-mark-wings 5.4s ease-in-out infinite;
}
.auth-mark-body {
  animation: auth-mark-body 5.4s ease-in-out infinite;
}
.auth-mark-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Softer / wider band — no hot speck that reads as a tiny front copy */
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 22%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0) 78%
  );
  background-size: 240% 100%;
  background-position: -140% 0;
  animation: auth-mark-shimmer 6.8s ease-in-out infinite;
  -webkit-mask-image: url('/static/brand-totaly/logo-totaly-icon.svg?v=v42.6.31-p-mark');
          mask-image: url('/static/brand-totaly/logo-totaly-icon.svg?v=v42.6.31-p-mark');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  mix-blend-mode: screen;
}
.auth-mark--btn .auth-mark-shimmer {
  mix-blend-mode: multiply;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 22%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 78%
  );
  background-size: 240% 100%;
}

.auth-mark--busy {
  animation: auth-mark-busy 1.8s ease-in-out infinite;
}
.auth-mark--busy .auth-mark-svg {
  filter: drop-shadow(0 0 16px rgba(230, 230, 230, 0.4));
}
.auth-mark--busy .auth-mark-wings {
  animation: auth-mark-wings 1.2s ease-in-out infinite;
}
.auth-mark--busy .auth-mark-shimmer {
  animation-duration: 1.2s;
}

/* Breathe, then settle and hold before the next cycle */
@keyframes auth-mark-idle {
  0%, 12%  { transform: scale(1); filter: drop-shadow(0 0 8px rgba(210, 210, 210, 0.16)); }
  38%      { transform: scale(1.04); filter: drop-shadow(0 0 16px rgba(230, 230, 230, 0.34)); }
  52%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(210, 210, 210, 0.2)); }
}
@keyframes auth-mark-busy {
  0%, 100% { transform: scale(0.96) rotate(-4deg); }
  50%      { transform: scale(1.07) rotate(4deg); }
}
@keyframes auth-mark-wings {
  0%, 100% { opacity: 0.58; }
  50%      { opacity: 1; }
}
@keyframes auth-mark-body {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 1; }
}
/* Sweep once, then rest on the settled mark before looping */
@keyframes auth-mark-shimmer {
  0%        { background-position: -140% 0; opacity: 1; }
  42%       { background-position: 140% 0; opacity: 1; }
  48%, 100% { background-position: 140% 0; opacity: 0; }
}

html body.is-auth-page .auth-primary-btn.auth-primary-btn--mark {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
html body.is-auth-page .auth-primary-btn--mark .auth-primary-btn-label {
  display: inline-block;
}

.auth-view--signup .auth-card {
  position: relative;
  animation: auth-card-in 560ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.auth-view--signup .auth-card > * {
  position: relative;
  z-index: 1;
}
.auth-view--signup .auth-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    transparent 42%,
    rgba(255, 255, 255, 0.035) 50%,
    transparent 58%
  );
  background-size: 260% 100%;
  animation: auth-card-sheen 9s ease-in-out infinite;
}
.auth-view--signup .auth-logo,
.auth-view--signup .auth-title,
.auth-view--signup .auth-sub,
.auth-view--signup .auth-oauth-list,
.auth-view--signup .auth-divider,
.auth-view--signup .auth-form,
.auth-view--signup .auth-foot {
  animation: auth-rise 540ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.auth-view--signup .auth-title { animation-delay: 40ms; }
.auth-view--signup .auth-sub { animation-delay: 70ms; }
.auth-view--signup .auth-oauth-list { animation-delay: 100ms; }
.auth-view--signup .auth-divider { animation-delay: 130ms; }
.auth-view--signup .auth-form { animation-delay: 150ms; }
.auth-view--signup .auth-foot { animation-delay: 240ms; }
.auth-view--signup .auth-form > .auth-field:nth-child(1) { animation: auth-rise 500ms cubic-bezier(0.22, 0.61, 0.36, 1) 180ms both; }
.auth-view--signup .auth-form > .auth-field:nth-child(2) { animation: auth-rise 500ms cubic-bezier(0.22, 0.61, 0.36, 1) 220ms both; }
.auth-view--signup .auth-form > .auth-field:nth-child(3) { animation: auth-rise 500ms cubic-bezier(0.22, 0.61, 0.36, 1) 260ms both; }
.auth-view--signup .auth-form > .auth-field:nth-child(4) { animation: auth-rise 500ms cubic-bezier(0.22, 0.61, 0.36, 1) 300ms both; }
.auth-view--signup .auth-form > .auth-field:nth-child(5) { animation: auth-rise 500ms cubic-bezier(0.22, 0.61, 0.36, 1) 340ms both; }
.auth-view--signup .auth-form > .auth-primary-btn { animation: auth-rise 500ms cubic-bezier(0.22, 0.61, 0.36, 1) 390ms both; }

.auth-view--signup .auth-field input {
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.auth-view--signup .auth-field input:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

@keyframes auth-card-in {
  0%   { opacity: 0; transform: translateY(10px) scale(0.985); }
  100% { opacity: 1; transform: none; }
}
@keyframes auth-rise {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}
@keyframes auth-card-sheen {
  0%   { background-position: -80% 0; }
  100% { background-position: 180% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-mark,
  .auth-mark-svg,
  .auth-mark-wings,
  .auth-mark-body,
  .auth-mark-shimmer,
  .auth-view--signup .auth-card,
  .auth-view--signup .auth-card::after,
  .auth-view--signup .auth-logo,
  .auth-view--signup .auth-title,
  .auth-view--signup .auth-sub,
  .auth-view--signup .auth-oauth-list,
  .auth-view--signup .auth-divider,
  .auth-view--signup .auth-form,
  .auth-view--signup .auth-foot,
  .auth-view--signup .auth-form > .auth-field,
  .auth-view--signup .auth-form > .auth-primary-btn {
    animation: none !important;
  }
}
/* --- end signup product mark --- */