/* StickerGo — landing layer: the page for everyone who is not in yet.
 *
 * Same design language as the app (asphalt, acid, condensed display type,
 * slapped-on paper), one notch louder: this is a poster, not a screen.
 * Direction: a lamppost at night, seen from below, plastered with slaps —
 * everything drawn here in SVG/CSS, no image ever leaves the server.
 *
 * Markup lives statically in index.html so the page paints from HTML + CSS
 * alone; js/landing.js only decides whether to show it and wires the code
 * field. Tokens come from base.css — there is no second palette.
 */

/* ----------------------------------------------------------------- shell -- */

.sg-landing {
  position: fixed;
  inset: 0;
  z-index: 900;
  /* y scrolls, x clips: the tape strip and the slaps bleed past the edge on
     purpose and must not hand a phone a sideways scroll to get lost in */
  overflow: hidden auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background-color: var(--bg);
  background-image:
    radial-gradient(56% 34% at 76% 2%, rgba(214, 255, 43, 0.17), transparent 64%),
    radial-gradient(80% 46% at 8% 86%, rgba(255, 46, 99, 0.09), transparent 72%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 7px);
  color: var(--ink);
}
.sg-landing[hidden] { display: none !important; }

/* The landing is its own scroller; the half-built app behind it must not move. */
html.sg-landing-open, html.sg-landing-open body { overflow: hidden; }

/* grain over the whole poster (body::before sits below this z-index) */
.sg-landing::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: screen;
}

.sg-l-wrap {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px calc(28px + var(--safe-b));
}

/* hairline of tape along the very top edge */
.sg-l-rule {
  height: 5px;
  background: repeating-linear-gradient(115deg, var(--acid) 0 16px, var(--acid-deep) 16px 32px);
}

/* --------------------------------------------------------------- topbar -- */

.sg-l-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: calc(var(--safe-t) + 14px) 0 6px;
}
.sg-l-top .sg-logo { font-size: 1.3rem; }
.sg-l-beta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 2px solid var(--hot);
  border-radius: 999px;
  color: var(--hot);
  font-family: var(--font-display);
  font-stretch: 82%;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.sg-l-beta i {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}

/* ------------------------------------------------------------ typography -- */

.sg-l-eyebrow {
  font-family: var(--font-display);
  font-stretch: 82%;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin-bottom: 10px;
}

.sg-l-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 82%;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 13.4vw, 4.3rem);
  line-height: 0.85;
  letter-spacing: -0.014em;
  margin: 0;
}
.sg-l-h1 span { display: block; }

.sg-l-mark {
  display: inline-block !important;
  padding: 0 12px 3px;
  margin-left: -4px;
  background: var(--acid);
  color: #10130a;
  transform: rotate(-2.4deg);
  border-radius: 3px;
  box-shadow: var(--shadow-hard);
}

.sg-l-h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 82%;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 7.6vw, 2.4rem);
  line-height: 0.92;
  letter-spacing: -0.008em;
  margin: 0 0 12px;
}

.sg-l-lead {
  color: var(--ink-dim);
  font-size: 1.06rem;
  line-height: 1.5;
  max-width: 34ch;
  margin-top: 18px;
}
.sg-l-sec > p { color: var(--ink-dim); line-height: 1.55; max-width: 40ch; }
.sg-l-sec { padding-top: var(--sp-7); }

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

.sg-l-hero { padding-bottom: 4px; }

.sg-l-cue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  font-family: var(--font-display);
  font-stretch: 82%;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.sg-l-cue > span { display: inline-flex; align-items: center; gap: 9px; }
.sg-l-cue svg { width: 15px; height: 15px; flex: none; }

/* Not a gate, a shortcut: whoever already holds a code should not have to
   scroll past the whole pitch to use it. */
.sg-l-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap-min);
  padding: 0 12px;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--acid);
  font: inherit;
  text-transform: uppercase;   /* Chrome's UA sheet resets this on <button> */
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.sg-l-jump svg { width: 13px; height: 13px; }
.sg-l-jump:hover { border-color: var(--acid); }
.sg-l-jump[hidden] { display: none !important; }

/* ---------------------------------------------------------------- stage -- */
/* The scene: lamppost, utility box, kerb, cone of light — plus real sticker
 * shapes slapped on top. Aspect-locked so the absolutely positioned slaps
 * always land on the pole, whatever the screen width. */

.sg-l-bleed {
  margin-inline: -20px;
  overflow: hidden;
}
.sg-l-stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 22px auto 0;
  aspect-ratio: 43 / 40;
}
.sg-l-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sg-l-stage::after {   /* asphalt grain across the whole scene */
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.09;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.sg-l-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sg-l-slap {
  position: absolute;
  display: block;
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.55));
}
.sg-l-slap svg { width: 100%; height: 100%; display: block; }

/* on the pole: round surface, so the slaps sit a touch sheared */
.sg-l-slap--a { left: 51.5%; top: 23.5%; width: 22.5%; transform: rotate(-6deg) skewY(-2.5deg); }
.sg-l-slap--b { left: 48%;   top: 40.5%; width: 27%;   transform: rotate(5.5deg) skewY(2deg); }
.sg-l-slap--c { left: 50%;   top: 57%;   width: 19%;   transform: rotate(-13deg); }
.sg-l-slap--d { left: 60%;   top: 71%;   width: 13%;   transform: rotate(12deg); }
/* on the utility box, one running off the left edge of the frame */
.sg-l-slap--e { left: -2%;   top: 60%;   width: 30%;   transform: rotate(-3deg); }
.sg-l-slap--f { left: 22%;   top: 55%;   width: 13.5%; transform: rotate(9deg); }

/* ----------------------------------------------------------------- tape -- */

.sg-l-tape {
  margin: 40px -34px 0;
  padding: 9px 0;
  background: var(--acid);
  color: #10130a;
  transform: rotate(-2.2deg);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}
.sg-l-tape span {
  display: block;
  font-family: var(--font-display);
  font-stretch: 82%;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--fs-sm);
  white-space: nowrap;
  text-align: center;
}

/* ------------------------------------------------------------------ dex -- */

.sg-l-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}
.sg-l-tile {
  position: relative;
  padding: 10px 8px 8px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  text-align: center;
}
.sg-l-tile--got { border-left: 4px solid var(--acid); }
.sg-l-tile--locked { border-style: dashed; background: transparent; }
.sg-l-tile figure {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  margin: 0 0 8px;
}
.sg-l-tile svg { width: 82%; height: auto; }
.sg-l-tile--locked svg { width: 64%; color: #30303c; }
.sg-l-tile figcaption {
  font-family: var(--font-display);
  font-stretch: 82%;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  color: var(--ink-dim);
}
.sg-l-tile--locked figcaption { color: var(--ink-faint); }
.sg-l-tile-r {
  display: block;
  margin-top: 3px;
  font-family: var(--font-display);
  font-stretch: 82%;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}
.sg-l-lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--mark);
  pointer-events: none;
}

.sg-l-bar {
  position: relative;
  height: 10px;
  margin-top: 16px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--bg-3);
  overflow: hidden;
}
.sg-l-bar i {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(115deg, var(--acid) 0 10px, var(--acid-deep) 10px 20px);
}
.sg-l-cap { margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-faint); }

/* ---------------------------------------------------------------- steps -- */

.sg-l-steps { list-style: none; margin: 22px 0 0; padding: 0; }
.sg-l-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 14px;
  padding-bottom: 26px;
}
.sg-l-steps li + li { padding-top: 4px; }
.sg-l-steps li:not(:last-child)::before {   /* dashed run between the numbers */
  content: "";
  position: absolute;
  left: 30px;
  top: 56px;
  bottom: 4px;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 12px);
}
.sg-l-num {
  font-family: var(--font-display);
  font-stretch: 82%;
  font-size: 2.7rem;
  line-height: 0.85;
  color: var(--acid);
  letter-spacing: -0.03em;
}
@supports (-webkit-text-stroke: 2px currentColor) {
  .sg-l-num { -webkit-text-stroke: 2px var(--acid); color: transparent; }
}
.sg-l-steps h3 {
  font-family: var(--font-display);
  font-stretch: 82%;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.28rem;
  margin: 4px 0 6px;
}
.sg-l-steps p { color: var(--ink-dim); line-height: 1.5; margin: 0; max-width: 36ch; }
.sg-l-steps li:nth-child(2) { margin-left: 12px; }
.sg-l-steps li:nth-child(3) { margin-left: 24px; }

/* --------------------------------------------------------------- honest -- */
/* The one light surface on the page. Inverting the contrast is the "stop and
 * read this" signal — the reason for the closed beta is not fine print. */

.sg-l-honest {
  position: relative;
  margin-top: 22px;
  padding: 24px 20px 26px;
  background: var(--paper);
  color: #322e28;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  transform: rotate(1.3deg);
}
.sg-l-honest::before {   /* paper fibre */
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.11;
  border-radius: inherit;
  pointer-events: none;
}
.sg-l-honest > * { position: relative; }
.sg-l-honest .sg-l-eyebrow { color: #5a5349; }
.sg-l-honest .sg-l-h2 { color: #16141a; }
.sg-l-honest p { line-height: 1.55; margin: 0 0 12px; max-width: none; color: #322e28; }
.sg-l-facts { list-style: none; margin: 16px 0 0; padding: 0; }
.sg-l-facts li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: #3c372f;
}
.sg-l-facts li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 10px; height: 10px;
  background: var(--hot);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------- invite -- */

.sg-l-invite { scroll-margin-top: 18px; }

.sg-l-slip {
  position: relative;
  margin-top: 20px;
  padding: 22px 18px 20px;
  background: var(--bg-2);
  border: 2px solid var(--acid);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  transform: rotate(-0.7deg);
}
.sg-l-slip[hidden] { display: none !important; }
.sg-l-slip .sg-l-h2 { margin-bottom: 8px; }
.sg-l-slip > p { color: var(--ink-dim); line-height: 1.5; margin: 0; }
.sg-l-slip .mono { color: var(--acid); white-space: nowrap; }

.sg-l-form { display: grid; gap: 10px; margin-top: 16px; }
.sg-l-code {
  width: 100%;
  min-height: 58px;
  padding: 0 14px;
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1.14rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sg-l-code::placeholder { color: var(--ink-faint); letter-spacing: 0.14em; }
.sg-l-code:focus { border-color: var(--acid); outline: none; }

.sg-l-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 0 var(--sp-5);
  background: var(--acid);
  color: #10130a;
  border: 2px solid #10130a;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-stretch: 82%;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: var(--shadow-hard);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sg-l-go:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.62); }
.sg-l-go[disabled] { opacity: 0.5; pointer-events: none; }
.sg-l-go svg { width: 20px; height: 20px; flex: none; }

.sg-l-msg { min-height: 20px; margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-dim); }
.sg-l-msg.is-bad { color: var(--danger); }
.sg-l-fine { margin-top: 12px; font-size: var(--fs-sm); color: var(--ink-faint); line-height: 1.45; }

.sg-l-slip--auto { border-color: var(--cyan); }
.sg-l-slip--auto .sg-l-h2 { color: var(--cyan); }

/* --------------------------------------------------------------- footer -- */

.sg-l-foot { padding-top: var(--sp-7); }
.sg-l-foot .sg-l-divider {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
}
.sg-l-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 6px; }
.sg-l-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-dim);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line);
}
.sg-l-links a:hover { color: var(--acid); text-decoration-color: var(--acid); }
.sg-l-sign {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  line-height: 1.5;
}

/* ------------------------------------------------------------ privacy --- */
/* The Art. 13 notice, mounted from js/views/datenschutz.js into the landing
 * so nobody who taps it falls into an app they have no account for. */

.sg-l-legal {
  position: fixed;
  inset: 0;
  z-index: 950;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
}
.sg-l-legal[hidden] { display: none !important; }
.sg-l-legal-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  height: calc(56px + var(--safe-t));
  padding: var(--safe-t) 16px 0;
  background: rgba(10, 10, 12, 0.96);
  border-bottom: 2px solid var(--line-soft);
  backdrop-filter: blur(8px);
}
.sg-l-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px 0 4px;
  color: var(--ink);
  font-family: var(--font-display);
  font-stretch: 82%;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sg-l-back svg { width: 22px; height: 22px; }
.sg-l-legal-body {
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 20px calc(48px + var(--safe-b));
}
.sg-l-legal-note {
  margin-bottom: 18px;
  padding: 12px 14px;
  border-left: 4px solid var(--acid);
  background: var(--bg-2);
  color: var(--ink-dim);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* -------------------------------------------------------------- reveal --- */
/* One orchestrated page-load move: the headline rises, then the slaps land.
 * Nothing loops, nothing moves on scroll. */

@keyframes sg-l-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sg-l-slapdown {
  0%   { opacity: 0; transform: var(--slap-tf) scale(1.5); }
  70%  { opacity: 1; }
  100% { opacity: 1; transform: var(--slap-tf) scale(1); }
}
@keyframes sg-l-tape-in {
  from { opacity: 0; transform: rotate(-2.2deg) translateY(10px); }
  to   { opacity: 1; transform: rotate(-2.2deg) translateY(0); }
}

.sg-landing .sg-l-top,
.sg-landing .sg-l-hero .sg-l-eyebrow,
.sg-landing .sg-l-h1 > span,
.sg-landing .sg-l-hero .sg-l-lead,
.sg-landing .sg-l-cue {
  animation: sg-l-rise 460ms var(--ease) both;
}
.sg-landing .sg-l-top { animation-delay: 0ms; }
.sg-landing .sg-l-hero .sg-l-eyebrow { animation-delay: 60ms; }
.sg-landing .sg-l-h1 > span:nth-child(1) { animation-delay: 110ms; }
.sg-landing .sg-l-h1 > span:nth-child(2) { animation-delay: 165ms; }
.sg-landing .sg-l-h1 > span:nth-child(3) { animation-delay: 220ms; }
.sg-landing .sg-l-h1 > span:nth-child(4) { animation-delay: 275ms; }
.sg-landing .sg-l-hero .sg-l-lead { animation-delay: 340ms; }
.sg-landing .sg-l-cue { animation-delay: 900ms; }

.sg-landing .sg-l-scene { animation: sg-l-rise 620ms var(--ease) 200ms both; }

.sg-landing .sg-l-slap {
  animation: sg-l-slapdown 320ms cubic-bezier(0.25, 1.1, 0.4, 1) both;
}
.sg-l-slap--a { --slap-tf: rotate(-6deg) skewY(-2.5deg); animation-delay: 430ms; }
.sg-l-slap--b { --slap-tf: rotate(5.5deg) skewY(2deg);   animation-delay: 520ms; }
.sg-l-slap--c { --slap-tf: rotate(-13deg);               animation-delay: 610ms; }
.sg-l-slap--d { --slap-tf: rotate(12deg);                animation-delay: 760ms; }
.sg-l-slap--e { --slap-tf: rotate(-3deg);                animation-delay: 670ms; }
.sg-l-slap--f { --slap-tf: rotate(9deg);                 animation-delay: 700ms; }

.sg-landing .sg-l-tape { animation: sg-l-tape-in 420ms var(--ease) 820ms both; }

@media (prefers-reduced-motion: reduce) {
  .sg-landing .sg-l-top,
  .sg-landing .sg-l-hero .sg-l-eyebrow,
  .sg-landing .sg-l-h1 > span,
  .sg-landing .sg-l-hero .sg-l-lead,
  .sg-landing .sg-l-cue,
  .sg-landing .sg-l-scene,
  .sg-landing .sg-l-slap,
  .sg-landing .sg-l-tape {
    animation: none !important;
    opacity: 1;
  }
  .sg-l-slap--a { transform: rotate(-6deg) skewY(-2.5deg); }
  .sg-l-slap--b { transform: rotate(5.5deg) skewY(2deg); }
  .sg-l-slap--c { transform: rotate(-13deg); }
  .sg-l-slap--d { transform: rotate(12deg); }
  .sg-l-slap--e { transform: rotate(-3deg); }
  .sg-l-slap--f { transform: rotate(9deg); }
  .sg-l-honest, .sg-l-slip, .sg-l-tape { transform: none; }
}

/* ---------------------------------------------------- tablet and desktop --- */

@media (min-width: 720px) {
  .sg-l-wrap { max-width: 640px; }
  .sg-l-h1 { font-size: 4.3rem; }
  .sg-l-lead { font-size: 1.15rem; }
  .sg-l-tape { margin-inline: -48px; }
  /* off the phone the scene is no longer edge to edge, so fade its sides into
     the asphalt instead of leaving a rectangle floating on the page */
  .sg-l-scene, .sg-l-stage::after {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  }
}

/* Wide enough for the pole to stand beside the headline instead of under it. */
@media (min-width: 940px) {
  .sg-l-wrap { max-width: 940px; }
  .sg-l-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    column-gap: 48px;
    align-items: start;
  }
  .sg-l-hero > .sg-l-eyebrow { grid-area: 1 / 1; }
  .sg-l-hero > .sg-l-h1      { grid-area: 2 / 1; }
  .sg-l-hero > .sg-l-lead    { grid-area: 3 / 1; }
  .sg-l-hero > .sg-l-cue     { grid-area: 4 / 1; align-self: end; }
  .sg-l-hero > .sg-l-bleed   { grid-area: 1 / 2 / 5 / 3; margin-inline: 0; align-self: center; }
  .sg-l-stage { margin-top: 0; }
  .sg-l-sec, .sg-l-foot { max-width: 620px; }
  .sg-l-tape { margin-inline: -64px; }
}

@media (prefers-contrast: more) {
  .sg-l-tile--locked { border-color: var(--line); }
  .sg-l-cap, .sg-l-fine, .sg-l-sign { color: var(--ink-dim); }
}