/* Ouro da Terra · V05. Movimentos curtos, uma entrada por elemento. */
html { scrollbar-gutter: stable; }

.motion-ready [data-reveal] {
  opacity: 0;
  translate: 0 var(--motion-distance, 22px);
  transition:
    opacity 640ms ease var(--motion-delay, 0ms),
    translate 740ms cubic-bezier(.2,.7,.25,1) var(--motion-delay, 0ms),
    rotate 780ms cubic-bezier(.2,.75,.3,1) var(--motion-delay, 0ms),
    scale 780ms cubic-bezier(.2,.75,.3,1) var(--motion-delay, 0ms);
}
.motion-ready [data-reveal="left"] { translate: -22px 0; }
.motion-ready [data-reveal="photo"] { translate: 0 0; scale: 1.035; }
.motion-ready [data-reveal="mascot"] {
  translate: 0 26px;
  rotate: -7deg;
  scale: .96;
  transform-origin: 50% 92%;
}
.motion-ready [data-reveal="bubble"] {
  translate: 0 9px;
  rotate: 4deg;
  scale: .92;
  transform-origin: 50% 100%;
}
.motion-ready [data-reveal].is-revealed {
  opacity: 1;
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
}
.motion-ready .hero-copy h1 em::after {
  scale: 0 1;
  transform-origin: left;
  transition: scale 650ms cubic-bezier(.2,.7,.25,1) 430ms;
}
.motion-ready .hero-copy h1.is-revealed em::after { scale: 1 1; }

/* A trilha permanece legível; o verde acompanha a revelação dos marcos. */
.motion-ready .timeline li { border-color: #17623a28; }
.motion-ready .timeline li::before {
  content: '';
  position: absolute;
  left: 0;
  top: -2px;
  width: 100%;
  height: 2px;
  background: var(--green);
  scale: 0 1;
  transform-origin: left;
  transition: scale 540ms cubic-bezier(.2,.65,.3,1) var(--step-delay, 0ms);
}
.motion-ready .timeline li.is-reached::before { scale: 1 1; }
.motion-ready .timeline .timeline-marker {
  scale: .8;
  opacity: .5;
  transition: scale 440ms cubic-bezier(.2,.9,.3,1.2) var(--step-delay, 0ms), opacity 300ms ease var(--step-delay, 0ms);
}
.motion-ready .timeline li > h3,
.motion-ready .timeline li > p {
  opacity: 0;
  translate: 0 8px;
  transition: opacity 480ms ease calc(var(--step-delay, 0ms) + 90ms), translate 540ms ease calc(var(--step-delay, 0ms) + 90ms);
}
.motion-ready .timeline li.is-reached .timeline-marker { scale: 1; opacity: 1; }
.motion-ready .timeline li.is-reached > h3,
.motion-ready .timeline li.is-reached > p { opacity: 1; translate: 0 0; }

/* O zoom acontece na fotografia, mantendo texto, selos e setas no lugar. */
.product-photo-surface {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: scale(1);
  transition: transform 650ms cubic-bezier(.2,.65,.3,1);
  pointer-events: none;
}
.product-visual:focus-visible .product-photo-surface { transform: scale(1.055); }
.variant-button { transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
.variant-detail { position: relative; }
.variant-previous {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: inherit;
  gap: inherit;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}
.menu-toggle .icon { transition: transform 240ms ease; }
.menu-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }

/* O dialog nativo preserva foco e Escape durante toda a transição. */
.detail-dialog[open] { animation: ouro-dialog-in 280ms cubic-bezier(.2,.7,.25,1); }
.detail-dialog[open]::backdrop { animation: ouro-backdrop-in 260ms ease; }
.detail-dialog[open].is-closing { animation: ouro-dialog-out 180ms ease-in both; }
.detail-dialog[open].is-closing::backdrop { animation: ouro-backdrop-out 180ms ease-in both; }
@keyframes ouro-dialog-in {
  from { opacity: 0; translate: 0 18px; scale: .985; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes ouro-dialog-out {
  from { opacity: 1; translate: 0 0; scale: 1; }
  to { opacity: 0; translate: 0 10px; scale: .99; }
}
@keyframes ouro-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ouro-backdrop-out { from { opacity: 1; } to { opacity: 0; } }

@media (hover: hover) and (pointer: fine) {
  .product-visual:hover .product-photo-surface { transform: scale(1.055); }
}

@media (max-width: 700px) {
  .motion-ready [data-reveal] { --motion-distance: 14px; transition-duration: 480ms, 560ms, 580ms, 580ms; }
  .motion-ready [data-reveal="left"] { translate: 0 14px; }
  .motion-ready [data-reveal="photo"] { translate: 0 0; scale: 1.018; }
  .motion-ready [data-reveal="mascot"] { translate: 0 18px; rotate: -5deg; }
  .motion-ready [data-reveal].is-revealed { translate: 0 0; rotate: 0deg; scale: 1; }
  .motion-ready .timeline li { --step-delay: 0ms !important; }
  .motion-ready .timeline li:last-child { border-left-color: transparent; }
  .motion-ready .timeline li::before { left: -2px; top: 0; width: 2px; height: 100%; scale: 1 0; transform-origin: top; }
  .motion-ready .timeline li.is-reached::before { scale: 1 1; }
  .motion-ready .timeline li:last-child::before { display: none; }
  .nav-enhanced .main-nav {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    clip-path: inset(0 0 100% 0);
    pointer-events: none;
    transition: opacity 180ms ease, transform 240ms ease, clip-path 260ms cubic-bezier(.2,.7,.25,1), visibility 0s 260ms;
  }
  .nav-enhanced .main-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0);
    pointer-events: auto;
    transition: opacity 180ms ease, transform 260ms ease, clip-path 260ms cubic-bezier(.2,.7,.25,1), visibility 0s;
  }
  .nav-enhanced .main-nav > a { opacity: 0; translate: 0 -5px; transition: opacity 160ms ease, translate 200ms ease; }
  .nav-enhanced .main-nav.is-open > a { opacity: 1; translate: 0 0; transition-delay: calc(var(--nav-order, 0) * 25ms + 40ms); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal],
  .motion-ready .timeline li > h3,
  .motion-ready .timeline li > p,
  .motion-ready .timeline .timeline-marker { opacity: 1; translate: none; rotate: none; scale: 1; transition: none; }
  .motion-ready .hero-copy h1 em::after,
  .motion-ready .timeline li::before { scale: 1 1; transition: none; }
  .product-photo-surface,
  .product-visual:hover .product-photo-surface,
  .product-visual:focus-visible .product-photo-surface { transform: none; transition: none; }
  .detail-dialog[open], .detail-dialog[open]::backdrop { animation: none; }
  .nav-enhanced .main-nav, .nav-enhanced .main-nav > a, .menu-toggle .icon { transition: none; }
}