/* Casa dos Ursos, loja: o fim da página. Fica à parte do style.css para visual e produtos andarem sem se atropelar.
   Curva que abre o fecho, slogan grande com bombons que sobem sozinhos ao aparecer e o nome gigante no rodapé. */

.pular {
  position: fixed; left: 12px; top: 10px; z-index: 300; padding: 10px 20px; border-radius: 999px;
  background: var(--ouro); color: var(--cacau-900); font-weight: 600; text-decoration: none;
  transform: translateY(-200%); transition: transform .15s var(--ease-out);
}
.pular:focus-visible { transform: none; }

/* ---------------------------------------- fecho */
.fecho {
  position: relative; overflow: hidden; isolation: isolate; color: var(--creme); text-align: center;
  --curva: clamp(54px, 10vw, 150px);
  border-radius: 50% 50% 0 0 / var(--curva) var(--curva) 0 0;
  padding: calc(var(--curva) + clamp(40px, 7vh, 80px)) var(--gut) clamp(90px, 14vh, 170px);
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(232, 194, 122, .2), transparent 70%),
    var(--cacau-950);
  --em: linear-gradient(100deg, #f8e2b0, #e2ae5c 55%, #c07f3c);
}
.fecho .eyebrow { justify-content: center; }
.fecho h2 { max-width: 15ch; margin: 14px auto 0; font-size: clamp(2.6rem, 7.4vw, 6.4rem); }
.fecho__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.fecho__bombons { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fecho__bombons img {
  position: absolute; left: var(--x); bottom: var(--y); width: var(--t); height: auto;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45));
  opacity: 0; transform: translateY(140px) rotate(var(--g));
  transition: opacity .5s calc(var(--k) * 90ms), transform 1.1s var(--ease-out) calc(var(--k) * 90ms);
}
.fecho.vivo .fecho__bombons img { opacity: 1; transform: rotate(calc(var(--g) * -.4)); }

/* ---------------------------------------- nome gigante no rodapé */
.footer { padding: 12px 0 24px; }
.footer__tag { display: none; }
.assinatura {
  margin: clamp(36px, 7vh, 72px) 0 0; padding: 0 var(--gut); overflow: hidden; line-height: .86; white-space: nowrap; text-align: center;
  font-family: var(--f-display); font-weight: 800; font-stretch: 75%; font-variation-settings: 'opsz' 96, 'wdth' 75;
  font-size: calc((100vw - 2 * var(--gut)) / 4.86); letter-spacing: -.02em;
}
.assinatura span {
  display: inline-block; padding: .04em .05em .1em;
  background: linear-gradient(100deg, #f8e2b0, #e2ae5c 45%, #c07f3c 70%, #f0cf8d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  clip-path: inset(100% 0 0 0); transform: translateY(24%);
  transition: clip-path .9s var(--ease-out), transform .9s var(--ease-out);
}
.assinatura.vivo span { clip-path: inset(0 0 0 0); transform: none; }
.footer__legal { margin-top: 26px; }
.footer .ursinho { bottom: 64px; }

/* ---------------------------------------- letras que rolam nos botões: a cópia de baixo é a sombra da própria letra */
.rola { display: inline-flex; height: 1.3em; line-height: 1.3em; overflow: clip; }
.rola i { display: inline-block; font-style: normal; white-space: pre; text-shadow: 0 1.3em currentColor; transition: translate .3s var(--ease-out); transition-delay: calc(var(--c) * 12ms); }
:is(a, button):hover .rola i, :is(a, button):focus-visible .rola i { translate: 0 -1.3em; }

/* ---------------------------------------- esse jardim existe: fotos reais, em pastel, logo depois da fantasia */
.existe {
  position: relative; overflow: hidden; padding: clamp(70px, 11vh, 130px) 0;
  background: linear-gradient(135deg, #ffe4ef 0%, #e6f7ee 48%, #fff2c6 100%);
}
.existe__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.existe__txt h2 { margin: 12px 0 16px; font-size: clamp(2.8rem, 6.4vw, 5.4rem); }
.existe__txt .btn { margin-top: 26px; }
.existe__fotos { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); }
.existe figure {
  margin: 0; padding: 10px 10px 8px; background: #fff; border-radius: 6px; box-shadow: var(--sombra-2);
  opacity: 0; transform: translateY(70px) rotate(calc(var(--g) * 3));
  transition: opacity .5s calc(var(--k) * 90ms), transform 1s var(--ease-out) calc(var(--k) * 90ms);
}
.existe.vivo figure { opacity: 1; transform: rotate(var(--g)); }
.existe figure img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.existe figcaption { padding: 8px 2px 2px; font-family: var(--f-display); font-weight: 600; font-size: clamp(.92rem, 1.4vw, 1.1rem); color: var(--texto); text-align: center; }
.existe .ursinho { right: -6px; bottom: 44%; }

/* ---------------------------------------- as cinco casinhas: uma por loja, com as cores que a equipe já usa */
.casinhas { padding: clamp(70px, 10vh, 120px) 0; background: var(--creme); }
.casinhas h2 { margin: 12px 0 44px; }
.casinhas__lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; align-items: end; }
.casinha {
  position: relative; display: flex; flex-direction: column; min-height: 100%; padding: 20px 16px 18px; --t: clamp(44px, 6vw, 72px); border-radius: 0 0 16px 16px; background: linear-gradient(transparent var(--t), var(--c) var(--t)); color: var(--texto); text-align: center;
  opacity: 0; transform: translateY(46px);
  transition: opacity .45s calc(var(--k) * 80ms), transform .8s var(--ease-out) calc(var(--k) * 80ms);
}
.casinhas.vivo .casinha { opacity: 1; transform: none; }
.casinha__teto { display: block; height: var(--t); margin: -20px -16px 14px; background: linear-gradient(170deg, var(--marrom), var(--marrom-esc)); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.casinha h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 700; }
.casinha p { margin: 6px 0 14px; font-size: .98rem; line-height: 1.35; }
.casinha a { margin-top: auto; align-self: center; padding: 8px 16px; border-radius: 999px; background: var(--cacau-900); color: var(--creme); font-weight: 600; font-size: .92rem; text-decoration: none; }

/* ---------------------------------------- celular: nada que trave a compra */
body:has(#menu:not([hidden])) .nav { z-index: 130; background: transparent; box-shadow: none; }
.intro { transition-duration: .35s; animation: introSai 0s 3s forwards; }
@keyframes introSai { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.sum > div[hidden] { display: none; }
.toast { width: max-content; max-width: calc(100vw - 32px); display: block; text-align: center; border-radius: 18px; }
body:has(.drawer:not([hidden])) .toast { top: 14px; bottom: auto; transform: translate(-50%, -160%); }
body:has(.drawer:not([hidden])) .toast.show { transform: translate(-50%, 0); }
.gift__txt span { width: fit-content; padding: 4px 11px; border-radius: 999px; background: var(--ouro); color: var(--cacau-900); letter-spacing: .1em; }
input[type="search"]::-webkit-search-cancel-button { display: none; }
html { scrollbar-color: var(--caramelo) var(--creme-2); }

/* ---------------------------------------- o ursinho volta para casa: a barra do frete grátis */
#ship .progress { position: relative; overflow: visible; margin: 18px 22px 6px 8px; }
.ship-urso, .ship-casa { position: absolute; top: 50%; width: 26px; height: 26px; translate: -50% -60%; }
.ship-urso { left: 0; z-index: 2; color: var(--marrom); --ico-in: #f4d9b0; transition: left .6s var(--ease-out); }
.ship-casa { left: 100%; color: var(--ok); }
#ship.ok .ship-urso { animation: ursoChega .6s var(--ease-out); }
@keyframes ursoChega { 40% { translate: -50% -110%; } }

@media (max-width: 780px) {
  .fecho { padding-bottom: 150px; }
  .existe__grid { grid-template-columns: 1fr; }
  .casinhas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casinha:last-child { grid-column: 1 / -1; }
  .existe figcaption { font-size: .86rem; }

  .flavor { width: 90vw; }
  .flavors__bar { display: block; z-index: 3; }

  .opt--duo { grid-template-columns: 1fr; }
  .periods { display: flex; width: 100%; }
  .period { flex: 1; height: 52px; padding: 0 6px; font-size: .9rem; }
  .period small { display: block; }

  .modal__img { width: 100%; height: min(30vh, 230px); aspect-ratio: auto; }
  .modal__body { padding: 18px var(--gut) 0; gap: 10px; }
  .modal__buy {
    position: sticky; bottom: 0; z-index: 2; flex-wrap: nowrap; align-items: center; gap: 10px;
    margin: 6px calc(var(--gut) * -1) 0; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background: var(--creme); box-shadow: 0 -10px 24px rgba(42, 23, 16, .12);
  }
  .modal__buy::before { content: attr(data-preco); flex: 1; font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; white-space: nowrap; }
  #m-add { flex: none; padding: 0 18px; font-size: 0; }
  #m-add::before { content: 'Adicionar'; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fecho__bombons img, .assinatura span { transition: none; opacity: 1; clip-path: none; transform: none; }
  .existe figure { transition: none; opacity: 1; transform: rotate(var(--g)); }
  .casinha { transition: none; opacity: 1; transform: none; }
  .ship-urso { transition: none; }
  .intro { transition: none; }
  .rola i { text-shadow: none; translate: none !important; transition: none; }
}