/* Contourly — landing screen styles. Wave-1 EXEMPLAR (own file per screen).
   ONE responsive DOM: mobile-first here, tablet ≥768, desktop grid ≥1024.
   Foundation tokens/components live in app.css; this file is layout only.
   Screen root = .ct-screen.ct-screen--page → app.js reveals the global footer +
   owl mascot. Header comes from ui.pageHeader(); footer/mascot are global. */

/* ---- body: mobile single column ----------------------------------------- */
.ct-landing__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 16px 20px 32px;
}

/* ---- hero --------------------------------------------------------------- */
.ct-landing__hero { position: relative; }
.ct-landing__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ct-landing__h1 {
  font: 700 40px/0.98 var(--ct-font);
  letter-spacing: -.03em;
  margin: 0;
  text-wrap: balance;
}
.ct-landing__h1 em { font-style: italic; font-weight: 700; color: var(--ct-blue); }
.ct-landing__h1--sm { font-size: 33px; }
.ct-landing__squig { display: block; margin-top: 10px; }
.ct-landing__lede { display: none; }   /* revealed on desktop */

/* ---- showcase (Italy card) ---------------------------------------------- */
.ct-landing__showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 8px 8px;
}
.ct-landing__fx { display: none; }     /* desktop-only decoration */
.ct-landing__mini { display: none; }   /* desktop-only rival card */

.ct-landing__card {
  position: relative;
  width: 296px; max-width: 100%;
  background: var(--ct-white);
  border: var(--ct-bw-fat) solid var(--ct-ink);
  border-radius: var(--ct-r-panel);
  box-shadow: var(--ct-sh-9);
  padding: 18px;
  transform: rotate(-2deg);
}
.ct-landing__card-art { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.ct-landing__card-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ct-landing__card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.ct-landing__card-name { font: 700 16px var(--ct-font); }
.ct-landing__card-when { display: flex; align-items: center; gap: 6px; font: 600 12.5px var(--ct-font); color: var(--ct-text-2); }
.ct-landing__card-burst {
  position: absolute; top: -30px; right: -22px;
  transform: scale(.72);
  transform-origin: top right;
}
.ct-landing__card-live { position: absolute; top: -14px; left: 16px; box-shadow: var(--ct-sh-3); }
.ct-landing__card-move { position: absolute; bottom: -15px; right: 20px; font-style: italic; box-shadow: var(--ct-sh-3); }

/* ---- actions ------------------------------------------------------------ */
.ct-landing__actions { display: flex; flex-direction: column; gap: 14px; }
.ct-landing__cta { display: flex; flex-direction: column; gap: 12px; }
/* Both CTAs share one generous height so "Play" and "Play with a friend" read as an
   equal, matched pair (Play cobalt, friend white) — not one slightly shorter than the
   other. 64px = the hero size; the --lg friend button is lifted to match. */
.ct-landing__cta .ct-btn { width: 100%; height: 64px; }
.ct-landing__proof { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 2px; }
.ct-landing__proof--desktop { display: none; }
.ct-landing__banner { transform: rotate(-.6deg); }
.ct-landing__promo { display: flex; justify-content: center; }

/* ---- mobile nav links (header nav collapses < 768) ---------------------- */
.ct-landing__links { display: flex; justify-content: center; gap: 20px; font: 600 13px var(--ct-font); color: var(--ct-text-2); padding-top: 2px; }
.ct-landing__link { cursor: pointer; }

/* ========================================================================= */
/* TABLET ≥768: roomier column, lede + full proof row, side-by-side CTAs,     */
/* header nav takes over from the mobile links row.                          */
/* ========================================================================= */
@media (min-width: 768px) {
  .ct-landing__body { gap: 24px; padding: 24px 32px 40px; align-items: center; }
  .ct-landing__body > * { width: 100%; max-width: 620px; }
  .ct-landing__links { display: none; }
  .ct-landing__lede { display: block; font: 500 16px/1.55 var(--ct-font); color: var(--ct-text-2); margin: 14px 0 0; text-wrap: pretty; }
  .ct-landing__lede b { color: var(--ct-ink); }
  .ct-landing__proof--desktop { display: inline-flex; }
  .ct-landing__proof { justify-content: flex-start; }
  .ct-landing__cta { flex-direction: row; flex-wrap: wrap; }
  .ct-landing__cta .ct-btn { width: auto; flex: 1 1 auto; }
  .ct-landing__hero { text-align: left; }
}

/* ========================================================================= */
/* DESKTOP ≥1024: a poster that fills exactly ONE viewport — global header +   */
/* hero + showcase + CTAs + proof + the FULL global footer, with no scroll.    */
/* The body is a fixed-height grid (100dvh minus the global header+footer       */
/* chrome) whose two rows are vertically centered; clamp()-based type + spacing */
/* scale the hero UP on taller laptops (poster feel) and compress it on short   */
/* ones so every variant still fits. Mobile/tablet above keep natural scroll.   */
/* ========================================================================= */
@media (min-width: 1024px) {
  /* chrome reserve = global header (66) + global footer (52) + a hair of slack.
     Pinning the body to the leftover makes header + body + footer == ~100dvh. */
  .ct-landing { --ct-land-reserve: 124px; }
  .ct-landing__body {
    height: calc(100dvh - var(--ct-land-reserve));
    min-height: 0;
    max-width: 1240px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
      "hero    showcase"
      "actions showcase";
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: start;
    column-gap: clamp(28px, 4vw, 72px);
    row-gap: clamp(10px, 2vh, 24px);
    padding: clamp(6px, 1.6vh, 20px) clamp(24px, 3.4vw, 56px);
  }
  .ct-landing__body > * { max-width: none; }
  .ct-landing__hero { grid-area: hero; align-self: end; }
  .ct-landing__actions { grid-area: actions; align-self: start; }
  .ct-landing__showcase {
    grid-area: showcase; align-self: center; justify-self: center;
    min-height: clamp(340px, 50vh, 560px); padding: 0;
  }

  /* hero — bigger headline, wider measure, poster weight */
  .ct-landing__chips { margin-bottom: clamp(8px, 1.4vh, 16px); }
  .ct-landing__h1 { font-size: clamp(52px, 2.3vw + 2.9vh, 86px); max-width: 15ch; line-height: 0.95; }
  .ct-landing__h1--sm { font-size: clamp(40px, 1.5vw + 2.4vh, 60px); max-width: 20ch; }
  .ct-landing__squig { margin-top: clamp(9px, 1.3vh, 15px); width: clamp(168px, 14vw, 214px); height: auto; }
  .ct-landing__lede {
    font-size: clamp(15px, 0.5vw + 0.9vh, 19px);
    max-width: 46ch;
    margin-top: clamp(11px, 1.7vh, 21px);
  }

  /* actions — bigger CTAs */
  .ct-landing__cta { margin-top: clamp(6px, 1.4vh, 16px); gap: clamp(12px, 1.3vw, 18px); }
  /* Equal height on desktop too: both buttons use the SAME clamp so they scale up
     together on tall laptops (poster feel) and never diverge by a couple pixels. */
  .ct-landing__cta .ct-btn--hero {
    height: clamp(60px, 6vh, 74px); padding: 0 clamp(32px, 2.8vw, 48px);
    font-size: clamp(19px, 0.4vw + 1.4vh, 23px); flex: 0 0 auto;
  }
  .ct-landing__cta .ct-btn--lg { height: clamp(60px, 6vh, 74px); flex: 0 0 auto; }
  .ct-landing__proof { margin-top: clamp(12px, 1.9vh, 24px); gap: 10px; }
  .ct-landing__banner { margin-top: clamp(6px, 1.2vh, 14px); }

  /* showcase decoration + rival card revealed, scaled with the viewport */
  .ct-landing__fx { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
  .ct-landing__fx-burst { position: absolute; }
  .ct-landing__fx-burst--a { top: 6%; left: 5%; opacity: .5; animation: ct-spin 70s linear infinite; }
  .ct-landing__fx-burst--b { top: 15%; right: 5%; width: 220px; height: 220px; opacity: .18; animation: ct-spin 110s linear infinite reverse; }
  .ct-landing__spark { position: absolute; animation: ct-pulse 2.6s ease-in-out infinite; }
  .ct-landing__spark:nth-of-type(3) { animation-delay: .5s; }

  .ct-landing__mini {
    display: block;
    position: absolute; right: 2%; top: 6%;
    transform: rotate(8deg);
    width: clamp(150px, 13vw, 196px); z-index: 1;
    background: var(--ct-white);
    border: var(--ct-bw) solid var(--ct-ink);
    border-radius: var(--ct-r-card);
    box-shadow: var(--ct-sh-6);
    padding: 12px;
  }
  .ct-landing__mini svg { display: block; width: clamp(88px, 8vw, 116px); height: clamp(88px, 8vw, 116px); margin: 0 auto; }
  .ct-landing__mini-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font: 700 12.5px var(--ct-font); }
  .ct-landing__mini-score { color: var(--ct-text-4); font-size: 21px; }

  .ct-landing__card {
    transform: rotate(-4deg);
    width: clamp(300px, 23vw, 366px);
    padding: clamp(16px, 1.3vw, 22px);
    z-index: 2;
  }
  .ct-landing__card-art { width: clamp(150px, 11vw, 196px); height: clamp(150px, 11vw, 196px); }
  .ct-landing__card-name { font-size: clamp(16px, 1.1vw, 19px); }
  .ct-landing__card-burst {
    top: -44px; right: -38px;
    transform: none;
    animation: ct-bob 3s ease-in-out infinite;
  }
  .ct-landing__card-live { top: -15px; left: 18px; }
  .ct-landing__card-move { bottom: -17px; right: 22px; }

  /* taller laptops: let the composition breathe into a true poster */
  @media (min-height: 900px) {
    .ct-landing { --ct-land-reserve: 132px; }
  }
}

/* keep the marching outline still + no float when the user opts out of motion */
@media (prefers-reduced-motion: reduce) {
  .ct-landing__card-burst,
  .ct-landing__fx-burst { animation: none !important; }
}