/* Aamore — one-page site
   Layout: the wordmark opens the page and, as you scroll, flies into the header to become the navigation.
   Hero toast (engraved hand rising from the lower-left edge); "Coffee. Drinks. Vibes." set as a weight crescendo
   from morning to night beside the olive hand; the brochure's red field for the 2027 event question, lit by the
   disco ball's reflections; a visit footer with the café regulars. 12-column grid, text flush left, engravings
   bleed off the page edges, hand-drawn red rings mark the essentials. */

:root {
  --paper: #dbd4c2;      /* brochure background (CMYK 13/13/20/0 as printed) */
  --ink: #181513;        /* wordmark ink */
  --ink-2: #4f4842;      /* secondary text, 6.8:1 on paper */
  --red: #cb151a;        /* wordmark script, rings */
  --red-block: #c2141a;  /* brochure red as a field; paper text on it reaches 4.7:1 */
  --line: rgb(24 21 19 / 0.16);

  --font: "Manrope", "Manrope Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
  --step-1: clamp(1.1875rem, 1.08rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.625rem, 1.2rem + 1.9vw, 2.75rem);
  --step-3: clamp(2.125rem, 1.2rem + 4.1vw, 5rem);
  --step-4: clamp(3.5rem, 1.4rem + 10vw, 11rem);
  --step-5: clamp(5rem, 1.6rem + 15vw, 15rem);

  --gutter: clamp(16px, 3.6vw, 56px);
  --col-gap: clamp(12px, 1.7vw, 28px);
  --space-s: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);
  --space-m: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --space-l: clamp(2.75rem, 1.6rem + 5vw, 6.5rem);
  --space-xl: clamp(4.5rem, 2.4rem + 9vw, 11rem);
  --topbar-h: 3.75rem;
  --dock-w: clamp(96px, 7.6vw, 124px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* damped springs (zeta 0.55 and 0.72), sampled for linear() */
  --spring: linear(0, 0.0252, 0.0919, 0.1873, 0.3003, 0.4214, 0.543, 0.659, 0.7651, 0.8584, 0.9373, 1.0013, 1.0506, 1.0863, 1.1097, 1.1224, 1.1263, 1.1232, 1.1149, 1.1029, 1.0886, 1.0734, 1.058, 1.0433, 1.0299, 1.0181, 1.0081, 1, 0.9937, 0.9892, 0.9862, 0.9846, 0.984, 0.9844, 0.9855, 0.987, 0.9888, 0.9907, 0.9926, 0.9945, 0.9962, 0.9977, 0.999, 1, 1.0008, 1.0014, 1.0017, 1.0019, 1);
  --spring-soft: linear(0, 0.0148, 0.054, 0.1111, 0.1803, 0.257, 0.3372, 0.4179, 0.4967, 0.5718, 0.6419, 0.7062, 0.7642, 0.8156, 0.8605, 0.8992, 0.9319, 0.9591, 0.9812, 0.9989, 1.0125, 1.0227, 1.03, 1.0347, 1.0374, 1.0384, 1.0381, 1.0368, 1.0347, 1.0321, 1.0292, 1.0262, 1.0231, 1.02, 1.0171, 1.0144, 1.0118, 1.0096, 1.0075, 1.0057, 1.0042, 1.0029, 1.0018, 1.0009, 1.0002, 0.9996, 0.9992, 0.9989, 1);

  color-scheme: light;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched local fallback so the swap to Manrope doesn't reflow the big type */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 95.87%;
  ascent-override: 111.19%;
  descent-override: 31.29%;
  line-gap-override: 0%;
}

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

html {
  background: var(--paper);
  scroll-padding-top: calc(var(--topbar-h) + 0.75rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.5;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

p,
h1,
h2,
h3,
dl,
dd,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: inherit;
  text-wrap: balance;
}

::selection {
  background: var(--red);
  color: var(--paper);
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: max(1px, 0.06em);
  text-underline-offset: 0.22em;
  text-decoration-color: rgb(24 21 19 / 0.32);
  transition: text-decoration-color 0.25s, text-underline-offset 0.25s, color 0.25s, background-color 0.25s;
}

a:hover {
  text-decoration-color: var(--red);
  text-underline-offset: 0.3em;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
  border-radius: 2px;
}

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

.skip {
  position: absolute;
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
  top: 0.6rem;
  z-index: 30;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-180%);
}

.skip:focus-visible {
  transform: none;
}

/* Every full-width band carries the side gutter, clear of a phone's side system bar */
.band {
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------- Header: the address gives way to the docked wordmark ---------- */

.topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  min-height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.js .topbar {
  position: fixed;
}

.topbar.is-solid {
  background-color: rgb(219 212 194 / 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  backdrop-filter: blur(14px) saturate(1.12);
  box-shadow: 0 1px 0 var(--line);
}

.topbar__brand {
  display: grid;
  align-items: center;
  justify-items: start;
}

.topbar__brand > * {
  grid-area: 1 / 1;
}

.topbar__address {
  opacity: calc(1 - min(1, var(--dock, 0) * 2.4));
}

.topbar__logo {
  display: block;
  width: var(--dock-w);
  line-height: 0;
  text-decoration: none;
  visibility: hidden;
  opacity: 0;
}

.topbar__logo img {
  width: 100%;
  height: auto;
}

.topbar.is-docked .topbar__logo {
  visibility: visible;
  opacity: 1;
}

.topbar.is-docked .topbar__address,
.topbar.is-leaving .topbar__address {
  visibility: hidden;
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 0.25rem clamp(1rem, 2.2vw, 1.75rem);
}

.topbar__ask-short {
  display: none;
}

.pdf__tag {
  display: inline-block;
  margin-left: 0.45em;
  padding: 0.14em 0.45em 0.1em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.1;
  vertical-align: 0.14em;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.pdf:hover .pdf__tag {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: clip;
  min-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  padding-top: var(--topbar-h);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(var(--space-m), 1fr) auto auto minmax(var(--space-l), 1.45fr);
  column-gap: var(--col-gap);
}

.hero__logo {
  position: relative;
  z-index: 2;
  grid-column: 7 / -1;
  grid-row: 2;
}

.logo {
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 0 0;
}

.logo.is-away {
  visibility: hidden;
}

.logo__word {
  fill: var(--ink);
}

.logo__script {
  fill: var(--red);
}

.hero__lede {
  position: relative;
  z-index: 1;
  grid-column: 7 / -1;
  grid-row: 3;
  margin-top: var(--space-m);
  font-size: var(--step-2);
  font-weight: 350;
  line-height: 1.14;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* Sized so the coupe rises toward the wordmark without touching it, and never taller than ~80% of the screen */
.hero__toast {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(44vw, 97svh, 920px);
  pointer-events: none;
}

.hero__toast-pose,
.hero__toast-enter {
  transform-origin: 6% 100%;
}

/* --lift follows the scroll (raising the glass), --px/--py follow the pointer */
.hero__toast-pose {
  transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--lift, 0) * -9% + var(--py, 0) * 6px), 0)
    rotate(calc(var(--lift, 0) * -7deg + var(--px, 0) * 1.2deg));
}

.hero__toast-enter {
  position: relative;
}

.hero__toast img {
  width: 100%;
  height: auto;
}

/* ---------- Glints: a four-point star that flares on glass and mirror facets ---------- */

.glint {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 10%);
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: 0;
  pointer-events: none;
}

.glint::before,
.glint::after {
  content: "";
  position: absolute;
}

.glint::before {
  inset: 0;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fffaf3' d='M12 0C12.4 7.6 16.4 11.6 24 12C16.4 12.4 12.4 16.4 12 24C11.6 16.4 7.6 12.4 0 12C7.6 11.6 11.6 7.6 12 0Z'/%3E%3C/svg%3E");
}

.glint::after {
  inset: 32%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 250 243 / 0.9), rgb(255 250 243 / 0));
}

/* On the pale glass of the coupe the shine is drawn in ink, like the engraving's own marks */
.glint--ink::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23181513' d='M12 0C12.3 7.8 16.2 11.7 24 12C16.2 12.3 12.3 16.2 12 24C11.7 16.2 7.8 12.3 0 12C7.8 11.7 11.7 7.8 12 0Z'/%3E%3C/svg%3E");
}

.glint--ink::after {
  display: none;
}

/* ---------- Coffee. Drinks. Vibes. ---------- */

.vibes {
  position: relative;
  overflow-x: clip; /* the tumbler slides in from beyond the right edge */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding-block: var(--space-xl);
}

/* Weight rises through the day: a light morning coffee, a bolder evening, the boldest night */
.vibes__title {
  position: relative;
  z-index: 1;
  grid-column: 1 / span 8;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--step-4);
  line-height: 0.9;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.vibes__word {
  font-weight: var(--wght, var(--w));
}

/* The hand reaches in from the top edge of the section, as in the client's brochure */
.olives {
  position: absolute;
  top: 0;
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  width: min(34vw, 520px);
  max-width: 100%;
  aspect-ratio: 901 / 1002;
  pointer-events: none;
  /* the sleeve dissolves into the paper instead of ending on a hard crop */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 9%, #000 32%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 9%, #000 32%);
}

.olives img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --dip lowers the pick into the pile; at 0 the olive sits where the engraving drew it */
.olives__hand {
  transform-origin: 29.5% 51.8%;
  transform: translate(calc(var(--dip, 0) * 0.6%), calc(var(--dip, 0) * 4.6%)) rotate(calc(var(--dip, 0) * -2deg));
}

.offer {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  margin-top: var(--space-xl);
}

.offer__title {
  margin: 0 0 var(--space-m);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.offer__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m) var(--col-gap);
}

.offer__list > div {
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}

.offer__list dt {
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.offer__list dd {
  max-width: 34ch;
  color: var(--ink-2);
}

.offer__more {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
  margin-top: var(--space-l);
}

.pdf--large {
  font-size: var(--step-1);
  font-weight: 500;
}

.offer__note {
  color: var(--ink-2);
}

/* The tumbler tips over at the bottom of the day section; its puddle runs into the red field below */
.spill {
  position: relative;
  grid-column: 6 / -1;
  margin-top: var(--space-m);
  margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px)));
  margin-bottom: calc(-1 * var(--space-xl) - 2px);
  pointer-events: none;
  transform-origin: 86% 96%;
  transform: translateX(calc(var(--tip, 0) * 12%)) rotate(calc(var(--tip, 0) * 10deg));
}

.spill img {
  width: 100%;
  height: auto;
}

/* ---------- Lipstick rings ---------- */

.mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

/* in running text the ring needs a little room so it never strikes the neighbouring words */
.hero__lede .mark,
.offer .mark {
  margin-inline: 0.14em;
}

.ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.ring path {
  fill: var(--red);
}

/* ---------- Event question: the brochure's red field, lit by the disco ball ---------- */

.ask {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  overflow: clip;
  padding-block: var(--space-xl);
  background: var(--red-block);
  color: var(--paper);
}

.ask ::selection {
  background: var(--paper);
  color: var(--red-block);
}

.ask__lights {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
}

.js .ask__lights {
  display: block;
}

.ask__copy {
  position: relative;
  z-index: 2;
  grid-column: 6 / -1;
  display: grid;
  gap: var(--space-s);
}

.ask__title {
  margin-bottom: var(--space-s);
  font-size: var(--step-2);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.ask__year {
  display: block;
  margin-top: 0.12em;
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.06em;
}

.ask__copy p {
  max-width: 36ch;
  font-size: var(--step-1);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.ask a:focus-visible {
  outline-color: var(--paper);
}

.cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  margin-top: var(--space-s);
  padding: 0.8em 1.45em;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.cta:hover {
  background: var(--ink);
  color: var(--paper);
}

.cta:active {
  transform: translateY(1px) scale(0.985);
}

.ask__copy .ask__mail {
  font-size: var(--step--1);
  letter-spacing: 0;
  opacity: 0.86;
}

/* The disco ball sits in the bottom-left corner, cropped by both edges; --rise lowers it out of frame */
.ask__disco {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: min(36vw, 560px);
  pointer-events: none;
  transform-origin: 21.4% 76.9%;
  transform: translate(calc(var(--rise, 0) * -14%), calc(var(--rise, 0) * 24%)) rotate(calc(var(--rise, 0) * -12deg));
}

.ask__disco img {
  width: 100%;
  height: auto;
}

/* ---------- Visit ---------- */

.visit {
  padding-block: var(--space-xl) var(--space-m);
}

.visit__main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: end;
}

.visit__info {
  grid-column: 1 / span 6;
  padding-bottom: var(--space-m);
}

.visit__title {
  margin-bottom: var(--space-l);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.visit__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11.5rem, 100%), 1fr));
  gap: var(--space-m) var(--col-gap);
}

.visit dt {
  margin-bottom: 0.4rem;
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 500;
}

.visit dd {
  font-size: var(--step-1);
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.visit__cafe {
  grid-column: 7 / -1;
  margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px)));
}

.visit__cafe img {
  width: 100%;
  height: auto;
  transform: translateY(calc(var(--settle, 0) * 7%));
}

.visit__base {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}

.visit__logo {
  width: clamp(132px, 13vw, 190px);
  height: auto;
}

.visit__base small {
  color: var(--ink-2);
  font-size: var(--step--1);
}

/* Where an engraving is cut by its own image edge it fades out instead of ending on a hard line */
.hero__toast-enter {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%), linear-gradient(to top, transparent 0, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 10%), linear-gradient(to top, transparent 0, #000 14%);
  mask-composite: intersect;
}

.visit__cafe img {
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 16%);
  mask-image: linear-gradient(to top, transparent 0, #000 16%);
}

.spill img {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 9%), linear-gradient(to top, transparent 0, #000 10%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to left, transparent 0, #000 9%), linear-gradient(to top, transparent 0, #000 10%);
  mask-composite: intersect;
}

/* ---------- Narrow and portrait screens: one column, illustrations in the flow ---------- */

@media (max-width: 899.98px) {
  .topbar__mail {
    display: none;
  }

  .offer__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 759.98px), (max-aspect-ratio: 4/5) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(var(--space-l), 0.7fr) auto auto minmax(var(--space-m), 1fr) auto;
  }

  .hero__logo,
  .hero__lede {
    grid-column: 1;
  }

  .hero__toast {
    position: relative;
    grid-row: 5;
    width: min(96vw, 600px);
    margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px)));
  }

  .vibes__title,
  .offer,
  .ask__copy,
  .visit__info,
  .visit__cafe {
    grid-column: 1 / -1;
  }

  /* the olive hand follows the headline instead of stacking under the hero's hand */
  .olives {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 1 / -1;
    justify-self: end;
    width: min(70vw, 440px);
    margin-top: var(--space-m);
    margin-right: calc(-0.5 * max(var(--gutter), env(safe-area-inset-right, 0px)));
  }

  .offer {
    margin-top: var(--space-l);
  }

  .spill {
    grid-column: 1 / -1;
    margin-top: var(--space-m);
    margin-left: 8%;
  }

  .ask {
    padding-bottom: 0;
  }

  .ask__disco {
    position: relative;
    grid-column: 1 / -1;
    width: min(64vw, 440px);
    margin-top: var(--space-l);
    margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px)));
  }

  .visit__cafe {
    margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px)));
    margin-top: var(--space-m);
  }
}

/* Landscape phones and short laptop windows: type follows the height, not the width */
@media (max-height: 560px) and (min-aspect-ratio: 4/5) and (min-width: 760px) {
  .hero__lede {
    margin-top: var(--space-s);
    font-size: clamp(1.125rem, 5.6vh, 2.75rem);
  }
}

@media (max-width: 519.98px) {
  .topbar__address {
    display: none;
  }

  .topbar__ask-long {
    display: none;
  }

  .topbar__ask-short {
    display: inline;
  }

  .offer__list,
  .visit__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Motion: one entrance sequence; everything after it answers the visitor's scroll ---------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .topbar {
    animation: fade-in 0.8s ease 0.1s both;
  }

  .logo__glyph {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: glyph-rise 1.15s var(--spring-soft) both;
    animation-delay: calc(0.1s + var(--i) * 0.07s);
  }

  .logo__wipe {
    transform-box: fill-box;
    animation: wipe 1.25s cubic-bezier(0.6, 0.05, 0.25, 1) 0.62s both;
  }

  .hero__lede {
    animation: lede-in 1s var(--ease-out) 0.5s both;
  }

  .hero__toast-enter {
    animation: toast-in 1.7s var(--spring) 0.15s both;
  }

  .js .glint--ink {
    animation: flash 0.95s ease-out 1.3s both;
  }

  .js .glint--late {
    animation-delay: 1.45s;
  }

  .js .ask .glint {
    animation: twinkle var(--t, 3.8s) ease-in-out var(--d, 0s) infinite both;
    animation-play-state: paused;
  }

  .ask.is-live .glint {
    animation-play-state: running;
  }

  .cta {
    transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease-out);
  }

  @keyframes glyph-rise {
    from {
      opacity: 0;
      transform: translateY(28%);
    }
  }

  @keyframes wipe {
    from {
      transform: translateX(-100%);
    }
  }

  @keyframes lede-in {
    from {
      opacity: 0;
      transform: translateY(0.5em);
    }
  }

  @keyframes toast-in {
    from {
      opacity: 0;
      transform: translate(-10%, 28%) rotate(11deg);
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
  }

  @keyframes flash {
    0% {
      opacity: 0;
      transform: scale(0.2) rotate(-25deg);
    }

    35% {
      opacity: 1;
      transform: scale(1) rotate(8deg);
    }

    100% {
      opacity: 0;
      transform: scale(0.35) rotate(45deg);
    }
  }

  @keyframes twinkle {
    0% {
      opacity: 0;
      transform: scale(0.25) rotate(0deg);
    }

    10% {
      opacity: 1;
      transform: scale(1) rotate(30deg);
    }

    24%,
    100% {
      opacity: 0;
      transform: scale(0.35) rotate(70deg);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__logo {
    transition: opacity 0.3s, visibility 0.3s;
  }
}