/* ==========================================================================
   Motion — Upgrade Vintage VW's
   Tema: as linhas estruturais da marca se traçam como um friso pintado à mão.
   Só CSS. Conteúdo visível por padrão; animações de scroll apenas onde o
   navegador suporta animation-timeline.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-press: cubic-bezier(0.3, 0, 0.2, 1);
  --dur-press: 90ms;
  --dur-state: 200ms;
  --dur-enter: 700ms;
}

/* --------------------------------------------------------------------------
   Hero: composição única ao carregar
   -------------------------------------------------------------------------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes stamp-in {
  from { clip-path: inset(-0.2em -0.2em 100% -0.2em); transform: translateY(0.12em); }
  to   { clip-path: inset(-0.2em -0.2em -0.3em -0.2em); transform: none; }
}

.hero-eyebrow,
.hero-desc,
.hero-actions,
.hero-media-box {
  animation: rise-in var(--dur-enter) var(--ease-out) both;
}

.hero-title {
  animation: stamp-in 800ms var(--ease-out) 60ms both;
}

.hero-eyebrow   { animation-delay: 0ms; }
.hero-desc      { animation-delay: 180ms; }
.hero-actions   { animation-delay: 260ms; }
.hero-media-box { animation-delay: 340ms; animation-duration: 900ms; }

/* --------------------------------------------------------------------------
   Botões: resposta ao hover e ao toque
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-secondary,
.nav-cta-btn {
  transition:
    background-color var(--dur-state) ease,
    color var(--dur-state) ease,
    transform var(--dur-press) var(--ease-press);
}

.btn-primary:hover,
.btn-secondary:hover,
.nav-cta-btn:hover {
  opacity: 1;
}

@media (hover: hover) {
  .btn-primary:hover,
  .nav-cta-btn:hover {
    background-color: var(--color-toasted-parchment);
  }

  .btn-secondary:hover {
    background-color: rgba(243, 235, 221, 0.12);
  }
}

.btn-primary:active,
.btn-secondary:active,
.nav-cta-btn:active {
  transform: translateY(1px) scale(0.98);
}

/* --------------------------------------------------------------------------
   Links: sublinhado de 2px que assenta sob o texto
   -------------------------------------------------------------------------- */
.nav-link,
.projects-link,
.footer-link,
.address-phone-link {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: transparent;
  text-underline-offset: 8px;
  transition:
    text-decoration-color var(--dur-state) ease,
    text-underline-offset 280ms var(--ease-out),
    opacity var(--dur-state) ease;
}

@media (hover: hover) {
  .nav-link:hover,
  .projects-link:hover,
  .footer-link:hover,
  .address-phone-link:hover {
    opacity: 1;
    text-decoration-color: currentColor;
    text-underline-offset: 4px;
  }

  .site-header .nav-link:hover,
  .site-footer .footer-link:hover,
  .address-phone-link:hover {
    text-decoration-color: var(--color-vintage-sky-tint);
  }
}

.nav-link:focus-visible,
.projects-link:focus-visible,
.footer-link:focus-visible,
.address-phone-link:focus-visible {
  text-decoration-color: currentColor;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Scroll: friso e linhas que se traçam; listas que entram como listas
   -------------------------------------------------------------------------- */
@keyframes draw-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes list-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  /* Faixa tricolor: uma cor de cada vez */
  .tricolor-strip > div {
    transform-origin: left center;
    animation: draw-line linear both;
    animation-timeline: view();
  }
  .tricolor-strip > .stripe-navy { animation-range: cover 0% cover 25%; }
  .tricolor-strip > .stripe-blue { animation-range: cover 5% cover 30%; }
  .tricolor-strip > .stripe-sky  { animation-range: cover 10% cover 35%; }

  /* Fios azul-céu das etapas e do contato */
  .process-step,
  .contact-address-card {
    position: relative;
    border-top-color: transparent;
  }

  .process-step::before,
  .contact-address-card::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-vintage-sky-tint);
    transform-origin: left center;
    animation: draw-line linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 70%;
  }

  .process-step:nth-child(2)::before { animation-range: entry 20% entry 80%; }
  .process-step:nth-child(3)::before { animation-range: entry 30% entry 90%; }
  .process-step:nth-child(4)::before { animation-range: entry 40% entry 100%; }

  /* Listas: serviços, projetos, citações */
  .service-card,
  .project-figure,
  .gallery-figure,
  .review-quote {
    animation: list-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }

  .service-card:nth-child(2),
  .project-figure:nth-child(2),
  .gallery-figure:nth-child(4n+2),
  .review-quote:nth-child(2) { animation-range: entry 10% entry 80%; }

  .service-card:nth-child(3),
  .project-figure:nth-child(3),
  .gallery-figure:nth-child(4n+3),
  .gallery-figure:nth-child(4n),
  .review-quote:nth-child(3) { animation-range: entry 20% entry 90%; }
}

/* --------------------------------------------------------------------------
   Movimento reduzido: sem deslocamento, mantém o feedback de cor
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-eyebrow,
  .hero-title,
  .hero-desc,
  .hero-actions,
  .hero-media-box,
  .tricolor-strip > div,
  .service-card,
  .project-figure,
  .gallery-figure,
  .review-quote,
  .process-step::before,
  .contact-address-card::before {
    animation: none;
  }

  .btn-primary:active,
  .btn-secondary:active,
  .nav-cta-btn:active {
    transform: none;
  }

  .nav-link,
  .projects-link,
  .footer-link,
  .address-phone-link {
    text-underline-offset: 4px;
  }
}

/* ==========================================================================
   Detalhes de precisão
   Cada gesto recebe uma resposta exata e discreta, como peça bem ajustada.
   ========================================================================== */

/* Superfícies do navegador nas cores da marca */
:root {
  --focus-ring: var(--color-vintage-garage-navy);
  scrollbar-color: var(--color-vintage-garage-navy) var(--color-toasted-parchment);
}

.site-header,
.hero-section,
.gallery-section,
.process-section,
.contact-section,
.site-footer {
  --focus-ring: var(--color-vintage-sky-tint);
}

a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: 2px;
}

.site-header ::selection,
.hero-section ::selection,
.gallery-section ::selection,
.process-section ::selection,
.contact-section ::selection,
.site-footer ::selection {
  background-color: var(--color-warm-linen-creme);
  color: var(--color-vintage-garage-navy);
}

/* Toque: a resposta da marca substitui o realce cinza padrão */
a {
  -webkit-tap-highlight-color: transparent;
}

.nav-link:active,
.projects-link:active,
.footer-link:active,
.address-phone-link:active {
  text-decoration-color: currentColor;
  text-underline-offset: 4px;
}

/* Chegada a uma seção pelo menu: folga no topo e um fio sob o título */
section[id] {
  scroll-margin-top: 12px;
}

section[id] .section-h2,
section[id] .contact-h2 {
  position: relative;
}

section[id]:target .section-h2::after,
section[id]:target .contact-h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -14px;
  width: 56px;
  height: 2px;
  background-color: var(--color-aircooled-classic-blue);
  transform-origin: left center;
  animation: draw-line 600ms var(--ease-out) 250ms both;
}

.gallery-section:target .section-h2::after,
.process-section:target .section-h2::after,
.contact-section:target .contact-h2::after {
  background-color: var(--color-vintage-sky-tint);
}

/* Notas medidas: régua fina na proporção real (4,7/5 e 5/5) */
.reviews-metrics-group > div::after {
  content: "";
  display: block;
  width: 7.5rem;
  height: 2px;
  margin-top: 12px;
  background-color: rgba(27, 53, 85, 0.14);
  background-image: linear-gradient(var(--color-vintage-garage-navy), var(--color-vintage-garage-navy));
  background-repeat: no-repeat;
  background-size: var(--score, 100%) 100%;
}

.reviews-metrics-group > div:nth-child(1) { --score: 94%; }
.reviews-metrics-group > div:nth-child(2) { --score: 100%; }

@supports (animation-timeline: view()) {
  @keyframes fill-score {
    from { background-size: 0% 100%; }
  }

  .reviews-metrics-group > div::after {
    animation: fill-score linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
  }
}

/* Carrossel de projetos (celular): a foto central em foco, vizinhas recuadas */
@media (max-width: 640px) {
  .gallery-grid > .gallery-figure {
    animation: none;
  }

  @supports (animation-timeline: view()) {
    @keyframes slide-focus {
      0%, 100% { opacity: 0.55; transform: scale(0.94); }
      50%      { opacity: 1;    transform: none; }
    }

    .gallery-grid > .gallery-figure {
      animation: slide-focus linear both;
      animation-timeline: view(inline);
      animation-range: cover 0% cover 100%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-grid > .gallery-figure {
    animation: none;
  }

  section[id]:target .section-h2::after,
  section[id]:target .contact-h2::after,
  .reviews-metrics-group > div::after {
    animation: none;
  }
}