/* Movimento nativo: conteúdo visível por padrão e efeitos sem alterar o layout. */
:root{--motion-ease:cubic-bezier(.22,.7,.22,1)}
.hero-line{display:block}
.hero-title-note{display:block;font-size:.41em;line-height:1.4;letter-spacing:-.7px;margin-top:14px}
.hero h1{line-height:1.07}
.hero-photo{border:1px solid #442a210b}
.product-visual{border:1px solid #442a2108}
.button>.icon:last-child,.product-order .icon,.text-link .icon,.instagram-handle>.icon:last-child{transition:transform .25s var(--motion-ease)}
.button:active,.product-order:active{transform:translateY(1px) scale(.98)}
.product-order{transition:background .2s,transform .2s}
.search-field{transition:color .2s}
.search-field:focus-within{color:var(--rose)}
.search-field:focus-within .icon{color:var(--rose)}
.categories button{transition:color .2s,opacity .2s}
.categories button:active{opacity:.6}
.instagram-grid a{transition:transform .45s var(--motion-ease)}

@media(prefers-reduced-motion:no-preference){
  .hero-copy>.eyebrow{animation:soft-enter .6s var(--motion-ease) .05s backwards}
  .hero-line{animation:headline-enter .8s var(--motion-ease) .12s backwards}
  .hero-line:nth-child(2){animation-delay:.22s}
  .hero-title-note{animation:soft-enter .7s var(--motion-ease) .35s backwards}
  .hero-copy>p,.hero-copy>.button,.hero-location{animation:soft-enter .7s var(--motion-ease) .4s backwards}
  .hero-copy>.button{animation-delay:.48s}
  .hero-location{animation-delay:.55s}
  .hero-visual{animation:photo-enter .95s var(--motion-ease) .12s backwards}
  .artisan-seal{animation:seal-enter .8s var(--motion-ease) .5s backwards}
  .handwritten svg path{stroke-dasharray:190;animation:draw-line 1s var(--motion-ease) .65s backwards}

  @supports(animation-timeline:view()){
    .hero-photo img{animation:photo-scroll linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}

@media(hover:hover) and (pointer:fine){
  .button:hover>.icon:last-child,.product-order:hover .icon,.text-link:hover .icon,.instagram-handle:hover>.icon:last-child{transform:translateX(4px)}
  .instagram-grid a:hover{transform:translateY(-5px)}
  .product-image-button:hover img{transform:scale(1.065)}
  .header-contact:hover .icon{transform:rotate(-8deg)}
  .header-contact .icon{transition:transform .25s var(--motion-ease)}
}

@supports(transition-behavior:allow-discrete){
  dialog{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .18s ease-in,transform .22s var(--motion-ease),display .22s allow-discrete,overlay .22s allow-discrete}
  dialog[open]{opacity:1;transform:none}
  dialog::backdrop{background:#25130d00;transition:background-color .22s,display .22s allow-discrete,overlay .22s allow-discrete}
  dialog[open]::backdrop{background:#25130db3}
  @starting-style{
    dialog[open]{opacity:0;transform:translateY(24px) scale(.985)}
    dialog[open]::backdrop{background:#25130d00}
  }
}

@keyframes soft-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes headline-enter{from{opacity:0;transform:translateY(26px) rotate(1deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes photo-enter{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes seal-enter{from{opacity:0;transform:translateY(18px) rotate(-10deg)}to{opacity:1;transform:translateY(0) rotate(-4deg)}}
@keyframes draw-line{from{stroke-dashoffset:190}to{stroke-dashoffset:0}}
@keyframes photo-scroll{from{transform:translateY(0) scale(1.02)}to{transform:translateY(8px) scale(1.08)}}

@media(max-width:760px){.hero-title-note{font-size:.49em;letter-spacing:-.5px;margin-top:12px}.hero h1 .hero-line{display:block}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  dialog{transform:none}
}