/*
 * Návrh je pro šířku 402 px (iPhone 16/17 Pro).
 * Všechny rozměry jsou v násobcích --u, takže kompozice se přesně škáluje
 * na šířku telefonu; na desktopu se stránka zastaví na --max-w a vycentruje.
 */
:root {
  --max-w: 480px;
  --w: min(100vw, var(--max-w));
  --u: calc(var(--w) / 402);

  --yellow: #f4cb0f;
  --black: #000;
  --font-display: "Stick No Bills", sans-serif;
  --font-body: "Inter", sans-serif;
}

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

html,
body {
  margin: 0;
  background: var(--black);
}

body {
  font-family: var(--font-body);
  color: var(--black);
  overflow-x: hidden;
}

img {
  display: block;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px dashed var(--yellow);
  outline-offset: 3px;
}

/* ---------- Stránka ---------- */

.page {
  position: relative;
  width: var(--w);
  height: calc(1874 * var(--u));
  margin: 0 auto;
  overflow: hidden;
}

/* ---------- Hero: zeď s telefonem ---------- */

.hero {
  position: absolute;
  inset: 0 0 auto;
  height: calc(895 * var(--u));
  overflow: hidden;
  background: #fff;
}

.hero__bg {
  position: absolute;
  left: calc(-515 * var(--u));
  top: calc(-263 * var(--u));
  width: calc(974 * var(--u));
  height: calc(2165 * var(--u));
  object-fit: cover;
}

.hero__phone {
  position: absolute;
  left: calc(-102 * var(--u));
  top: calc(-69 * var(--u));
  width: calc(665 * var(--u));
  height: calc(1192 * var(--u));
  object-fit: cover;
  pointer-events: none;
}

.hero__logo {
  position: absolute;
  left: calc(31 * var(--u));
  top: calc(95 * var(--u));
  width: calc(341 * var(--u));
  height: calc(141 * var(--u));
  margin: 0;
  overflow: hidden;
}

.hero__logo img {
  position: absolute;
  left: 0;
  top: 0.24%;
  width: 99.94%;
  height: 99.53%;
}

/*
 * Papír s titulky – roste nahoru podle délky věty.
 * Spodní hrana je jako v návrhu (744 px), ale nikdy níž než nad lištou
 * prohlížeče: 100svh = viditelná výška i se zobrazeným adresním řádkem.
 */
.hero__note {
  --note-bottom: calc(744.29 * var(--u));
  --note-gap: 80px; /* rezerva nad spodní lištou Safari */
  position: absolute;
  left: calc(14 * var(--u));
  top: var(--note-bottom);
  top: min(var(--note-bottom), calc(100svh - var(--note-gap)));
  translate: 0 -100%;
  width: calc(364 * var(--u));
  min-height: calc(111.583 * var(--u));
  display: grid;
  align-content: center;
  padding: calc(34 * var(--u)) calc(23.5 * var(--u)) calc(30 * var(--u));
  opacity: 0;
  transition: opacity 0.4s;
}

.hero__note.is-visible {
  opacity: 1;
}

.hero__note-paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: drop-shadow(calc(4 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.25));
}

.hero__note-text {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(30 * var(--u));
  line-height: calc(26 * var(--u));
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  transition: opacity 0.2s;
}

.hero__note-text.is-visible {
  opacity: 1;
}

/* Start zvuku a titulků (když prohlížeč nepustí autoplay) – páska přes telefon */
.hero__play {
  position: absolute;
  left: calc(101 * var(--u));
  top: calc(395 * var(--u));
  width: calc(200 * var(--u));
  height: calc(64 * var(--u));
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(28 * var(--u));
  color: var(--black);
  cursor: pointer;
  filter: drop-shadow(calc(2 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.35));
  rotate: -3deg;
  animation: hero-play-pulse 1.6s ease-in-out infinite;
}

.hero__play[hidden] {
  display: none;
}

@keyframes hero-play-pulse {
  50% { scale: 1.06; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__play { animation: none; }
}

/* ---------- Key visual + Oneplay ---------- */

.kv {
  position: absolute;
  inset: calc(895 * var(--u)) 0 0;
  background: var(--black);
}

.kv__img-wrap {
  position: absolute;
  left: calc(-38 * var(--u));
  top: 0;
  width: calc(470 * var(--u));
  height: calc(685 * var(--u));
  overflow: hidden;
}

.kv__img {
  position: absolute;
  left: -0.08%;
  top: -29.24%;
  width: 100.16%;
  height: 134.01%;
  max-width: none;
}

.kv__oneplay {
  position: absolute;
  left: calc(97 * var(--u));
  top: calc(70 * var(--u));
  width: calc(209 * var(--u));
  height: calc(28 * var(--u));
}

.kv__oneplay-logo {
  position: absolute;
  inset: 0 53.32% 0 0;
  width: 46.68%;
  height: 100%;
}

.kv__oneplay-original {
  position: absolute;
  inset: 7.54% 0 27.79% 49.87%;
  width: 50.13%;
  height: 64.67%;
}

.kv__cta {
  position: absolute;
  left: calc(123 * var(--u));
  top: calc(126 * var(--u));
  width: calc(157 * var(--u));
  height: calc(42 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(5 * var(--u)) 0 0;
  border: 0;
  border-radius: calc(7 * var(--u));
  background: var(--yellow);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  font-size: calc(18 * var(--u));
  line-height: calc(25 * var(--u));
  text-decoration: none;
  transition: filter 0.15s;
}

.kv__cta:hover {
  filter: brightness(1.08);
}

/* ---------- Dialog s e-mailem ---------- */

.email-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: auto;
  overflow-x: hidden;
}

.email-dialog[open] {
  display: flex;
}

.email-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

/* Souřadnice uvnitř = Figma souřadnice − 150 px na ose Y (horní hrana nástěnky) */
.email-dialog__stage {
  position: relative;
  flex: none;
  width: var(--w);
  height: calc(737 * var(--u));
  margin: auto;
  font-family: var(--font-display);
}

.email-dialog__board {
  position: absolute;
  left: calc(-86 * var(--u));
  top: 0;
  width: calc(615 * var(--u));
  height: calc(737 * var(--u));
  max-width: none;
  object-fit: cover;
  filter: drop-shadow(calc(4 * var(--u)) calc(4 * var(--u)) calc(4.2 * var(--u)) rgba(0, 0, 0, 0.25));
  pointer-events: none;
}

.email-dialog__paper {
  position: absolute;
  left: calc(-26 * var(--u));
  top: calc(54 * var(--u));
  width: calc(437 * var(--u));
  height: calc(584 * var(--u));
  max-width: none;
  object-fit: cover;
  filter: drop-shadow(calc(4 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

/* Obsah papíru – sloupec pod sebou, aby se vešel delší (právní) text */
.email-dialog__content {
  position: absolute;
  left: calc(78 * var(--u));
  top: calc(178 * var(--u));
  width: calc(238 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  font-weight: 500;
  font-size: calc(10 * var(--u));
  line-height: calc(12 * var(--u));
  letter-spacing: calc(0.2 * var(--u));
}

.email-dialog__content p {
  margin: 0;
}

.email-dialog__title {
  margin: 0;
  font-weight: 700;
  font-size: calc(24 * var(--u));
  line-height: calc(25 * var(--u));
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

.email-dialog__intro {
  margin-top: calc(-4 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: calc(15 * var(--u));
  text-align: center;
  text-wrap: balance;
}

.email-dialog__lead {
  font-weight: 700;
  font-size: calc(17 * var(--u));
  line-height: calc(20 * var(--u));
}

.email-dialog__field {
  position: relative;
  width: calc(220 * var(--u));
  margin: calc(4 * var(--u)) auto 0;
}

.email-dialog__input {
  display: block;
  width: 100%;
  height: calc(27 * var(--u));
  padding: 0 calc(3 * var(--u));
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: calc(18 * var(--u));
  line-height: calc(25 * var(--u));
  color: var(--black);
}

.email-dialog__input::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

.email-dialog__input:focus {
  outline: none;
}

.email-dialog__line {
  width: calc(220.002 * var(--u));
  height: calc(3 * var(--u));
  margin-top: calc(10 * var(--u));
  rotate: 0.26deg;
  pointer-events: none;
}

.email-dialog__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.email-dialog__consent {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  cursor: pointer;
}

.email-dialog__checkbox {
  appearance: none;
  flex: none;
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  margin: 0;
  border: calc(2 * var(--u)) solid var(--black);
  border-radius: calc(2 * var(--u));
  background: transparent center / 80% no-repeat;
  cursor: pointer;
}

.email-dialog__checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Turnstile (300 px) je širší než sloupec – vycentrovat přes okraje papíru */
.email-dialog__content .cf-turnstile {
  align-self: center;
}

.email-dialog__error {
  font-size: calc(14 * var(--u));
  line-height: calc(16 * var(--u));
  color: #b3160b;
  text-align: center;
}

/* Stav po odeslání – místo formuláře poděkování */
.email-dialog__sent {
  position: absolute;
  left: calc(78 * var(--u));
  top: calc(230 * var(--u));
  width: calc(238 * var(--u));
  display: none;
  flex-direction: column;
  gap: calc(14 * var(--u));
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: calc(19 * var(--u));
  text-align: center;
  text-wrap: balance;
}

.email-dialog__sent p {
  margin: 0;
}

.email-dialog__hint {
  font-size: calc(12 * var(--u));
  line-height: calc(14 * var(--u));
}

.is-sent .email-dialog__content,
.is-sent .email-dialog__submit {
  display: none;
}

.is-sent .email-dialog__sent {
  display: flex;
}

/* Text podle toho, jestli mail odešel hned, nebo čeká ve frontě */
.email-dialog__sent [data-when="queued"],
.is-queued .email-dialog__sent [data-when="sent"] {
  display: none;
}

.is-queued .email-dialog__sent [data-when="queued"] {
  display: block;
}

.email-dialog__submit {
  position: absolute;
  left: calc(128 * var(--u));
  top: calc(566.5 * var(--u));
  width: calc(145.124 * var(--u));
  height: calc(47.619 * var(--u));
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(24 * var(--u));
  color: var(--black);
  cursor: pointer;
  filter: drop-shadow(calc(2 * var(--u)) calc(4 * var(--u)) calc(1 * var(--u)) rgba(0, 0, 0, 0.25));
  transition: transform 0.15s;
}

.email-dialog__submit:hover {
  transform: rotate(-1.5deg);
}

.email-dialog__submit:disabled {
  cursor: progress;
  opacity: 0.6;
}

/* Lepicí páska: obrázek + žlutohnědé tónování (color burn) */
.email-dialog__submit img,
.hero__play img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.email-dialog__submit::before,
.hero__play::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #ad7b11;
  mix-blend-mode: color-burn;
}

.email-dialog__submit span,
.hero__play span {
  position: relative;
  z-index: 2;
}

.email-dialog__close {
  position: absolute;
  left: calc(317.2 * var(--u));
  top: calc(78.8 * var(--u));
  width: calc(40.86 * var(--u));
  height: calc(44.5 * var(--u));
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.email-dialog__close img {
  width: 100%;
  height: 100%;
}

/* ---------- Stránka potvrzení e-mailu (potvrdit.html) ---------- */

.page--confirm {
  height: calc(895 * var(--u));
}

.confirm__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.confirm__stage {
  position: absolute;
  left: 0;
  top: calc(150 * var(--u));
}

.confirm__state a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

[data-state="ready"] .confirm__state--ready,
[data-state="done"] .confirm__state--done,
[data-state="invalid"] .confirm__state--invalid,
[data-state="error"] .confirm__state--error {
  display: flex;
}

/* Tlačítko jen když je co potvrdit (nebo zkusit znovu) */
.confirm__stage[data-state="done"] .email-dialog__submit,
.confirm__stage[data-state="invalid"] .email-dialog__submit {
  display: none;
}