/* The landing page (ADR-18) — the rendered `/` an anonymous visitor sees.
   Tokens come from tokens.css; nothing here defines a colour, a size or a radius that is not
   read from there or justified in frontend/DESIGN.md (registered as E-18).

   auth.css is not loaded on this page, so the two never collide: `.button` here is the inline
   version of the same object, without the `width: 100%` a form submit wants. */

/* --paper-grain and --tilt are not in tokens.css, and that is deliberate: the SPA keeps them in
   base.css rather than in its own tokens.css, and the two token files are twins on purpose (see
   the header of tokens.css). Same values, same place in the stack. */
:root {
  --paper-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22160%22%20height%3D%22160%22%20filter%3D%22url(%23g)%22%2F%3E%3C%2Fsvg%3E");
  --tilt: 1.5deg; /* E-09: decorative only, and only outside the functional core */
}

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

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--clubi-bg);
  color: var(--clubi-ink);
  font-family: var(--clubi-font-text);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-text);
}

/* The paper grain, same as the SPA's body::after. z-index 100 and pointer-events: none — it sits
   over everything and catches nothing. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.03;
  background-image: var(--paper-grain);
}

main {
  flex: 1;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--clubi-font-display);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

p {
  margin: 0;
}

/* --------------------------------------------------------------------------- layout */

/* The gutter is proportional, so past --container-max it kept *subtracting* from a box that had
   stopped growing: the content settled at 928px on a 1920 screen and 864px on a 2560 one — the
   wider the screen, the narrower the page. The hero's h1 needs 945px at its 4rem ceiling, so it
   wrapped to two lines on exactly the monitors with the most room to spare (and fitted again at
   110% browser zoom, which shrinks 5vw while leaving the px sizes alone).

   Folding the gutter into the cap makes it a margin instead of a subtraction: the content box
   grows to the declared 1120px and stops. Below --container-max the element is viewport-bound and
   nothing changes; the tokens keep the values DESIGN.md 11 gives them. */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * max(var(--space-4), var(--container-gutter)));
  margin-inline: auto;
  padding-inline: max(var(--space-4), var(--container-gutter));
}

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

.section--invert {
  background: var(--clubi-bg-invert);
  color: var(--clubi-ink-on-invert);
}

.section-title {
  font-size: var(--text-xl);
  color: var(--clubi-ink-brand);
}

.muted {
  color: var(--clubi-ink-muted);
  font-size: var(--text-sm);
}

/* The skip link is off-screen until focused — never display:none, which would take it out of the
   tab order and defeat the point. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  z-index: 101; /* above the grain */
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  /* Yellow on wine ink, not the wine-on-cream a button uses: this link lands on top of the wine
     header band, where a wine background would have made it invisible. Yellow reads against both
     surfaces, and carrying wine text keeps it inside 3.2 rule 3. */
  background: var(--clubi-highlight);
  color: var(--clubi-highlight-ink);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  left: var(--space-4);
}

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

/* --------------------------------------------------------------------------- brand mark */

/* Hand-drawn lettering, never type (DESIGN.md 4.6 and 5.4), painted as a mask so the SVG takes
   currentColor — which an external <img> cannot inherit. Same technique as .auth-brand.
   The band is 8.7's: clamp(104px, 26vw, 132px), above the 96px floor of 5.3. */
.brand {
  display: block;
  width: clamp(104px, 26vw, 132px);
  aspect-ratio: 553 / 259; /* the logo's own ratio (DESIGN.md 5.1) — never distort */
  background-color: var(--clubi-ink-brand);
  -webkit-mask: var(--logo-src) center / contain no-repeat;
  mask: var(--logo-src) center / contain no-repeat;
}

/* Used by both the header band and the footer — the two wine surfaces the logotype sits on. */
.brand--on-invert {
  background-color: var(--clubi-ink-on-invert);
}

/* --------------------------------------------------------------------------- buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* the touch target of DESIGN.md 10.4 */
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--clubi-action);
  color: var(--clubi-action-ink);
  font-family: var(--clubi-font-text);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: var(--tracking-text);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-base) var(--motion-ease);
}

.button:hover {
  background: var(--clubi-action-hover);
}

.button:active {
  background: var(--clubi-action-active);
}

/* The secondary of the pair. Outlined rather than a second fill: two solid wine buttons side by
   side would give "Entrar" and "Criar conta" the same weight, and the page is publicised to
   people who do not have an account yet. */
.button--quiet {
  background: transparent;
  border-color: var(--clubi-action);
  color: var(--clubi-ink-brand);
}

.button--quiet:hover,
.button--quiet:active {
  background: var(--clubi-tint-wine);
}

.button--lg {
  font-size: var(--text-md);
  padding: var(--space-3) var(--space-6);
}

/* --------------------------------------------------------------------------- top bar */

.landing-top {
  padding-block: var(--space-4);
}

/* A wine band rather than a logotype floating on the cream. It does two jobs: the header now
   visibly ends instead of dissolving into the hero, and the first screen carries more of the
   palette than wine-on-cream. The two CTAs that used to sit here were removed separately — the
   hero right below carries the same pair. */
.landing-top {
  background: var(--clubi-bg-invert);
  color: var(--clubi-ink-on-invert);
}

.landing-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* The brandbook's eight-pointed star, which DESIGN.md 6.3 assigns to "destaque, novidade".
   Painted as a mask for the same reason the logotype is: the SVG fills with currentColor, which
   an external <img> cannot inherit, so one file serves every colour the brand has.

   Yellow is only legal because this band is wine. DESIGN.md 3.2 rule 3 measures yellow on cream
   at 1.38 and forbids it; on wine it is 6.84. Move this star into the hero and it breaks the
   rule — that is why the hero's yellow is a marca-texto instead.

   4rem is far below the ~240px ceiling of 6.2, where the textured stroke frays, and it is
   decoration in the margin rather than content (6.2 again: at most two per screen, this is one). */
.landing-top__mark {
  width: 4rem;
  aspect-ratio: 199.55 / 220.02; /* the drawing's own viewBox — never distort */
  background-color: var(--clubi-highlight);
  transform: rotate(var(--tilt)); /* E-09 caps decorative rotation at 1.5deg */
  -webkit-mask: var(--element-src) center / contain no-repeat;
  mask: var(--element-src) center / contain no-repeat;
}

/* The brandbook's highlighter. This is the second of the two forms DESIGN.md 3.2 rule 3 allows
   yellow to take: "preenchimento de área grande com texto vinho por cima" — 6.84, AA. Square
   corners are not an oversight: 8.2 gives marca-texto --radius-none explicitly.
   box-decoration-break keeps the fill whole when the phrase wraps across lines. */
.mark {
  padding: 0 0.12em;
  border-radius: var(--radius-none);
  background: var(--clubi-highlight);
  color: var(--clubi-highlight-ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --------------------------------------------------------------------------- hero */

/* Collage lives in the frame, not the machinery (DESIGN.md 7): the hero is one of the four places
   allowed to carry texture and tilt. */
.hero {
  padding-block: var(--space-8) var(--space-9);
}

/* The measure caps the *text*, not the block. Putting it on .hero__inner — which also carries
   .container, and therefore margin-inline: auto — centred a 68ch box inside 1120px, so the hero
   started ~170px to the right of the logotype, the eyebrow and every section title below it. The
   page has one left edge; only the line length is limited. */
.hero__inner {
  display: grid;
  gap: var(--space-5);
}

.hero__title {
  /* Composed from existing steps rather than a new size: --text-2xl at phone width, --text-4xl
     at the top, 8vw between them. */
  max-width: var(--measure);
  font-size: clamp(var(--text-2xl), 8vw, var(--text-4xl));
  color: var(--clubi-ink-brand);
}

.hero__lead {
  max-width: var(--measure);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}

/* Mobile-first, as 8.5 asks. Stacked below --bp-sm, where two content-width buttons of unequal
   length ("Criar conta" / "Já sou do clubi") read as ragged rather than as a pair — and where
   auth.css already gives .button the full width on the rendered forms. Side by side above it. */
.hero__actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

@media (min-width: 480px) {
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------------------- book of the month */

.pick__eyebrow {
  margin-bottom: var(--space-6);
  color: var(--clubi-highlight); /* yellow on wine: 6.84 — the one background it is allowed (3.2) */
  font-family: var(--clubi-font-display);
  font-size: var(--text-md);
}

.pick__inner {
  display: grid;
  gap: var(--space-6);
}

/* 8.5 is mobile-first and says the member arrives by phone: one column, cover first, until the
   cover can sit beside the text without squeezing it. */
@media (min-width: 768px) {
  .pick__inner {
    grid-template-columns: 17rem 1fr; /* 8.7: the hero's cover column */
    gap: var(--space-7);
    /* Centred, not start-aligned: the cover is ~25rem tall and the text beside it is four short
       lines, so aligning both to the top left a third of the wine band empty under the words. */
    align-items: center;
  }
}

.pick__cover {
  width: min(15rem, 62vw); /* 8.7: the phone-width cover */
}

@media (min-width: 768px) {
  .pick__cover {
    width: 100%;
  }
}

/* The "recorte com borda branca" of DESIGN.md 7, with 8.7's proportions. The tilt is E-09's
   1.5deg and is allowed here because the cover is decoration on this page — it is not a control
   and nothing is read off its alignment. */
.book-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--clubi-cream);
  box-shadow: var(--shadow-paper);
  transform: rotate(calc(var(--tilt) * -1));
  overflow: hidden;
}

.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* Typographic, like the SPA's BookCover: a graphic element here would spend one of the two the
   screen is allowed (DESIGN.md 6.2). */
.book-cover--blank {
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--clubi-ink-brand);
  text-align: center;
}

.book-cover__title {
  font-family: var(--clubi-font-display);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
}

.book-cover__author {
  font-size: var(--text-sm);
  color: var(--clubi-ink-muted);
}

.pick__body {
  display: grid;
  gap: var(--space-3);
  max-width: var(--measure);
}

.pick__title {
  /* The same clamp the SPA's .pick__title uses — this is the same object on two surfaces. */
  font-size: clamp(var(--text-xl), 9vw, var(--text-3xl));
}

.pick__author {
  font-size: var(--text-md);
  color: var(--clubi-ink-muted-on-invert);
}

.pick__period {
  color: var(--clubi-ink-muted-on-invert);
}

/* Full-strength cream, not the muted tone the period uses. When there is no pick this sentence is
   the only thing in the wine band, and muting the one line in a section makes the band read as
   broken rather than as quiet. Muted is for metadata sitting beside something louder. */
.pick__blank {
  max-width: var(--measure);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}

.pick__blurb {
  max-width: var(--measure);
  /* The SPA separates the blurb from the metadata above it instead of spacing all four lines
     evenly, which read as four unrelated lines. The gap is what groups title+author+period. */
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------- how it works */

.how__grid {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

/* Three blocks, so three fixed columns — not an auto-fitting grid. Same reasoning the shelf uses
   for its four slots (8.7): a grid that fits itself says more of these could arrive. */
@media (min-width: 768px) {
  .how__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-7);
  }
}

.how__item {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  counter-increment: step;
}

/* The step number is the list's own counter rather than a drawn badge: the brand is verbal
   (DESIGN.md 6.3), and a numeral is type. */
.how__item::before {
  content: counter(step);
  font-family: var(--clubi-font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-display);
  color: var(--clubi-accent); /* orange: large type only, never body (DESIGN.md 3.2) */
}

.how__title {
  font-size: var(--text-md);
  color: var(--clubi-ink-brand);
}

/* --------------------------------------------------------------------------- footer */

.landing-foot {
  background: var(--clubi-bg-invert);
  color: var(--clubi-ink-on-invert);
  padding-block: var(--space-7);
}

.landing-foot__inner {
  display: grid;
  gap: var(--space-3);
}

.landing-foot__note {
  max-width: var(--measure);
  font-family: var(--clubi-font-display);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.landing-foot .muted {
  color: var(--clubi-ink-muted-on-invert);
}

/* 8.6: respect the member's setting. */
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }

  .book-cover {
    transform: none;
  }
}

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

/* The page used to end on the third step, with the footer next and no way to act on what had just
   been read. The top bar's buttons were removed because they repeated the hero inside one screen;
   this pair is three screens further down, at the moment the reader has the answer. */
.how__cta {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--clubi-line);
}

@media (min-width: 480px) {
  .how__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }
}

.how__cta p {
  flex: 1 1 16rem;
  font-family: var(--clubi-font-display);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--clubi-ink-brand);
}

/* =========================================================================== showreel layer
   DESIGN.md E-31: the SPA's showreel vocabulary (E-22 … E-28) on the landing, with the same tokens
   and the same curves. This page does not load the SPA's base.css, so the keyframes are restated
   here. Every animation ends on the element's resting style, and the reduced-motion block at the
   end removes them all — nothing on this page depends on one to become visible. */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(var(--space-5));
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0) rotate(-30deg);
  }
}

@keyframes reveal-x {
  from {
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes mark-sweep {
  from {
    background-size: 0% 100%;
  }
}

/* ---------------------------------------------------------------- checker (E-27)
   The top band and the footer. The book band stays flat: the carousel's edge fades are gradients
   of the flat wine (landing-carousel.css) and would paint two plain strips over the pattern. */
.landing-top,
.landing-foot {
  background-color: var(--clubi-bg-invert);
  background-image: conic-gradient(
    var(--clubi-wine-checker) 25%,
    transparent 0 50%,
    var(--clubi-wine-checker) 0 75%,
    transparent 0
  );
  background-size: var(--checker-size) var(--checker-size);
}

.landing-top__mark {
  animation: pop 500ms var(--motion-ease-pop) 400ms both;
}

/* ---------------------------------------------------------------- numbered eyebrow (E-22) */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--clubi-ink-brand);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  animation: rise var(--motion-enter) var(--motion-ease-out) both;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: var(--space-6);
  height: 3px; /* the "fio de aviso" of 8.7 */
  background: var(--clubi-accent);
  animation: reveal-x var(--motion-enter) var(--motion-ease-out) both;
}

.section--invert .eyebrow {
  color: var(--clubi-ink-on-invert);
}

.section--invert .eyebrow::before {
  background: var(--clubi-highlight);
}

/* The hero's grid gap would otherwise sit between the eyebrow and the h1 it labels. */
.hero__inner .eyebrow {
  margin-bottom: calc(var(--space-4) - var(--space-5));
}

/* ---------------------------------------------------------------- hero (E-31)
   The showreel's opening line: each word rises on its beat, then the marca-texto sweeps in under
   "uma nova leitura." from the left. The marker is a background-size so it stays whole when the
   phrase wraps (box-decoration-break, above). */
.hero__title .word {
  display: inline-block;
  animation: rise var(--motion-enter) var(--motion-ease-out) both;
  animation-delay: calc(var(--beat) * var(--motion-stagger) + 100ms);
}

.mark {
  background: linear-gradient(var(--clubi-highlight), var(--clubi-highlight)) no-repeat 0 0 / 100% 100%;
  animation: mark-sweep 450ms var(--motion-ease-out) 700ms both;
}

.hero__lead {
  animation: rise var(--motion-enter) var(--motion-ease-out) 600ms both;
}

.hero__actions {
  animation: rise var(--motion-enter) var(--motion-ease-out) 700ms both;
}

/* ---------------------------------------------------------------- book of the month
   The SPA hero's hard shadow (E-24) under the cover, on wine. */
.book-cover {
  box-shadow: var(--shadow-hard-invert);
}

/* ---------------------------------------------------------------- how it works (E-31)
   The showreel's "Como funciona" scene: a giant orange numeral per step, the brand element that
   step already had in the reel beside it, the title with the hand-drawn underline. */
.scribble {
  position: relative;
  display: inline-block;
}

.scribble::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.1em;
  bottom: -0.32em;
  height: 0.32em;
  background: var(--clubi-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 60' preserveAspectRatio='none'%3E%3Cpath d='M 12 36 C 140 18, 300 14, 548 30' fill='none' stroke='%23000' stroke-width='12' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 60' preserveAspectRatio='none'%3E%3Cpath d='M 12 36 C 140 18, 300 14, 548 30' fill='none' stroke='%23000' stroke-width='12' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: reveal-x 450ms var(--motion-ease-out) 300ms both;
}

.how__item {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
  animation: rise var(--motion-enter) var(--motion-ease-out) both;
}

.how__item:nth-child(2) {
  animation-delay: calc(var(--motion-stagger) * 2);
}

.how__item:nth-child(3) {
  animation-delay: calc(var(--motion-stagger) * 4);
}

.how__item > :not(.how__mark) {
  grid-column: 1 / -1;
}

.how__item::before {
  grid-column: 1;
  font-size: clamp(var(--text-4xl), 18vw, var(--text-6xl));
  font-weight: 600;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}

.how__mark {
  grid-column: 2;
  align-self: center;
  justify-self: start;
  width: 5rem; /* 8.7: the empty-state element size */
  aspect-ratio: var(--ratio);
  background-color: var(--clubi-ink-brand);
  -webkit-mask: var(--element-src) center / contain no-repeat;
  mask: var(--element-src) center / contain no-repeat;
  transform: rotate(-6deg);
  animation: pop 500ms var(--motion-ease-pop) 250ms both;
}

.how__item:nth-child(2) .how__mark {
  transform: rotate(6deg);
}

.how__title {
  font-size: var(--text-lg);
}

/* The closing invitation's marca-texto, on cream: the tint (E-23), never full yellow (3.2). */
.hl {
  position: relative;
  z-index: 0;
  padding-inline: 0.08em;
}

.hl::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12% -0.1em -4% -0.08em;
  background: var(--clubi-tint-yellow);
  transform: skewX(-6deg);
  transform-origin: 0 50%;
}

/* ---------------------------------------------------------------- footer (E-28)
   Two die-cut stickers on the wine, at the edge, out of the flow and out of the a11y tree. */
.landing-foot {
  position: relative;
  overflow: hidden;
}

.landing-foot > .container {
  position: relative;
  z-index: 1;
}

.landing-foot::before,
.landing-foot::after {
  content: "";
  position: absolute;
  z-index: 0;
  background: center / contain no-repeat;
  pointer-events: none;
  animation: pop 500ms var(--motion-ease-pop) both;
}

.landing-foot::before {
  right: max(var(--space-6), 10vw);
  bottom: calc(var(--space-4) * -1);
  width: 6.5rem;
  aspect-ratio: 435 / 379;
  background-image: url("../brand/stickers/livro.0531b6f7b1b9.png");
  transform: rotate(-6deg);
}

.landing-foot::after {
  top: var(--space-5);
  right: max(var(--space-4), 3vw);
  width: 5rem;
  aspect-ratio: 417 / 336;
  background-image: url("../brand/stickers/balao.00fbb924085f.png");
  transform: rotate(-8deg);
  animation-delay: 120ms;
}

.landing-foot__note .mark {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .landing-foot::before {
    width: 4.5rem;
    right: var(--space-4);
  }

  .landing-foot::after {
    width: 3.5rem;
    top: auto;
    bottom: var(--space-8);
    right: var(--space-6);
  }

  .landing-foot__note {
    padding-right: var(--space-8);
  }
}

/* The footer's stickers and marker arrive when the footer scrolls in — where scroll-driven
   animation exists; elsewhere they play once on load and land on the same resting picture. Only
   the footer: a view-timed animation is tied to scroll *position*, so it rewinds when the page
   scrolls back up, and anything mid-page driven by one sits at its first frame for whoever has
   not scrolled there — a print, a find-in-page jump, a full-page capture. The footer is the end
   of the page, where that is harmless; the steps and their elements play on load instead. */
@supports (animation-timeline: view()) {
  .landing-foot::before,
  .landing-foot::after,
  .landing-foot .mark {
    animation-timeline: view();
    animation-range: entry 10% entry 70%;
    animation-delay: 0s;
  }
}

/* ---------------------------------------------------------------- reduced motion
   No animation at all, and 10.7 also takes the decorative rotation. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }

  .how__mark,
  .how__item:nth-child(2) .how__mark,
  .landing-foot::before,
  .landing-foot::after,
  .hl::before {
    transform: none;
  }
}

/* =========================================================================== keys (E-32)
   The button as a pressable stamp: Clash on the label, the hard shadow of the "Leitura terminada."
   stamp under it (E-24/E-25), rising on hover where there is a mouse and landing on its own shadow
   when pressed. --key-color is the one thing a variant changes — orange under wine, the strong
   line under an outlined button, the deep wine under yellow on a wine ground (each a pair 3.2
   already measures). Only transform and box-shadow move. */

.button {
  --key-color: var(--clubi-accent);
  font-family: var(--clubi-font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  box-shadow: var(--key-offset) 0 0 var(--key-color);
  transition:
    background var(--motion-base) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

@media (hover: hover) {
  .button:not([disabled]):hover {
    transform: translate(var(--key-lift));
    box-shadow: var(--key-offset-lift) 0 0 var(--key-color);
  }
}

.button:not([disabled]):active {
  transform: translate(var(--key-press));
  box-shadow: 0 0 0 0 var(--key-color);
}

.button[disabled] {
  box-shadow: none;
}

/* The outlined secondary keeps its role and gains weight: a 2px edge, and the key's shadow in the
   strong line rather than orange, so "Criar conta" stays the louder of the pair. */
.button--quiet {
  --key-color: var(--clubi-line-strong);
  border-width: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .button:not([disabled]):hover,
  .button:not([disabled]):active {
    transform: none;
  }
}