/* ShelfLife — landing / search page (cinematic backdrop, drifting capsules) */

.landing-body { display: flex; flex-direction: column; min-height: 100vh; position: relative; overflow-x: hidden; }
.landing-body .nav { background: transparent; border-bottom: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

.landing-backdrop {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--bg);
}
.landing-backdrop-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(52px) saturate(1.2); transform: scale(1.2); opacity: .28;
}
.landing-backdrop::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(680px 420px at 50% 44%, rgba(10,10,14,.35), rgba(10,10,14,.94) 78%);
}
.landing-capsule {
  position: absolute; width: 150px; border-radius: 14px; opacity: .45; filter: blur(1px);
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
  animation: capsule-drift 14s ease-in-out infinite alternate;
}
.landing-capsule.c1 { left: -30px; top: 18%; transform: rotate(-11deg); }
.landing-capsule.c2 { right: -24px; top: 10%; width: 140px; transform: rotate(9deg); animation-delay: -4s; }
.landing-capsule.c3 { left: 6%; bottom: -70px; width: 130px; transform: rotate(7deg); animation-delay: -8s; }
.landing-capsule.c4 { right: 8%; bottom: -84px; width: 130px; transform: rotate(-8deg); animation-delay: -2s; }
@keyframes capsule-drift { to { translate: 0 -18px; } }

.landing-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; position: relative; z-index: 1; }
.landing-hero { text-align: center; max-width: 600px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.landing-logo { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.landing-logo-svg { width: 66px; height: 57px; color: var(--accent); flex-shrink: 0; filter: drop-shadow(0 6px 20px rgba(91,157,255,.5)); }
.landing-logo-name { font: 700 58px var(--font-display); color: #fff; letter-spacing: -.03em; line-height: 1; }
.landing-tagline { font: 700 24px var(--font-display); color: var(--text); letter-spacing: -.01em; margin-bottom: 12px; }
.landing-sub { font: 400 14px/1.7 var(--font-body); color: var(--text-secondary); max-width: 520px; margin-bottom: 32px; }

.landing-error {
  width: 100%; max-width: 560px; text-align: left;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); border-radius: 12px;
  padding: 10px 16px; margin-bottom: 14px; color: var(--red); font-size: 13px;
}
.landing-form { display: flex; gap: 11px; width: 100%; max-width: 560px; margin-bottom: 14px; }
.landing-input {
  flex: 1; min-width: 0; text-align: left;
  background: rgba(20,20,26,.8); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 13px 17px; font: 400 14px var(--font-mono); color: var(--text); outline: none;
  backdrop-filter: blur(10px); transition: border-color .2s, box-shadow .2s;
}
.landing-input::placeholder { color: var(--text-muted); }
.landing-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,157,255,.18); }
.landing-btn { border-radius: 12px; padding: 13px 26px; font-size: 14px; box-shadow: 0 10px 28px rgba(63,127,230,.5); }
.landing-hint { font: 400 12.5px var(--font-body); color: var(--text-muted); }
.landing-hint strong { color: var(--text-secondary); }

@media (max-width: 700px) {
  .landing-logo { gap: 12px; }
  .landing-logo-svg { width: 48px; height: 41px; }
  .landing-logo-name { font-size: 40px; }
  .landing-tagline { font-size: 19px; }
  .landing-sub { font-size: 13px; }
  .landing-form { flex-direction: column; }
  .landing-btn { width: 100%; }
  .landing-capsule { width: 110px; }
  .landing-capsule.c2, .landing-capsule.c4 { width: 100px; }
}