/* Self-hosted, inlined rather than @import-ed. An @import serialises a second
   stylesheet fetch before the page can paint, and URLs inside a separate
   fonts.css resolve against THAT file rather than against this one, which
   silently 404s every face. Paths below are relative to styles.css at the
   site root. */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/bodoni-latin-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/bodoni-latin-italic.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: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/bodoni-latin-ext-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/bodoni-latin-normal.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: 'Jost';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jost-latin-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jost-latin-italic.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: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/jost-latin-ext-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/jost-latin-normal.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;
}

/* ═══════════════════════════════════════════════════════════════════════
   Prego Italian Cuisine & Bar
   Every colour here was sampled from the client's own posters, not chosen.
   See assets/BRIEF.md for the source of each one.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* sampled */
  --blue:      #014BA2;   /* wordmark tiles, 69-76% of every one */
  --cream:     #F6F4DB;   /* events poster ground */
  --gold:      #CFA14C;   /* hue-selected across six posters */

  /* derived from the blue's own hue (212deg) so the page can hold large areas
     of it without the saturated brand blue becoming unreadable at full bleed */
  --night:     #01152F;
  --night-2:   #011E42;
  --line:      rgb(246 244 219 / .16);
  --ink-dim:   rgb(246 244 219 / .72);

  --measure: 62ch;
  --wrap: 1180px;
  --pad: 28px;
  --nav-h: 68px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  scroll-behavior: smooth;
  /* NEVER overflow-x: hidden on html/body: it makes them scroll containers and
     every animation-timeline: view() silently snaps to its end state. */
}

body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 0.6vw + 14px, 18px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 400; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--gold); color: var(--night);
  padding: 10px 16px; border-radius: 2px; font-size: 15px;
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

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

/* ── shared type ──────────────────────────────────────────────────────── */
.h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.005em;
}

.lead {
  font-size: clamp(17px, 1.1vw + 14px, 21px);
  line-height: 1.55;
  max-width: var(--measure);
  color: var(--cream);
}

.slash {
  color: var(--gold);
  font-style: italic;
  padding-right: .15em;
}

.note {
  font-size: 15.5px;
  color: var(--ink-dim);
  max-width: 46ch;
  margin: 0;
}

.lnk {
  text-decoration-color: rgb(207 161 76 / .55);
  text-underline-offset: 4px;
  transition: text-decoration-color .2s var(--ease);
}
.lnk:hover { text-decoration-color: var(--gold); }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* The tapered gold rule. It sits under a heading on every piece the client
   sets, so it is the page's connective tissue too. Drawn as a real taper,
   never a border-bottom. */
.rule {
  display: block;
  width: 168px;
  height: auto;
  margin: 18px 0 26px;
  fill: var(--gold);
  transform-origin: left center;
}

/* ── wordmark ─────────────────────────────────────────────────────────── */
/* One alpha mask painted by background, so the same file works in gold on the
   hero, cream in the footer, and gold again in the nav. */
.wordmark {
  display: block;
  aspect-ratio: 780 / 378;
  background-color: var(--gold);
  background-image: linear-gradient(102deg,
      var(--gold) 0%, var(--gold) 38%,
      #F2DCA8 48%, #F7E9C4 50%, #F2DCA8 52%,
      var(--gold) 62%, var(--gold) 100%);
  background-size: 320% 100%;
  background-position: 100% 0;
  -webkit-mask-image: url("img/wordmark.png");
          mask-image: url("img/wordmark.png");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

.wordmark--hero { width: min(348px, 66vw); }
.wordmark--sm   { width: 104px; }
.wordmark--foot { width: 168px; background-color: var(--cream); background-image: none; }

/* A slow sheen crossing the mark, like light moving over the neon out front.
   Costs no JavaScript, and if the gradient fails to resolve the mark is simply
   solid gold and correct. */
@media (prefers-reduced-motion: no-preference) {
  .wordmark--hero { animation: sheen 11s linear 1.2s infinite; }
}
@keyframes sheen {
  0%, 62%  { background-position: 100% 0; }
  92%, 100% { background-position: 0 0; }
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 26px;
  border-radius: 2px;              /* one radius scale on the whole page */
  border: 1px solid transparent;
  font-family: "Jost", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;             /* a wrapped CTA is a broken CTA */
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), translate .22s var(--ease);
}
.btn:active { translate: 0 1px; }

/* gold on night = 6.9:1, gold on brand blue = 3.4:1 (large text only, and the
   button label is 15px uppercase on a solid gold fill, so it is night-on-gold) */
.btn--gold { background: var(--gold); color: #14100A; }
.btn--gold:hover { background: #E0B463; }

.btn--ghost { border-color: rgb(246 244 219 / .38); color: var(--cream); }
.btn--ghost:hover { border-color: var(--cream); background: rgb(246 244 219 / .07); }

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(1 21 47 / .92);   /* solid-ish, not backdrop-filter: a sticky
                                       blur re-blurs the full width every frame */
  border-bottom: 1px solid var(--line);
}
.nav__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--pad);
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav__mark { flex: none; display: block; padding: 6px 0; }
.nav__links {
  display: none;
  margin-left: auto;
  gap: clamp(16px, 2vw, 30px);
  font-size: 14.5px;
  letter-spacing: .04em;
}
.nav__links a {
  text-decoration: none;
  color: var(--ink-dim);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav__links a:hover { color: var(--cream); border-color: var(--gold); }

/* Hidden until the header has something to sit against, so the hero never
   shows two identical Reservar buttons in one viewport. */
.nav__cta {
  margin-left: auto;
  min-height: 38px;
  padding: 7px 18px;
  font-size: 13px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}

@media (min-width: 860px) {
  .nav__links { display: flex; }
  .nav__cta { margin-left: 0; }
}

/* ── hero ─────────────────────────────────────────────────────────────── */
/* Split hero. The logotype is a fine monoline script: over a photograph it
   simply disappears, so it gets its own ground, the way their posters set it.
   Capping the photo column also keeps a 1440px master above 2x everywhere. */
.hero {
  display: grid;
  background: var(--night);
}
.hero__in {
  padding: clamp(40px, 6vw, 76px) var(--pad) clamp(44px, 6vw, 72px);
  align-self: center;
  max-width: 640px;
  margin-left: auto;
  width: 100%;
}
.hero__fig {
  margin: 0;
  position: relative;
  min-height: 260px;
}
.hero__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the sign spans 0.32-0.85 of the frame width and sits above centre, so the
     crop is anchored on the sign, not on the frame */
  object-position: 50% 50%;
  aspect-ratio: 16 / 11;
}
.hero__strip {
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}
.hero__mark { margin: 0 0 22px; }
.hero__line {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(19px, 1.5vw + 11px, 27px);
  line-height: 1.3;
  max-width: 26ch;
  margin: 0 0 26px;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) clamp(420px, 42vw, 620px);
  }
  /* The figure carries the master's own 3:4 aspect and sets the row height, so
     object-fit: cover has nothing to crop and the neon cannot be cut mid-word
     at any window size. A min-height on .hero would override this and bring the
     crop straight back, so there deliberately is not one. */
  .hero__fig { aspect-ratio: 3 / 4; }
  .hero__in {
    /* left edge lines up with the wrap container the rest of the page uses */
    padding-left: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
    padding-right: clamp(32px, 4vw, 68px);
    padding-block: 40px;
    max-width: none;
  }
  .hero__fig img { height: 100%; aspect-ratio: auto; }
}

/* Stacked buttons at two different widths read as a mistake. This range does
   not overlap the block above, so source order between them does not matter. */
@media (max-width: 559px) {
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
}

/* ── a casa ───────────────────────────────────────────────────────────── */
.casa { padding: clamp(64px, 9vw, 120px) 0; }
.casa__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}
.casa__fig { margin: 0; }
.casa__fig img { border-radius: 2px; }
.casa__txt { align-self: center; }

.pull {
  margin: 30px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--gold);
  font-family: "Bodoni Moda", Georgia, serif;
  font-style: italic;
  font-size: clamp(18px, 1.2vw + 14px, 23px);
  line-height: 1.4;
  max-width: 34ch;
  color: var(--cream);
}

@media (min-width: 900px) {
  .casa__in { grid-template-columns: 520px minmax(0, 1fr); align-items: center; }
}

/* ── cucina ───────────────────────────────────────────────────────────── */
.cucina {
  padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 120px);
  background: var(--night-2);
}
.sechead { margin-bottom: clamp(32px, 4vw, 52px); }
.sechead__sub {
  max-width: 52ch;
  color: var(--ink-dim);
  font-size: 17px;
  margin: 0;
}

/* Column masonry: every frame keeps the aspect it was shot at, nothing gets
   letterboxed into a fixed grid cell, and no cell is left empty. */
.masonry {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
  column-gap: 22px;
}
.dish {
  break-inside: avoid;
  margin: 0 0 22px;
}
.dish img {
  width: 100%;
  border-radius: 2px;
}
.dish__cap { padding: 14px 2px 0; }
.dish__cap h3 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 6px;
}
.dish__cap p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-dim);
}

.cucina__foot {
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  justify-content: space-between;
}

@media (min-width: 680px) { .masonry { columns: 2; } }
@media (min-width: 1000px) { .masonry { columns: 3; } }

/* ── aperitivo ────────────────────────────────────────────────────────── */
/* The brand blue at full bleed, once, where it carries their own lockup. */
.aperitivo {
  background: var(--blue);
  color: var(--cream);
  padding: clamp(60px, 8vw, 108px) 0;
}
.aperitivo__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  gap: clamp(28px, 3.6vw, 48px);
}
.lockup { text-align: left; }
.lockup__word {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(42px, 8.5vw, 96px);
  line-height: .96;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.lockup__sub {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: clamp(15px, 1vw + 12px, 19px);
  letter-spacing: .1em;
  margin: 0;
}
.lockup__sub em {
  font-family: "Bodoni Moda", Georgia, serif;
  font-style: italic;
  letter-spacing: .02em;
}
.lockup__rule {
  flex: 1 1 40px;
  max-width: 190px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.aperitivo__body .lead { color: var(--cream); }
.aperitivo__fig { margin: 0; }
.aperitivo__fig img { border-radius: 2px; }

@media (min-width: 900px) {
  .aperitivo__in {
    grid-template-columns: minmax(0, 1fr) 560px;
    grid-template-areas:
      "lock  figa"
      "body  figa"
      "figb  figa";
    align-items: start;
    column-gap: clamp(32px, 4vw, 60px);
  }
  .lockup            { grid-area: lock; }
  .aperitivo__body   { grid-area: body; }
  .aperitivo__fig--a { grid-area: figa; }
  .aperitivo__fig--b { grid-area: figb; max-width: 340px; }
}

/* ── vinho ────────────────────────────────────────────────────────────── */
.vinho { padding: clamp(64px, 9vw, 120px) 0; }
.vinho__card { position: relative; }
.vinho__fig { margin: 0; }
.vinho__fig img {
  width: 100%;
  border-radius: 2px;
  aspect-ratio: 16 / 12;
  object-fit: cover;
  object-position: 50% 46%;
}
.vinho__txt { padding-top: 30px; }

@media (min-width: 900px) {
  .vinho__fig img { aspect-ratio: 21 / 9; }
  .vinho__txt {
    position: absolute;
    inset: auto auto 44px 44px;
    width: min(50%, 520px);
    padding: 34px 34px 32px;
    background: rgb(1 21 47 / .86);
    border-radius: 2px;
  }
  .vinho__txt .lead { font-size: 18px; }
}

/* ── eventos ──────────────────────────────────────────────────────────── */
.eventos {
  padding: clamp(56px, 8vw, 104px) 0;
  background: var(--night-2);
}
.eventos__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}
.eventos__fig { margin: 0; }
.eventos__fig img { border-radius: 2px; }

@media (min-width: 900px) {
  .eventos__in { grid-template-columns: minmax(0, 1fr) 520px; align-items: center; }
  .eventos__txt { order: 1; }
  .eventos__fig { order: 2; }
}

/* ── dúvidas + prático ────────────────────────────────────────────────── */
.duvidas { padding: clamp(64px, 9vw, 120px) 0; }
.duvidas__in {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
}

.qa {
  border-top: 1px solid var(--line);
  padding: 4px 0;
}
.qa:last-of-type { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 34px 16px 0;
  position: relative;
  font-size: 17px;
  color: var(--cream);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  translate: 0 -60%;
  rotate: 45deg;
  transition: rotate .25s var(--ease);
}
.qa[open] summary::after { rotate: -135deg; }
.qa > p {
  margin: 0 0 18px;
  padding-right: 20px;
  color: var(--ink-dim);
  font-size: 16px;
  max-width: 58ch;
}

.pratico__block { margin-bottom: 30px; }
.pratico__block:last-child { margin-bottom: 0; }
.pratico h3 {
  font-size: 12.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}
.pratico p { margin: 0 0 .6em; }

.hours { margin: 0; display: grid; gap: 2px 18px; }
.hours dt { color: var(--ink-dim); font-size: 15px; }
.hours dd { margin: 0 0 10px; }

@media (min-width: 900px) {
  .duvidas__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); }
  .hours { grid-template-columns: auto 1fr; align-items: baseline; }
  .hours dd { margin-bottom: 4px; }
}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot {
  background: var(--blue);
  padding: clamp(48px, 6vw, 76px) 0;
}
.foot__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  gap: 34px;
  align-items: center;
}
.foot__fig { margin: 0; }
.foot__fig img { border-radius: 2px; }
.foot__addr { margin: 18px 0 20px; color: rgb(246 244 219 / .82); font-size: 15.5px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; font-size: 15px; }
.foot__links a {
  text-decoration-color: rgb(246 244 219 / .45);
  text-underline-offset: 4px;
}
.foot__links a:hover { text-decoration-color: var(--cream); }

@media (min-width: 900px) {
  .foot__in { grid-template-columns: 360px minmax(0, 1fr); gap: 56px; }
}

/* ── anchors clear the sticky header ──────────────────────────────────── */
#casa, #cucina, #aperitivo, #vinho, #eventos, #duvidas, #topo, #conteudo {
  scroll-margin-top: calc(var(--nav-h) + 12px);
}

/* ═══════════════════════════════════════════════════════════════════════
   Motion. Every start-state below is scoped to .js, set by an inline script
   in <head>, so a visitor whose JavaScript never runs sees everything.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  .js .reveal { opacity: 0; translate: 0 18px; }
  /* .rule is never also .reveal: two animations on one element means the later
     rule wins outright, and the loser's start-state strands it invisible. */
  .js .rule   { opacity: 0; transform: scaleX(0); }

  /* Scroll-driven: scrubbed by scroll position, off the main thread. */
  @supports (animation-timeline: view()) {
    /* Ranges stay inside the `entry` phase so an element is fully revealed by
       the time it is ~70% into the viewport. Running to `cover` instead leaves
       headings sitting at opacity 0 while they are well in view, which reads as
       a blank section rather than as a reveal. */
    .js .reveal {
      animation: rise both;
      animation-timeline: view();
      animation-range: entry 5% entry 70%;
    }
    /* The gold rule draws itself left to right, the way it was drawn. */
    .js .rule {
      animation: draw both;
      animation-timeline: view();
      animation-range: entry 15% entry 85%;
    }
  }

  /* Fallback for engines without scroll-driven animation: same choreography,
     one-shot, via IntersectionObserver adding .in. */
  .js.no-sdt .reveal {
    transition: opacity .7s var(--ease), translate .7s var(--ease);
  }
  .js.no-sdt .reveal.in { opacity: 1; translate: 0 0; }
  .js.no-sdt .rule {
    transition: opacity .6s var(--ease), transform .8s var(--ease);
  }
  .js.no-sdt .rule.in { opacity: 1; transform: scaleX(1); }
}

@keyframes rise {
  from { opacity: 0; translate: 0 18px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes draw {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* Header CTA appears only once the hero is behind us. */
.nav--solid .nav__cta { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* The header CTA is deliberately NOT forced visible here. It is gated on the
     hero leaving the viewport, which is a position question and not a motion
     one, and revealing it unconditionally puts two identical Reservar buttons
     on screen at once for exactly the users least able to ignore them. */
}