/*
 * DropDry: brand panel and shared micro-interactions for sign-in / sign-up.
 * Loaded after auth-mobile.css. Only adds visuals; form logic lives in each view.
 */

:root {
  --dd-brand-primary: #0052a3;
  --dd-brand-secondary: #0069d1;
  --dd-brand-accent: #22b8f0;
  --dd-brand-mint: #2dd4bf;
  --dd-brand-ink: #0f172a;
  --dd-brand-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Brand panel (replaces the side photo) ---------- */
.dd-brand-panel {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  padding: 2.5rem 3rem;
  flex-direction: column;
  justify-content: space-between;
  color: #ffffff;
  isolation: isolate;
  background: linear-gradient(130deg, #003d7a, var(--dd-brand-primary), var(--dd-brand-secondary), #0891b2, var(--dd-brand-primary));
  background-size: 300% 300%;
  animation: ddBrandGradient 14s ease infinite;
}

@keyframes ddBrandGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.dd-brand-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  z-index: -1;
  animation: ddBrandBlob 16s ease-in-out infinite alternate;
}

.dd-brand-blob--a { width: 380px; height: 380px; background: #38bdf8; top: -120px; right: -80px; }
.dd-brand-blob--b { width: 320px; height: 320px; background: #2dd4bf; bottom: -100px; left: -60px; animation-delay: -8s; opacity: 0.35; }

@keyframes ddBrandBlob {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-40px, 30px) scale(1.15); }
}

.dd-brand-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.14);
  z-index: -1;
  animation: ddBrandRing 9s ease-in-out infinite;
}

.dd-brand-ring--a { width: 420px; height: 420px; top: 18%; right: -180px; }
.dd-brand-ring--b { width: 200px; height: 200px; bottom: 12%; left: 8%; animation-delay: -4s; }

@keyframes ddBrandRing {
  0%, 100% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.12) rotate(25deg); }
}

.dd-brand-bubbles {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.dd-brand-bubble {
  position: absolute;
  bottom: -60px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08) 60%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  animation: ddBrandRise linear infinite;
}

@keyframes ddBrandRise {
  0% { transform: translate(0, 0) scale(0.8); opacity: 0; }
  10% { opacity: 0.9; }
  50% { transform: translate(var(--drift, 30px), -55vh) scale(1); }
  90% { opacity: 0.6; }
  100% { transform: translate(calc(var(--drift, 30px) * -1), -110vh) scale(1.1); opacity: 0; }
}

.dd-brand-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.dd-brand-logo img {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
}

.dd-brand-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background 0.3s ease, transform 0.3s var(--dd-brand-ease);
}

.dd-brand-back:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
  transform: translateX(-3px);
}

.dd-brand-body { max-width: 30rem; }

.dd-brand-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a5f3fc;
  margin-bottom: 0.9rem;
}

.dd-brand-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dd-brand-mint);
  animation: ddBrandPulse 2s infinite;
}

@keyframes ddBrandPulse {
  0% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(45, 212, 191, 0); }
  100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); }
}

.dd-brand-title {
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.dd-brand-title .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  animation: ddBrandWord 0.75s var(--dd-brand-ease) forwards;
  animation-delay: calc(var(--i) * 90ms + 200ms);
}

@keyframes ddBrandWord { to { opacity: 1; transform: none; } }

.dd-brand-lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.02rem;
  line-height: 1.6;
  margin-bottom: 1.6rem;
}

.dd-brand-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
  display: grid;
  gap: 0.75rem;
}

.dd-brand-benefits li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  opacity: 0;
  transform: translateX(-16px);
  animation: ddBrandSlide 0.6s var(--dd-brand-ease) forwards;
  animation-delay: calc(var(--i) * 140ms + 700ms);
}

@keyframes ddBrandSlide { to { opacity: 1; transform: none; } }

.dd-brand-benefits .dd-brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Live activity card (rotating notifications) */
.dd-brand-feed {
  position: relative;
  border-radius: 18px;
  padding: 1rem 1.1rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(0, 20, 60, 0.25);
  max-width: 24rem;
  opacity: 0;
  animation: ddBrandSlide 0.7s var(--dd-brand-ease) 1.3s forwards, ddBrandFloat 6s ease-in-out 2s infinite;
}

@keyframes ddBrandFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.dd-brand-feed__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.65rem;
}

.dd-brand-feed__live { color: #a7f3d0; }

.dd-brand-feed__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: opacity 0.35s ease, transform 0.35s var(--dd-brand-ease);
}

.dd-brand-feed__item.is-leaving { opacity: 0; transform: translateY(-10px); }
.dd-brand-feed__item.is-entering { opacity: 0; transform: translateY(10px); }

.dd-brand-feed__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #ffffff;
  background: linear-gradient(135deg, #10b981, var(--dd-brand-mint));
}

.dd-brand-feed__item strong { display: block; color: #ffffff; font-size: 0.92rem; }
.dd-brand-feed__item small { color: rgba(255, 255, 255, 0.72); }

.dd-brand-foot {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
}

/* ---------- Form micro-interactions ---------- */

/* Each step panel slides in when it becomes visible */
body.dd-auth-mobile .dd-auth-step-panel:not(.is-hidden) {
  animation: ddPanelIn 0.45s var(--dd-brand-ease);
}

@keyframes ddPanelIn {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}

/* Gentle shake when the form shows an error */
.dd-shake { animation: ddShake 0.45s ease; }

@keyframes ddShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

/* Loading spinner on any primary auth button while it is disabled by the request */
body.dd-auth-mobile .dd-auth-btn.is-loading::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: 0.25rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  animation: ddSpin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes ddSpin { to { transform: rotate(360deg); } }

/* Live validation feedback under a field */
.dd-field-feedback {
  display: block;
  min-height: 1.1rem;
  margin: -0.35rem 0 0.45rem 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  transition: color 0.25s ease;
}

.dd-field-feedback.is-ok { color: #059669; }
.dd-field-feedback.is-error { color: #dc2626; }

/* Secondary ("ghost") buttons. auth-mobile.css paints every .dd-auth-btn:not(.is-hidden) as primary
   with higher specificity, so the ghost variant never looked secondary. */
body.dd-auth-mobile .dd-auth-btn.dd-auth-btn--ghost:not(.is-hidden) {
  background: transparent !important;
  color: var(--dd-brand-primary) !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: none !important;
  margin-top: 0.6rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem !important;
}

body.dd-auth-mobile .dd-auth-btn.dd-auth-btn--ghost:not(.is-hidden):hover,
body.dd-auth-mobile #signupBackBtn.dd-auth-btn--ghost:hover {
  background: #eff6ff !important;
  color: var(--dd-brand-primary) !important;
  border-color: #93c5fd !important;
  box-shadow: none !important;
}

/* Phones: start the form near the top so the on-screen keyboard does not push it away */
@media (max-width: 575.98px) {
  body.dd-auth-signin .auth-split-row {
    align-items: flex-start !important;
    padding-top: 1.75rem;
  }
}

/* ---------- Password strength meter ---------- */
.dd-pass-meter { margin: -0.2rem 0 0.75rem; }

.dd-pass-meter__bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-bottom: 0.45rem;
}

.dd-pass-meter__bar span {
  height: 5px;
  border-radius: 5px;
  background: #e2e8f0;
  transition: background 0.35s ease, transform 0.35s var(--dd-brand-ease);
}

.dd-pass-meter[data-score="1"] .dd-pass-meter__bar span:nth-child(-n + 1) { background: #ef4444; }
.dd-pass-meter[data-score="2"] .dd-pass-meter__bar span:nth-child(-n + 2) { background: #f59e0b; }
.dd-pass-meter[data-score="3"] .dd-pass-meter__bar span:nth-child(-n + 3) { background: #10b981; }
.dd-pass-meter[data-score="4"] .dd-pass-meter__bar span:nth-child(-n + 4) { background: linear-gradient(90deg, #10b981, var(--dd-brand-mint)); }

.dd-pass-meter__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.dd-pass-meter__rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
}

.dd-pass-meter__rules li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: #64748b;
  transition: color 0.3s ease;
}

.dd-pass-meter__rules li::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  transition: all 0.3s var(--dd-brand-ease);
}

.dd-pass-meter__rules li.is-ok { color: #047857; }

.dd-pass-meter__rules li.is-ok::before {
  border-color: #10b981;
  background: #10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
  transform: scale(1.1);
}

/* ---------- Compact cookie banner on auth pages (never covers the form) ---------- */
body.dd-auth-mobile .dd-cookie-banner {
  left: auto;
  right: 16px;
  bottom: 16px;
  max-width: 380px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
}

body.dd-auth-mobile .dd-cookie-banner .dd-cookie-title { font-size: 0.9rem; margin-bottom: 4px; }
body.dd-auth-mobile .dd-cookie-banner .dd-cookie-text { font-size: 0.8rem; }
body.dd-auth-mobile .dd-cookie-banner .dd-btn { padding: 6px 10px; font-size: 0.78rem; }

/* Desktop: the banner sits over the brand panel, never over the form.
   sign-in has the panel on the right, sign-up on the left. */
@media (min-width: 992px) {
  body.dd-auth-signup .dd-cookie-banner { left: 16px; right: auto; }
  body.dd-auth-signin .dd-cookie-banner { right: 16px; left: auto; }
}

/* Tablet / mobile: reserve the banner height at the bottom so the form can scroll above it */
body.dd-auth-mobile.dd-has-cookie-banner { padding-bottom: var(--dd-cookie-space, 0px); }

@media (max-width: 767.98px) {
  body.dd-auth-mobile .dd-cookie-banner {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
    padding: 10px 12px;
  }

  body.dd-auth-mobile .dd-cookie-banner .dd-cookie-title { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .dd-brand-panel,
  .dd-brand-blob,
  .dd-brand-ring,
  .dd-brand-feed,
  .dd-brand-kicker::before,
  body.dd-auth-mobile .dd-auth-step-panel:not(.is-hidden),
  .dd-shake {
    animation: none !important;
  }

  .dd-brand-bubbles { display: none; }

  .dd-brand-title .w,
  .dd-brand-benefits li,
  .dd-brand-feed {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}