/* =========================================================================
   Mortuls — coming-soon landing page.
   Palette and type approximate the app's LayoutScale brand atoms.
   Tweak the :root variables to match the app exactly.
   ========================================================================= */

:root {
  --cream:      #f4ead6;   /* page background (warm cream) */
  --cream-2:    #efe1c6;   /* card / panel fill */
  --ink:        #221d1a;   /* primary text (near-black, warm) */
  --pink:       #d2a2c2;   /* critter pink (sampled from the Tales band / Mort fur) */
  --ink-soft:   rgba(34, 29, 26, .60);
  --ink-faint:  rgba(34, 29, 26, .28);
  --ink-line:   rgba(34, 29, 26, .14);

  --radius:     18px;
  --radius-sm:  12px;
  --maxw:       560px;     /* content column width */

  /* band behind the screenshot carousel. The texture PNG is black with the
     grain carved in its alpha, pre-baked to 15% opacity, so it renders as a
     faint dark wash over the cream. */
  --shots-bg-image:  url("assets/shots-texture.png");
  --shots-caption:   rgba(34, 29, 26, .60);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Grandstander", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background-color: var(--cream);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100svh;
}

/* subtle paper grain so a flat cream never looks sterile (sits under everything) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
  mix-blend-mode: soft-light;   /* textures without net-darkening, so the body matches the theme-color bars */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 24px 56px;
}

.block { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.25,1); }
.block.revealed { opacity: 1; transform: none; }
.hidden { display: none !important; }

/* --------------------------------------------------------------------- hero */
.hero { text-align: center; }

/* hand-drawn wordmark PNG (transparent; the art carries its own tilt + splatter) */
.wordmark { margin: 0; animation: pop .5s both; }
.wordmark-img {
  display: block;
  width: min(82vw, 400px);
  height: auto;
  margin: 0 auto;
  -webkit-user-drag: none;
  user-select: none;
}

/* lead line: strongest text on the page after the wordmark; each sentence holds its own line */
.tagline {
  font-weight: 700;
  font-size: clamp(24px, 6.8vw, 32px);
  line-height: 1.22;
  color: var(--ink);
  margin: 30px 0 0;
}
.tagline-line { white-space: nowrap; display: inline-block; }

.hero-art {
  display: block;
  width: min(84vw, 400px);
  height: auto;
  margin: -18px auto 6px;   /* negative: both PNGs carry baked-in whitespace at this seam */
  -webkit-user-drag: none;
  user-select: none;
  animation: pop .5s .12s both;
}

.coming {
  font-weight: 500;
  font-size: clamp(14.5px, 4vw, 17px);
  color: var(--ink-soft);
  margin: 6px 0 0;
}
.coming .soon { white-space: nowrap; }

/* hero CTAs: pink primary + quiet wash secondary, side by side */
.cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.beta-btn {
  display: inline-block;
  padding: 15px 34px;
  border: 1.5px solid transparent;   /* mirrors the newsletter button's border so heights match */
  line-height: 1.2;
  background: var(--pink);
  color: var(--ink);
  font-family: "Grandstander", sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(34,29,26,.16);
  transition: transform .15s ease, box-shadow .15s ease;
  animation: pop .5s .2s both;
}
.beta-btn:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(34,29,26,.2); }
.beta-btn:active { transform: scale(.97); }
.beta-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.news-btn {
  padding: 15px 26px;
  border: 1.5px solid var(--ink-line);
  line-height: 1.2;
  background: rgba(255, 255, 255, .6);
  color: var(--ink);
  font-family: "Grandstander", sans-serif;
  font-weight: 700;
  font-size: 18px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
  animation: pop .5s .26s both;
}
.news-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .85); }
.news-btn:active { transform: scale(.97); }
.news-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* newsletter popup: brand-styled card, never a native-feeling dialog */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(34, 29, 26, .45);
}
.modal-card {
  position: relative;
  width: min(100%, 400px);
  background: var(--cream);
  border-radius: var(--radius);
  padding: 30px 24px 26px;
  box-shadow: 0 18px 50px rgba(34,29,26,.35);
  animation: pop .35s both;
}
.modal-close {
  position: absolute;
  top: 6px; right: 6px;
  width: 44px; height: 44px;
  border: none;
  background: none;
  color: var(--ink-soft);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color .15s ease;
}
.modal-close:hover { color: var(--ink); }
.modal-close:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }

/* ------------------------------------------------------ screenshot gallery */
.shots-band {
  position: relative;         /* anchors the desktop nav arrows */
  margin: 28px -24px 0;       /* bleed to screen edges on phone */
  padding: 72px 0 26px;       /* top clears the texture's soft upper edge; bottom keeps the fade under the pips */
  background-image: var(--shots-bg-image);
  background-size: 100% 100%;   /* stretch, never crop: keeps the texture's soft top/bottom edges visible */
  background-position: center;
}
.shots {
  overflow-x: auto;
  padding: 0 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.shots-track {               /* the pannable content; transform is driven in app.js (sub-pixel smooth) */
  display: flex;
  gap: 14px;
  width: max-content;
  margin: 0 auto;            /* when everything fits (wide desktop) the row centers; overflow still scrolls */
  will-change: transform;
}

/* touch keeps native snap + momentum; desktop pages with the nav arrows */
@media (hover: none) and (pointer: coarse) {
  .shots { scroll-snap-type: x mandatory; }
}
.shots::-webkit-scrollbar { display: none; }

/* Desktop nav arrows (App Store style): circles floating at the strip edges */
.shots-nav {
  display: none;
  position: absolute;
  top: 45%;                   /* optically centered on the cards, above the captions */
  transform: translateY(-50%);
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink-line);
  border-radius: 50%;
  background: rgba(244, 234, 214, .88);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(34,29,26,.14);
  transition: transform .15s ease, opacity .2s ease, background .15s ease;
  z-index: 2;
}
.shots-prev { left: 16px; }
.shots-next { right: 16px; }
.shots-nav:hover:not(:disabled) { background: var(--cream); transform: translateY(-50%) scale(1.06); }
.shots-nav:active:not(:disabled) { transform: translateY(-50%) scale(.96); }
.shots-nav:disabled { opacity: .25; cursor: default; }
.shots-nav:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .shots-nav { display: flex; }
}
.shot-item {
  flex: 0 0 auto;
  width: min(66vw, 230px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-snap-align: center;
}
.shot {
  width: 100%;
  aspect-ratio: 660 / 1434;
  border-radius: var(--radius);
  background: var(--cream-2);
  border: 1px solid var(--ink-line);
  box-shadow: 0 6px 18px rgba(34,29,26,.10);
  overflow: hidden;
}
.shot-caption {
  text-align: center;
  font-size: 13px;
  color: var(--shots-caption);
  line-height: 1.3;
  padding: 0 2px;
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }

/* scroll-position pips: inside the band, in a soft beige bubble */
.shots-pips {
  display: flex;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  margin: 16px auto 0;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(244, 234, 214, .85);   /* soft beige bubble over the band wash */
  box-shadow: 0 2px 8px rgba(34,29,26,.08);
}
.shots-pips .pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-faint);
  transition: background .2s, transform .2s;
}
.shots-pips .pip.active { background: var(--ink); transform: scale(1.15); }

/* ------------------------------------------------------------------ footer */
.footer { text-align: center; margin-top: 40px; }
.footer-mort {
  width: 56px;
  height: auto;
  opacity: .8;
  margin: 0 auto 10px;
  -webkit-user-drag: none;
  user-select: none;
}
.footer-social { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.footer-social a { color: var(--ink-soft); text-decoration: none; padding: 6px 2px; }
.footer-social a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-social a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.footer-dot { color: var(--ink-faint); margin: 0 6px; }
.footer-legal { font-size: 13px; color: var(--ink-soft); margin: 0 0 4px; }
.footer-note { font-size: 12px; color: var(--ink-faint); margin: 0; }

/* -------------------------------------------------------------- email form (inside the popup) */
.notify { position: relative; text-align: center; }
.notify-title { font-weight: 700; font-size: 17px; color: var(--ink); margin: 0 0 14px; }
.notify-row { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; }
.notify-email {
  flex: 1;
  min-width: 0;
  font-family: "Grandstander", sans-serif;
  font-size: 16px;                /* >= 16px so iOS Safari doesn't zoom on focus */
  color: var(--ink);
  background: var(--cream-2);
  border: 1.5px solid var(--ink-line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.notify-email:focus { outline: none; border-color: var(--ink-soft); }
.notify-email.shake { animation: shake .4s; }
.notify-btn {
  flex: none;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--cream);
  font-family: "Grandstander", sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 18px;
  cursor: pointer;
  transition: transform .15s ease;
}
.notify-btn:hover { transform: translateY(-2px); }
.notify-btn:active { transform: scale(.98); }
.notify-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.notify-done { font-weight: 600; color: var(--ink-soft); margin: 0; animation: pop .4s both; }

/* ---------------------------------------------------------------- keyframes */
@keyframes pop {
  0%   { opacity: 0; transform: scale(.82) rotate(var(--tilt, 0deg)); }
  60%  { opacity: 1; transform: scale(1.05) rotate(var(--tilt, 0deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--tilt, 0deg)); }
}
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: opacity .2s ease !important; }
  .block { transform: none; }
}

/* --------------------------------------------------------- desktop widen */
@media (min-width: 760px) {
  /* full-bleed band on desktop; the strip inside stays a scrollable track */
  .shots-band { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
}