:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-exit-duration: 140ms;
  --motion-swap-duration: 260ms;
}

/* Conteúdo visível por padrão. O JS só ativa o estado inicial oculto depois
   de instalar com sucesso o IntersectionObserver. */
[data-motion] {
  --motion-x: 0px;
  --motion-y: 12px;
  --motion-scale: 1;
  --motion-duration: 440ms;
  opacity: 1;
  transform: none;
}

html.motion-ready [data-motion] {
  transition:
    opacity var(--motion-duration) var(--motion-ease) var(--motion-delay, 0ms),
    transform var(--motion-duration) var(--motion-ease) var(--motion-delay, 0ms),
    clip-path var(--motion-duration) var(--motion-ease) var(--motion-delay, 0ms);
}

html.motion-ready [data-motion]:not(.is-motion-visible) {
  opacity: 0;
  transform: translate3d(var(--motion-x), var(--motion-y), 0) scale(var(--motion-scale));
  transition: none;
}

html.motion-ready [data-motion]:focus,
html.motion-ready [data-motion]:focus-within {
  opacity: 1;
  transform: none;
  transition: none;
}

[data-motion="fade"] {
  --motion-duration: 380ms;
  --motion-y: 4px;
}

[data-motion="photo"] {
  --motion-duration: 600ms;
  --motion-y: 8px;
}

[data-motion="hero-photo"] {
  --motion-duration: 760ms;
  --motion-x: 24px;
  --motion-scale: 1.025;
  --motion-y: 0px;
  clip-path: inset(0 round 12px 0 0 12px);
}

html.motion-ready [data-motion="hero-photo"]:not(.is-motion-visible) {
  clip-path: inset(0 0 0 9% round 12px 0 0 12px);
}

[data-motion="card"] {
  --motion-duration: 470ms;
  --motion-y: 14px;
}

/* Navegação e contatos acompanham o estado sem criar um loop de atenção. */
.mobile-menu {
  transition: opacity 180ms ease, transform 200ms var(--motion-ease), visibility 200ms;
}

.mobile-menu:not(.open) { transition-duration: 160ms; }

#mbar {
  opacity: 0;
  transition: opacity 180ms ease, transform 200ms var(--motion-ease);
}

#mbar.show { opacity: 1; }

/* Estados interativos: troca de serviço, frota, destino e lightbox. */
.solutions-layout.is-changing {
  opacity: 1;
  transform: none;
}

#solutionFeature {
  transition: opacity var(--motion-exit-duration) ease, transform var(--motion-exit-duration) ease;
}

.solutions-layout.is-changing #solutionFeature {
  opacity: 0;
  transform: translateY(6px);
}

#solutionFeature.is-entering > .solution-feature-photo,
#solutionFeature.is-entering > .solution-feature-body {
  animation: solution-feature-enter 220ms var(--motion-ease) both;
}

#solutionFeature.is-entering > .solution-feature-body {
  animation-delay: 25ms;
}

.solutions-layout.is-entering #solutionOptions .solution-tile {
  animation: solution-feature-enter 220ms var(--motion-ease) both;
}

.solutions-layout.is-entering #solutionOptions .solution-tile:nth-child(2) { animation-delay: 30ms; }
.solutions-layout.is-entering #solutionOptions .solution-tile:nth-child(3) { animation-delay: 60ms; }

@keyframes solution-feature-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

#frota .book-panel.active.is-switching > .book-gal,
#frota .book-panel.active.is-switching > .book-info {
  animation: panel-enter var(--motion-swap-duration) var(--motion-ease) both;
}

#frota .book-panel.active.is-switching > .book-info { animation-delay: 35ms; }

#destinos .dest-panel.active.is-switching > .dest-photos,
#destinos .dest-panel.active.is-switching > .dest-info {
  animation: panel-enter var(--motion-swap-duration) var(--motion-ease) both;
}

#destinos .dest-panel.active.is-switching > .dest-info { animation-delay: 35ms; }

#frota .book-slide { transition: opacity 280ms ease; }

/* O layout antigo escondia slides com display:none, impedindo o crossfade. */
#destinos .dest-slide {
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-swap-duration) ease;
}

#destinos .dest-slide.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

@keyframes panel-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.lb {
  opacity: 0;
  pointer-events: none;
  transition: opacity 190ms ease;
}

.lb:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}

.lb.is-closing {
  opacity: 0;
  pointer-events: none;
}

.lb-f img {
  opacity: 0;
  transform: scale(.99) translateY(4px);
  transition: opacity 220ms var(--motion-ease), transform 220ms var(--motion-ease);
}

.lb:not([hidden]):not(.is-closing) .lb-f img {
  opacity: 1;
  transform: none;
}

/* Expansão nativa progressiva: browsers sem ::details-content mantêm o
   comportamento padrão de details/summary sem depender deste efeito. */
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
  html { interpolate-size: allow-keywords; }

  #faq details::details-content,
  #orcamento details::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size 220ms var(--motion-ease),
      content-visibility 220ms allow-discrete;
  }

  #faq details[open]::details-content,
  #orcamento details[open]::details-content {
    block-size: auto;
  }
}

/* Dois loops decorativos, pausados fora da viewport e em abas ocultas. */
#sobre.motion-loop-active::before {
  animation: about-arcs-drift 15s ease-in-out infinite;
}

@keyframes about-arcs-drift {
  0%, 100% { opacity: .72; transform: translateY(-50%) scale(1); }
  50% { opacity: .9; transform: translateY(-50%) scale(1.012); }
}

#destinos .dest-map-mark.motion-loop-active {
  animation: destination-marker-drift 11s ease-in-out infinite;
}

@keyframes destination-marker-drift {
  0%, 100% { opacity: 1; transform: translateY(0) rotate(-7deg); }
  50% { opacity: .86; transform: translateY(-2px) rotate(-7deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html.motion-ready [data-motion],
  html.motion-ready [data-motion]:not(.is-motion-visible) {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.motion-ready [data-motion="hero-photo"] { clip-path: none; }

  #solutionFeature,
  #faq details::details-content,
  #orcamento details::details-content,
  .lb,
  .lb-f img,
  .mobile-menu,
  #mbar,
  #frota .book-slide,
  #destinos .dest-slide { transition: none; }

  #solutionFeature.is-entering > *,
  .solutions-layout.is-entering #solutionOptions .solution-tile,
  #frota .book-panel.active.is-switching > *,
  #destinos .dest-panel.active.is-switching > *,
  #sobre.motion-loop-active::before,
  #destinos .dest-map-mark.motion-loop-active { animation: none; }
}

@media (max-width: 768px) {
  [data-motion="fade"] { --motion-y: 2px; }
  [data-motion="card"], [data-motion="photo"] { --motion-y: 8px; }
  [data-motion="hero-photo"] { --motion-x: 10px; --motion-scale: 1.01; }
}