/* Landing + login "stage" — layered on top of style.css's theme variables
   (--page-plane/--surface-1/--cta-bg/--cta-ink/etc.) so it stays in sync
   with the rest of the app's light/dark theme instead of owning its own
   palette. */

html, body { height: 100%; }
body.stage-body { overflow: hidden; background: var(--page-plane); }

.stage { position: relative; width: 100%; height: 100vh; overflow: hidden; }

.stage-theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 20; }

/* ---------- background ripple decoration ---------- */
.bg-ripples { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bg-ripples circle { animation: ripple-fade 6s ease-in-out infinite; }
@keyframes ripple-fade { 0%, 100% { opacity: .35; } 50% { opacity: .15; } }
.sparkle { position: absolute; color: var(--cta-bg); animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }

/* ================= LANDING ================= */
.landing {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; z-index: 2; transition: opacity .5s ease, transform .5s ease; padding: 24px;
}
.landing .eyebrow {
  font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); font-weight: 600;
  opacity: 0; animation: fadeUp .6s ease forwards; animation-delay: .1s; text-align: center;
}
.wordmark-hero {
  display: flex; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 60px; line-height: 1;
  letter-spacing: -0.01em;
}
.wordmark-hero span { display: inline-block; opacity: 0; transform: translateY(18px); animation: letterIn .55s cubic-bezier(.2,.9,.3,1.3) forwards; }
.wordmark-hero .kapy { color: var(--text-primary); }
.wordmark-hero .data { color: var(--cta-bg); }
@keyframes letterIn { to { opacity: 1; transform: translateY(0); } }

.landing .tagline {
  font-family: 'Fraunces', Georgia, serif; font-size: 17px; color: var(--text-secondary); text-align: center;
  max-width: 380px; margin: 0; opacity: 0; animation: fadeUp .6s ease forwards; animation-delay: .9s;
}

.mascot-wrap {
  position: relative; width: 220px; height: 190px;
  opacity: 0; animation: fadeUp .7s ease forwards; animation-delay: .5s;
  display: flex; align-items: flex-end; justify-content: center;
}
.mascot-hero-img { position: relative; width: 190px; z-index: 2; display: block; animation: mascotBreathe 3.6s ease-in-out infinite; }
@keyframes mascotBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.mascot-ground {
  position: absolute; bottom: 2px; width: 130px; height: 13px; border-radius: 50%;
  background: var(--gridline); z-index: 1; animation: groundPulse 3.6s ease-in-out infinite;
}
@keyframes groundPulse { 0%, 100% { transform: scaleX(1); opacity: .8; } 50% { transform: scaleX(.85); opacity: .5; } }

/* bubble icons rising around the capybara — same accent colors as the
   header brand mark's decorations, just animated. */
.bubble-icon { position: absolute; opacity: 0; z-index: 3; pointer-events: none; animation: bubbleRise 4.5s ease-in infinite; }
@keyframes bubbleRise {
  0% { opacity: 0; transform: translateY(0) scale(.7); }
  12% { opacity: 1; transform: translateY(-8px) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) scale(.85); }
}
.bi-heart { left: 4px; top: 50px; color: #E8927D; font-size: 20px; animation-delay: .1s; }
.bi-eye { right: 0; top: 28px; animation-delay: 1.6s; }
.bi-eye svg { width: 26px; height: 19px; }
.bi-bars { right: 18px; top: 62px; animation-delay: 2.9s; }
.bi-bars svg { width: 22px; height: 22px; }
.bi-plus1 { left: 16px; top: 22px; animation-delay: .9s; animation-duration: 4s; }
.bi-plus2 { right: 40px; top: 12px; animation-delay: 2.2s; animation-duration: 4.2s; }
.bi-plus3 { left: 40px; top: 0; animation-delay: 3.5s; animation-duration: 4.8s; }
.bi-badge {
  background: var(--surface-1); border: 1px solid var(--border); color: var(--text-primary); font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.bi-sparkle { color: var(--cta-bg); font-size: 13px; }
.bi-spark1 { left: 0; top: 92px; animation-delay: 1.2s; animation-duration: 3.8s; }
.bi-spark2 { right: 4px; top: 100px; animation-delay: 3s; animation-duration: 4.1s; }

.cta-btn {
  background: var(--cta-bg); color: var(--cta-ink); border: none; border-radius: 999px; padding: 14px 30px;
  font-size: 14.5px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif; box-shadow: 0 2px 10px rgba(30, 61, 60, 0.12);
  transition: transform .15s ease, box-shadow .15s ease;
  opacity: 0; animation: fadeUp .6s ease forwards; animation-delay: 1.1s;
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(30, 61, 60, 0.2); }
.cta-btn svg { width: 16px; height: 16px; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.landing.leaving { opacity: 0; transform: translateY(-16px) scale(.98); pointer-events: none; }

/* ---------- ripple transition overlay ---------- */
.transition-circle {
  position: fixed; z-index: 10; border-radius: 50%; background: var(--cta-ink);
  width: 20px; height: 20px; transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}
.transition-circle.grow { transition: transform .75s cubic-bezier(.2,.8,.2,1); }
.transition-circle.grow.active { transform: translate(-50%, -50%) scale(90); }

/* ================= AUTH CARD ================= */
.auth-panel {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 3;
  opacity: 0; pointer-events: none; transition: opacity .45s ease .35s; padding: 24px;
}
.auth-panel.show { opacity: 1; pointer-events: auto; }

.auth-card {
  position: relative; width: 380px; max-width: 100%; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 22px; box-shadow: 0 20px 50px rgba(30, 61, 60, 0.18); padding: 44px 32px 30px; text-align: center;
  transform: translateY(14px); opacity: 0; transition: transform .5s ease .45s, opacity .5s ease .45s;
}
.auth-panel.show .auth-card { transform: translateY(0); opacity: 1; }

.peek-mascot { position: absolute; top: -70px; left: 50%; transform: translateX(-50%); width: 140px; height: auto; }

.auth-logo { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; }
.auth-logo .logo-icon { width: 26px; height: 26px; border-radius: 8px; background: var(--cta-ink); display: flex; align-items: center; justify-content: center; }
.auth-logo .logo-icon svg { width: 16px; height: 16px; }
.auth-logo-text { font-family: 'Fraunces', Georgia, serif; font-size: 16px; font-weight: 700; }
.auth-logo-text .kapy { color: var(--text-primary); }
.auth-logo-text .data { color: var(--cta-bg); }

.auth-title { font-family: 'Fraunces', Georgia, serif; font-size: 21px; font-weight: 700; margin: 16px 0 4px; color: var(--text-primary); }
.auth-sub { font-size: 13px; color: var(--text-muted); margin: 0 0 26px; }

.google-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); border-radius: 11px;
  padding: 12px; font-size: 14px; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer;
  text-decoration: none;
}
.google-btn:hover { background: var(--gridline); }
.google-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.auth-foot { font-size: 11.5px; color: var(--text-muted); margin-top: 18px; line-height: 1.5; }
.auth-foot a { color: var(--series-1); }

.readonly-note {
  margin-top: 16px; font-size: 11px; color: var(--text-muted); background: var(--page-plane);
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; text-align: left; line-height: 1.5;
}

@media (max-width: 480px) {
  .wordmark-hero { font-size: 42px; }
  .auth-card { width: 88vw; padding: 40px 20px 26px; }
}