/* landing.css — login page only.
   Browser tab:  the login screen is exactly one screen; scroll down and the Contact / Articles section is below it.
   App (APK, Windows EXE, installed site): no Contact section at all and the login screen never scrolls away (no rubber-band either). */
html[data-shell="app"] .sf, html[data-shell="app"] #site-contact { display: none !important; }
html[data-shell="app"], html[data-shell="app"] body { overscroll-behavior: none; }
html[data-shell="app"] body { overflow-x: hidden; }
html[data-shell="browser"] { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html[data-shell="browser"] { scroll-behavior: auto; } }
html.g-returning .sf { display: none !important; }   /* while MOMU signs you in after Google, only the "Signing you in" screen shows */

/* ===================== Login hero: premium motion polish =====================
   Left side of the login page only (it is hidden under 900px). Only transform / opacity / filter animate; nothing here changes the
   size of anything, so the login screen stays exactly one screen tall in the apps. Reduced motion is handled by style.css
   (".auth-hero *" gets no animation or transition), so these simply show their finished state. */

/* 1. headline: the two lines rise in one after the other, then a single soft shimmer crosses the accent line */
.hero-title { animation: none; }
.hero-title span { animation: heroLine 1.05s cubic-bezier(.16, 1, .3, 1) .12s both; }
.hero-title span + span { animation: heroLine 1.05s cubic-bezier(.16, 1, .3, 1) .27s both; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-title span + span {
    background: linear-gradient(100deg, var(--brand) 0%, var(--brand) 42%, color-mix(in srgb, var(--brand) 50%, #fff) 50%, var(--brand) 58%, var(--brand) 100%);
    background-size: 260% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    animation: heroLine 1.05s cubic-bezier(.16, 1, .3, 1) .27s both, heroShine 2.6s cubic-bezier(.45, 0, .2, 1) 1.5s both;
  }
}
@keyframes heroLine { from { opacity: 0; transform: translateY(22px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes heroShine { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* 2. a faint accent glow that slowly drifts behind the chat card */
.hero-stage { position: relative; }
.hero-stage::before { content: ""; position: absolute; z-index: -1; right: -10%; bottom: -8%; width: 78%; height: 72%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 20%, transparent), transparent 100%); filter: blur(34px); opacity: 0;
  animation: heroGlowIn 1.8s ease .5s forwards, heroGlowDrift 14s ease-in-out 2.3s infinite alternate; }
@keyframes heroGlowIn { to { opacity: 1; } }
@keyframes heroGlowDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-5%, -6%, 0) scale(1.08); } }

/* 3. the chat card: more depth, and a soft spotlight that follows the mouse (position set in hero-demo.js) */
.hc-chat { box-shadow: 0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset, 0 44px 80px -48px rgba(0, 0, 0, .62), 0 14px 30px -22px rgba(0, 0, 0, .34), 0 2px 6px rgba(0, 0, 0, .06); }
.hc-chat::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--brand) 7%, transparent), transparent 62%); }
:where(html[data-input="mouse"]) .hc-chat:hover::after { opacity: 1; }

/* 4. messages arrive a little softer: rise, settle and come into focus */
.hc-msg { filter: blur(3px); transform: translateY(14px) scale(.96); transition: opacity .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1), filter .5s ease; }
.hc-msg.in { filter: blur(0); transform: none; }
.hc-chat-in { transition: opacity .5s ease, filter .5s ease; }
.hc-chat-in.out { filter: blur(3px); }
.hc-msg.user .hc-bubble { box-shadow: 0 10px 22px -14px var(--brand), 0 1px 0 color-mix(in srgb, #fff 22%, transparent) inset; }
.hc-msg.ai .hc-bubble { box-shadow: 0 10px 24px -20px rgba(0, 0, 0, .5); }
.hc-msg-chip, .hc-tool, .hc-src { transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }

/* 5. thinking dots and the typing cursor feel calmer */
.hc-typing i { background: var(--brand); animation-duration: 1.2s; }
.hc-stream-caret, .hc-comp-caret { animation: heroCaret 1.15s ease-in-out infinite; }
@keyframes heroCaret { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }

/* 6. the message box lights up while "typing", and the send button gives a small ripple when pressed */
.hc-chat-composer.active { box-shadow: 0 0 0 1px var(--brand), 0 0 0 5px color-mix(in srgb, var(--brand) 16%, transparent), 0 14px 28px -18px rgba(0, 0, 0, .35); }
.hc-comp-send { position: relative; }
.hc-comp-send.ready { box-shadow: 0 8px 16px -10px var(--brand); }
.hc-comp-send::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--brand); opacity: 0; pointer-events: none; }
.hc-comp-send.press::after { animation: heroRipple .5s ease-out; }
@keyframes heroRipple { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
.hc-comp-attach.on { animation: heroPop .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes heroPop { from { opacity: 0; transform: translateY(6px) scale(.92); } to { opacity: 1; transform: none; } }

/* 7. scene indicator in the card header: four thin bars, the current one fills while its scene plays (no extra height) */
.hc-scenes { margin-left: auto; margin-right: 14px; display: inline-flex; align-items: center; gap: 5px; }
.hc-scenes + .hc-live { margin-left: 0; }
.hc-scenes i { position: relative; display: block; width: 22px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.hc-scenes u { position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: 0 50%; }
.hc-scenes i.done u { transform: scaleX(1); }
.hc-scenes i.on u { animation: sceneFill var(--dur, 22s) linear forwards; }
@keyframes sceneFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }