/* Screenshot Organizer · waitlist. The app's look on a sky: Parkinsans for the big title, Onest for the rest,
   Gochi Hand only on the folder tags; Ink #15161B, Lilac #5B4BE0, the folder tints from the app. */

:root {
  --ink: #15161b;
  --ink2: #5b5f6b;
  --lilac: #5b4be0;
  --white: #fff;
  --sky: #1a7fe0;   /* behind the sky photo while it loads, sampled from it */
  --display: "Parkinsans", "Onest", system-ui, sans-serif;
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hand: "Gochi Hand", "Segoe Print", cursive;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --cw: 92px;    /* a screenshot card's width; it shows the top of a real screenshot, 1.3 times as tall */
  --fw: 176px;   /* a folder's width */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  min-height: 100svh;
  overflow-x: hidden;
  font-family: var(--sans);
  color: var(--white);
  background: var(--sky);
  -webkit-font-smoothing: antialiased;
}
/* One screen, no scroll (like moonjar's hero); very short windows can still scroll rather than cut. */
@media (min-height: 620px) { html, body { overflow: hidden; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- the sky
   A photo-real sky graded to the Capsule reference (deep azure, blue-tinted clouds banked at the sides, misty
   below); a tall version for portrait screens. The left and right banks are two copies of the photo, each
   faded out toward the open middle, drifting on their own slow rhythms, so the clouds gently move and breathe
   instead of the whole picture sliding. */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--sky); }
.sky::before, .sky::after {
  content: ""; position: absolute; inset: -6%;
  background: url(img/sky_wide.webp) center 40% / cover no-repeat;
  will-change: transform;
}
.sky::before {
  -webkit-mask-image: linear-gradient(90deg, #000 38%, transparent 62%); mask-image: linear-gradient(90deg, #000 38%, transparent 62%);
  animation: cloudsL 26s ease-in-out infinite alternate;
}
.sky::after {
  -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 62%); mask-image: linear-gradient(90deg, transparent 38%, #000 62%);
  animation: cloudsR 32s ease-in-out infinite alternate;
}
@media (max-aspect-ratio: 4/5) { .sky::before, .sky::after { background-image: url(img/sky_tall.webp); background-position: center 30%; } }
@keyframes cloudsL { from { transform: translate3d(-1.6%, .5%, 0) scale(1.02); } to { transform: translate3d(1.2%, -1%, 0) scale(1.06); } }
@keyframes cloudsR { from { transform: translate3d(1.6%, -.6%, 0) scale(1.05); } to { transform: translate3d(-1.2%, .9%, 0) scale(1.02); } }

/* ---------------------------------------------------------------- top bar */
.nav {
  position: relative; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1160px; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 32px 0;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none;
  font: 700 15px/1 var(--sans); letter-spacing: -.01em; }
/* The app icon (the design's Components board): Visor's head on a lilac rounded square. */
.appicon {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, #c9beff 0%, #8f7cf5 70%);
  box-shadow: 0 3px 10px rgba(10, 40, 100, .28), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.appicon img { position: absolute; left: 8%; top: 10%; width: 92%; height: 90%; }
.nav-cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  color: var(--white); text-decoration: none; font: 700 13px/1 var(--sans);
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background-color .3s ease, border-color .3s ease, transform .3s var(--ease);
}
.nav-cta:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .6); transform: translateY(-1px); }
.nav-cta:focus-visible, .brand:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; z-index: 20;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 640px; margin: 0 auto; padding: clamp(32px, 8vh, 88px) 24px 0;
  pointer-events: none;   /* cards and folders behind stay visible; the form takes clicks back */
}
.badge {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 20px; padding: 7px 12px; border-radius: 999px;
  font: 700 12px/1 var(--sans); letter-spacing: .02em;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .36);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #d4f56b; box-shadow: 0 0 0 3px rgba(212, 245, 107, .25); }
h1 {
  margin: 0; font: 800 clamp(36px, min(5.4vw, 7.4vh), 68px)/1 var(--display); letter-spacing: -.035em;
  text-shadow: 0 4px 28px rgba(8, 40, 110, .25);
}
.lede {
  max-width: 30em; margin: 18px 0 0; font: 500 clamp(15px, 1.3vw, 17px)/1.55 var(--sans);
  color: rgba(255, 255, 255, .94); text-shadow: 0 1px 12px rgba(8, 40, 110, .35);
}

/* ---------------------------------------------------------------- the form */
.join { position: relative; width: min(420px, 100%); margin-top: 28px; pointer-events: auto; text-align: left; }
.field {
  display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px; background: var(--white);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 10px 28px rgba(10, 45, 120, .26), 0 2px 6px rgba(10, 45, 120, .16);
  transition: box-shadow .2s var(--ease);
}
.field:focus-within { box-shadow: 0 0 0 3px rgba(91, 75, 224, .55), 0 10px 28px rgba(10, 45, 120, .26); }
.field input {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 6px 0 16px; border: 0; outline: none; background: transparent;
  font: 500 15px/1 var(--sans); color: var(--ink);
}
.field input::placeholder { color: var(--ink2); }
.field button {
  flex: none; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 14px/1 var(--sans); color: var(--white); background: var(--ink);
  box-shadow: 0 6px 16px rgba(21, 22, 27, .26);
  transition: background-color .3s ease, box-shadow .3s ease, transform .3s var(--ease), opacity .2s;
}
.field button:hover { background: #2c2d36; box-shadow: 0 10px 22px rgba(21, 22, 27, .32); transform: translateY(-1px); }
.field button:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
.field button:focus-visible { outline: 3px solid var(--lilac); outline-offset: 2px; }
.field button .short { display: none; }
.join.busy button { opacity: .7; pointer-events: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.note, .msg { margin: 12px 0 0; text-align: center; font: 500 12.5px/1.45 var(--sans); color: rgba(255, 255, 255, .88); text-shadow: 0 1px 8px rgba(8, 40, 110, .35); }
.msg { color: #fff3c4; font-weight: 700; }
.msg:empty { display: none; }
.msg:not(:empty) + .note { display: none; }

.ok {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px 16px 16px; border-radius: 24px;
  color: var(--ink); background: rgba(255, 255, 255, .92); box-shadow: 0 12px 32px rgba(10, 45, 120, .25);
  animation: rise .35s var(--ease) both;
}
.ok:focus { outline: none; }
.ok i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #86e3b8; color: var(--ink); font: 800 15px/1 var(--sans); font-style: normal; }
.ok b { display: block; margin: 4px 0 3px; font: 800 16px/1.3 var(--sans); }
.ok span { display: block; font: 500 14px/1.45 var(--sans); color: var(--ink2); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- the stage: screenshots and folders */
.stage { position: fixed; inset: 0; z-index: 10; pointer-events: none; }

.visor {
  position: absolute; width: 164px; height: auto; z-index: 1;
  filter: drop-shadow(0 16px 26px rgba(10, 50, 120, .22));
  animation: bob 7s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-8px) rotate(-1deg); } }

/* A real screenshot: the phone's rounded corners, a thin light edge so it reads against the sky. */
.shot {
  position: absolute; left: 0; top: 0; z-index: 6;
  width: var(--cw); height: calc(var(--cw) * 1.3);
  border-radius: calc(var(--cw) * .11); overflow: hidden; background: var(--white);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 3px 8px rgba(10, 45, 120, .16), 0 18px 34px rgba(10, 45, 120, .22);
  transform-origin: 50% 50%;
  will-change: transform;
}
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot.idle { animation: float var(--ft, 6s) ease-in-out var(--fd, 0s) infinite; }
@keyframes float { 50% { translate: 0 -6px; } }
.shot.flying { z-index: 8; }

/* A folder: the coloured back with its tab, the screenshots it holds, the glass front with the tag and sticker. */
.folder { position: absolute; width: var(--fw); height: calc(var(--fw) * .907); z-index: 4; transition: translate .35s var(--ease); }
.folder .back { position: absolute; inset: 0; }
.folder .back::before { content: ""; position: absolute; left: 7%; top: 2.5%; width: 38%; height: 20%; border-radius: 12px 12px 0 0; background: var(--tint); }
.folder .back::after { content: ""; position: absolute; left: 0; right: 0; top: 12.8%; bottom: 0; border-radius: 22px; background: var(--tint); }
.folder .slots { position: absolute; inset: 0; z-index: 2; }
.folder .slots .shot {
  z-index: auto; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 2px 6px rgba(0, 0, 0, .16);
  transition: translate .4s var(--ease), rotate .4s var(--ease);
}
.folder .front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64%; z-index: 3; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.8)), var(--glass);
  border: 1px solid rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(10, 45, 120, .2), 0 1px 0 rgba(255,255,255,.9) inset;
  transform-origin: 50% 100%;
  transition: translate .35s var(--ease);
}
/* One soft settle when the folder's last screenshot is in. */
.folder .front.bump { animation: bump .8s ease-in-out; }
@keyframes bump { 40% { transform: scale(1.012, .988); } }

/* Hover a folder: it lifts a little, the glass front dips, and the screenshots inside fan out of the pocket. */
/* Only once every screenshot has landed and the story is over (.done). */
@media (hover: hover) {
  .stage.done .folder { pointer-events: auto; }
  .stage.done .folder:hover { translate: 0 -4px; }
  .stage.done .folder:hover .front { translate: 0 3px; }
  .stage.done .folder:hover .slots .shot:nth-child(1) { translate: calc(var(--fw) * -.15) calc(var(--fw) * -.16); rotate: -9deg; }
  .stage.done .folder:hover .slots .shot:nth-child(2) { translate: calc(var(--fw) * .15) calc(var(--fw) * -.15); rotate: 9deg; }
  .stage.done .folder:hover .slots .shot:nth-child(3) { translate: 0 calc(var(--fw) * -.22); rotate: -1deg; }
}

/* Visor's speech bubble at the end: white, a tail pointing down at his head, pops in. */
.bubble {
  position: absolute; z-index: 9; max-width: 190px; padding: 11px 15px 12px; border-radius: 18px;
  background: var(--white); color: var(--ink2); font: 500 14px/1.35 var(--sans);
  box-shadow: 0 10px 26px rgba(10, 45, 120, .22), 0 2px 6px rgba(10, 45, 120, .12);
  opacity: 0; transform: translateY(8px) scale(.9); transform-origin: var(--tail, 30px) 100%;
  transition: opacity .3s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.bubble b { display: block; color: var(--ink); font-weight: 800; }
.bubble::after {
  content: ""; position: absolute; left: calc(var(--tail, 30px) - 8px); bottom: -7px; width: 16px; height: 16px;
  background: var(--white); border-radius: 0 0 4px 0; transform: rotate(45deg);
}
.bubble.show { opacity: 1; transform: none; }
.bubble.instant { transition: none; }
/* Phones: Visor isn't there during the flight; he pops up in the space the screenshots leave. */
.visor.phone { opacity: 0; translate: 0 16px; scale: .85; transition: opacity .35s ease, translate .55s cubic-bezier(.34, 1.56, .64, 1), scale .55s cubic-bezier(.34, 1.56, .64, 1); }
.visor.phone.show { opacity: 1; translate: 0 0; scale: 1; }
.visor.instant { transition: none; }

.tag {
  position: absolute; left: 8px; bottom: 13px; max-width: 64%; padding: 4px 11px 5px 8px;
  display: flex; align-items: center; gap: 6px; transform: rotate(-4deg);
  border-radius: 4px 12px 12px 4px; background: #fff8e6; color: #3b3325;
  box-shadow: 0 2px 6px rgba(60, 45, 20, .18);
  font: 400 calc(var(--fw) * .085)/1.1 var(--hand);
}
.tag::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 3px; background: #e6e1d2; }
.sticker { position: absolute; right: 6%; bottom: 10%; width: 26%; transform: rotate(10deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); }
.label {
  position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 6px 7px 6px 12px; border-radius: 999px; color: var(--ink);
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 16px rgba(10, 45, 120, .14);
  font: 800 13px/1 var(--sans);
}
.count { min-width: 26px; padding: 4px 6px; border-radius: 7px; text-align: center; background: rgba(21, 22, 27, .07); color: var(--ink2); font: 800 11px/1 var(--sans); }
.plus {
  position: absolute; right: -6px; top: 18%; z-index: 5; padding: 4px 7px; border-radius: 7px;
  background: var(--lilac); color: var(--white); font: 800 11px/1 var(--sans);
  opacity: 0; transform: scale(.8);
}
/* "+N" once: fades up, stays, fades away. */
.plus.pop { animation: pop 2.6s ease-in-out forwards; }
@keyframes pop { 0% { opacity: 0; transform: translateY(4px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }

/* ---------------------------------------------------------------- smaller screens */
/* Short laptop screens: a tighter hero leaves the folders room. */
@media (min-width: 761px) and (max-height: 780px) {
  .hero { padding-top: clamp(12px, 3vh, 28px); }
  .badge { margin-bottom: 12px; }
  .lede { margin-top: 10px; font-size: 15px; }
  .join { margin-top: 18px; }
  .note { margin-top: 9px; }
}
@media (max-width: 1100px) { :root { --cw: 84px; --fw: 164px; } }
@media (max-width: 760px) {
  :root { --cw: 70px; --fw: 104px; }
  .nav { padding: max(18px, env(safe-area-inset-top)) 18px 0; }
  .brand { font-size: 14px; }
  .nav-cta { min-height: 38px; padding: 0 13px; font-size: 12px; }
  .hero { padding: clamp(24px, 5vh, 44px) 20px 0; }
  .badge { margin-bottom: 14px; font-size: 11px; }
  .lede { margin-top: 12px; }
  .join { margin-top: 22px; }
  .field input { padding-left: 14px; }
  .field button { padding: 0 16px; }
  .tag { left: 5px; bottom: 8px; padding: 3px 7px 3px 5px; gap: 4px; }
  .tag::before { width: 4px; height: 4px; }
  .folder .back::after, .folder .front { border-radius: 15px; }
  .label { top: calc(100% + 7px); padding: 5px 5px 5px 9px; gap: 5px; font-size: 11px; }
  .count { min-width: 22px; padding: 4px 5px; font-size: 10px; }
  .plus { font-size: 10px; padding: 4px 6px; }
}
@media (max-width: 400px) { .field button .long { display: none; } .field button .short { display: inline; } }

@media (prefers-reduced-motion: reduce) {
  .sky::before, .sky::after, .visor, .shot.idle { animation: none; }
  .bubble, .visor.phone { transition: none; }
}