/* unempty.app home page only, loaded after site.css. site.css is shared with the
   terms, privacy, support, press and ar/tr pages, so nothing here may reach them:
   every rule is under body.home or uses a class only index.html has. It lives in
   a file because the CSP in _headers has style-src 'self': a <style> block in the
   page would be refused.

   The App Store switch is the last block of this file; the one word to change is
   on the <html> tag of index.html. */

.home {
  --page: 1120px;
  --gutter: 16px;
  --shot-shadow: 0 10px 26px rgba(32, 40, 26, 0.12);
}

@media (min-width: 640px) {
  .home { --gutter: 28px; }
}

/* ------------------------------------------------------------------- bar */

.home .site-header {
  position: static;
  flex-wrap: nowrap;
  min-height: 56px;
  padding: 6px max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter)));
  background: none;
  border-bottom: 0;
}

/* the negative margin lines the word up with the picture's edge, not its tap area */
.home .site-header nav {
  order: 0;
  width: auto;
  margin-inline: auto calc(-1 * var(--s2));
}

.home .site-header nav a { padding: 0 var(--s2); font-size: 15px; }

/* ---------------------------------------------------------------- layout */

.home main { padding: var(--s2) var(--gutter) var(--s6); }

.home .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ hero */

.home .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  padding-top: 0;
}

.home .hero h1 {
  font-size: clamp(30px, 9.7vw, 44px);
  font-weight: 800;
  text-wrap: balance;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

/* the highlighted words, as on the ads: a lime chip, not the marker site.css draws */
.home h1 u {
  padding: 0 0.14em 0.04em;
  border-radius: 0.2em;
  background: var(--lime);
  box-shadow: none;
  white-space: nowrap;
}

.home .hero .lede {
  margin: var(--s2) 0 0;
  color: var(--ink2);
}

.home .pair { margin: 0; }

/* The pair's own shape: site.css has it 4:3. The height cap keeps the button in the
   first screen of a phone with its browser bars showing; both frames crop alike. */
.home .pair-frame {
  aspect-ratio: 1000 / 1340;
  max-height: 72vh;
  max-height: 64svh;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-lg);
}

/* The frame takes the pointer, never the pictures: pressing on an image and moving
   starts the browser's own image drag, which cancels the slider after one step. */
.home .pair-frame img { pointer-events: none; }

/* Once, as the page opens: the seam travels and comes back to the middle, so it is
   plain what the picture does. The keyframes name no start or end, so the animation
   leaves from and lands on the inline values site.js sets. site.css switches every
   animation off for anyone who asked for reduced motion. */
@keyframes home-clip {
  38% { clip-path: inset(0 10% 0 0); }
  72% { clip-path: inset(0 84% 0 0); }
}

@keyframes home-seam {
  38% { left: 90%; }
  72% { left: 16%; }
}

html.js .home .pair-frame .clip { animation: home-clip 2.8s ease-in-out 0.5s; }

html.js .home .pair-frame .edge,
html.js .home .pair-frame .knob { animation: home-seam 2.8s ease-in-out 0.5s; }

/* ------------------------------------------------------- the App Store button */

.home .store {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s1);
}

.home .store .btn { font-family: inherit; }

/* Coming soon is not a control yet: nothing moves under the pointer. */
.home .store-soon { cursor: default; }
.home .store-soon:hover { background: var(--lime); }

.home .browser-link {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-height: 44px;
  border: 0;
  font-size: 14px;
  color: var(--dim);
  text-decoration: underline;
  text-decoration-color: var(--lime-hairline);
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------- the nine */

/* Every picture in view, nothing cut at the edge of the screen (owner: «на телефоне что-то с
   версткой»). Two across on a phone, where the page's first picture already says what the first
   card says, so it stands aside and the eight fill the rows; three across on a tablet. */
.home .shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5) var(--s3);
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
}

.home .shots > li:first-child { display: none; }

@media (min-width: 640px) {
  .home .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home .shots > li:first-child { display: block; }
}

.home .shots figure { margin: 0; }

.home .shots img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
  box-shadow: var(--shot-shadow);
}

.home .shots figcaption {
  margin-top: var(--s2);
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink2);
}

.home .shots figcaption b {
  font-weight: 700;
  color: var(--ink);
}

/* ------------------------------------------------- the app, as the store names it */

.home .get {
  display: grid;
  justify-items: center;
  gap: var(--s4);
  margin-top: var(--s7);
  padding: var(--s6) var(--s5) var(--s4);
  border-radius: var(--r-lg);
  background: var(--strong);
  text-align: center;
}

.home .get-icon {
  width: 76px;
  height: 76px;
  border-radius: 18px;
}

.home .get h2 {
  font-size: clamp(19px, 5.6vw, 25px);
  text-wrap: balance;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--panel);
}

.home .get p {
  margin: var(--s2) 0 0;
  font-size: 15px;
  color: var(--chip);
}

.home .get .store { width: 100%; }
.home .get .browser-link { color: var(--chip); text-decoration-color: var(--edge); }

/* --------------------------------------------------------- the small print */

.home .fine {
  margin-top: var(--s6);
  max-width: var(--measure);
  font-size: 13px;
  line-height: 1.45;
  color: var(--dim);
}

.home .fine p { margin: 0 0 var(--s1); }

.home .site-footer { padding-inline: var(--gutter); }
.home .site-footer > * { max-width: calc(var(--page) - 2 * var(--gutter)); }

/* ------------------------------------------------------------ wider screens */

@media (min-width: 640px) {
  .home .hero h1 { font-size: 54px; }
  .home .store { align-items: flex-start; }
  .home .browser-link { align-self: flex-start; }
  .home .get .store { width: auto; align-items: center; }
  .home .get .browser-link { align-self: center; }
}

/* Words on the left, the room on the right. */
@media (min-width: 900px) {
  .home main { padding-top: var(--s4); }

  /* the two outer rows share what is left, so the words sit in the middle of the room */
  .home .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(45%, 480px));
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 56px;
    row-gap: var(--s5);
  }

  .home .hero-copy { grid-column: 1; grid-row: 2; }
  .home .hero-cta { grid-column: 1; grid-row: 3; }
  .home .pair { grid-column: 2; grid-row: 1 / 5; }

  /* two lines, as on the ad: the size follows the column so "Furnish any room" fits */
  .home .hero h1 { font-size: clamp(44px, 4.85vw, 62px); }
  .home .hero .lede { margin-top: var(--s4); font-size: 20px; }

  .home .pair-frame {
    aspect-ratio: auto;
    height: min(643px, calc(100vh - 120px));
    max-height: none;
  }

  .home .get {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-items: start;
    column-gap: var(--s5);
    padding: var(--s6);
    text-align: start;
  }
}

/* All nine at once: there is no swipe with a mouse. Five and four, centred. */
@media (min-width: 1000px) {
  .home .shots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s6) var(--s4);
    margin: var(--s7) 0 0;
  }

  .home .shots > li { flex: 0 0 calc((100% - 4 * var(--s4)) / 5); }
}

/* ----------------------------------------------------------- the App Store switch

   <html data-app-store="soon"> in index.html. Anything but "live" shows the button
   that is not a link, so a typo can never put a dead link on the page. */
html:not([data-app-store="live"]) .home .store-live { display: none; }
html[data-app-store="live"] .home .store-soon { display: none; }