/* Disembark Landing — ported from "Disembark Landing.dc.html" design */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.disembark-landing {
  margin: 0;
  background: #03141e;
  color: #e6f3fb;
  font-family: 'Geist', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.disembark-landing ::selection { background: rgba(62,166,221,0.32); }

@keyframes db-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes db-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } }
@keyframes db-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes db-glow { 0%,100% { opacity: 0.5; } 50% { opacity: 0.95; } }
@keyframes db-beam { 0%,100% { opacity: 0.1; } 50% { opacity: 0.2; } }

/* Hover behaviors (ported from style-hover attributes) */
.db-navlink { transition: color 0.18s; }
.db-navlink:hover { color: #e6f3fb !important; }

.db-btn-accent { transition: filter 0.18s, transform 0.18s; }
.db-btn-accent:hover { filter: brightness(1.08); }

.db-btn-cta { transition: filter 0.18s, transform 0.18s; }
.db-btn-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

.db-btn-ghost { transition: border-color 0.18s, background 0.18s; }
.db-btn-ghost:hover { border-color: rgba(62,166,221,0.5) !important; background: rgba(62,166,221,0.06); }

.db-feature-card { transition: border-color 0.2s, transform 0.2s; }
.db-feature-card:hover { border-color: rgba(62,166,221,0.4) !important; transform: translateY(-3px); }

/* Install command box — the whole box hovers and is clickable to copy.
   Base border/background live here (not inline) so :hover can win the cascade. */
.db-cmd { border: 1px solid rgba(224,241,250,0.1); background: #061a26; transition: border-color 0.18s, background 0.18s; }
.db-cmd .db-cmd-icon { border: 1px solid rgba(224,241,250,0.14); background: rgba(255,255,255,0.03); color: #8fb0c2; transition: color 0.18s, border-color 0.18s, background 0.18s; }
.db-cmd:hover, .db-cmd:focus-visible { border-color: rgba(62,166,221,0.5); background: rgba(62,166,221,0.08); outline: none; }
.db-cmd:hover .db-cmd-icon, .db-cmd:focus-visible .db-cmd-icon { color: #e6f3fb; border-color: rgba(62,166,221,0.5); background: rgba(62,166,221,0.14); }
.db-cmd.is-copied .db-cmd-icon { color: #6bd6a0; border-color: rgba(107,214,160,0.5); }

.db-footer-link { transition: color 0.18s; }
.db-footer-link:hover { color: #e6f3fb; }

/* --- Responsive ---
   The design is desktop-first (1280px), all inline styles. Its 2-column hero only
   fits comfortably above ~1080px: the badge strip (MIT LICENSED / FREE FOREVER /
   v2.7.0, nowrap) is ~493px wide and pins the text column to that min-width, so
   between ~600 and ~1080px the 2-column layout is cramped (badge crushed
   edge-to-edge, terminal squeezed) — and below ~600 it overflows. So we stack the
   hero cleanly for the WHOLE range below the comfortable-2-col point, with fluid
   padding. !important is required to beat the inline styles. */
@media (max-width: 1080px) {
  .db-nav { padding-left: clamp(22px, 7vw, 34px) !important; padding-right: clamp(22px, 7vw, 34px) !important; gap: 12px !important; }
  .db-nav-links { gap: 16px !important; }
  /* Stack: text column full width on top, terminal full width below. Zero the
     inline min-widths so neither column forces the row wider than the viewport. */
  .db-hero { flex-direction: column !important; align-items: stretch !important; padding-left: clamp(22px, 7vw, 34px) !important; padding-right: clamp(22px, 7vw, 34px) !important; }
  .db-hero > div { min-width: 0 !important; }
}
@media (max-width: 600px) {
  /* Shrink the badge strip so it fits (and doesn't overflow) small phones. */
  .db-badges { font-size: 10px !important; letter-spacing: 0.03em !important; }
  .db-badges > span { padding-left: 12px !important; padding-right: 15px !important; }
}
@media (max-width: 500px) {
  /* Below ~500px the full-width terminal is narrow enough that command lines
     wrap, pushing the peak animation state (sync + progress + "Mirror complete",
     up to ~345px at 320w with Geist Mono) past the 286px min-height, so the box
     grows mid-loop. Hold 360px here. Wider stacked widths don't wrap, so they
     keep the inline 286px and stay snug. */
  .db-term-body { min-height: 360px !important; }
}
@media (max-width: 380px) {
  .db-nav { gap: 10px !important; }
  .db-nav-links { gap: 13px !important; }
  .db-badges { font-size: 9px !important; }
  .db-badges > span { padding-left: 10px !important; padding-right: 13px !important; }
}