/**
 * Login page — playful DIY crafts theme
 * Loaded by: public/login.html only
 */

.login-page {
  --login-cream: #fff4e8;
  --login-paper: #fffdf9;
  --login-ink: #2a2420;
  --login-muted: #6b5f56;
  --login-coral: #ff5a3d;
  --login-coral-dark: #e84a2f;
  --login-mint: #5ee0a8;
  --login-sun: #ffd166;
  --login-lavender: #b794f6;
  --login-sky: #56cfe1;
  --login-pink: #ff8fab;
  --login-tape: rgba(255, 209, 102, 0.72);

  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 40px);
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: var(--login-ink);
  background:
    radial-gradient(circle at 10% 20%, rgba(255, 143, 171, 0.35), transparent 42%),
    radial-gradient(circle at 90% 15%, rgba(183, 148, 246, 0.3), transparent 40%),
    radial-gradient(circle at 80% 85%, rgba(94, 224, 168, 0.35), transparent 45%),
    radial-gradient(circle at 15% 80%, rgba(255, 209, 102, 0.4), transparent 42%),
    var(--login-cream);
  overflow-x: hidden;
  position: relative;
}

.login-scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.login-blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.7;
  animation: login-float 10s ease-in-out infinite;
}

.login-blob--1 {
  width: min(48vw, 360px);
  height: min(48vw, 360px);
  background: radial-gradient(circle at 30% 30%, #ffc4b8, var(--login-coral) 65%);
  top: -12%;
  left: -10%;
}

.login-blob--2 {
  width: min(40vw, 300px);
  height: min(40vw, 300px);
  background: radial-gradient(circle at 60% 40%, #a8f5d0, var(--login-mint) 60%);
  bottom: 5%;
  right: -8%;
  animation-delay: -3s;
}

.login-blob--3 {
  width: min(32vw, 220px);
  height: min(32vw, 220px);
  background: radial-gradient(circle, #fff4c2, var(--login-sun) 70%);
  top: 38%;
  left: 55%;
  animation-delay: -5s;
}

.login-blob--4 {
  width: min(26vw, 180px);
  height: min(26vw, 180px);
  background: radial-gradient(circle, #e4d4ff, var(--login-lavender) 70%);
  top: 12%;
  right: 8%;
  animation-delay: -1.5s;
}

.login-blob--5 {
  width: min(20vw, 140px);
  height: min(20vw, 140px);
  background: radial-gradient(circle, #b8f0ff, var(--login-sky) 70%);
  bottom: 28%;
  left: 6%;
  animation-delay: -7s;
}

.login-confetti i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  opacity: 0.85;
  animation: login-confetti-fall 12s linear infinite;
}

.login-confetti i:nth-child(1) { left: 5%; background: #ff5a3d; animation-duration: 9s; animation-delay: 0s; }
.login-confetti i:nth-child(2) { left: 12%; background: #ffd166; animation-duration: 11s; animation-delay: -2s; width: 8px; height: 14px; }
.login-confetti i:nth-child(3) { left: 18%; background: #5ee0a8; animation-duration: 10s; animation-delay: -4s; border-radius: 50%; }
.login-confetti i:nth-child(4) { left: 25%; background: #b794f6; animation-duration: 13s; animation-delay: -1s; }
.login-confetti i:nth-child(5) { left: 32%; background: #56cfe1; animation-duration: 8s; animation-delay: -6s; }
.login-confetti i:nth-child(6) { left: 40%; background: #ff8fab; animation-duration: 12s; animation-delay: -3s; width: 12px; height: 8px; }
.login-confetti i:nth-child(7) { left: 48%; background: #ffd166; animation-duration: 9.5s; animation-delay: -5s; }
.login-confetti i:nth-child(8) { left: 55%; background: #ff5a3d; animation-duration: 11s; animation-delay: -7s; border-radius: 50%; }
.login-confetti i:nth-child(9) { left: 62%; background: #5ee0a8; animation-duration: 10s; animation-delay: -2.5s; }
.login-confetti i:nth-child(10) { left: 70%; background: #b794f6; animation-duration: 14s; animation-delay: -8s; width: 8px; height: 12px; }
.login-confetti i:nth-child(11) { left: 78%; background: #56cfe1; animation-duration: 9s; animation-delay: -4.5s; }
.login-confetti i:nth-child(12) { left: 85%; background: #ff8fab; animation-duration: 11s; animation-delay: -1.5s; }
.login-confetti i:nth-child(13) { left: 8%; background: #b794f6; animation-duration: 12s; animation-delay: -9s; top: -20px; }
.login-confetti i:nth-child(14) { left: 22%; background: #ffd166; animation-duration: 8.5s; animation-delay: -6.5s; }
.login-confetti i:nth-child(15) { left: 38%; background: #ff5a3d; animation-duration: 13s; animation-delay: -3.5s; border-radius: 50%; }
.login-confetti i:nth-child(16) { left: 52%; background: #5ee0a8; animation-duration: 10.5s; animation-delay: -10s; }
.login-confetti i:nth-child(17) { left: 66%; background: #ff8fab; animation-duration: 9s; animation-delay: -5.5s; }
.login-confetti i:nth-child(18) { left: 80%; background: #56cfe1; animation-duration: 11.5s; animation-delay: -7.5s; width: 14px; height: 9px; }
.login-confetti i:nth-child(19) { left: 92%; background: #ffd166; animation-duration: 10s; animation-delay: -2s; }
.login-confetti i:nth-child(20) { left: 3%; background: #5ee0a8; animation-duration: 12s; animation-delay: -11s; width: 9px; height: 9px; border-radius: 50%; }

.login-float-emoji {
  position: absolute;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1;
  filter: drop-shadow(2px 3px 0 rgba(42, 36, 32, 0.12));
  animation: login-emoji-bob 4s ease-in-out infinite;
}

.login-float-emoji--1 { top: 8%; left: 6%; animation-delay: 0s; }
.login-float-emoji--2 { top: 12%; right: 8%; animation-delay: -1.2s; }
.login-float-emoji--3 { bottom: 18%; left: 10%; animation-delay: -2.4s; }
.login-float-emoji--4 { bottom: 24%; right: 12%; animation-delay: -0.8s; }
.login-float-emoji--5 { top: 48%; right: 4%; animation-delay: -3s; font-size: clamp(1.25rem, 3vw, 1.75rem); }

.login-splat {
  position: absolute;
  opacity: 0.9;
  animation: login-splat-pulse 5s ease-in-out infinite;
}

.login-splat--1 {
  width: 90px;
  top: 20%;
  left: 4%;
  transform: rotate(-25deg);
  animation-delay: -1s;
}

.login-splat--2 {
  width: 70px;
  bottom: 15%;
  right: 6%;
  transform: rotate(18deg);
  animation-delay: -2.5s;
}

.login-doodle {
  position: absolute;
  opacity: 0.95;
  animation: login-wiggle 4s ease-in-out infinite;
  filter: drop-shadow(2px 3px 0 rgba(42, 36, 32, 0.08));
}

.login-doodle--scissors {
  top: 14%;
  right: 10%;
  width: 58px;
  --login-rot: 12deg;
  animation-delay: -1s;
}

.login-doodle--brush {
  bottom: 22%;
  left: 8%;
  width: 52px;
  --login-rot: -18deg;
  animation-delay: -3s;
}

.login-doodle--star {
  top: 26%;
  left: 12%;
  width: 40px;
  animation-delay: -5s;
}

.login-doodle--heart {
  bottom: 30%;
  right: 16%;
  width: 36px;
  animation-delay: -2.5s;
}

.login-doodle--yarn {
  top: 60%;
  right: 5%;
  width: 48px;
  --login-rot: 8deg;
  animation-delay: -4.5s;
}

.login-grain {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}

@keyframes login-float {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(18px, -20px) scale(1.06) rotate(3deg); }
  66% { transform: translate(-10px, 12px) scale(0.98) rotate(-2deg); }
}

@keyframes login-wiggle {
  0%, 100% { transform: rotate(var(--login-rot, 0deg)) translateY(0) scale(1); }
  50% { transform: rotate(calc(var(--login-rot, 0deg) + 10deg)) translateY(-12px) scale(1.08); }
}

@keyframes login-emoji-bob {
  0%, 100% { transform: translateY(0) rotate(-6deg) scale(1); }
  50% { transform: translateY(-14px) rotate(8deg) scale(1.12); }
}

@keyframes login-confetti-fall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.85; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

@keyframes login-splat-pulse {
  0%, 100% { transform: scale(1) rotate(var(--splat-rot, -25deg)); }
  50% { transform: scale(1.08) rotate(calc(var(--splat-rot, -25deg) + 5deg)); }
}

.login-splat--2 { --splat-rot: 18deg; }

@keyframes login-pop-in {
  0% { opacity: 0; transform: rotate(-4deg) scale(0.92) translateY(24px); }
  70% { transform: rotate(1deg) scale(1.02) translateY(-4px); }
  100% { opacity: 1; transform: rotate(-0.8deg) scale(1) translateY(0); }
}

@keyframes login-badge-wiggle {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50% { transform: rotate(4deg) scale(1.05); }
}

@keyframes login-ring-spin {
  to { transform: rotate(360deg); }
}

@keyframes login-logo-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes login-shine {
  0% { transform: translateX(-120%) skewX(-12deg); }
  100% { transform: translateX(220%) skewX(-12deg); }
}

.login-shell {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-card {
  width: 100%;
  background: var(--login-paper);
  border: 3px solid #2a2420;
  border-radius: 24px;
  padding: clamp(1.65rem, 4vw, 2.1rem) clamp(1.4rem, 4vw, 1.85rem) 1.85rem;
  box-shadow:
    8px 8px 0 #2a2420,
    0 28px 56px rgba(42, 36, 32, 0.14);
  position: relative;
  transform: rotate(-0.8deg);
  animation: login-pop-in 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  overflow: visible;
}

.login-card::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 28px;
  padding: 4px;
  background: linear-gradient(
    135deg,
    #ff5a3d,
    #ffd166,
    #5ee0a8,
    #56cfe1,
    #b794f6,
    #ff8fab,
    #ff5a3d
  );
  background-size: 300% 300%;
  animation: login-rainbow-shift 8s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  opacity: 0.85;
}

@keyframes login-rainbow-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.login-card:hover {
  transform: rotate(0deg) scale(1.01);
  box-shadow:
    10px 10px 0 #2a2420,
    0 32px 64px rgba(42, 36, 32, 0.16);
  transition: transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 280ms ease;
}

.login-fun-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2a2420;
  background: linear-gradient(180deg, #fff0b3, #ffd166);
  border: 2px solid #2a2420;
  border-radius: 999px;
  box-shadow: 3px 3px 0 #2a2420;
  z-index: 3;
  animation: login-badge-wiggle 2.5s ease-in-out infinite;
  white-space: nowrap;
}

.login-sticker {
  position: absolute;
  font-size: 1.5rem;
  z-index: 3;
  animation: login-emoji-bob 3s ease-in-out infinite;
  filter: drop-shadow(2px 2px 0 rgba(42, 36, 32, 0.1));
}

.login-sticker--spark {
  top: 28px;
  right: -6px;
  animation-delay: -0.5s;
}

.login-sticker--heart {
  bottom: 48px;
  left: -8px;
  animation-delay: -1.8s;
}

.login-tape {
  position: absolute;
  height: 30px;
  width: 76px;
  background: var(--login-tape);
  border: 2px dashed rgba(42, 36, 32, 0.2);
  opacity: 0.95;
  z-index: 2;
  box-shadow: 0 2px 0 rgba(42, 36, 32, 0.06);
}

.login-tape--left {
  top: -12px;
  left: 20px;
  transform: rotate(-10deg);
}

.login-tape--right {
  top: -10px;
  right: 22px;
  transform: rotate(8deg);
  width: 68px;
  background: linear-gradient(180deg, rgba(255, 182, 193, 0.7), rgba(255, 209, 102, 0.65));
}

.login-brand {
  text-align: center;
  margin-bottom: 1.35rem;
  padding-top: 0.35rem;
}

.login-logo-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 118px;
  margin: 0 auto 1rem;
  padding: 14px;
  background: #fff;
  border-radius: 50%;
  border: 3px solid #2a2420;
  box-shadow: 5px 5px 0 #2a2420;
  animation: login-logo-bounce 3s ease-in-out infinite;
}

.login-logo-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #ff5a3d,
    #ffd166,
    #5ee0a8,
    #56cfe1,
    #b794f6,
    #ff8fab,
    #ff5a3d
  );
  z-index: 0;
  animation: login-ring-spin 6s linear infinite;
}

.login-logo-ring::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fffdf9;
}

.login-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 82px;
  object-fit: contain;
}

.login-brand h1 {
  font-size: clamp(1.65rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--login-ink);
  text-shadow: 2px 2px 0 rgba(255, 209, 102, 0.5);
}

.login-brand h1 span {
  display: block;
  font-size: 0.7em;
  background: linear-gradient(90deg, #ff5a3d, #e84a2f, #ff8fab);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(1px 1px 0 rgba(42, 36, 32, 0.15));
}

.login-tagline {
  margin: 0.65rem 0 0;
  display: flex;
  justify-content: center;
}

.login-tagline-pill {
  display: inline-block;
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--login-ink);
  background: linear-gradient(135deg, #e8fff3, #d4f5ff);
  border: 2px solid #2a2420;
  border-radius: 999px;
  box-shadow: 3px 3px 0 #2a2420;
  transform: rotate(-1deg);
}

.login-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.login-google-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 52px;
  padding: 0 1.35rem;
  border: 3px solid #2a2420;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #fff8f4 100%);
  color: var(--login-ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 4px 4px 0 #2a2420;
  overflow: hidden;
  transition: transform 150ms cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 150ms ease;
}

.login-google-btn__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 60%
  );
  animation: login-shine 3.5s ease-in-out infinite;
  pointer-events: none;
}

.login-google-btn:hover:not(:disabled) {
  transform: translate(-2px, -3px) scale(1.02);
  box-shadow: 6px 7px 0 #2a2420;
  background: linear-gradient(180deg, #fff 0%, #ffe8e2 100%);
}

.login-google-btn:active:not(:disabled) {
  transform: translate(2px, 3px) scale(0.98);
  box-shadow: 2px 2px 0 #2a2420;
}

.login-google-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.login-google-btn svg {
  flex-shrink: 0;
}

.login-continue-btn {
  width: 100%;
  min-height: 46px;
  padding: 0 1rem;
  border: 3px dashed var(--login-coral);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff5f2, #ffe8e2);
  color: var(--login-coral-dark);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(255, 90, 61, 0.25);
  transition: transform 150ms ease, background 150ms ease;
}

.login-continue-btn:hover:not(:disabled) {
  transform: scale(1.02);
  background: #ffd9cf;
}

.login-hint {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--login-muted);
  text-align: center;
  font-weight: 600;
}

.login-error {
  margin-top: 0.85rem;
  color: #9b2c1f;
  font-size: 0.85rem;
  text-align: left;
  background: #fff0ee;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  border: 2px solid #ffc9bf;
  font-weight: 600;
}

.login-page .toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  max-width: min(90vw, 360px);
  padding: 0.75rem 1.15rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #2a2420, #4a3f38);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  border: 2px solid #ffd166;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.login-page .toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  .login-blob,
  .login-doodle,
  .login-float-emoji,
  .login-confetti i,
  .login-splat,
  .login-logo-frame,
  .login-fun-badge,
  .login-sticker,
  .login-card::before,
  .login-logo-ring,
  .login-google-btn__shine {
    animation: none !important;
  }

  .login-card {
    transform: none;
    animation: none;
  }

  .login-card:hover {
    transform: none;
  }
}

@media (max-width: 480px) {
  .login-doodle--scissors,
  .login-doodle--yarn,
  .login-float-emoji--5 {
    display: none;
  }

  .login-fun-badge {
    font-size: 0.85rem;
    padding: 0.3rem 0.75rem;
  }

  .login-shell {
    padding: 12px max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  }

  .login-google-btn {
    min-height: 48px;
  }
}

@supports (padding: max(0px)) {
  .login-page {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}