/* Homepage (docs/visual-design.md §7.1, WP1). Builds on the tokens and components in style.css.
   Layout: a full-bleed hero (the World backdrop with live figures, the headline on a cream scrim),
   five colour blocks with a live scene window each, and a play dock fixed to the bottom. */

.home { --dock-h: 96px; padding-bottom: calc(var(--dock-h) + 40px + env(safe-area-inset-bottom)); }
.home main { display: block; }

/* ---------- top bar (over the hero's sky) ---------- */
.home-bar {
  position: absolute; z-index: 5; inset: 0 0 auto 0;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) clamp(16px, 4vw, 48px);
}
.home-bar .logo {
  font-size: 1.7rem; color: var(--ink); text-decoration: none; line-height: 1;
  padding: .28em .55em .34em; border-radius: var(--r-pill); background: rgb(255 246 228 / .9);
  box-shadow: var(--outline), var(--toy-1);
}
.home-nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.nav-link {
  color: var(--ink); text-decoration: none; font-weight: 700; padding: .5em .95em; border-radius: var(--r-pill);
  background: rgb(255 246 228 / .9); box-shadow: inset 0 0 0 2px rgb(36 23 15 / .18);
  transition: background-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);
}
.nav-link:hover { background: var(--cream); box-shadow: inset 0 0 0 2px var(--ink); }
.nav-account { padding: .5em 1.15em; margin-left: var(--sp-1); }
.nav-account.is-member { background: var(--lemon); }
.home-nav .lang-switch { background: rgb(255 246 228 / .9); color: var(--ink); box-shadow: inset 0 0 0 2px rgb(36 23 15 / .18); font-size: .95rem; }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate; display: grid; align-content: center;
  min-height: clamp(560px, 94svh, 920px);
  background: #cfe9f8; /* the World sky until the poster paints */
}
.hero-view { position: absolute; inset: 0; z-index: 0; }
.stage-fallback > picture, .stage-fallback > .poster, .stage-fallback > picture > .poster,
.stage-fallback > noscript > .poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.poster[hidden] { display: none; }
/* the cream scrim behind the headline (left), and a soft fade into the first block (bottom) */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(255 246 228 / .95) 0%, rgb(255 246 228 / .9) 28%, rgb(255 246 228 / .74) 40%, rgb(255 246 228 / 0) 51%),
    linear-gradient(180deg, rgb(255 246 228 / 0) 78%, rgb(255 246 228 / .35) 100%);
}
.hero-copy {
  position: relative; z-index: 2; max-width: 46rem;
  padding: 104px clamp(16px, 5vw, 88px) 136px;
  display: grid; gap: var(--sp-4); justify-items: start;
}
.hero-tag { --tag: var(--lemon); margin: 0; }
.hero-title {
  margin: 0; font-size: clamp(2.8rem, 5vw, 4.9rem); letter-spacing: -.035em; line-height: .98;
  text-shadow: 0 .05em 0 rgb(255 255 255 / .7);
}
.hero-title .line { display: block; }
.pitch { margin: 0; max-width: 27em; font-size: clamp(1.08rem, 1.35vw, 1.28rem); line-height: 1.5; color: var(--ink); font-weight: 500; }

/* ---------- play dock (fixed bottom, always in reach) ---------- */
.playdock {
  position: fixed; z-index: var(--z-playdock); left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  translate: -50% 0; width: min(780px, calc(100% - 32px));
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-3);
  background: var(--cream); border-radius: var(--r-xl); box-shadow: var(--outline), var(--toy-3);
}
.playdock .create { flex: none; }
.join-code { position: relative; flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); min-width: 0; }
.join-code label { font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.join-row { display: flex; gap: var(--sp-2); }
.join-row input {
  width: 6.6em; text-align: center; text-transform: uppercase; letter-spacing: .3em; padding-inline: .6em .3em;
  font-weight: 800; font-size: 1.3rem; background: #fff;
}
.join-row input::placeholder { color: rgb(107 84 68 / .6); }
.join-row button { padding-inline: 1.3em; }
.join-error {
  position: absolute; right: 0; bottom: calc(100% + 18px); margin: 0; min-height: 0;
  padding: .45em .9em; border-radius: var(--r-pill); background: #fff; color: var(--stop); font-weight: 700; font-size: var(--fs-small);
  box-shadow: var(--outline), var(--toy-1); white-space: nowrap;
}
.join-error:empty { display: none; }

/* ---------- section blocks ---------- */
.sec {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
  gap: clamp(28px, 4.5vw, 72px);
  padding-inline: max(16px, calc((100% - 1200px) / 2));
}
.sec.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sec.flip .sec-copy { order: 2; }
.sec-copy { display: grid; gap: var(--sp-4); justify-items: start; }
.sec-copy > * { margin: 0; }
.sec-tag { --tag: var(--cream); --rot: -2deg; }
.sec.flip .sec-tag { --rot: 2deg; }
.sec[data-c='cocoa'] .sec-tag { --tag: var(--lemon); }
.sec-text { font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.5; max-width: 32em; }
.sec-text b { font-weight: 800; }
.sec .display { font-size: clamp(2.1rem, 4vw, 3.3rem); }
/* AA on tangerine: ink type (7.4:1); cream would be 2.2:1 */
.sec[data-c='tangerine'] .sticker { color: var(--ink); text-shadow: 0 .06em 0 rgb(255 255 255 / .45); }
.sec[data-c='cocoa'] .sec-text { color: var(--cream); }

/* the scene window: a chunky rounded frame with the live scene (or its poster) inside */
.sec-window {
  position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-xl); overflow: hidden;
  background: var(--clay); box-shadow: var(--outline), var(--toy-3);
  contain: layout paint;
}
.sec[data-c='cocoa'] .sec-window { box-shadow: 0 0 0 2.5px var(--cream), 0 7px 0 #000, 0 22px 40px -14px rgb(0 0 0 / .6); background: var(--cocoa-2); }
.sec-view { position: absolute; inset: 0; }

/* ---------- footer (on the last block's cocoa) ---------- */
.home-foot {
  background: var(--cocoa); color: var(--sand); text-align: center; font-size: var(--fs-small);
  padding: var(--sp-5) 16px calc(var(--dock-h) + 48px + env(safe-area-inset-bottom));
  margin-bottom: calc(-1 * (var(--dock-h) + 40px + env(safe-area-inset-bottom)));
}
.home-foot a { color: var(--sand); text-underline-offset: 3px; }
.home-foot a:hover { color: var(--cream); }
.home-foot .foot-lang { margin: var(--sp-3) 0 0; }

/* ---------- sign-in sheet (the shared auth panel, auth-panel.js) ---------- */
.signin-sheet { width: min(480px, calc(100vw - 32px)); }
.signin-sheet[open] { display: grid; gap: var(--sp-3); }
.signin-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.signin-head h2 { margin: 0; font-size: var(--fs-h2); }
.signin-close { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; font-size: 1rem; }
.signin-note { margin: 0; font-size: var(--fs-small); }
.home-auth .auth-panel { box-shadow: none; padding: 0; display: grid; gap: var(--sp-3); background: transparent; }
.home-auth form { display: grid; gap: var(--sp-3); }
.home-auth h2 { margin: 0; font-size: var(--fs-h3); }
.home-auth .tabs {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; padding: 4px;
  background: var(--clay); border-radius: var(--r-pill); box-shadow: inset 0 0 0 2px var(--ink);
}
.home-auth .tabs::before {
  content: ''; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-pill);
  background: var(--lemon); box-shadow: 0 0 0 2px var(--ink); transition: translate var(--t-quick) var(--ease-out);
}
.home-auth .tabs:has(> button:nth-child(2)[aria-selected='true'])::before { translate: 100% 0; }
.home-auth .tabs button { background: transparent; color: var(--ink); padding: .55em .6em; white-space: nowrap; box-shadow: none; translate: none; }
.home-auth .field { display: grid; gap: 6px; font-size: var(--fs-small); color: var(--ink-2); font-weight: 600; }
.home-auth .field input { font-size: 1rem; }
.home-auth .hint { font-size: .8rem; font-weight: 400; }
.home-auth .code-entry { letter-spacing: .35em; text-align: center; font-size: 1.7rem; font-weight: 800; }
.home-auth .linkish {
  background: none; color: var(--skyline); padding: 0; border-radius: 0; font-weight: 600; box-shadow: none; translate: none;
  justify-self: start; text-decoration: underline; text-underline-offset: 3px;
}
.home-auth .notice { background: var(--clay); border-radius: var(--r-sm); padding: 12px 14px; margin: 0; }
.home-auth .error:empty { display: none; }
.home-auth .error { margin: 0; }
.home-auth .spread { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }

/* ---------- phones and narrow windows (< 900 px) ---------- */
@media (max-width: 899.98px) {
  .home { --dock-h: 76px; }
  .wide-only { display: none; }
  .home-bar { padding: var(--sp-3) 16px; }
  .home-bar .logo { font-size: 1.4rem; }
  .hero { display: block; min-height: 0; background: var(--cream); }
  .hero-view { position: relative; inset: auto; height: clamp(340px, 56svh, 560px); }
  .hero::before { display: none; }
  .hero-copy { padding: var(--sp-5) 16px var(--sp-7); max-width: 36rem; gap: var(--sp-3); }
  .hero-title { font-size: clamp(2.3rem, 10.4vw, 3.6rem); }
  .hero-tag { order: -1; }

  .playdock {
    left: 0; right: 0; bottom: 0; translate: none; width: auto; gap: var(--sp-2);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 0 0 2.5px var(--ink), 0 -10px 28px -14px rgb(36 23 15 / .45);
  }
  .playdock .create { min-height: 52px; font-size: 1.08rem; padding: .4em 1em .4em .85em; }
  .join-code label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .join-row { flex: 1; justify-content: flex-end; min-width: 0; }
  .join-row input { width: 100%; max-width: 6.4em; min-width: 0; font-size: 1.15rem; padding: .6em .2em .6em .45em; letter-spacing: .22em; }
  .join-row button { padding: .7em 1em; }
  /* German labels run longer ("Party starten", "Beitreten"): tighter padding keeps the code field readable. */
  :lang(de) .playdock .create { padding-inline: .7em .65em; }
  :lang(de) .join-row button { padding-inline: .7em; }
  :lang(de) .join-row input { letter-spacing: .14em; padding-inline: .35em .15em; }
  .join-error { right: 4px; bottom: calc(100% + 14px); }

  .sec, .sec.flip { grid-template-columns: minmax(0, 1fr); padding-block: var(--sp-8); gap: var(--sp-5); }
  .sec .sec-copy, .sec.flip .sec-copy { order: 2; }
  .sec-window { aspect-ratio: auto; height: clamp(260px, 44svh, 440px); border-radius: var(--r-lg); }
  /* posters (2D tier, no JS) are 3:2: show them whole instead of cropping the sides */
  html:not([data-tier]) .sec-window, html[data-tier='off'] .sec-window { aspect-ratio: 3 / 2; height: auto; }
}
@media (max-width: 359.98px) {
  .playdock .create { font-size: 1rem; padding-inline: .7em; }
  .playdock .create::before { display: none; }
}

/* reduced motion: nothing slides (style.css stops the shared animations) */
@media (prefers-reduced-motion: reduce) {
  .nav-link { transition: none; }
  .home-auth .tabs::before { transition: none; }
}