/* Brand tokens mirrored from horeca-mobile src/theme/index.ts. */
:root {
  --brand: #00395e;
  --brand-subtle: #eef6fb;
  --text: #242627;
  --text-secondary: #6b6e70;
  --canvas: #ffffff;
  --border: #e6e9eb;
  --radius: 20px;
  --measure: 46rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* Landing — mirrors horeca-mobile WelcomeScreen. Sizes are the app's pt values
   read as px, so the two screens line up side by side. */

.hero {
  position: relative;
  min-height: 100svh;
  /* The ring box and the ripples expanding out of it overrun the viewport by
     design, as they do in the app; this clip is what keeps them bleeding off
     the edge rather than widening the page. */
  overflow: hidden;
  padding: 1.25rem;
  background: var(--brand);
  color: #fff;
  text-align: center;
}

/* Two stacked layers over the brand ground: photo at 0.3, brand tint at 0.7. */
.hero-bg,
.hero-tint {
  position: absolute;
  inset: 0;
}

.hero-bg {
  background: url("welcome-bg.png") center / cover no-repeat;
  opacity: 0.3;
}

.hero-tint {
  background: var(--brand);
  opacity: 0.7;
}

.hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Full viewport less the .hero padding, so the CTA block sits on the bottom
     edge and the hero takes the slack — the app's flex:1 split. */
  min-height: calc(100svh - 2.5rem);
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
}

.hero-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

/* Rings ------------------------------------------------------------------ */

/* The app pins this box at 450pt because a phone screen is the only target.
   Here it caps at 450 and shrinks with the viewport instead: everything else on
   the page needs ~460px, so what's left over is what the rings may take. Below
   the 130px floor it stops shrinking and the page scrolls. Rings inside are
   percentages of this box, so the whole assembly scales as one. */
.rings {
  position: relative;
  flex-shrink: 0;
  width: clamp(130px, calc(100svh - 460px), 450px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.ring,
.ripple {
  position: absolute;
  border-radius: 50%;
}

/* Static rings are the Reduce Motion substitute — hidden while the ripples run,
   never both at once. */
.ring {
  display: none;
  border: 1.5px solid;
}

/* Percentages of the ring box, matching the app's 450 / 350 / 250 proportions. */
.ring-outer {
  width: 100%;
  aspect-ratio: 1;
  border-color: rgba(255, 255, 255, 0.1);
}

.ring-mid {
  width: 77.8%;
  aspect-ratio: 1;
  border-color: rgba(255, 255, 255, 0.2);
}

.ring-inner {
  width: 55.6%;
  aspect-ratio: 1;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Sonar ripple: born small at the logo, expands past the edge, gone before it
   gets there. Both scale and fade ride the same ease-out, as in the app — the
   ring surges out and its opacity collapses with it, so it has dissipated while
   still mid-flight. Fading linearly instead leaves a ring parked at the edge for
   seconds, which reads as a static circle rather than a ripple. */
.ripple {
  width: 44.4%;
  aspect-ratio: 1;
  border: 1.25px solid rgba(255, 255, 255, 0.7);
  opacity: 0;
  animation:
    ripple-scale 5400ms cubic-bezier(0.16, 1, 0.3, 1) infinite,
    ripple-fade 5400ms linear infinite;
}

.ripple-2 {
  animation-delay: 1800ms;
}

.ripple-3 {
  animation-delay: 3600ms;
}

@keyframes ripple-scale {
  from {
    transform: scale(0.35);
  }
  to {
    transform: scale(2.6);
  }
}

@keyframes ripple-fade {
  0% {
    opacity: 0;
    animation-timing-function: linear;
  }
  /* Peaks almost immediately, then decays on the expansion curve: ~80% of the
     opacity is gone by a third of the cycle. */
  3% {
    opacity: 0.45;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  100% {
    opacity: 0;
  }
}

.logo {
  position: relative;
  width: 35.6%;
  aspect-ratio: 1;
  object-fit: contain;
}

/* Text ------------------------------------------------------------------- */

.text-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.eyebrow {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* The app's fixed 30px down to ~355px wide, which covers every phone in use;
   narrower than that it scales rather than breaking one word per line. */
.tagline {
  margin: 0;
  font-size: clamp(1.375rem, 8.5vw, 1.875rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* CTA -------------------------------------------------------------------- */

.cta-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lead {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
}

/* The app's secondary Button at size lg. */
.store {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 64px;
  padding: 0.5rem 2.5rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid #d9dbdd;
  color: var(--brand);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition:
    transform 150ms ease-out,
    background-color 150ms ease-out;
}

.store:hover {
  background: var(--brand-subtle);
}

/* Stands in for the app's press scale. */
.store:active {
  transform: scale(0.97);
}

.store[hidden] {
  display: none;
}

.store-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.policy {
  align-self: center;
  padding: 0.25rem 0.5rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.75rem;
  transition: opacity 150ms ease-out;
}

.policy:hover,
.policy:active {
  opacity: 0.6;
}

/* Language ---------------------------------------------------------------- */

/* Floated like the app's LanguageSwitcher: absolute at the top of the content
   box, so it can't squeeze the hero the way an in-flow row would. */
.lang-switch {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  display: flex;
  /* Four endonyms do not fit one line on a narrow phone. Tighten first, and
     wrap as the backstop rather than letting them run off both edges. */
  flex-wrap: wrap;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  justify-content: center;
  font-size: 0.75rem;
}

.lang-switch a {
  padding: 0.25rem 0.5rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 150ms ease-out;
}

.lang-switch a:hover {
  color: rgba(255, 255, 255, 0.85);
}

.lang-switch a.is-active {
  color: #fff;
  font-weight: 600;
}

/* Must follow the rule above: it overrides that padding shorthand. */
@media (max-width: 420px) {
  .lang-switch {
    column-gap: 0.125rem;
  }

  .lang-switch a {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ripple {
    display: none;
  }

  .ring {
    display: block;
  }

  .store,
  .policy,
  .lang-switch a {
    transition: none;
  }

  .store:active {
    transform: none;
  }
}

/* Document pages */

.doc .lang {
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
}

.doc h1 {
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

.doc .meta {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0 0 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.doc h2 {
  font-size: 1.15rem;
  margin: 2.5rem 0 0.75rem;
}

.doc p,
.doc li {
  margin: 0 0 1rem;
}

.doc ul {
  padding-left: 1.25rem;
}

.doc a {
  color: var(--brand);
}

.doc .back {
  display: inline-block;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #101314;
    --text: #f2f4f5;
    --text-secondary: #a7abad;
    --border: #2a2f31;
    --brand-subtle: #16324a;
  }

  .doc a {
    color: #7fb6dd;
  }
}