/* Nativa Pet: CSS global.
   Ordem: fontes → tokens → reset → base → componentes → cabeçalho → rodapé → revelação.
   A camada pagina é declarada depois de global, então o CSS da página vence o global sem depender de especificidade. */

@layer global, pagina;

@import url("src/pages/home/home.css") layer(pagina);

@layer global {
  /* ============ Fontes ============ */

  @font-face {
    font-family: "DM Serif Display";
    src: url("assets/fonts/dm-serif-display-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "DM Sans";
    src: url("assets/fonts/dm-sans-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "DM Sans";
    src: url("assets/fonts/dm-sans-bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  /* ============ Tokens ============ */

  :root {
    /* Verde profundo */
    --color-green-950: #0e2018;
    --color-green-900: #11261d;
    --color-green-800: #142d1f;
    --color-green-700: #233b29;
    --color-green-600: #2f4d37;

    /* Creme */
    --color-cream-50: #fbf7f1;
    --color-cream-100: #f6f0e6;
    --color-cream-200: #ece3d3;
    --color-sage-100: #eae6d5;

    /* Cobre */
    --color-copper-700: #9b482c;
    --color-copper-500: #b26b3c;
    --color-copper-300: #d8a17c;

    --color-ink-600: #4d4d4d;
    --color-ink-500: #6e6155;
    --color-white: #ffffff;
    --color-error: #a3321a;
    --color-success: #2f5e3b;

    --color-text: var(--color-green-900);
    --color-text-muted: var(--color-ink-600);
    --color-line: rgb(178 107 60 / 0.45);
    --color-focus: var(--color-copper-500);

    /* Tipografia */
    --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
    --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --text-eyebrow: clamp(0.75rem, 0.72rem + 0.12vw, 0.875rem);
    --text-small: 1rem;
    --text-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
    --text-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.375rem);
    --text-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2.125rem);
    --text-h2: clamp(2.375rem, 1.6rem + 3.3vw, 4.5rem);
    --text-h1: clamp(2.75rem, 1.5rem + 5.2vw, 6.25rem);
    --text-price: clamp(2.5rem, 2.1rem + 1.6vw, 3.5rem);

    --tracking-eyebrow: 0.2em;
    --tracking-display: -0.02em;
    --leading-tight: 1;
    --leading-snug: 1.2;
    --leading-body: 1.55;

    /* Espaçamento */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4.5rem;
    --space-section: clamp(4rem, 8vw, 8rem);
    --gutter: clamp(1rem, 4.5vw, 5.5rem);

    /* Dimensões */
    --page-max: 90rem;
    --header-height: clamp(4rem, 3.4rem + 1.8vw, 5.3rem);
    --header-height-compact: clamp(3.5rem, 3.1rem + 1.2vw, 4.25rem);
    --control-height: 3rem;
    --button-height: 3.25rem;
    --button-height-large: clamp(3.5rem, 3.2rem + 1vw, 4.25rem);
    --radius-sm: 0.625rem;
    --radius-md: 1rem;
    --radius-pill: 999px;

    --shadow-button: 0 10px 24px -10px rgb(14 32 24 / 0.55);
    --shadow-card: 0 30px 60px -30px rgb(14 32 24 / 0.35), 0 2px 6px rgb(14 32 24 / 0.06);

    /* Movimento */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 180ms;
    --duration-base: 320ms;
    --duration-reveal: 820ms;
    --motion-distance: 1.5rem;

    /* Pata usada como recorte (abertura) e como máscara (fechamento). Embutida para não depender de
       arquivo nem de CORS: máscara de arquivo externo falha em file:// e em servidor sem tipo image/svg+xml. */
    --paw-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 47C63 47 79 60 78 75C77 88 63 90 50 85C37 90 23 88 22 75C21 60 37 47 50 47Z'/%3E%3Cellipse cx='20' cy='42' rx='8.5' ry='11.5' transform='rotate(-22 20 42)'/%3E%3Cellipse cx='37' cy='24' rx='9' ry='12.5' transform='rotate(-8 37 24)'/%3E%3Cellipse cx='63' cy='24' rx='9' ry='12.5' transform='rotate(8 63 24)'/%3E%3Cellipse cx='80' cy='42' rx='8.5' ry='11.5' transform='rotate(22 80 42)'/%3E%3C/svg%3E");
    --word-distance: 0.5em;
  }

  /* Movimento reduzido = menos, não nada: distâncias menores e revelações mais curtas.
     Nenhum efeito é desligado (abertura, pata, títulos e linhas continuam). */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-reveal: 560ms;
      --motion-distance: 0.75rem;
      --word-distance: 0.25em;
    }
  }

  @media (min-width: 48rem) {
    :root {
      --text-small: 0.875rem;
    }
  }

  /* ============ Reset ============ */

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

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

  body,
  h1,
  h2,
  h3,
  p,
  ol,
  ul,
  dl,
  dd,
  figure,
  fieldset {
    margin: 0;
  }

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

  fieldset {
    padding: 0;
    border: 0;
    min-width: 0;
  }

  legend {
    padding: 0;
  }

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

  img {
    height: auto;
  }

  input,
  button {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
  }

  /* ============ Base ============ */

  .page {
    min-height: 100vh;
    background: var(--color-cream-50);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    overflow-x: clip;
  }

  .page__main {
    display: block;
  }

  .skip-link {
    position: absolute;
    z-index: 100;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--color-green-900);
    color: var(--color-white);
    font-weight: 700;
    transform: translateY(-200%);
  }

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

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

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

  /* Âncoras não ficam sob o cabeçalho fixo */
  [id] {
    scroll-margin-top: var(--header-height);
  }

  /* ============ Componentes: sobretítulo, botão e link ============ */

  /* Sobretítulo em caixa alta e cobre */
  .eyebrow {
    color: var(--color-copper-700);
    font-size: var(--text-eyebrow);
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    line-height: 1.4;
    text-transform: uppercase;
  }

  /* Botão */
  .button {
    display: inline-flex;
    min-height: var(--button-height);
    padding: var(--space-sm) clamp(1.25rem, 3vw, 1.75rem);
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition:
      background-color var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
  }

  .button--primary {
    background: var(--color-green-700);
    color: var(--color-white);
    box-shadow: var(--shadow-button);
  }

  .button--primary:hover {
    background: var(--color-green-900);
    box-shadow: 0 14px 28px -12px rgb(14 32 24 / 0.7);
  }

  .button:active {
    transform: scale(0.97);
  }

  .button--compact {
    min-height: 2.75rem;
    padding-inline: 1.25rem;
    font-size: 0.9375rem;
  }

  .button--large {
    min-height: var(--button-height-large);
    padding-inline: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  }

  .button--block {
    width: 100%;
  }

  .button__icon {
    flex: none;
    width: 1.3em;
    height: 1.3em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .button__icon circle {
    fill: currentColor;
    stroke: none;
  }

  .button__icon--arrow {
    transition: transform var(--duration-base) var(--ease-out);
  }

  .button:hover .button__icon--arrow {
    transform: translateX(4px);
  }

  /* Link de texto com sublinhado em cobre */
  .text-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text);
    text-decoration: none;
    background: linear-gradient(var(--color-copper-500), var(--color-copper-500)) left calc(100% - 0.55rem) / 100% 1px no-repeat;
    transition:
      background-size var(--duration-base) var(--ease-out),
      color var(--duration-base) var(--ease-out);
  }

  .text-link:hover {
    color: var(--color-copper-700);
    background-size: 35% 1px;
  }

  .text-link__icon {
    flex: none;
    width: 1.4em;
    height: 1.4em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--duration-base) var(--ease-out);
  }

  .text-link:hover .text-link__icon {
    transform: translateX(4px);
  }

  /* ============ Cabeçalho ============ */

  .site-header {
    position: fixed;
    z-index: 50;
    inset: 0 0 auto;
    background: rgb(251 247 241 / 0.82);
    border-bottom: 1px solid rgb(178 107 60 / 0.18);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    transition:
      background-color 450ms var(--ease-out),
      border-color 450ms var(--ease-out),
      box-shadow 450ms var(--ease-out);
  }

  /* Estados escritos por src/js/components/header-state.js; sem JS vale o padrão acima */
  .site-header.is-over-hero {
    background-color: rgb(251 247 241 / 0.55);
    border-bottom-color: transparent;
  }

  .site-header.is-condensed {
    background-color: rgb(251 247 241 / 0.95);
    box-shadow: 0 14px 32px -24px rgb(14 32 24 / 0.5);
  }

  .site-header.is-menu-open {
    background-color: rgb(251 247 241 / 0.97);
  }

  .site-header.is-condensed .site-header__inner {
    min-height: var(--header-height-compact);
  }

  .site-header.is-condensed .site-header__logo {
    transform: scale(0.88);
  }

  .site-header__inner {
    transition: min-height 450ms var(--ease-out);
    display: flex;
    max-width: var(--page-max);
    min-height: var(--header-height);
    margin-inline: auto;
    padding-inline: var(--gutter);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
  }

  .site-header__brand {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-green-900);
    text-decoration: none;
  }

  .site-header__logo {
    width: clamp(2.25rem, 1.9rem + 1.1vw, 3.1rem);
    height: auto;
    transition: transform 450ms var(--ease-out);
  }

  .site-header__brand-name {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 2rem);
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .site-header__menu-toggle {
    display: none;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 var(--space-sm);
    align-items: center;
    gap: var(--space-xs);
    border: 1px solid rgb(17 38 29 / 0.2);
    border-radius: var(--radius-pill);
    background: transparent;
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .site-header__menu-icon,
  .site-header__menu-icon::before,
  .site-header__menu-icon::after {
    display: block;
    width: 1.125rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-fast);
  }

  .site-header__menu-icon {
    position: relative;
  }

  .site-header__menu-icon::before,
  .site-header__menu-icon::after {
    position: absolute;
    left: 0;
    content: "";
  }

  .site-header__menu-icon::before {
    top: -6px;
  }

  .site-header__menu-icon::after {
    top: 6px;
  }

  .site-header.is-menu-open .site-header__menu-icon {
    background: transparent;
  }

  .site-header.is-menu-open .site-header__menu-icon::before {
    transform: translateY(6px) rotate(45deg);
  }

  .site-header.is-menu-open .site-header__menu-icon::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
  }

  .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-md);
  }

  .site-nav__link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    color: var(--color-green-900);
    font-size: 0.9375rem;
    text-decoration: none;
    background: linear-gradient(var(--color-copper-500), var(--color-copper-500)) center calc(100% - 0.6rem) / 0 1px no-repeat;
    transition: background-size var(--duration-base) var(--ease-out), color var(--duration-base);
  }

  .site-nav__link:hover {
    color: var(--color-copper-700);
    background-size: 100% 1px;
  }

  /* Menu recolhido no celular e tablet, só quando o JS está ativo */
  @media (max-width: 63.99rem) {
    .has-js .site-header__menu-toggle {
      display: inline-flex;
    }

    .has-js .site-nav {
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-lg);
      padding: var(--space-md) var(--gutter) var(--space-xl);
      border-bottom: 1px solid rgb(178 107 60 / 0.25);
      background: var(--color-cream-50);
      box-shadow: 0 24px 40px -24px rgb(14 32 24 / 0.35);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-0.75rem);
      transition:
        opacity var(--duration-base) var(--ease-out),
        transform var(--duration-base) var(--ease-out),
        visibility 0s linear var(--duration-base);
    }

    .has-js .site-header.is-menu-open .site-nav {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition-delay: 0s;
    }

    .has-js .site-nav__list {
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 0;
    }

    .has-js .site-nav__link {
      display: flex;
      min-height: 3.25rem;
      border-bottom: 1px solid rgb(178 107 60 / 0.2);
      font-family: var(--font-display);
      font-size: 1.5rem;
      background: none;
    }

    .has-js .site-nav__cta {
      min-height: var(--button-height);
    }

    .site-nav__cta {
      display: none;
    }

    .has-js .site-nav__cta {
      display: inline-flex;
    }
  }

  /* ============ Rodapé ============ */

  .site-footer {
    position: relative;
    background: var(--color-green-800);
    color: var(--color-cream-100);
    isolation: isolate;
    overflow: clip;
  }

  .site-footer__decor {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
  }

  .site-footer__leaves,
  .site-footer__line {
    position: absolute;
    bottom: 0;
    opacity: 0.55;
  }

  .site-footer__leaves--left {
    left: 0;
    width: clamp(5rem, 13vw, 11rem);
  }

  .site-footer__line--left {
    left: 0;
    width: clamp(4.5rem, 11vw, 9rem);
  }

  .site-footer__leaves--right {
    right: 0;
    width: clamp(6rem, 13vw, 11rem);
  }

  .site-footer__line--right {
    right: 0;
    width: clamp(3.5rem, 7vw, 6rem);
  }

  .site-footer__inner {
    display: grid;
    max-width: var(--page-max);
    margin-inline: auto;
    padding: var(--space-3xl) var(--gutter) var(--space-xl);
    gap: var(--space-2xl);
  }

  .site-footer__brand {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    align-self: start;
    gap: var(--space-md);
    justify-self: start;
    color: var(--color-cream-100);
    text-decoration: none;
  }

  .site-footer__logo {
    width: 3.5rem;
  }

  .site-footer__brand-name {
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 1.4rem + 0.8vw, 2.125rem);
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
  }

  .site-footer__nav {
    position: relative;
    padding-left: var(--space-lg);
  }

  .site-footer__nav-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.2;
  }

  .site-footer__nav-list {
    display: grid;
    margin-top: var(--space-xs);
  }

  .site-footer__nav-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    color: var(--color-cream-100);
    font-size: 1rem;
    text-decoration: none;
    background: linear-gradient(var(--color-copper-300), var(--color-copper-300)) left calc(100% - 0.6rem) / 0 1px no-repeat;
    transition: background-size var(--duration-base) var(--ease-out), color var(--duration-base);
  }

  .site-footer__nav-link:hover {
    color: var(--color-copper-300);
    background-size: 100% 1px;
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    padding-top: var(--space-lg);
    justify-content: space-between;
    gap: var(--space-sm) var(--space-xl);
    position: relative;
  }

  /* Linhas de cobre como pseudo-elementos. Quem entra na tela é o rodapé inteiro (.reveal-group):
     a faixa de baixo, sozinha, fica nos últimos 10% da tela no fim da página e nunca seria revelada. */
  .site-footer__nav::before,
  .site-footer__bottom::before {
    position: absolute;
    background: var(--color-copper-500);
    content: "";
  }

  .site-footer__nav::before {
    inset: 0 auto 0 0;
    width: 1px;
    transform-origin: center top;
  }

  .site-footer__bottom::before {
    inset: 0 0 auto;
    height: 1px;
    transform-origin: left center;
  }

  .has-js .site-footer__nav::before {
    transform: scaleY(0);
    transition: transform 1000ms var(--ease-out) 150ms;
  }

  .has-js .site-footer__bottom::before {
    transform: scaleX(0);
    transition: transform 1500ms var(--ease-in-out) 200ms;
  }

  .has-js .site-footer.is-visible .site-footer__nav::before,
  .has-js .site-footer.is-visible .site-footer__bottom::before {
    transform: none;
  }

  .site-footer__small {
    font-size: var(--text-small);
    line-height: 1.5;
  }

  @media (min-width: 48rem) {
    .site-footer__inner {
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: var(--space-3xl);
    }

    .site-footer__nav-list {
      grid-template-columns: repeat(2, auto);
      column-gap: var(--space-2xl);
    }

    .site-footer__bottom {
      grid-column: 1 / -1;
    }
  }

  /* ============ Revelação por scroll ============ */

  /* Rolagem suave sempre: ela diminui o movimento, não aumenta */
  html {
    scroll-behavior: smooth;
  }

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

  .site-header {
    animation: fade-in 700ms var(--ease-out) both;
  }

  /* O CSS anima; o JS (src/js/components/reveal.js) só adiciona .is-visible.
     Sem JS nada fica escondido: o estado inicial só vale com .has-js. */
  .has-js .reveal {
    opacity: 0;
    transform: translate3d(0, var(--motion-distance), 0);
    transition:
      opacity var(--duration-reveal) var(--ease-out),
      transform var(--duration-reveal) var(--ease-out);
  }

  .has-js .reveal--from-right {
    transform: translate3d(calc(var(--motion-distance) * 1.15), 0, 0);
  }

  .has-js .reveal--scale {
    transform: translate3d(0, calc(var(--motion-distance) * 0.85), 0) scale(0.97);
    transition-duration: 1000ms;
  }

  .has-js .reveal--delay-1 {
    transition-delay: 110ms;
  }

  .has-js .reveal--delay-2 {
    transition-delay: 220ms;
  }

  .has-js .reveal--delay-3 {
    transition-delay: 340ms;
  }

  .has-js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Texto em partes: src/js/components/split-text.js cria .split-word (--word-index) e, no modo letras,
     .split-char (--char-index) dentro de cada palavra, que não quebra no meio. */
  .split-word {
    display: inline-block;
    white-space: nowrap;
  }

  .split-char {
    display: inline-block;
  }

  /* Títulos com .reveal--words: o título fica parado e cada palavra sobe na sua vez */
  .has-js .reveal--words {
    opacity: 1;
    transform: none;
  }

  .has-js .reveal--words .split-word {
    opacity: 0;
    transform: translate3d(0, var(--word-distance), 0);
    transition:
      opacity 700ms var(--ease-out),
      transform 900ms var(--ease-out);
    transition-delay: calc(100ms + var(--word-index, 0) * 70ms);
  }

  .has-js .reveal--words.is-visible .split-word {
    opacity: 1;
    transform: none;
  }

  /* ============ Abertura: a pata vazada se aproxima da tela ============
     .has-intro vem do script em linha do <head> (toda carga). A camada creme tem um recorte em forma de pata
     (camada cheia menos a pata, mask-composite); pelo recorte já se vê a página. A pata cresce devagar e acelera
     até engolir a tela; aos 1,95 s a camada some só com CSS, e src/js/components/intro.js a remove do DOM.
     --intro-anchor-x/y: onde fica a almofada da pata (a página define, ex.: no rosto do cão da hero).
     --intro-offset: quanto a página espera para formar a hero. */
  .intro {
    display: none;
  }

  .has-intro {
    --intro-offset: 1700ms;
    --intro-anchor-x: 50vw;
    --intro-anchor-y: 50vh;
  }

  .has-intro .intro {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: block;
    background: var(--color-cream-100);
    pointer-events: none;
    -webkit-mask-image: var(--paw-mask), linear-gradient(#000, #000);
    mask-image: var(--paw-mask), linear-gradient(#000, #000);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation:
      intro-paw-approach 1700ms 250ms both,
      intro-leave 1ms linear 1950ms forwards;
  }

  .has-intro .site-header {
    animation-delay: var(--intro-offset);
  }

  /* Preloader: com JS, a página inteira fica parada no primeiro quadro (pata pequena) até intro.js marcar
     .is-intro-ready (foto da hero e fontes prontas, no máximo 3 s). !important porque o CSS da página, em camada
     posterior, redefine animation e voltaria a rodar. Sem JS não há .has-js e a abertura roda direto. */
  .has-intro.has-js:not(.is-intro-ready) *,
  .has-intro.has-js:not(.is-intro-ready) *::before,
  .has-intro.has-js:not(.is-intro-ready) *::after {
    animation-play-state: paused !important;
  }

  /* Tamanho P da pata; a almofada fica em (50%, 70%) do desenho, ancorada em --intro-anchor */
  @keyframes intro-paw-approach {
    0% {
      -webkit-mask-size: 9vmax 9vmax, 100% 100%;
      mask-size: 9vmax 9vmax, 100% 100%;
      -webkit-mask-position: calc(var(--intro-anchor-x) - 4.5vmax) calc(var(--intro-anchor-y) - 6.3vmax), 0 0;
      mask-position: calc(var(--intro-anchor-x) - 4.5vmax) calc(var(--intro-anchor-y) - 6.3vmax), 0 0;
      animation-timing-function: var(--ease-out);
    }

    35% {
      -webkit-mask-size: 20vmax 20vmax, 100% 100%;
      mask-size: 20vmax 20vmax, 100% 100%;
      -webkit-mask-position: calc(var(--intro-anchor-x) - 10vmax) calc(var(--intro-anchor-y) - 14vmax), 0 0;
      mask-position: calc(var(--intro-anchor-x) - 10vmax) calc(var(--intro-anchor-y) - 14vmax), 0 0;
      animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.3);
    }

    100% {
      -webkit-mask-size: 460vmax 460vmax, 100% 100%;
      mask-size: 460vmax 460vmax, 100% 100%;
      -webkit-mask-position: calc(var(--intro-anchor-x) - 230vmax) calc(var(--intro-anchor-y) - 322vmax), 0 0;
      mask-position: calc(var(--intro-anchor-x) - 230vmax) calc(var(--intro-anchor-y) - 322vmax), 0 0;
    }
  }

  /* from e to iguais: visibility interpolada de visible para hidden fica visible até o fim */
  @keyframes intro-leave {
    from,
    to {
      visibility: hidden;
      opacity: 0;
    }
  }
}