/*
  TIZAR landing (tizar.store) — plain CSS served by nginx, no build step.

  The landing lives outside the pnpm workspace, so it cannot import
  packages/ui/src/tokens.css. Every value below is copied verbatim from that file;
  when a token changes there, change it here too. Nothing in this stylesheet may
  invent a colour, a font or a radius that the design system does not have
  (CLAUDE.md §2, docs/design/README.md).

  Adaptivity: the narrow end of every clamp() is the exact mockup value at 390 px,
  the wide end grows the page for desktop. Section rhythm is composed of the 26
  vertical step (2×26 … 4×26), not of a new invented value.
*/

/*
  Fonts: self-hosted variable subsets, no external request at runtime.
  Two subsets per family — cyrillic (the whole page) and latin (TIZAR, WhatsApp, iPhone,
  digits, punctuation); the browser downloads only what the text needs.

  NB: the copies in packages/ui/fonts do NOT contain the basic Cyrillic block
  (U+0400–U+045F) — see the report; the landing therefore keeps its own, correct files.
*/
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* the twelve colours */
  --tz-base: #1e2a22;
  --tz-canvas: #f7f3eb;
  --tz-surface: #ffffff;
  --tz-fill: #f2ece0;
  --tz-border: #e9e2d4;
  --tz-divider: #ede6d8;
  --tz-text-2: #7c7a72;
  --tz-text-3: #9a958a;
  --tz-accent-dark: #c6a667;
  --tz-accent: #a8874a;

  /* service tones and derived surfaces used on the dark plate */
  --tz-accent-text-dark: #e3cf9a;
  --tz-on-dark-2: rgba(247, 243, 235, 0.66);
  --tz-on-dark-3: rgba(247, 243, 235, 0.5);
  --tz-on-dark-fill: rgba(247, 243, 235, 0.08);

  /* typography */
  --tz-font-serif: 'Cormorant Garamond', serif;
  --tz-font-sans: Manrope, system-ui, sans-serif;
  --tz-tracking-status: 0.1em;
  --tz-tracking-label: 0.14em;

  /* vertical step */
  --tz-space-6: 6px;
  --tz-space-7: 7px; /* caption to the value it labels — 7 and only 7 in the mockups */
  --tz-space-8: 8px;
  --tz-space-10: 10px;
  --tz-space-12: 12px;
  --tz-space-14: 14px;
  --tz-space-18: 18px;
  --tz-space-22: 22px;
  --tz-space-26: 26px;

  /* radii */
  --tz-radius-6: 6px;
  --tz-radius-12: 12px;
  --tz-radius-16: 16px;

  --tz-tap-52: 52px;

  /* motion: the full set from packages/ui — the page now has things that arrive */
  --tz-dur-1: 110ms;
  --tz-dur-2: 180ms;
  --tz-dur-3: 240ms;
  --tz-dur-4: 320ms;
  --tz-dur-5: 420ms;
  --tz-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --tz-ease-exit: cubic-bezier(0.4, 0, 0.9, 0.3);
  --tz-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tz-ease-inout: cubic-bezier(0.45, 0, 0.2, 1);
  --tz-press-scale: 0.965;

  /* landing-only scale: narrow end = mockup value, wide end = desktop */
  --tz-page: 1180px; /* desktop width of the design package */
  --tz-gutter: clamp(20px, 2.2vw, 30px); /* 20 phone · 26–30 desktop */
  --tz-section: clamp(52px, 5.6vw, 104px); /* 2×26 … 4×26 */
  --tz-hero-pad: clamp(78px, 8vw, 130px); /* 3×26 … 5×26 */
  --tz-card-pad: clamp(18px, 1.9vw, 26px);
  --tz-measure: 34em; /* readable paragraph width */

  --tz-size-hero: clamp(34px, 3.1vw + 22px, 56px);
  --tz-size-title: clamp(26px, 1.4vw + 20px, 36px);
  --tz-size-name: clamp(19px, 0.3vw + 18px, 21px);
  --tz-size-text: clamp(15px, 0.2vw + 14px, 17px);
  --tz-size-caption: 12.5px;

  /* landing-only motion scale: composed from the duration tokens, no new literals */
  --tz-stagger: calc(var(--tz-dur-2) / 2); /* step between siblings arriving together */
  --tz-reveal: calc(var(--tz-dur-5) * 1.6); /* one block arriving on scroll */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tz-dur-1: 1ms;
    --tz-dur-2: 1ms;
    --tz-dur-3: 1ms;
    --tz-dur-4: 1ms;
    --tz-dur-5: 1ms;
    --tz-press-scale: 1;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--tz-canvas);
  color: var(--tz-base);
  font-family: var(--tz-font-sans);
  font-size: var(--tz-size-text);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--tz-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--tz-accent);
  outline-offset: 3px;
  border-radius: var(--tz-radius-6);
}

.plate :focus-visible {
  outline-color: var(--tz-accent-dark);
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--tz-page);
  margin-inline: auto;
  padding-inline: var(--tz-gutter);
}

.section {
  padding-block: var(--tz-section);
}

.section--tight {
  padding-block: calc(var(--tz-section) * 0.6);
}

/* the fourth surface: a dark plate that spans the whole width */
.plate {
  background: var(--tz-base);
  color: var(--tz-canvas);
}

/* ── Typography helpers ──────────────────────────────────────────────────── */
.eyebrow {
  margin: 0 0 var(--tz-space-12);
  color: var(--tz-text-3);
  font-size: var(--tz-size-caption);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--tz-tracking-label);
}

.plate .eyebrow {
  color: var(--tz-on-dark-3);
}

.title {
  margin: 0 0 var(--tz-space-14);
  font-family: var(--tz-font-serif);
  font-size: var(--tz-size-title);
  font-weight: 400;
  line-height: 1.2;
}

.name {
  margin: 0 0 var(--tz-space-6);
  font-family: var(--tz-font-serif);
  font-size: var(--tz-size-name);
  font-weight: 400;
  line-height: 1.2;
}

.text {
  max-width: var(--tz-measure);
  line-height: 1.6;
}

.text + .text {
  margin-top: var(--tz-space-12);
}

.caption {
  color: var(--tz-text-2);
  font-size: var(--tz-size-caption);
  line-height: 1.5;
}

.plate .caption {
  color: var(--tz-on-dark-2);
}

/* status badge — the only place in the system where caps are allowed */
.badge {
  display: inline-block;
  padding: var(--tz-space-6) var(--tz-space-10);
  border-radius: var(--tz-radius-6);
  background: var(--tz-base);
  color: var(--tz-accent-text-dark);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tz-tracking-status);
  text-transform: uppercase;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  padding-block: var(--tz-hero-pad);
}

/* the h1 carries both the logotype and the sentence under it */
.hero__mark {
  margin: 0;
}

.hero__wordmark {
  width: clamp(196px, 24vw, 320px);
  margin-bottom: var(--tz-space-26);
}

.hero__line {
  display: block;
  max-width: 22ch;
  font-family: var(--tz-font-serif);
  font-size: var(--tz-size-hero);
  font-weight: 300;
  line-height: 1.15;
}

.hero__note {
  margin-top: var(--tz-space-18);
  max-width: var(--tz-measure);
  color: var(--tz-on-dark-2);
}

/* ── Cards and nested fills ──────────────────────────────────────────────── */
.card {
  padding: var(--tz-card-pad);
  border: 1px solid var(--tz-border);
  border-radius: var(--tz-radius-16);
  background: var(--tz-surface);
}

/* nested radius is always at least 4 smaller than the parent */
.fill {
  padding: var(--tz-space-14) var(--tz-space-18);
  border-radius: var(--tz-radius-12);
  background: var(--tz-fill);
}

.plate .fill {
  background: var(--tz-on-dark-fill);
}

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tz-space-12);
  margin-bottom: var(--tz-space-14);
}

.card__head .title {
  margin: 0;
}

/* ── Grids: one column on the phone, whole rows on every width ───────────── */
.grid {
  display: grid;
  gap: var(--tz-space-12);
  margin-top: var(--tz-space-22);
}

.grid > li,
.grid > div {
  display: flex;
  flex-direction: column;
}

/* Six items divide evenly by two and by three, so both steps leave whole rows. */
@media (min-width: 620px) {
  .grid--6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Three items have no even two-column state: one column until three of them fit. */
@media (min-width: 720px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Steps of the loyalty rule on the dark plate ─────────────────────────── */
.step__index {
  margin-bottom: var(--tz-space-10);
  color: var(--tz-accent-dark);
  font-size: var(--tz-size-caption);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tz-tracking-status);
}

.plate .name {
  color: var(--tz-canvas);
}

.note {
  margin-top: var(--tz-space-22);
}

/* ── Contacts ────────────────────────────────────────────────────────────── */
.contact__label {
  margin-bottom: var(--tz-space-7);
  color: var(--tz-text-3);
  font-size: var(--tz-size-caption);
  line-height: 1.5;
}

.contact__value {
  font-family: var(--tz-font-serif);
  font-size: var(--tz-size-name);
  font-weight: 400;
  line-height: 1.3;
}

a.contact__value {
  color: var(--tz-base);
}

/* stacked contacts are separate blocks, not one block: 18 between them, not 12 */
.contacts {
  gap: var(--tz-space-18);
}

.contacts__action {
  margin-top: var(--tz-space-22);
}

/* primary button: dark, 15/600, radius 12, height 52 */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tz-tap-52);
  padding-inline: var(--tz-space-26);
  border-radius: var(--tz-radius-12);
  background: var(--tz-base);
  color: var(--tz-canvas);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  transition:
    transform var(--tz-dur-1) var(--tz-ease-out),
    opacity var(--tz-dur-1) var(--tz-ease-out);
}

.button:hover {
  text-decoration: none;
  opacity: 0.92;
}

.button:active {
  transform: scale(var(--tz-press-scale));
}

/* on the phone the primary button spans the card, as it does in the mockups */
@media (max-width: 619px) {
  .button {
    width: 100%;
  }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--tz-border);
  padding-block: var(--tz-space-26);
}

.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tz-space-12) var(--tz-space-22);
}

.footer__mark {
  width: 28px;
}

.footer__spacer {
  flex: 1 1 auto;
}

/* ── Legal document (privacy.html) ───────────────────────────────────────── */
.legal {
  max-width: 720px;
  padding-block: var(--tz-section);
}

.legal h1 {
  margin: 0 0 var(--tz-space-8);
  font-family: var(--tz-font-serif);
  font-size: var(--tz-size-hero);
  font-weight: 300;
  line-height: 1.15;
}

.legal h2 {
  margin: var(--tz-space-26) 0 var(--tz-space-12);
  font-family: var(--tz-font-serif);
  font-size: var(--tz-size-name);
  font-weight: 400;
  line-height: 1.2;
}

.legal p,
.legal li {
  margin: 0 0 var(--tz-space-12);
}

.legal ul {
  padding-left: 20px;
  list-style: disc;
}

.legal .meta {
  color: var(--tz-text-2);
  font-size: var(--tz-size-caption);
}

.legal table {
  width: 100%;
  margin: 0 0 var(--tz-space-12);
  border-collapse: collapse;
}

.legal th,
.legal td {
  padding: var(--tz-space-10) var(--tz-space-12);
  border-bottom: 1px solid var(--tz-divider);
  text-align: left;
  vertical-align: top;
}

.legal th {
  color: var(--tz-text-3);
  font-size: var(--tz-size-caption);
  font-weight: 600;
}

.legal .card {
  margin: var(--tz-space-26) 0 0;
}

.legal .card p {
  margin: 0;
}

.legal .card p + p {
  margin-top: var(--tz-space-6);
}

.back {
  display: inline-block;
  margin-bottom: var(--tz-space-22);
  font-size: 15px;
  font-weight: 600;
}

/* ── Arrival: hero on load, blocks on scroll ─────────────────────────────── */
/*
  The rule from the design system: what arrives is long and soft (entrance),
  what leaves is short and straight. Nothing on this page leaves — only arrives.
*/
@keyframes tz-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero__wordmark,
.hero__line,
.hero__note {
  animation: tz-rise calc(var(--tz-dur-5) * 2) var(--tz-ease-entrance) both;
}

.hero__line {
  animation-delay: calc(var(--tz-dur-5) * 0.5);
}

.hero__note {
  animation-delay: var(--tz-dur-5);
}

/*
  Scroll reveal is gated on the .js class the script puts on <html>:
  without JavaScript every block simply stands in place, nothing is hidden.
  The per-sibling delay is set by the script as a multiple of --tz-stagger.
*/
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--tz-reveal) var(--tz-ease-entrance),
    transform var(--tz-reveal) var(--tz-ease-entrance);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    transform: none;
  }

  .hero__wordmark,
  .hero__line,
  .hero__note {
    animation: none;
  }
}

/* the grid tiles answer the cursor: a quiet lift, no shadow — surfaces have none */
.fill {
  transition:
    transform var(--tz-dur-2) var(--tz-ease-out),
    background-color var(--tz-dur-2) var(--tz-ease-out);
}

@media (hover: hover) {
  .fill:hover {
    transform: translateY(-3px);
    background-color: var(--tz-border);
  }

  .plate .fill:hover {
    background-color: rgba(247, 243, 235, 0.13);
  }
}

/* ── Store badges: App Store and Google Play, both «скоро» ───────────────── */
/*
  Not links on purpose: the official badges may only point at a published app,
  so until release day these are dark plates with our monochrome marks.
*/
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tz-space-12);
  margin-top: var(--tz-space-22);
}

.store {
  display: inline-flex;
  align-items: center;
  gap: var(--tz-space-12);
  min-height: var(--tz-tap-52);
  padding: var(--tz-space-8) var(--tz-space-22) var(--tz-space-8) var(--tz-space-18);
  border-radius: var(--tz-radius-12);
  background: var(--tz-base);
  color: var(--tz-canvas);
  transition: transform var(--tz-dur-2) var(--tz-ease-out);
}

@media (hover: hover) {
  .store:hover {
    transform: translateY(-3px);
  }
}

.store__icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
}

.store__soon {
  display: block;
  color: var(--tz-on-dark-2);
  font-size: var(--tz-size-caption);
  line-height: 1.3;
}

.store__name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 619px) {
  .store {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ── Ambient sound toggle ────────────────────────────────────────────────── */
/*
  The one element that physically hangs above the page — the one place
  a shadow is allowed. The music itself is generated in script.js.
*/
.sound {
  position: fixed;
  right: calc(var(--tz-space-18) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--tz-space-18) + env(safe-area-inset-bottom, 0px));
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: var(--tz-space-10);
  min-height: var(--tz-tap-52);
  padding-inline: var(--tz-space-22);
  /* the faint rim keeps the pill visible when it floats over the dark plates */
  border: 1px solid var(--tz-on-dark-fill);
  border-radius: calc(var(--tz-tap-52) / 2);
  background: var(--tz-base);
  color: var(--tz-canvas);
  font-family: var(--tz-font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(30, 42, 34, 0.28);
  transition:
    transform var(--tz-dur-1) var(--tz-ease-out),
    opacity var(--tz-dur-1) var(--tz-ease-out);
}

.sound:hover {
  opacity: 0.92;
}

.sound:active {
  transform: scale(var(--tz-press-scale));
}

/* three bars of the equaliser; they dance only while the music plays */
.sound__wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
}

.sound__bar {
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: var(--tz-accent-text-dark);
  transform: scaleY(0.3);
  transform-origin: bottom;
  transition: transform var(--tz-dur-2) var(--tz-ease-out);
}

@keyframes tz-eq {
  from {
    transform: scaleY(0.25);
  }
  to {
    transform: scaleY(1);
  }
}

.sound[aria-pressed='true'] .sound__bar {
  animation: tz-eq calc(var(--tz-dur-5) * 2.4) var(--tz-ease-inout) infinite alternate;
}

.sound[aria-pressed='true'] .sound__bar:nth-child(2) {
  animation-duration: calc(var(--tz-dur-5) * 1.9);
  animation-delay: calc(var(--tz-dur-5) * -0.9);
}

.sound[aria-pressed='true'] .sound__bar:nth-child(3) {
  animation-duration: calc(var(--tz-dur-5) * 2.1);
  animation-delay: calc(var(--tz-dur-5) * -1.6);
}

@media (prefers-reduced-motion: reduce) {
  .sound[aria-pressed='true'] .sound__bar {
    animation: none;
    transform: scaleY(0.85);
  }
}