/* Sections da página, na ordem do frame Home (Figma, página UI Design). Medidas de referência: desktop 1440 × 900. */

/* ───────── topo ───────── */
/* Fixo na tela. No topo ocupa a largura toda; ao rolar encolhe até a largura do conteúdo das sections
   (page-max menos o respiro lateral) e vira uma barra de vidro. Em section clara o texto fica marrom. */
.nav {
  position: fixed; z-index: 2000; top: 0; left: 50%; translate: -50% 0;
  width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px;
  padding: 22px var(--gutter); border-radius: 0;
  color: var(--text-on-dark); background: rgba(255, 246, 228, 0); border: 1px solid transparent;
  transition: width 600ms var(--ease-out), translate 600ms var(--ease-out), padding 600ms var(--ease-out), border-radius 600ms var(--ease-out),
    background-color 400ms ease, border-color 400ms ease, box-shadow 400ms ease, color 300ms ease;
}
.nav.is-compacto {
  translate: -50% 14px; width: min(calc(100% - 2 * var(--gutter)), calc(var(--page-max) - 2 * var(--gutter)));
  padding: 10px 10px 10px 22px; border-radius: var(--radius-full);
  background: rgba(29, 10, 4, .55); border-color: rgba(255, 246, 228, .14);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 10px 30px -14px rgba(29, 10, 4, .5);
}
.nav.is-compacto.is-claro { color: var(--text-primary); background: rgba(255, 246, 228, .78); border-color: rgba(58, 26, 16, .12); box-shadow: 0 10px 30px -16px rgba(58, 26, 16, .35); }
.nav .nav__logo, .nav .nav__links { transition: scale 600ms var(--ease-out); }
.nav.is-compacto .nav__logo { scale: .9; transform-origin: left center; }
.nav__logo { justify-self: start; } .nav > .btn { justify-self: end; }
@media (prefers-reduced-motion: reduce) { .nav { transition: background-color 200ms ease, color 200ms ease; } }
/* sombra de chocolate com desfoque que some pra baixo, pra o menu ler em cima da foto */
.nav__shade {
  position: absolute; z-index: 9; inset: 0 0 auto 0; height: 186px; pointer-events: none;
  background: linear-gradient(180deg, rgba(29, 10, 4, .7) 0%, rgba(58, 26, 16, 0) 100%);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%); mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}
.nav__logo { display: flex; align-items: center; gap: 10px; font: 400 26px/1.5 var(--font-display); letter-spacing: -0.01em; }
.nav__logo img { width: 60px; height: 38px; object-fit: contain; }
.nav__links { display: flex; gap: 26px; justify-self: center; font: 600 15px/1.5 var(--font-body); }
.nav__links a { position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover::after { transform: scaleX(1); } }

/* ───────── 01 · Hero ───────── */
.hero { position: relative; height: 100vh; min-height: 700px; max-height: 1000px; overflow: hidden; background: var(--bg-dark); }
/* recorte igual ao Figma: foto ampliada, cachorro à direita e a bola embaixo */
/* foto estendida no Magnific pra esquerda: a moça e o spitz ficam à direita, longe do texto.
   Fotos anteriores: hero-cachorro-bola*, hero-feliz* */
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 100% 45%; transform: scale(1.06); transform-origin: 70% 50%; }
/* sombra à esquerda: a loja é colorida, o título precisa de contraste */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(30, 14, 8, .35) 0%, rgba(30, 14, 8, 0) 45%); }
.hero.is-in .hero__bg { transform: none; transition: transform 2200ms var(--ease-out); }

.hero__content {
  position: absolute; z-index: 2; left: 10.2%; top: 31.3%;
  display: flex; flex-direction: column; align-items: flex-start;
  color: var(--text-on-dark);
}
.hero .status { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); color: var(--text-on-dark); }
.hero__title { margin: 18px 0 26px; }
.hero__title .l > span { white-space: nowrap; }
/* palavra destacada: pílula laranja que gruda torta depois que a linha sobe */
.hero__hl {
  /* vertical-align top + margem negativa: a pílula não empurra a segunda linha */
  display: inline-block; line-height: 1.02; vertical-align: top; padding: .03em .1em; margin: -.03em 0 -.03em .04em; border-radius: .45em;
  background: var(--orange-400); color: var(--text-on-dark);
  transform: rotate(0deg) scale(.92); transform-origin: 50% 60%;
}
/* palavra que troca dentro da pílula: a pílula estica pra largura da palavra nova */
.hero__hl { position: relative; overflow: hidden; text-align: center; transition: width 500ms var(--ease-out); }
.hl__w { display: inline-block; white-space: nowrap; }
.hl__w.sai { position: absolute; left: 0; right: 0; animation: hlSai 420ms var(--ease-out) forwards; }
.hl__w.entra { animation: hlEntra 520ms var(--ease-out) both; }
@keyframes hlSai { to { transform: translateY(-105%); opacity: 0; } }
@keyframes hlEntra { from { transform: translateY(105%); opacity: 0; } }
.hero.is-in .hero__hl { transform: rotate(-3deg); transition: transform 700ms cubic-bezier(.34, 1.56, .64, 1) 520ms; }
.hero__sub { max-width: 416px; margin-bottom: 22px; line-height: 1.5; }
.hero__proof { display: flex; align-items: center; gap: 8px; margin-top: 17px; font: 600 13.5px/1.5 var(--font-body); color: var(--white); }

/* etiquetas soltas em volta do título, coladas como adesivo; seguem um pouco o mouse e dá pra puxar (voltam com mola ao soltar) */
.hero__sticker {
  position: absolute; z-index: 3; left: var(--x); top: var(--y);
  translate: calc(-50% + var(--mx, 0) * var(--depth) * 1px + var(--dx, 0px)) calc(-50% + var(--my, 0) * var(--depth) * 1px + var(--dy, 0px));
  rotate: calc(var(--r) + var(--dr, 0deg)); opacity: 0; scale: .7;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: translate 600ms var(--ease-out), rotate 600ms var(--ease-out);
}
.hero.is-in .hero__sticker { opacity: 1; scale: 1; transition: opacity 300ms var(--ease-out) var(--d), scale 600ms cubic-bezier(.34, 1.56, .64, 1) var(--d), translate 600ms var(--ease-out), rotate 600ms var(--ease-out); }
/* puxando: segue o dedo sem atraso e cresce um tiquinho, como adesivo descolando */
.hero.is-in .hero__sticker.is-pulling { cursor: grabbing; scale: 1.06; z-index: 4; transition: scale 200ms var(--ease-out); }
/* soltou: volta pro lugar com mola */
.hero.is-in .hero__sticker.is-back { transition: translate 750ms cubic-bezier(.34, 1.7, .5, 1), rotate 750ms cubic-bezier(.34, 1.7, .5, 1), scale 300ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .hero__bg, .hero__hl { transform: none !important; }
  .hero__hl { rotate: -3deg; }
  .hero__sticker { scale: 1; translate: -50% -50%; transition: opacity 300ms ease !important; cursor: default; }
}