/* S01 — Welcome (default) */

.screen {
  position: relative;
  min-height: 100vh;  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5vw 5vw;
}

/* ---------- Main content ---------- */

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 7rem);
  flex: 1;
  flex-wrap: wrap;
  padding: 4vh 0;
}

/* Polaroid stack */

.polaroid-stack {
  position: relative;
  width: min(400px, 90vw);
  height: min(480px, 65vh);
  flex-shrink: 0;
  transform: translateY(1.5vh);
}

.scan-meta {
  position: absolute;
  top: -3.2rem;
  left: 0;
  font-size: 0.95rem;
  line-height: 1.3;
  text-transform: lowercase;
  color: var(--color-cream);
}

.polaroid {
  position: absolute;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  background: var(--color-polaroid) url("../assets/images/polaroid-paper-1.png") center / cover;
  padding: 14px 14px 46px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  width: 78%;
}

/* rotation is a physical deal, and the ROLES travel: the top card flies off
   the stack, the card behind it slides bodily into the front position
   (top/left/transform all transition between the slot classes), the third
   slides into the back slot, and the dealt card — once fully out of view —
   is reloaded with the next capture and rises back in as the new third.
   No card ever changes its photo while visible, so there is no hidden
   content-swap window, no instant where the whole stack blinks out, and a
   caption can never sit over the wrong picture. See index.html's rotate(). */
.polaroid-front {
  z-index: 4;
}

.polaroid-stack.dealing .polaroid {
  transition:
    top 0.95s cubic-bezier(0.3, 0.05, 0.2, 1),
    left 0.95s cubic-bezier(0.3, 0.05, 0.2, 1),
    transform 0.95s cubic-bezier(0.3, 0.05, 0.2, 1),
    opacity 0.5s ease 0.1s; /* an entering card materialises early in its rise */
}

/* the dealt card lifts up and away the way a hand takes the top photo off a
   pile — visible for most of its flight, fading only near the end (its own
   later opacity delay below), never while still sitting in the stack */
.polaroid-stack.dealing .polaroid--dealt {
  transition:
    top 0.8s cubic-bezier(0.3, 0.05, 0.2, 1),
    left 0.8s cubic-bezier(0.3, 0.05, 0.2, 1),
    transform 0.8s cubic-bezier(0.3, 0.05, 0.2, 1),
    opacity 0.35s ease 0.4s;
  transform: translate(-14%, -58%) rotate(-14deg) scale(0.98);
  opacity: 0;
  z-index: 6;
}

/* the fourth, parked card: always waiting buried under the stack with the
   NEXT capture already loaded, so the moment the front card lifts off this
   one can start rising into the third slot immediately — no dead beat where
   the pile just sits one card short waiting for the flight to finish */
.polaroid-stack .polaroid-parked {
  transition: none;
  top: 18%;
  left: 7%;
  transform: rotate(7deg) translateY(36px);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .polaroid-stack.dealing .polaroid { transition: none; }
}

.polaroid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.06;
  object-fit: cover;
  background: var(--photo-backdrop);
}

/* a whisper of a radial gradient inside the photo — the centre a touch
   darker, fading to nothing well before the edges — so the print reads as
   having a slight depth instead of sitting perfectly flat */
.polaroid::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  bottom: 46px;
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.16) 0%,
    rgba(0, 0, 0, 0.07) 45%,
    rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
}

.polaroid-back {
  top: 9%;
  left: 28%;
  transform: rotate(-5deg);
  z-index: 1;
}

.polaroid-front {
  top: 0;
  left: 0;
  transform: rotate(-0.1deg);
  z-index: 4;
}

.polaroid-third {
  top: 18%;
  left: 7%;
  transform: rotate(4deg);
  z-index: 2;
}

.caption-third {
  transform: none;
}

.polaroid-caption {
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 46px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-family: var(--font-caption);
  color: var(--color-caption-blue);
  font-size: 1.4rem;
  line-height: 1;
}

.caption-back {
  transform: none;
}

.caption-front {
  transform: none;
}

.polaroid-front:hover,
.polaroid-front:focus-visible {
  transform: rotate(1.6deg) translateY(-8px) scale(1.025);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.6);
  z-index: 5;
}

.polaroid-back:hover,
.polaroid-back:focus-visible {
  transform: rotate(-4deg) translateY(-8px) scale(1.025);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.6);
  z-index: 5;
}

.polaroid-third:hover,
.polaroid-third:focus-visible {
  transform: rotate(8deg) translateY(-8px) scale(1.025);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.6);
  z-index: 5;
}

.polaroid.is-active {
  transform: rotate(0deg) translateY(-8px) scale(1.025);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.6);
  z-index: 6;
}

/* Headline / CTA */

.hero-text {
  max-width: 860px;
}

.headline {
  font-size: clamp(2.4rem, 5.4vw, 5.5rem);
  line-height: 0.95;
  text-transform: lowercase;
  font-weight: 400;
  white-space: nowrap;
}

.headline .cap {
  text-transform: capitalize;
}

.cta {
  display: inline-block;
  margin-top: clamp(1.5rem, 3vw, 2.75rem);
  font-size: clamp(1.6rem, 3vw, 3.25rem);
  text-transform: capitalize;
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--color-cream);
  font-family: inherit;
  padding: 0;
}

.cta:hover {
  opacity: 0.8;
}

/* Mobile — widened to 720px so large phones get the single-card layout (and
   its disabled auto-rotate) instead of the desktop fan animating over itself */

@media (max-width: 720px) {
  .screen {
    padding: 2.5vw 6vw;
    height: 100dvh;      /* exactly the visible area — never taller */
    overflow: hidden;    /* guarantee no scroll on the home screen */
  }

  /* the dealing motion is desktop-only; make sure it can never run here */
  .polaroid-stack.dealing .polaroid {
    transition: none;
  }

  .main {
    flex-direction: column;
    gap: 1.75rem;
    /* clear the fixed logo top and the Community/About nav bottom, then let
       the three blocks (headline, photo, CTA) share the leftover height
       evenly — the old flex-start + a flex-grow CTA dumped ALL the slack
       into one gap in the middle, so the content sat clustered high with a
       big empty band above the plus. space-evenly gives matching air above
       the headline, between the blocks, and below the plus. */
    /* group headline + photo + CTA as ONE block and centre it vertically, so
       the air above (below the big TRACES logo) matches the air below (above
       the Community/About nav) instead of the content clustering high with a
       deep empty band beneath the plus. The larger top padding clears the
       oversized logo so the two visible gaps read as equal. */
    /* space-between keeps the headline near the top and the plus near the
       bottom with only a small margin at each end (the slack sits BETWEEN the
       blocks, around the photo, not pooled above the headline and below the
       plus). The larger top padding is eaten by the oversized TRACES logo, so
       the visible top and bottom margins end up close to equal. */
    padding-top: 6.5rem;
    padding-bottom: 3rem;
    justify-content: space-between;
    align-items: flex-start;
  }

  /* on a phone the headline reads first (above the photo), then the scan,
     then a small "add your capture" line with a big plus off the edge below
     it — dissolve the hero-text wrapper so its headline and cta become
     direct flex children of .main and can be ordered around the stack */
  .hero-text {
    display: contents;
  }

  .headline { order: 0; }
  .polaroid-stack { order: 1; }
  .cta { order: 2; }

  /* the desktop stack fans three polaroids wide, which on a phone collapsed
     into one another so every caption piled up in the same spot. On mobile
     it becomes a clean single card forward, with the other two as quiet
     offset peeks behind it (their captions hidden) - the rotation still
     swaps which capture is in front. */
  .polaroid-stack {
    width: min(210px, 54vw);
    height: auto;
    aspect-ratio: 1 / 1.12;
    margin: 2.6rem auto 0; /* room above for the scan-meta line, off the headline */
    align-self: center;
    transform: none;
  }

  .scan-meta {
    top: -2.4rem;
    font-size: 0.8rem;
  }

  .polaroid {
    width: 100%;
  }

  .polaroid-front { top: 0; left: 0; transform: rotate(-1deg); z-index: 3; }
  .polaroid-back  { top: 5%; left: 7%; transform: rotate(4deg); z-index: 2; opacity: 0.5; }
  .polaroid-third { top: 8%; left: -6%; transform: rotate(-5deg); z-index: 1; opacity: 0.4; }

  /* only the card in front carries a caption on mobile - the peeks behind
     stay quiet so nothing overlaps */
  .polaroid-back .polaroid-caption,
  .polaroid-third .polaroid-caption {
    display: none;
  }

  .polaroid-caption {
    font-size: 1.05rem;
  }

  .hero-text {
    text-align: left;
  }

  /* the headline BLOCK is centred in the column, but its own lines stay
     left-aligned (ragged right) — fit-content shrinks the box to the widest
     line so align-self:center can centre that box, while text-align:left
     keeps the lines themselves flush left inside it */
  .headline {
    white-space: normal;
    font-size: clamp(1.9rem, 6vw, 2.7rem);
    line-height: 1;
    width: fit-content;
    max-width: 100%;
    align-self: center;
    text-align: left;
  }

  /* the CTA is its own compact block now (the "add your capture" line above
     the oversized plus), sized to its content so .main's space-evenly can
     give it matching air above and below instead of it stretching to fill
     and pinning the plus against the bottom nav */
  .cta {
    order: 2;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    text-decoration: none;
    font-size: inherit;
  }

  .cta-text {
    /* same size as the [5 days ago] scan-meta line, so the screen holds only
       three text sizes: the headline, the caption, and this small label */
    font-size: 0.8rem;
    text-align: center;
    text-transform: lowercase;
    text-decoration: underline;
    text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
    margin-bottom: 0.3rem;
  }

  .cta-plus {
    font-size: 5.25rem;
    line-height: 0.9;
    font-weight: 300;
    margin-top: 0;
  }
}

/* Short laptop screens (a 1366x768 panel with browser chrome, or Windows
   display scaling) squeezed the hero until the polaroid stack climbed over
   the small scan-meta caption and the logo. Scale the stack down and give
   the content real top clearance so the proportions hold. */
@media (max-height: 760px) and (min-width: 721px) {
  .main {
    padding: 11vh 0 1vh;
  }
  .polaroid-stack {
    width: min(345px, 34vw);
    height: min(410px, 56vh);
    transform: translateY(2.5vh);
  }
  /* a narrower card broke captions onto two lines and stacked them into
     each other — smaller type keeps every caption to one quiet line */
  .polaroid-caption {
    font-size: 0.98rem;
    letter-spacing: 0.02em;
  }
  .scan-meta {
    top: -2.4rem;
    font-size: 0.8rem;
  }
  .hero-text h1 {
    font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  }
}