/* A landing mantém seu palco escuro sem alterar o tema salvo do aplicativo. */
.landing-document {
  color-scheme: dark;
  scroll-padding-top: 96px;
}
.site--landing {
  --bg: oklch(0.115 0.004 195);
  --surface: oklch(0.16 0.006 195);
  --surface-2: oklch(0.19 0.007 195);
  --surface-3: oklch(0.23 0.009 195);
  --text: oklch(0.97 0.005 195);
  --text-soft: oklch(0.73 0.014 195);
  --text-faint: oklch(0.67 0.014 195);
  --border: oklch(0.29 0.012 195);
  --border-strong: oklch(0.55 0.014 195);
  --brand: oklch(0.89 0.095 174);
  --brand-hover: oklch(0.94 0.065 174);
  --brand-soft: oklch(0.25 0.033 174);
  --on-brand: oklch(0.17 0.025 174);
  --focus-ring: var(--brand);
  --live: oklch(0.8 0.14 160);
  --gift-text: oklch(0.83 0.09 65);
  --gift-soft: oklch(0.27 0.035 65);
  --atmosphere: oklch(0.54 0.064 195);
  --atmosphere-light: oklch(0.71 0.042 195);
  --edge-light: oklch(0.85 0.02 195 / 0.22);
  --shadow-stage:
    0 32px 80px oklch(0.06 0.015 195 / 0.7),
    0 0 64px oklch(0.5 0.07 195 / 0.055);
  --text-landing-hero: clamp(2.5rem, 1.35rem + 3.4vw, 4.5rem);
  --text-landing-section: clamp(2rem, 1.3rem + 2.4vw, 3.5rem);
  --text-landing-badge: 0.625rem;
  --radius-stage: 16px;
  --container: 1200px;
  --hero-enter-duration: 640ms;
  --hero-enter-step: 90ms;
  --hero-drift-duration: 12s;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}
.site--landing .container {
  width: min(100% - 2 * var(--space-6), var(--container));
}
.site--landing .site-header {
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  border-bottom-color: color-mix(in oklch, var(--border) 50%, transparent);
}
.site--landing .site-header__inner {
  min-height: 80px;
}
.site--landing .site-nav {
  gap: var(--space-6);
}
.site--landing .site-nav > a:not(.btn) {
  font-weight: 400;
  padding-block: var(--space-3);
}
.site--landing .site-nav .btn-ghost {
  margin-left: var(--space-5);
}
.site--landing .site-nav .btn-primary {
  background: var(--text);
  color: var(--bg);
}
.site--landing .btn {
  border-radius: var(--radius-pill);
}
.site--landing .btn-primary {
  box-shadow: 0 0 24px color-mix(in oklch, var(--brand) 10%, transparent);
}
.site--landing .btn-lg {
  min-height: 52px;
  padding-inline: var(--space-5);
  font-size: var(--text-sm);
}
.site--landing .brand {
  gap: var(--space-3);
  font-size: var(--text-lg);
}
.landing-icon {
  width: 20px;
  height: 20px;
  flex: none;
}
.landing-logomark {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-sm);
}
.landing-logomark .landing-icon {
  width: 24px;
  height: 24px;
}
.connection-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--live);
}
.landing-eyebrow {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--text-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* A luz contorna o produto; o centro escuro preserva o contraste do título. */
.landing-hero {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  padding: var(--space-7) 0 var(--space-6);
}
.hero-atmosphere {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, var(--bg) 99%),
    radial-gradient(ellipse 45% 36% at 50% 12%, var(--bg) 30%, transparent 100%);
}
.hero-atmosphere__halo {
  position: absolute;
  width: 90%;
  height: 64%;
  top: 18%;
  left: 5%;
  opacity: 0.35;
  background: radial-gradient(
    ellipse at center,
    var(--atmosphere),
    transparent 64%
  );
  filter: blur(64px);
}
.hero-atmosphere__ribbon {
  position: absolute;
  width: 120%;
  height: 54%;
  left: -10%;
  top: 12%;
  border-radius: 50%;
  border-top: 1px solid var(--edge-light);
  box-shadow:
    0 -24px 64px -24px var(--atmosphere-light),
    inset 0 24px 64px -32px var(--atmosphere);
  transform: rotate(-17deg);
  opacity: 0.58;
}
.hero-atmosphere__ribbon--two {
  width: 100%;
  height: 68%;
  top: 4%;
  left: 16%;
  transform: rotate(24deg);
  opacity: 0.4;
}
.hero-atmosphere__ribbon--three {
  width: 150%;
  height: 80%;
  top: 18%;
  left: -34%;
  transform: rotate(-27deg);
  opacity: 0.25;
  filter: blur(8px);
}
.landing-hero__content {
  position: relative;
}
.landing-hero__intro {
  text-align: center;
  position: relative;
}
.landing-hero__intro .landing-eyebrow {
  justify-content: center;
}
.hero-signal { display: inline-flex; align-items: center; gap: 3px; height: var(--space-4); color: var(--brand); }
.hero-signal i { width: 3px; height: 50%; border-radius: var(--radius-pill); background: currentColor; }
.hero-signal i:nth-child(2), .hero-signal i:nth-child(3) { height: 100%; }
.landing-hero h1 {
  margin-top: var(--space-4);
  font-size: var(--text-landing-hero);
  line-height: 1.07;
  letter-spacing: -0.045em;
  font-weight: 500;
}
.landing-hero h1 > span {
  color: var(--text-soft);
}
.landing-hero__lead {
  margin: var(--space-4) auto 0;
  max-width: 60ch;
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--text-soft);
}
.landing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.landing-button-secondary {
  color: var(--text);
  border-color: var(--border-strong);
  background: color-mix(in oklch, var(--bg) 80%, transparent);
  font-weight: 400;
}
.landing-button-secondary:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--text-soft);
}
.landing-button-secondary .landing-icon {
  width: 16px;
  height: 16px;
}
.landing-hero__reassurance {
  color: var(--text-faint);
  margin-top: var(--space-4);
  font-size: var(--text-xs);
}
.landing-platforms {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-6) auto var(--space-6);
}
.landing-platforms__label {
  flex-basis: 100%;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-faint);
}
.landing-platforms__brand {
  display: inline-grid;
  justify-items: center;
  gap: var(--space-1);
  color: var(--text-soft);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.landing-platforms__name {
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
a.landing-platforms__brand { text-decoration: none; }
a.landing-platforms__brand:hover { color: var(--text); }
.landing-platforms .platform-icon {
  width: 20px;
  height: 20px;
  background: none;
}
.landing-platforms__brand--soon { color: var(--text-faint); }
.landing-platforms__brand--soon .platform-icon { filter: grayscale(1); }
.landing-platforms__soon {
  grid-row: 1;
  justify-self: end;
  padding: calc(var(--space-1) / 2) calc(var(--space-3) / 2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: var(--text-landing-badge);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
}
.landing-product {
  position: relative;
  perspective: 1200px;
}
.landing-manuals__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.landing-manual { display: flex; flex-direction: column; align-items: start; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); text-decoration: none; }
.landing-manual:hover { border-color: var(--border-strong); }
.landing-manual > .platform-icon { width: 28px; height: 28px; margin-bottom: var(--space-5); }
.landing-manual h3 { font-size: var(--text-xl); font-weight: 500; line-height: 1.3; }
.landing-manual p { margin-top: var(--space-3); margin-bottom: var(--space-5); color: var(--text-soft); font-size: var(--text-sm); line-height: 1.7; }
.landing-manual > span:last-child { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; font-size: var(--text-sm); color: var(--brand); }
@media (max-width: 1050px) { .site--landing .site-nav > a:not(.btn) { display: none; } }
@media (max-width: 800px) { .landing-manuals__grid { grid-template-columns: 1fr; } }
.product-capture { margin: 0; scroll-margin-top: var(--space-8); }
.product-capture__frame { position: relative; display: block; overflow: hidden; border: 1px solid var(--edge-light); border-radius: var(--radius-stage); background: var(--surface); box-shadow: var(--shadow-stage); transform-origin: center top; }
.product-capture__frame img { display: block; width: 100%; height: auto; }
.product-capture__caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); color: var(--text-faint); font-size: var(--text-xs); }
.product-capture__caption > span:first-child { display: inline-flex; align-items: center; gap: var(--space-2); }
.motion-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0 auto;
  min-height: 44px;
  padding-inline: var(--space-3);
  color: var(--text-faint);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  cursor: pointer;
}
.motion-toggle:hover {
  color: var(--text);
  border-color: var(--border);
}
.motion-toggle .landing-icon {
  width: 14px;
  height: 14px;
}
.site--landing [hidden] {
  display: none !important;
}

/* O espaço separa os argumentos para não competir com a demonstração do hero. */
.landing-section {
  padding-block: var(--space-9);
}
.landing-section h2 {
  font-size: var(--text-landing-section);
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.landing-section h2 span {
  color: var(--text-soft);
}
.landing-section .landing-eyebrow {
  margin-bottom: var(--space-5);
}
.landing-section__intro > p:last-child,
.landing-feature-copy > p:not(.landing-eyebrow),
.landing-faq__layout > div > p:last-child {
  color: var(--text-soft);
  line-height: 1.75;
  margin-top: var(--space-5);
  max-width: 46ch;
}
.landing-workflow {
  border-top: 1px solid var(--border);
}
.landing-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
  list-style: none;
  padding: 0;
  margin-top: var(--space-8);
}
.landing-step__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.landing-step__top .landing-icon {
  color: var(--text-soft);
  width: 24px;
  height: 24px;
}
.landing-steps h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-5);
}
.landing-steps p {
  margin-top: var(--space-3);
  color: var(--text-soft);
  font-size: var(--text-sm);
  line-height: 1.8;
  max-width: 40ch;
}
.landing-features {
  border-block: 1px solid var(--border);
  background: color-mix(in oklch, var(--surface) 40%, var(--bg));
}
.landing-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}
.landing-text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  margin-top: var(--space-5);
  padding-block: var(--space-3);
  font-size: var(--text-sm);
}
.landing-feature-list {
  display: grid;
  gap: var(--space-7);
}
.landing-feature-list article {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}
.landing-feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-md);
  color: var(--text-soft);
}
.landing-feature-list h3 {
  font-size: var(--text-lg);
}
.landing-feature-list p {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-soft);
  line-height: 1.75;
  max-width: 44ch;
}
.landing-faq__layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-9);
}
.landing-faq__items details {
  border-bottom: 1px solid var(--border);
}
.landing-faq__items summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  cursor: pointer;
  padding-block: var(--space-5);
  font-size: var(--text-md);
}
.landing-faq__items details:first-child summary {
  padding-top: var(--space-2);
}
.landing-faq__items summary::-webkit-details-marker {
  display: none;
}
.landing-faq__items summary .landing-icon {
  color: var(--text-faint);
  transition: transform var(--duration-base) var(--ease-out);
}
.landing-faq__items details[open] summary .landing-icon {
  transform: rotate(45deg);
}
.landing-faq__items details p {
  color: var(--text-soft);
  line-height: 1.8;
  padding-bottom: var(--space-5);
  font-size: var(--text-sm);
  max-width: 65ch;
}
.landing-cta {
  position: relative;
  text-align: center;
  border-top: 1px solid var(--border);
  background: radial-gradient(
    ellipse 50% 80% at 50% 100%,
    var(--brand-soft),
    transparent
  );
}
.landing-cta .landing-eyebrow {
  justify-content: center;
}
.landing-cta__mark {
  display: grid;
  place-items: center;
  margin: 0 auto var(--space-5);
  width: 48px;
  height: 48px;
  border: 1px solid var(--edge-light);
  background: var(--surface-2);
  color: var(--brand);
  border-radius: var(--radius-md);
}
.landing-cta__mark .landing-icon {
  width: 28px;
  height: 28px;
}
.landing-cta .container > p:not(.landing-eyebrow) {
  margin-top: var(--space-5);
  color: var(--text-soft);
}
.landing-cta .btn {
  margin-top: var(--space-6);
}
.landing-cta__login {
  display: block;
  width: fit-content;
  margin: var(--space-3) auto 0;
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-soft);
  text-decoration: none;
}
.site--landing .site-footer {
  font-size: var(--text-xs);
}
.site--landing .site-footer__inner > p:first-child {
  max-width: 68ch;
}
.site--landing .site-footer a {
  color: var(--text-soft);
  display: inline-block;
  padding-block: var(--space-3);
}

@media (prefers-reduced-motion: no-preference) {
  .landing-document {
    scroll-behavior: smooth;
  }
  .is-motion-ready .hero-atmosphere__ribbon {
    animation: atmosphere-drift var(--hero-drift-duration) ease-in-out infinite alternate;
  }
  .is-motion-ready .hero-atmosphere__ribbon--two {
    animation-name: atmosphere-counter-drift;
    animation-duration: 16s;
    animation-delay: -6s;
  }
  .is-motion-ready .hero-atmosphere__ribbon--three {
    animation-duration: 20s;
    animation-delay: -10s;
  }
  .is-motion-ready .hero-atmosphere__halo {
    animation: atmosphere-breathe 8s ease-in-out infinite alternate;
  }
  .is-motion-ready .landing-hero__intro > * { animation: hero-enter var(--hero-enter-duration) var(--ease-out) both; }
  .is-motion-ready .landing-hero__intro > :nth-child(2) { animation-delay: var(--hero-enter-step); }
  .is-motion-ready .landing-hero__intro > :nth-child(3) { animation-delay: calc(2 * var(--hero-enter-step)); }
  .is-motion-ready .landing-hero__intro > :nth-child(4) { animation-delay: calc(3 * var(--hero-enter-step)); }
  .is-motion-ready .landing-hero__intro > :nth-child(5) { animation-delay: calc(4 * var(--hero-enter-step)); }
  .is-motion-ready .landing-platforms { animation: hero-enter var(--hero-enter-duration) var(--ease-out) both; animation-delay: calc(5 * var(--hero-enter-step)); }
  .is-motion-ready .product-capture__frame { animation: hero-product-enter calc(2 * var(--hero-enter-duration)) var(--ease-out) both; animation-delay: calc(6 * var(--hero-enter-step)); }
  .is-motion-ready .hero-signal i { animation: hero-signal 1200ms ease-in-out infinite alternate; }
  .is-motion-ready .hero-signal i:nth-child(2) { animation-delay: -600ms; }
  .is-motion-ready .hero-signal i:nth-child(3) { animation-delay: -900ms; }
  .is-motion-ready .hero-signal i:nth-child(4) { animation-delay: -300ms; }
}
@keyframes hero-enter { from { opacity: 0; transform: translateY(var(--space-4)); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-product-enter { from { opacity: 0; transform: translateY(var(--space-7)) rotateX(6deg) scale(0.96); } to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); } }
@keyframes hero-signal { from { transform: scaleY(0.45); } to { transform: scaleY(1); } }
.site--landing.is-motion-entered .landing-hero__intro > *,
.site--landing.is-motion-entered .landing-platforms,
.site--landing.is-motion-entered .product-capture__frame { animation: none; }
@keyframes atmosphere-drift {
  from {
    transform: translate3d(-5%, -5%, 0) rotate(-24deg) scale(1);
  }
  to {
    transform: translate3d(5%, 10%, 0) rotate(-4deg) scale(1.1);
  }
}
@keyframes atmosphere-counter-drift {
  from {
    transform: translate3d(2%, 0, 0) rotate(24deg);
  }
  to {
    transform: translate3d(-4%, 8%, 0) rotate(12deg);
  }
}
@keyframes atmosphere-breathe {
  from {
    opacity: 0.3;
    transform: scale(0.95);
  }
  to {
    opacity: 0.65;
    transform: scale(1.05);
  }
}
.site--landing.is-motion-paused .hero-atmosphere > *,
.site--landing.is-motion-paused .hero-signal i,
.site--landing.is-motion-paused .landing-hero__intro > *,
.site--landing.is-motion-paused .landing-platforms,
.site--landing.is-motion-paused .product-capture__frame {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .site--landing *,
  .site--landing *::before,
  .site--landing *::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 1100px) {
  .site--landing .site-nav {
    gap: var(--space-4);
  }
  .site--landing .site-nav .btn-ghost {
    margin-left: 0;
  }
}
@media (max-width: 800px) {
  .site--landing .container {
    width: min(100% - 2 * var(--space-5), var(--container));
  }
  .site--landing .site-nav > a:not(.btn) {
    display: none;
  }
  .landing-hero {
    padding-top: var(--space-7);
  }
  .landing-platforms {
    gap: var(--space-5);
  }
  .landing-platforms__label {
    width: 100%;
    text-align: center;
  }
  .landing-steps {
    gap: var(--space-5);
  }
  .landing-section {
    padding-block: var(--space-8);
  }
  .landing-feature-grid,
  .landing-faq__layout {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .landing-feature-list {
    gap: var(--space-6);
  }
  .hero-atmosphere__ribbon {
    width: 180%;
    left: -40%;
    top: 10%;
    height: 36%;
  }
}
@media (max-width: 580px) {
  .site--landing .container {
    width: calc(100% - 2 * var(--space-4));
  }
  .site--landing .site-header__inner {
    min-height: 68px;
  }
  .site--landing .brand {
    font-size: var(--text-md);
    gap: var(--space-2);
  }
  .site--landing .site-nav {
    gap: var(--space-2);
  }
  .site--landing .site-nav .btn {
    padding-inline: var(--space-4);
    font-size: var(--text-xs);
    min-height: 44px;
  }
  .site--landing .site-nav .btn-ghost {
    display: none;
  }
  .landing-hero h1 {
    font-size: clamp(2.25rem, 9.3vw, 3.5rem);
    letter-spacing: -0.04em;
  }
  .landing-hero__lead {
    max-width: 33ch;
    font-size: var(--text-sm);
    line-height: 1.7;
  }
  .desktop-break {
    display: none;
  }
  .landing-hero__reassurance {
    max-width: 34ch;
    margin-inline: auto;
    line-height: 1.6;
  }
  .landing-hero__actions {
    gap: var(--space-2);
    margin-top: var(--space-5);
  }
  .landing-hero__actions .btn {
    padding-inline: var(--space-4);
  }
  .landing-platforms {
    margin-block: var(--space-6);
    gap: var(--space-4) var(--space-5);
  }
  .landing-platforms__brand {
    font-size: var(--text-sm);
  }
  .product-capture__frame { border-radius: var(--radius-sm); }
  .motion-toggle {
    margin-left: 0;
  }
  .landing-steps {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-top: var(--space-7);
  }
  .landing-step__top {
    padding-bottom: var(--space-3);
  }
  .landing-steps h3 {
    margin-top: var(--space-4);
  }
  .landing-section__intro > p:last-child {
    font-size: var(--text-sm);
  }
  .landing-feature-list article {
    gap: var(--space-4);
  }
  .landing-feature-list h3 {
    font-size: var(--text-md);
  }
  .landing-faq__items summary {
    font-size: var(--text-sm);
  }
  .landing-cta .container > p:not(.landing-eyebrow) {
    font-size: var(--text-sm);
  }
}

/* Copi, o mascote. As artes são WebP com alfa, geradas por docs/brand/personagem/exportar-web.mjs. */
.landing-copi {
  display: block;
  height: auto;
  max-width: 100%;
  pointer-events: none;
  user-select: none;
}
/* O palco do Copi do hero: no celular ocupa lugar no fluxo e se recolhe depois que ele sai; no desktop flutua solto ao lado do texto. */
.landing-copi-stage { width: 144px; margin: 0 auto var(--space-3); }
.landing-copi--hero { width: 100%; }
.landing-copi--workflow { width: min(100%, 320px); margin: 0 auto var(--space-5); }
.landing-copi--insights { width: min(100%, 440px); margin-top: var(--space-6); }
.landing-copi--cta { width: min(100%, 460px); margin: 0 auto var(--space-4); }
.landing-workflow__container { position: relative; }

@media (min-width: 1100px) {
  .landing-copi-stage {
    position: absolute;
    top: calc(var(--space-2) * -1);
    right: calc(var(--space-5) * -1);
    width: 280px;
    margin: 0;
  }
  .landing-copi--workflow {
    position: absolute;
    top: 0;
    right: calc(var(--space-6) * -1);
    width: 420px;
    margin: 0;
  }
}

/*
 * O Copi do hero faz uma visita: entra com um pulinho e um aceno, flutua e some.
 * Uma linha do tempo só (7 s), para entrada, flutuação e saída nunca brigarem pelo
 * transform. Só transform e opacity no Copi; o palco se recolhe no fim (a única
 * animação de layout, uma vez só) para o celular não ficar com um buraco acima do título.
 * Quem pede menos movimento (e a pausa do hero) vê o Copi parado e fixo: sumir é parte da
 * animação, e a regra de prefers-reduced-motion acima desliga todas. O recolhimento só começa
 * quando o Copi já sumiu (7 s), então ele não passa por cima do texto que sobe.
 */
@media (prefers-reduced-motion: no-preference) {
  .site--landing.is-motion-ready .landing-hero__intro > .landing-copi-stage {
    animation: copi-stage-leave 500ms var(--ease-out) 7s forwards;
  }
  .site--landing.is-motion-ready .landing-copi--hero {
    animation: copi-visit 7s ease-in-out 300ms both;
  }
  .site--landing.is-motion-paused .landing-copi-stage,
  .site--landing.is-motion-paused .landing-copi--hero { animation-play-state: paused; }
}
@keyframes copi-visit {
  0% { opacity: 0; transform: translateY(var(--space-5)) scale(0.86) rotate(-4deg); }
  8% { opacity: 1; transform: translateY(calc(var(--space-4) * -1)) scale(1.05) rotate(4deg); }
  13% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
  30% { transform: translateY(calc(var(--space-2) * -1)) rotate(1.5deg); }
  47% { transform: translateY(0) rotate(-1deg); }
  64% { transform: translateY(calc(var(--space-2) * -1)) rotate(1.5deg); }
  80% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(calc(var(--space-5) * -1)) scale(0.94); }
}
@keyframes copi-stage-leave {
  from { max-height: 16rem; margin-bottom: var(--space-3); }
  to { max-height: 0; margin-bottom: 0; }
}