/* JOY by Mureli — the website. Tokens from html-design-screens/css/tokens.css,
   the app's own fonts, no third-party requests. */

@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url("fonts/GolosText-Regular.ttf") format("truetype"); }
@font-face { font-family: "Golos Text"; font-weight: 500; font-display: swap; src: url("fonts/GolosText-Medium.ttf") format("truetype"); }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url("fonts/GolosText-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Caveat"; font-weight: 700; font-display: swap; src: url("fonts/Caveat-Bold.ttf") format("truetype"); }

:root {
  --paper: #FFFDFA;
  --plum: #FA5589;
  --plum-pressed: #D54874;
  --ink: #4A3540;
  --accent: #E0165F;
  --ink-secondary: rgb(74 53 64 / 0.62);
  --ink-line: rgb(74 53 64 / 0.10);
  --shadow-cta: 0 12px 28px rgb(74 53 64 / 0.22);
  --shadow-stuck: drop-shadow(0 1px 1.5px rgb(74 53 64 / 0.3)) drop-shadow(0 4px 7px rgb(74 53 64 / 0.1));
  --font-sans: "Golos Text", system-ui, -apple-system, sans-serif;
  --font-script: "Caveat", cursive;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

a { color: inherit; }

/* The paper ground of the intro: rose high on the left, honey low on the right. */
/* No overflow: hidden here — on <body> it moves to the window and a long
   page stops scrolling. The glows sit inside the box (inset: 0) anyway. */
.paper {
  position: relative;
  isolation: isolate;
}
.paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle min(46vw, 260px) at 28% 44%, rgb(255 196 222 / 0.8), transparent),
    radial-gradient(circle min(42vw, 240px) at 74% 66%, rgb(255 224 163 / 0.7), transparent);
}

/* ── Landing ───────────────────────────────────────────── */

.landing {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 16px;
}

.landing__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  text-align: center;
}

.joy-sign { display: flex; justify-content: center; margin: 0; }

.joy-sign__letter {
  width: clamp(92px, 26vw, 150px);
  height: auto;
  margin: 0 calc(clamp(92px, 26vw, 150px) * -0.07);
  filter: var(--shadow-stuck);
  transform-origin: 50% 10%;
  transform: translateY(var(--dy, 0px)) rotate(var(--r, 0deg));
  animation: joy-sign-stick 0.95s calc(0.3s + var(--i, 0) * 0.5s) both;
}

.joy-note {
  margin: 0;
  font: 700 clamp(34px, 9vw, 48px)/1.1 var(--font-script);
}
.joy-note__line { display: block; }
.joy-note__line--step { font-size: 0.76em; line-height: 1.2; }
.joy-note__line:not(.joy-note__line--step) + .joy-note__line--step { margin-top: 16px; }
.joy-note b { color: var(--accent); font-weight: inherit; }

/* Written by hand: each line uncovered left to right, in turn. */
.joy-note__line {
  clip-path: inset(-20% 100% -20% -4%);
  animation: joy-write 0.9s calc(1.6s + var(--n, 0) * 0.75s) ease-in-out forwards;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border-radius: 9999px;
  background: var(--plum);
  color: var(--paper);
  box-shadow: var(--shadow-cta);
  font: 500 15px/1.25 var(--font-sans);
  text-align: left;
  text-decoration: none;
  opacity: 0;
  animation: joy-fade 0.6s 3.2s ease-out forwards;
}
.store small { display: block; font-size: 11.5px; opacity: 0.8; }

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  padding: 24px 0 8px;
  color: var(--ink-secondary);
  font-size: 14px;
}
.footer a { text-underline-offset: 3px; }
.footer a:hover { color: var(--ink); }

/* ── Legal pages ──────────────────────────────────────── */

.doc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 16px;
}
.doc-bar__home { display: flex; text-decoration: none; }
.doc-bar__home img { width: 34px; margin: 0 -2px; filter: var(--shadow-stuck); }
.doc-bar__home img:nth-child(1) { transform: rotate(-7deg); }
.doc-bar__home img:nth-child(2) { transform: translateY(2px) rotate(4deg); }
.doc-bar__home img:nth-child(3) { transform: rotate(-3deg); }

.lang-switch { display: flex; gap: 4px; font: 500 14px var(--font-sans); }
.lang-switch a,
.lang-switch span {
  padding: 6px 12px;
  border-radius: 9999px;
  text-decoration: none;
}
.lang-switch span { background: var(--ink); color: var(--paper); }
.lang-switch a { color: var(--ink-secondary); }
.lang-switch a:hover { color: var(--ink); background: var(--ink-line); }

.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 16px 48px;
  overflow-wrap: anywhere;
}
.doc h1 { margin: 12px 0 4px; font: 600 clamp(28px, 6vw, 38px)/1.2 var(--font-sans); }
.doc .doc__meta { margin: 0 0 28px; color: var(--ink-secondary); font-size: 14.5px; }
.doc .doc__note {
  margin: 0 0 28px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgb(255 196 222 / 0.35);
  font-size: 15px;
}
.doc h2 { margin: 36px 0 10px; font: 600 21px/1.3 var(--font-sans); }
.doc h3 { margin: 22px 0 6px; font: 600 17px/1.35 var(--font-sans); }
.doc p, .doc li { font-size: 16px; }
.doc ul { padding-left: 22px; }
.doc li + li { margin-top: 6px; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
.doc th, .doc td { padding: 10px 8px; border-bottom: 1px solid var(--ink-line); text-align: left; vertical-align: top; }
.doc th { font-weight: 600; }
.doc .table-wrap { overflow-x: auto; }
.doc-footer { max-width: 760px; margin: 0 auto; padding: 0 16px 32px; }

@keyframes joy-sign-stick {
  0% {
    opacity: 0;
    transform: perspective(700px) translate3d(12px, calc(var(--dy, 0px) + 30px), 190px)
      rotateX(36deg) rotate(calc(var(--r, 0deg) + var(--spin, 8deg)));
    filter: drop-shadow(0 26px 22px rgb(74 53 64 / 0.16)) drop-shadow(0 40px 34px rgb(74 53 64 / 0.1));
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  16% { opacity: 1; }
  44% {
    opacity: 1;
    transform: perspective(700px) translate3d(0, var(--dy, 0px), 0)
      rotateX(32deg) rotate(calc(var(--r, 0deg) + 1.5deg));
    filter: drop-shadow(0 12px 10px rgb(74 53 64 / 0.2)) drop-shadow(0 20px 18px rgb(74 53 64 / 0.1));
    animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
  }
  72% {
    transform: perspective(700px) translate3d(0, var(--dy, 0px), 0)
      rotateX(0deg) rotate(var(--r, 0deg)) scale(0.95);
    filter: drop-shadow(0 0 0.5px rgb(74 53 64 / 0.35)) drop-shadow(0 1px 2px rgb(74 53 64 / 0.12));
    animation-timing-function: ease-out;
  }
  87% {
    transform: perspective(700px) translate3d(0, var(--dy, 0px), 0)
      rotateX(0deg) rotate(var(--r, 0deg)) scale(1.012);
    filter: var(--shadow-stuck);
  }
  100% {
    opacity: 1;
    transform: perspective(700px) translate3d(0, var(--dy, 0px), 0)
      rotateX(0deg) rotate(var(--r, 0deg)) scale(1);
    filter: var(--shadow-stuck);
  }
}

@keyframes joy-write { to { clip-path: inset(-20% -4% -20% -4%); } }
@keyframes joy-fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .joy-sign__letter, .joy-note__line, .store { animation: none; opacity: 1; clip-path: none; }
}