/* ─────────────────────────────────────────────────────────────────────────────
   Judô One — landing ("O Tatami e a Tinta")
   Tokens: cópia literal do :root de src/index.css (app). Ao mudar a marca lá,
   mude aqui também. Valores em canais "R G B" para usar rgb(var(--x) / a).
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --tatami: 244 239 230;
  --paper: 252 250 246;
  --paper-2: 247 241 232;
  --sumi: 26 24 20;
  --sumi-soft: 92 85 74;
  --sumi-muted: 110 102 90;
  --line: 228 220 203;
  --line-soft: 236 229 214;

  --brand-blue: 0 88 190;
  --brand-blue-deep: 0 71 155;
  --brand-blue-ink: var(--paper);
  --brand-gold: 250 204 21;
  --brand-gold-ink: var(--sumi);

  --preto: var(--sumi);
  --focus: var(--brand-blue);
  --danger: 179 55 43;
  --success: 39 107 67;
  --night: 15 15 15; /* só a story 1 (Premium Dark Hero) */

  --belt-branca: 251 248 241;
  --belt-cinza: 142 138 130;
  --belt-azul: 31 78 156;
  --belt-amarela: 226 178 58;
  --belt-laranja: 217 105 43;
  --belt-verde: 47 122 67;
  --belt-roxa: 107 58 140;
  --belt-marrom: 107 66 38;
  --belt-preta: var(--sumi);

  --font-display: 'Newsreader', Georgia, serif;
  --font-sans: 'General Sans', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.36, 0.64, 1);

  --shadow-card: 0 1px 0 rgb(var(--sumi) / 0.03), 0 1px 3px rgb(var(--sumi) / 0.06);
  --shadow-sheet: 0 4px 25px rgb(var(--sumi) / 0.06), 0 1px 3px rgb(var(--sumi) / 0.06);

  --gutter: clamp(1rem, 4vw, 4rem);
  --top: 5.25rem;
  --bottom: 7.25rem;
  --dwell: 3.5s;
}

@media (min-width: 1024px) {
  :root {
    --top: 6rem;
    --bottom: 6.5rem;
  }
}

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

html {
  height: 100%;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background-color: rgb(var(--tatami));
  color: rgb(var(--sumi));
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Tatami liso + grão orgânico a 1.5% (o mesmo do app), fixo na tela. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

::selection {
  background-color: rgb(var(--sumi));
  color: rgb(var(--tatami));
}

h1,
h2,
p,
ul,
figure {
  margin: 0;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid rgb(var(--focus));
  outline-offset: 2px;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 40;
  padding: 0.5rem 0.875rem;
  border-radius: 4px;
  background-color: rgb(var(--paper));
  box-shadow: var(--shadow-card);
  font-size: 0.875rem;
  font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus {
  transform: none;
}

/* ── Topo: progresso + marca ──────────────────────────────────────────────── */
.chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: calc(env(safe-area-inset-top) + 0.5rem) var(--gutter) 0;
  pointer-events: none;
}
.chrome > * {
  pointer-events: auto;
}

.progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seg {
  position: relative;
  display: block;
  width: 100%;
  height: 1rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.seg::before,
.seg-fill {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
}
.seg::before {
  background-color: rgb(var(--line));
}
.seg-fill {
  background-color: rgb(var(--sumi));
  transform: scaleX(0);
  transform-origin: left center;
}
.seg.is-done .seg-fill,
.seg.is-current .seg-fill {
  transform: scaleX(1);
}
.autoplay .seg.is-current .seg-fill {
  transform: scaleX(0);
  animation: seg-fill var(--dwell) linear forwards;
}
.autoplay.is-paused .seg.is-current .seg-fill {
  animation-play-state: paused;
}
.seg:focus-visible {
  outline-offset: 0;
}

.chrome-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  border-radius: 2px;
}
.brand-obi {
  width: 2.5rem;
  height: 1.5625rem;
  fill: rgb(var(--preto));
  stroke: rgb(var(--preto));
}
.brand-word {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.chrome-tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.login {
  padding: 0.5rem 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--sumi-soft));
  text-decoration: underline;
  text-decoration-color: rgb(var(--line));
  text-underline-offset: 4px;
  border-radius: 2px;
}
.login:hover {
  color: rgb(var(--sumi));
  text-decoration-color: currentColor;
}

.pause {
  margin-right: 0.5rem;
}
.pause[hidden] {
  display: none;
}
.pause-icon {
  width: 0.625rem;
  height: 0.75rem;
  border-inline: 3px solid rgb(var(--sumi));
}
.pause[aria-pressed='true'] .pause-icon {
  border: 0;
  background-color: rgb(var(--sumi));
  clip-path: polygon(10% 0, 100% 50%, 10% 100%);
}

/* ── Trilho de stories ────────────────────────────────────────────────────── */
.track {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior: none;
  scrollbar-width: none;
}
.track::-webkit-scrollbar {
  display: none;
}

@media (pointer: coarse) {
  .track {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

.story {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  padding: var(--top) var(--gutter) var(--bottom);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: clip;
}

.stage {
  position: relative;
  height: 100%;
  max-width: 77.5rem;
  margin: 0 auto;
}

/* Tipografia comum */
.line {
  display: block;
  overflow: clip;
  /* folga para acentos/ascendentes e descendentes não serem cortados pela máscara */
  padding-block: 0.14em 0.16em;
  margin-block: -0.14em -0.16em;
}
.line-in {
  display: inline-block;
}

.sub {
  max-width: 38ch;
  font-size: clamp(1rem, 0.6rem + 0.9vw, 1.1875rem);
  line-height: 1.45;
  color: rgb(var(--sumi-soft));
  text-wrap: pretty;
}

h1,
h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-wrap: balance;
}

/* ── Story 1: Premium Dark Hero ───────────────────────────────────────────
   A única story escura. Foto do quimono (pearl weave) cobrindo a tela, véu de
   tinta por cima, tipografia em papel. O topo e a base mudam de tema com ela
   (classe .on-dark no <html>, ligada pelo JS quando a story 1 está ativa). */
.s1 {
  color: rgb(var(--paper));
  background-color: rgb(var(--night));
}
.s1-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.s1-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform-origin: 50% 35%;
}
.s1-shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to top,
    rgb(var(--night) / 0.95) 0%,
    rgb(var(--night) / 0.3) 50%,
    rgb(var(--night) / 0.9) 100%
  );
}
.s1 .stage {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.25rem;
  padding-bottom: clamp(1.5rem, 6dvh, 4rem);
}
.s1-head {
  --h: clamp(2.5rem, min(12vw, 8.5dvh), 7.5rem);
  font-size: var(--h);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: rgb(var(--paper));
}
.s1-free {
  overflow: visible;
  margin-top: 0.06em;
  font-size: 1.75em;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.s1-free .line-in {
  position: relative;
  isolation: isolate;
}
/* A faixa de ouro sob "Grátis.": banda cortada em diagonal (::before) e um
   brilho difuso por trás (::after), que acende sobre o fundo escuro. */
.gold-belt {
  position: absolute;
  z-index: -1;
  left: -0.06em;
  right: -100vw;
  bottom: -0.02em;
  height: 0.13em;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}
.gold-belt::before,
.gold-belt::after {
  content: '';
  position: absolute;
  inset: 0;
}
.gold-belt::before {
  background-color: rgb(var(--brand-gold));
  background-image: repeating-linear-gradient(
    to right,
    rgb(var(--sumi) / 0.28) 0 6px,
    transparent 6px 11px
  );
  background-size: 100% 1px;
  background-position: 0 50%;
  background-repeat: no-repeat;
  clip-path: polygon(0.25em 0, 100% 0, 100% 100%, 0 100%);
}
.gold-belt::after {
  z-index: -1;
  inset: -0.1em -0.05em;
  background-color: rgb(var(--brand-gold));
  filter: blur(18px);
  opacity: 0.14; /* brilho reduzido em 75% (era 0.55) */
}
.s1-sub {
  max-width: 34ch;
  color: rgb(var(--paper) / 0.82);
}

@media (min-width: 1024px) {
  /* Desktop: "Gestão de judô." e "Grátis." na mesma linha, alinhados pela base;
     "Grátis." maior, com a faixa de ouro correndo a partir dele. */
  .s1-head {
    --h: clamp(2.75rem, min(5.6vw, 9.5dvh), 6.5rem);
    white-space: nowrap;
  }
  .s1-head .line {
    display: inline-block;
    vertical-align: baseline;
  }
  .s1-free {
    margin-top: 0;
    margin-left: 0.22em;
    font-size: 1.9em;
  }
  .s1-media img {
    object-position: 50% 42%;
  }
}

/* ── Story 2 ──────────────────────────────────────────────────────────────── */
.s2 .stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.25rem, 4dvh, 2.5rem);
}
.s2-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.s2-head {
  font-size: clamp(2.75rem, min(13vw, 11dvh), 10rem);
}
.s2-head .line:nth-child(2),
.s2-head .line:nth-child(3) {
  display: inline-block;
  vertical-align: top;
}

.clip {
  position: relative;
  order: 2;
  align-self: flex-start;
  width: min(100%, 22rem);
  padding: 0.875rem 1rem;
  border: 1px solid rgb(var(--line));
  border-radius: 6px;
  background-color: rgb(var(--paper));
  box-shadow: var(--shadow-sheet);
  rotate: -1.5deg;
}
.clip-list li {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
}
.clip-list li + li {
  border-top: 1px solid rgb(var(--line-soft));
}
.clip-extra {
  display: none !important;
}
.row-obi {
  width: 2.25rem;
  height: 1.4rem;
  stroke: rgb(var(--sumi) / 0.3);
}
.belt-branca {
  fill: rgb(var(--belt-branca));
  stroke: rgb(var(--sumi-soft));
}
.belt-amarela {
  fill: rgb(var(--belt-amarela));
  stroke: rgb(var(--sumi-soft));
}
.belt-verde {
  fill: rgb(var(--belt-verde));
}
.belt-roxa {
  fill: rgb(var(--belt-roxa));
}
.mark {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgb(var(--line));
  border-radius: 4px;
  background-color: rgb(var(--paper-2));
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
}
.mark-off {
  color: rgb(var(--danger));
  border-color: rgb(var(--danger) / 0.25);
  background-color: rgb(var(--danger) / 0.1);
}
.clip figcaption {
  position: absolute;
  right: 0.25rem;
  bottom: -1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgb(var(--sumi-muted));
}
/* O traço de tinta que aposenta a prancheta. */
.strike {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background-color: rgb(var(--sumi) / 0.88);
  transform: rotate(-24deg);
  transform-origin: center;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .s2 .stage {
    display: grid;
    grid-template-columns: minmax(20rem, 30%) 1fr;
    align-items: center;
    gap: 0;
  }
  .clip {
    order: 0;
    align-self: center;
    width: auto;
    margin-right: -3rem;
    padding: 1.25rem 1.5rem;
  }
  .clip-list li {
    grid-template-columns: 2.75rem 1fr auto;
    padding: 0.75rem 0;
    font-size: 1.0625rem;
  }
  .row-obi {
    width: 2.75rem;
    height: 1.75rem;
  }
  .clip-extra {
    display: grid !important;
  }
  .s2-text {
    position: relative;
    align-items: flex-end;
    text-align: right;
  }
  /* "Aposente" / "a prancheta." em duas linhas (o "a" não fica sozinho). */
  .s2-head {
    font-size: clamp(4rem, min(9vw, 17dvh), 10rem);
  }
}

/* ── Story 3 ──────────────────────────────────────────────────────────────── */
.s3 .stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 5dvh, 3.5rem);
}
.s3-head {
  font-size: clamp(2.5rem, min(9.5vw, 11dvh), 8.5rem);
}
.ledger {
  margin-inline: calc(50% - 50vw);
  border-block: 1px solid rgb(var(--line));
  background-color: rgb(var(--paper));
  box-shadow: var(--shadow-sheet);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
}
.ledger-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 1.25ch;
  padding: 0.625rem max(var(--gutter), calc(50vw - 38.75rem));
  font-size: 0.875rem;
  color: rgb(var(--sumi-soft));
}
.ledger-row + .ledger-row {
  border-top: 1px solid rgb(var(--line-soft));
}
.ledger-row .status {
  justify-self: end;
}
.ledger-main {
  padding-block: clamp(0.875rem, 3dvh, 1.75rem);
  font-size: clamp(1rem, 4.3vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgb(var(--sumi));
}
.status {
  padding: 0.12em 0.45em;
  border: 1px solid;
  border-radius: 2px;
  font-weight: 500;
  white-space: nowrap;
}
.status-ok {
  color: rgb(var(--success));
  border-color: rgb(var(--success) / 0.25);
  background-color: rgb(var(--success) / 0.1);
}
.status-late {
  color: rgb(var(--danger));
  border-color: rgb(var(--danger) / 0.25);
  background-color: rgb(var(--danger) / 0.1);
}
.type {
  display: inline-block;
  letter-spacing: 0;
  overflow: hidden;
  white-space: nowrap;
  width: 6ch;
  vertical-align: bottom;
}

/* ── Story 4 ──────────────────────────────────────────────────────────────── */
.s4 .stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.25rem, 4dvh, 2.5rem);
}
.s4-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.s4-head {
  font-size: clamp(2.6rem, min(12vw, 9.5dvh), 8.5rem);
}
.s4-head .line:first-child {
  font-weight: 600;
}

.receipt {
  align-self: flex-end;
  width: min(100%, 25rem);
  padding: 1rem 1.125rem 1.125rem;
  border: 1px solid rgb(var(--line));
  border-radius: 6px;
  background-color: rgb(var(--paper));
  box-shadow: var(--shadow-sheet);
  rotate: -1deg;
}
.receipt-title {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--sumi-soft));
}
.receipt-list {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.receipt-list li {
  display: flex;
  align-items: baseline;
  gap: 0.5ch;
  padding: 0.3rem 0;
}
.receipt-list i {
  flex: 1;
  min-width: 1.5ch;
  border-bottom: 1px dotted rgb(var(--sumi-muted));
  transform: translateY(-0.25em);
}
.receipt-list b {
  font-weight: 500;
}
.receipt-no {
  flex-wrap: wrap;
  color: rgb(var(--sumi-soft));
}
.receipt-no b {
  color: rgb(var(--danger));
}
.receipt-card {
  background-image: linear-gradient(rgb(var(--sumi)), rgb(var(--sumi)));
  background-repeat: no-repeat;
  background-position: 0 55%;
  background-size: 100% 2px;
}
.no-card {
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0.1rem 0.375rem;
  border-radius: 2px;
  background-color: rgb(var(--brand-gold));
  color: rgb(var(--brand-gold-ink));
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.receipt-limits {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgb(var(--line-soft));
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgb(var(--sumi-soft));
}

@media (min-width: 1024px) {
  .s4 .stage {
    display: grid;
    grid-template-columns: 1fr minmax(24rem, 29rem);
    grid-template-rows: 1fr auto;
    align-items: start;
  }
  .s4-text {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: center;
  }
  .receipt {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: end;
    position: relative;
    z-index: 1;
    padding: 1.25rem 1.375rem 1.375rem;
  }
  .s4-head {
    font-size: clamp(4rem, min(10vw, 15dvh), 10rem);
  }
  .receipt {
    width: 100%;
  }
  .receipt-list {
    font-size: 0.9375rem;
  }
  .receipt-limits {
    font-size: 0.875rem;
  }
}

/* ── Story 5 ──────────────────────────────────────────────────────────────── */
.s5 .stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 4dvh, 2.5rem);
}
.big-obi {
  width: min(78%, 34dvh * 1.6, 36rem);
  height: auto;
  overflow: visible;
}
.big-obi-color {
  fill: rgb(var(--belt-preta));
  stroke: rgb(var(--sumi-soft));
}
.stitch-light {
  stroke: rgb(var(--paper));
  stroke-opacity: 0.55;
}
.stitch-dark {
  stroke: rgb(var(--sumi));
  stroke-opacity: 0.28;
}
.sheen-stop {
  stop-color: rgb(var(--paper));
}
.sheen {
  transform: translateX(-110%);
}
.tie-left,
.tie-right,
.knot,
.big-obi-body {
  transform-box: fill-box;
}
.tie-left {
  transform-origin: top right;
}
.tie-right {
  transform-origin: top left;
}
.knot,
.big-obi-body {
  transform-origin: center;
}

.s5-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.s5-head {
  font-size: clamp(2.5rem, min(10vw, 9dvh), 7.5rem);
}
.s5-login {
  font-size: 0.9375rem;
  color: rgb(var(--sumi-soft));
}
.s5-login a {
  font-weight: 600;
  color: rgb(var(--sumi));
  text-underline-offset: 4px;
  border-radius: 2px;
}
.colophon {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--top) + 0.25rem);
  font-size: 0.75rem;
  color: rgb(var(--sumi-muted));
}

@media (min-width: 1024px) {
  .s5 .stage {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
  }
  .big-obi {
    width: 100%;
  }
  .s5-text {
    padding-top: 6dvh;
    container-type: inline-size;
  }
  /* 13.5cqi: "sem fita isolante." cabe na coluna, então o título fica em 2 linhas
     mesmo em telas largas, onde a coluna para de crescer (max-width do .stage). */
  .s5-head {
    font-size: clamp(3rem, min(5.6vw, 12dvh, 13.5cqi), 8rem);
  }
  .colophon {
    top: auto;
    right: auto;
    left: var(--gutter);
    bottom: calc(var(--bottom) - 1.75rem);
  }
}

/* ── Base fixa: setas, contador, CTA ──────────────────────────────────────── */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem var(--gutter) calc(env(safe-area-inset-bottom) + 0.875rem);
  border-top: 1px solid rgb(var(--line));
  background-color: rgb(var(--tatami));
}

.nav {
  display: none;
  align-items: center;
  gap: 0.5rem;
}
.arrow {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgb(var(--sumi));
  border-radius: 4px;
  background-color: transparent;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  cursor: pointer;
  transition:
    background-color 0.18s var(--out),
    opacity 0.18s var(--out),
    transform 0.18s var(--out);
}
.arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.arrow:active:not(:disabled) {
  transform: scale(0.96);
}
.counter {
  margin-left: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums slashed-zero;
  color: rgb(var(--sumi-soft));
}

.cta-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  gap: 0.375rem;
}
.cta-note {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  color: rgb(var(--sumi-soft));
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 3.5rem;
  padding: 0 1.5rem;
  border-radius: 4px;
  background-color: rgb(var(--brand-blue));
  color: rgb(var(--brand-blue-ink));
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgb(var(--brand-blue) / 0.2),
    0 10px 24px -12px rgb(var(--brand-blue) / 0.6);
  transition:
    background-color 0.18s var(--out),
    transform 0.18s var(--out);
}
.cta:active {
  transform: scale(0.96);
  transition-duration: 0.08s;
}
.cta-label {
  transition: opacity 0.15s var(--out);
}
.cta-label.is-swapping {
  opacity: 0;
}
.cta-arrow {
  font-family: var(--font-mono);
  font-weight: 500;
  transition: transform 0.35s var(--spring);
}

@media (hover: hover) {
  .cta:hover {
    background-color: rgb(var(--brand-blue-deep));
  }
  .cta:hover .cta-arrow {
    transform: translateX(4px);
  }
  .arrow:hover:not(:disabled) {
    background-color: rgb(var(--paper-2));
  }
}

@media (min-width: 1024px) {
  .dock {
    border-top: 0;
    background-color: transparent;
    padding-block: 1rem calc(env(safe-area-inset-bottom) + 1.5rem);
    pointer-events: none;
  }
  .dock > * {
    pointer-events: auto;
  }
  .nav {
    display: flex;
  }
  .cta-wrap {
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
  }
  .cta {
    min-width: 19rem;
  }
}

/* Telas baixas (celular deitado, notebook pequeno) */
@media (max-height: 640px) {
  :root {
    --top: 4.75rem;
    --bottom: 6.25rem;
  }
  .cta {
    height: 3rem;
  }
  .sub {
    font-size: 0.9375rem;
  }
  .s3 .stage {
    gap: 1.25rem;
  }
  .ledger-main {
    padding-block: 0.75rem;
  }
}

/* ── Tema escuro do topo e da base enquanto a story 1 está na tela ────────── */
.chrome,
.dock,
.brand-word,
.login,
.counter,
.cta-note,
.arrow {
  transition:
    color 0.35s var(--out),
    background-color 0.35s var(--out),
    border-color 0.35s var(--out);
}
.brand-obi,
.seg::before,
.seg-fill,
.pause-icon {
  transition:
    fill 0.35s var(--out),
    stroke 0.35s var(--out),
    background-color 0.35s var(--out),
    border-color 0.35s var(--out);
}
.on-dark .brand-word,
.on-dark .login,
.on-dark .login:hover {
  color: rgb(var(--paper));
}
.on-dark .login {
  text-decoration-color: rgb(var(--paper) / 0.4);
}
.on-dark .brand-obi {
  fill: rgb(var(--paper));
  stroke: rgb(var(--paper));
}
.on-dark .seg::before {
  background-color: rgb(var(--paper) / 0.3);
}
.on-dark .seg-fill {
  background-color: rgb(var(--paper));
}
/* Base: vidro sutil para o CTA não brigar com a trama do quimono. */
.on-dark .dock {
  border-top-color: rgb(var(--paper) / 0.1);
  background-color: rgb(var(--night) / 0.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.on-dark .cta-note,
.on-dark .counter {
  color: rgb(var(--paper) / 0.75);
}
.on-dark .arrow {
  border-color: rgb(var(--paper) / 0.7);
  color: rgb(var(--paper));
}
.on-dark .pause-icon {
  border-color: rgb(var(--paper));
}
.on-dark .pause[aria-pressed='true'] .pause-icon {
  background-color: rgb(var(--paper));
}
.on-dark .chrome :focus-visible,
.on-dark .dock :focus-visible {
  outline-color: rgb(var(--paper));
}
.on-dark .cta {
  box-shadow:
    0 1px 0 rgb(var(--paper) / 0.08) inset,
    0 12px 32px -12px rgb(var(--brand-blue) / 0.8);
}
@media (hover: hover) {
  .on-dark .arrow:hover:not(:disabled) {
    background-color: rgb(var(--paper) / 0.1);
  }
}
@media (min-width: 1024px) {
  .on-dark .dock {
    border-top: 1px solid rgb(var(--paper) / 0.1);
  }
}

/* ── Motion: entradas (só com JS; sem JS tudo aparece pronto) ──────────────── */
.js .story:not(.seen) .line-in,
.js .story:not(.seen) .enter {
  opacity: 0;
}
.js .story:not(.seen) .gold-belt {
  transform: rotate(-1.5deg) scaleX(0);
}
.js .story:not(.seen) .strike {
  transform: rotate(-24deg) scaleX(0);
}
.js .story:not(.seen) .type {
  width: 0;
}
.js .story:not(.seen) .receipt-card {
  background-size: 0% 2px;
}
.js .story:not(.seen) .no-card {
  opacity: 0;
}

.seen .line-in {
  animation: line-rise 0.7s var(--out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.line:nth-child(2) {
  --i: 1;
}
.line:nth-child(3) {
  --i: 2;
}
.seen .enter {
  animation: rise 0.6s var(--out) both;
  animation-delay: var(--d, 280ms);
}
.seen .clip.enter {
  --d: 120ms;
}
.seen .gold-belt {
  animation: belt-run 0.8s var(--out) 0.3s both;
}
.seen .strike {
  animation: draw 0.5s var(--out) 0.75s both;
}
.seen .type {
  animation: type 0.4s steps(6, end) 0.7s both;
}
.seen .beat .line-in {
  animation-delay: calc(var(--i, 0) * 250ms);
}
.s4 .seen .enter,
.s4.seen .enter {
  --d: 700ms;
}
.seen .receipt-card {
  animation: strike-card 0.5s var(--out) 1.4s both;
}
.seen .no-card {
  animation: pop 0.45s var(--spring) 1.85s both;
}

/* Story 5: o obi se amarra, sobe a escada de faixas e assenta na preta.
   Um ciclo de 3s em loop enquanto a story está na tela (ela dura 6s: duas voltas). */
.seen .tie-left {
  animation: obi-loop-tie-left 3s var(--out) infinite;
}
.seen .tie-right {
  animation: obi-loop-tie-right 3s var(--out) infinite;
}
.seen .knot {
  animation: obi-loop-knot 3s var(--out) infinite;
}
.seen .big-obi-color {
  animation: obi-loop-ladder 3s steps(1, end) infinite;
}
.seen .big-obi-body {
  animation: obi-loop-settle 3s var(--out) infinite;
}
.seen .sheen {
  animation: obi-loop-sheen 3s var(--out) infinite;
}

/* Story 1: cascata de fade (sem máscara) e zoom muito lento na foto. */
.s1 .line {
  overflow: visible;
}
.s1.seen .line-in,
.s1.seen .enter {
  animation: s1-fade 1.1s var(--out) both;
}
.s1.seen .line:nth-child(1) .line-in { animation-delay: 0.15s; }
.s1.seen .line:nth-child(2) .line-in { animation-delay: 0.35s; }
.s1.seen .enter { animation-delay: 0.6s; }
.s1-media img {
  animation: s1-zoom 30s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes s1-fade {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes s1-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

@keyframes seg-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes line-rise {
  from { opacity: 0; transform: translateY(0.6em); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes belt-run {
  from { transform: rotate(-1.5deg) scaleX(0); }
  to { transform: rotate(-1.5deg) scaleX(1); }
}
@keyframes draw {
  from { transform: rotate(-24deg) scaleX(0); }
  to { transform: rotate(-24deg) scaleX(1); }
}
@keyframes type {
  from { width: 0; }
  to { width: 6ch; }
}
@keyframes strike-card {
  from { background-size: 0% 2px; }
  to { background-size: 100% 2px; }
}
@keyframes pop {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes obi-loop-tie-left {
  0% { transform: rotate(-22deg); }
  28%,
  100% { transform: rotate(0deg); }
}
@keyframes obi-loop-tie-right {
  0% { transform: rotate(22deg); }
  28%,
  100% { transform: rotate(0deg); }
}
@keyframes obi-loop-knot {
  0%,
  8% { transform: scale(1, 1); }
  20% { transform: scale(0.82, 1.08); }
  34%,
  100% { transform: scale(1, 1); }
}
@keyframes obi-loop-ladder {
  0% { fill: rgb(var(--belt-branca)); }
  24% { fill: rgb(var(--belt-cinza)); }
  30% { fill: rgb(var(--belt-azul)); }
  36% { fill: rgb(var(--belt-amarela)); }
  42% { fill: rgb(var(--belt-laranja)); }
  48% { fill: rgb(var(--belt-verde)); }
  54% { fill: rgb(var(--belt-roxa)); }
  60% { fill: rgb(var(--belt-marrom)); }
  66%,
  100% { fill: rgb(var(--belt-preta)); }
}
@keyframes obi-loop-settle {
  0%,
  66% { transform: translateY(0) scale(1); }
  72% { transform: translateY(-3px) scale(1.03); }
  84%,
  100% { transform: translateY(0) scale(1); }
}
@keyframes obi-loop-sheen {
  0%,
  70% { transform: translateX(-110%); }
  100% { transform: translateX(110%); }
}

@media (prefers-reduced-motion: reduce) {
  .seen .line-in,
  .seen .enter {
    animation: fade 0.2s linear both;
    animation-delay: 0s;
  }
  .seen .gold-belt,
  .s1-media img,
  .seen .strike,
  .seen .type,
  .seen .receipt-card,
  .seen .no-card,
  .seen .tie-left,
  .seen .tie-right,
  .seen .knot,
  .seen .big-obi-color,
  .seen .big-obi-body,
  .seen .sheen {
    animation: none;
  }
  .js .story .gold-belt {
    transform: rotate(-1.5deg);
  }
  .js .story .strike {
    transform: rotate(-24deg);
  }
  .js .story .type {
    width: 6ch;
  }
  .js .story .receipt-card {
    background-size: 100% 2px;
  }
  .js .story .no-card {
    opacity: 1;
  }
  .cta,
  .cta-arrow,
  .cta-label,
  .arrow {
    transition: none;
  }
  .cta:active,
  .arrow:active:not(:disabled) {
    transform: none;
  }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Celular baixo: na story 4 o recibo já prova o que o subtítulo diz; ele sai. */
@media (max-width: 1023px) and (max-height: 700px) {
  .s4 .sub {
    display: none;
  }
  .s4-head {
    font-size: clamp(2.4rem, min(11vw, 8.5dvh), 4rem);
  }
}

/* Celular deitado / telas muito baixas: a story rola por dentro em vez de cortar. */
@media (max-height: 480px) {
  .story {
    overflow-x: clip;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .stage {
    height: auto;
    min-height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s1.seen .line-in,
  .s1.seen .enter {
    animation: fade 0.2s linear both;
  }
}

/* Desktop: "Gestão de judô." entra da esquerda; "Grátis." entra da direita
   trazendo a faixa de ouro junto (a faixa não desenha por conta própria aqui). */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .s1.seen .line:nth-child(1) .line-in {
    animation: s1-from-left 1.1s var(--out) 0.15s both;
  }
  .s1.seen .line:nth-child(2) .line-in {
    animation: s1-from-right 1.1s var(--out) 0.3s both;
  }
  .s1.seen .gold-belt {
    animation: none;
    transform: rotate(-1.5deg);
  }
}
@keyframes s1-from-left {
  from { opacity: 0; transform: translateX(-12vw); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes s1-from-right {
  from { opacity: 0; transform: translateX(12vw); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}