/* NotSleeping landing: animations, repeated components, responsive.
   Ported from the bundled page; colour/spacing values are tokens. */

@keyframes nsFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nsGlow { from { opacity: 0.55; transform: translateX(-50%) scale(0.92); } to { opacity: 1.25; transform: translateX(-50%) scale(1.06); } }
@keyframes nsTwinkle { 0%, 100% { opacity: 0.1; transform: scale(0.7); } 50% { opacity: 0.9; transform: scale(1.15); } }
@keyframes nsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes nsRipple { from { transform: scale(0.7); opacity: 0.5; } to { transform: scale(1.6); opacity: 0; } }
@keyframes nsDialIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

/* Marquee screenshots */
.ns-mimg {
  width: 180px;
  height: 390px;
  border-radius: 24px;
  border: 1px solid var(--ns-border-subtle);
  object-fit: cover;
  display: block;
  margin-right: 22px;
  user-select: none;
  -webkit-user-drag: none;
}
.ns-mimg.dn { margin-top: 20px; }

/* Draggable marquee (JS adds .js-marquee on boot; CSS animation is the
   no-JS fallback). pan-y keeps vertical page scrolling alive on touch. */
.ns-marquee { cursor: grab; touch-action: pan-y; }
.ns-marquee.dragging { cursor: grabbing; }
.ns-marquee.js-marquee { animation: none !important; }

/* Feature cards */
.ns-fcard {
  background: var(--ns-surface-card);
  border-radius: var(--ns-radius-card);
  padding: 26px;
}
#features .ns-grid > div { text-align: center; }

/* Founding form show/hide. The display styles live HERE (not inline) so the
   `hidden` attribute can win; an inline display:flex would override the UA's
   [hidden] { display: none } rule and the success block would show on load. */
#ns-form-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
  width: 100%;
  max-width: 440px;
}
#ns-form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}
#ns-form-fields[hidden],
#ns-form-success[hidden] { display: none; }

/* Footer */
.ns-footer-cols .ns-flink { display: block; }
.ns-fcta-solid { transition: transform 160ms ease, filter 160ms ease; }
.ns-fcta-solid:hover { transform: translateY(-1px); filter: brightness(1.04); }
.ns-fcta-ghost {
  background: transparent;
  border: 1px solid var(--ns-border-accent);
  color: var(--ns-brand-accent);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.ns-fcta-ghost:hover {
  background: var(--ns-brand-accent);
  color: var(--ns-text-on-accent);
  border-color: var(--ns-brand-accent);
}
.ns-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ns-surface-card);
  color: var(--ns-text-secondary);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.ns-social:hover {
  background: var(--ns-brand-accent);
  color: var(--ns-text-on-accent);
  transform: translateY(-2px);
}

@media (max-width: 1024px) {
  .ns-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 820px) {
  .ns-nav { padding: 14px 16px !important; gap: 10px; }
  .ns-nav a[href="#breathe"] { display: none !important; }
  .ns-nav .ns-wordmark img { height: 17px !important; }
  .ns-nav a[href="#founding"] { white-space: nowrap; font-size: 13px !important; height: 36px !important; padding: 0 18px !important; flex: none; }
  .ns-nav .ns-cta-full { display: none !important; }
  .ns-nav .ns-cta-short { display: inline !important; }
  .ns-hero { padding: 48px 20px 64px !important; }
  .ns-h1 { font-size: 38px !important; letter-spacing: -1px !important; }
  .ns-pad { padding-left: 20px !important; padding-right: 20px !important; }
  .ns-pad h2 { font-size: 29px !important; letter-spacing: -0.6px !important; }
  .ns-marquee img { width: 130px !important; height: 282px !important; border-radius: 18px !important; }
  .ns-split { flex-direction: column !important; gap: 16px !important; padding: 56px 20px !important; }
  .ns-split > div { width: 100% !important; }
  .ns-grid { grid-template-columns: 1fr !important; }
  .ns-brow { flex-wrap: wrap !important; gap: 8px 16px !important; }
  .ns-brow > div { width: 100% !important; flex: none !important; }
  .ns-inrow { flex-direction: column !important; }
  .ns-inrow > * { width: 100% !important; box-sizing: border-box; }
  .ns-inrow input { height: 60px !important; min-height: 60px; font-size: 16px !important; padding: 0 22px !important; }
  .ns-inrow button { height: 60px !important; }
  .ns-form { padding: 32px 22px !important; }
  .ns-footer-top { flex-direction: column !important; gap: 44px !important; padding: 52px 20px 36px !important; }
  .ns-footer-cols { flex-wrap: wrap !important; gap: 32px 44px !important; width: 100%; }
  .ns-footer-cols > div { flex: 1 1 130px; }
  .ns-footer-bottom { flex-direction: column !important; gap: 22px !important; text-align: center; padding: 28px 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ns-marquee,
  [style*="nsTwinkle"],
  [style*="nsGlow"],
  [style*="nsRipple"],
  [style*="nsFadeUp"],
  [style*="nsDialIn"] {
    animation: none !important;
  }
}