/* ========================================================================
   Rubicon Eco Car Wash — Camada de MOTION
   Carregada depois de style.css. Só anima transform / opacity / filter.
   Todo o movimento tem um caminho prefers-reduced-motion no fim do ficheiro.
   ======================================================================== */
:root {
  /* Curvas — springs suaves, sem bounce agressivo (marca profissional) */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-soft: cubic-bezier(0.4, 0, 1, 1);
  /* Spring subtil (linear() gerado) para toques com "vida" mas contido */
  --spring-soft: linear(
    0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
    0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
    1.001
  );
  --dur-fast: 160ms;
  --dur-mid: 320ms;
  --dur-slow: 620ms;
}

/* ========================================================================
   1. Barra de progresso de scroll (topo)
   ======================================================================== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cyan), var(--red));
  z-index: 200;
  pointer-events: none;
  will-change: transform;
}

/* ========================================================================
   2. Header — encolhe suavemente ao fazer scroll
   ======================================================================== */
.site-header {
  transition: box-shadow .25s ease, background .3s ease, height .3s var(--ease-out-soft);
}
.site-header.scrolled { height: 62px; }
.brand-logo { transition: height .3s var(--ease-out-soft); }
.site-header.scrolled .brand-logo { height: 38px; }

/* CTA do header e botão de telefone: nudge do ícone + brilho */
.header-cta svg,
.hero-actions .btn svg,
.btn-primary svg { transition: transform .25s var(--ease-out-soft); }
.header-cta:hover svg { transform: rotate(-8deg) scale(1.08); }

/* ========================================================================
   3. Botões — feedback tátil + brilho que atravessa (não-loop)
   ======================================================================== */
.btn { position: relative; overflow: hidden; }
.btn:active { transform: translateY(0) scale(0.97); }

/* Brilho diagonal que passa uma vez no hover */
.btn-primary::after,
.btn-cta::after,
.btn-whatsapp::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-180%) skewX(-18deg);
}
.btn-primary:hover::after,
.btn-cta:hover::after,
.btn-whatsapp:hover::after {
  transition: transform .7s var(--ease-out-soft);
  transform: translateX(320%) skewX(-18deg);
}
/* Ícone da seta/mala avança ligeiramente no hover */
.btn-whatsapp:hover svg { transform: scale(1.06); transition: transform .25s var(--ease-out-soft); }

/* ========================================================================
   4. Hero — entrada com blur, espuma ambiente, indicador de scroll
   ======================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Entrada dos elementos do hero: acrescenta blur ao translate existente */
  html.has-anim .hero-inner > * { animation-name: heroUpBlur; animation-duration: .85s; animation-timing-function: var(--ease-emphasis); }
  @keyframes heroUpBlur {
    from { opacity: 0; transform: translateY(30px); filter: blur(8px); }
    to   { opacity: 1; transform: none;             filter: blur(0); }
  }
}

/* Espuma ambiente (bolhas que sobem devagar) — geradas em js/motion.js */
.hero-foam {
  position: absolute;
  inset: 0;
  z-index: 2;            /* acima do overlay escuro, mas o texto (z-index 2, a seguir no DOM) fica por cima */
  overflow: hidden;
  pointer-events: none;
}
.hero-foam span {
  position: absolute;
  bottom: -12%;
  left: var(--x, 50%);
  width: var(--size, 18px);
  height: var(--size, 18px);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.85), rgba(180,225,245,0.28) 60%, rgba(180,225,245,0) 72%);
  opacity: 0;
  will-change: transform, opacity;
  animation: foamRise var(--dur, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes foamRise {
  0%   { opacity: 0;   transform: translateY(0) translateX(0) scale(0.7); }
  12%  { opacity: .55; }
  70%  { opacity: .45; }
  100% { opacity: 0;   transform: translateY(-115vh) translateX(var(--drift, 20px)) scale(1.05); }
}

/* Indicador "role para baixo" — bob suave, discreto */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.75);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.hero-scroll svg { animation: scrollBob 2.4s var(--ease-out-soft) infinite; }
@keyframes scrollBob {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50%      { transform: translateY(6px); opacity: 1; }
}
@media (max-width: 560px) { .hero-scroll { display: none; } }

/* ========================================================================
   5. Reveal ao scroll — acrescenta blur + curva mais rica
   (o motor em script.js aplica .reveal / .reveal-stagger)
   ======================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.has-anim .reveal {
    opacity: 0;
    transform: translateY(34px);
    filter: blur(6px);
    transition: opacity .7s ease, transform .7s var(--ease-emphasis), filter .7s ease;
  }
  html.has-anim .reveal.visible { opacity: 1; transform: none; filter: blur(0); }

  html.has-anim .reveal-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(5px);
    transition: opacity .6s ease, transform .6s var(--ease-emphasis), filter .6s ease;
  }
  html.has-anim .reveal-stagger.visible > * { opacity: 1; transform: none; filter: blur(0); }
  /* Escalonamento mais fino e mais fundo (até 6 filhos) */
  html.has-anim .reveal-stagger.visible > :nth-child(1) { transition-delay: .04s; }
  html.has-anim .reveal-stagger.visible > :nth-child(2) { transition-delay: .12s; }
  html.has-anim .reveal-stagger.visible > :nth-child(3) { transition-delay: .20s; }
  html.has-anim .reveal-stagger.visible > :nth-child(4) { transition-delay: .28s; }
  html.has-anim .reveal-stagger.visible > :nth-child(5) { transition-delay: .36s; }
  html.has-anim .reveal-stagger.visible > :nth-child(6) { transition-delay: .44s; }

  /* Título de secção: entra um pouco mais amplo que o resto.
     IMPORTANTE: só no estado escondido (:not(.visible)) para não anular o
     reset transform:none do estado .visible (mesma especificidade). */
  html.has-anim .section-title.reveal:not(.visible) { transform: translateY(40px); }
}

/* ========================================================================
   6. Cartões — hover mais fluido + micro-movimento do ícone
   ======================================================================== */
.price-card, .eco-card, .contact-card, .how-card {
  transition: transform .32s var(--spring-soft), box-shadow .32s ease, border-color .25s ease;
}
.price-card:hover, .eco-card:hover, .contact-card:hover, .how-card:hover {
  transform: translateY(-8px);
}
.price-icon, .eco-icon, .contact-icon, .how-num {
  transition: transform .35s var(--spring-soft);
}
.price-card:hover .price-icon { transform: translateY(-2px) scale(1.08) rotate(-4deg); }
.eco-card:hover .eco-icon     { transform: translateY(-2px) scale(1.06) rotate(3deg); }
.contact-card:hover .contact-icon { transform: scale(1.08); }
.how-card:hover .how-num      { transform: scale(1.1) rotate(-6deg); }

/* Valor do preço reage ao hover do cartão */
.price-value { transition: transform .3s var(--spring-soft), color .2s ease; transform-origin: left center; }
.price-card:hover .price-value { transform: scale(1.06); }

/* ========================================================================
   7. Tabs de preços — indicador deslizante + crossfade dos painéis
   ======================================================================== */
.tabs { position: relative; }
.tab-ind {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  border-radius: 999px;
  background: var(--navy);
  z-index: 0;
  transform: translateX(var(--ind-x, 0)) ;
  width: var(--ind-w, 0);
  transition: transform .42s var(--spring-soft), width .42s var(--spring-soft);
  pointer-events: none;
}
:root[data-theme="dark"] .tab-ind { background: var(--navy-light); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tab-ind { background: var(--navy-light); } }
.tab { position: relative; z-index: 1; transition: color .25s ease; }
/* Só entregamos o fundo ao indicador SE ele existir (JS correu). Caso
   contrário, o separador ativo mantém o fundo navy original (fallback). */
.tabs:has(.tab-ind) .tab.active { background: transparent; }

/* Painel que entra: crossfade + leve subida + stagger dos cartões */
@media (prefers-reduced-motion: no-preference) {
  .tab-panel:not([hidden]) { animation: panelIn .45s var(--ease-emphasis) both; }
  @keyframes panelIn {
    from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
    to   { opacity: 1; transform: none;            filter: blur(0); }
  }
  .tab-panel:not([hidden]) .price-card { animation: cardIn .5s var(--ease-out-soft) both; }
  .tab-panel:not([hidden]) .price-card:nth-child(1) { animation-delay: .02s; }
  .tab-panel:not([hidden]) .price-card:nth-child(2) { animation-delay: .07s; }
  .tab-panel:not([hidden]) .price-card:nth-child(3) { animation-delay: .12s; }
  .tab-panel:not([hidden]) .price-card:nth-child(4) { animation-delay: .17s; }
  .tab-panel:not([hidden]) .price-card:nth-child(5) { animation-delay: .22s; }
  @keyframes cardIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ========================================================================
   8. Formulários — foco, calendário, resumo
   ======================================================================== */
.form-field input,
.form-field select,
.form-field textarea,
.date-display {
  transition: border-color .2s ease, box-shadow .25s var(--ease-out-soft), transform .2s var(--ease-out-soft);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { transform: translateY(-1px); }

/* Calendário abre a partir do topo */
@media (prefers-reduced-motion: no-preference) {
  .calendar:not([hidden]) {
    transform-origin: top center;
    animation: popIn .34s var(--ease-emphasis) both;
  }
  @keyframes popIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); filter: blur(4px); }
    to   { opacity: 1; transform: none;                        filter: blur(0); }
  }
  /* Resumo do total: aparece a deslizar */
  .booking-summary:not([hidden]) { animation: summaryIn .4s var(--ease-emphasis) both; }
  @keyframes summaryIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  /* Estado (sucesso/erro) da marcação */
  .booking-status:not([hidden]) { animation: summaryIn .4s var(--ease-emphasis) both; }
}
.cal-day { transition: background .12s ease, color .12s ease, transform .18s var(--spring-soft); }
.cal-day:hover:not(:disabled) { transform: scale(1.12); }
.cal-day.selected { animation: dayPop .3s var(--spring-soft); }
@keyframes dayPop {
  0% { transform: scale(0.8); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ========================================================================
   9. Navegação — link ativo (scrollspy) com sublinhado animado
   ======================================================================== */
.main-nav a.active { color: var(--text); }
.main-nav a.active::after { transform: scaleX(1); }

/* Menu mobile: links entram escalonados quando abre */
@media (max-width: 900px) {
  @media (prefers-reduced-motion: no-preference) {
    .main-nav.open a { animation: navLinkIn .35s var(--ease-out-soft) both; }
    .main-nav.open a:nth-child(1) { animation-delay: .02s; }
    .main-nav.open a:nth-child(2) { animation-delay: .06s; }
    .main-nav.open a:nth-child(3) { animation-delay: .10s; }
    .main-nav.open a:nth-child(4) { animation-delay: .14s; }
    .main-nav.open a:nth-child(5) { animation-delay: .18s; }
    .main-nav.open a:nth-child(6) { animation-delay: .22s; }
    @keyframes navLinkIn {
      from { opacity: 0; transform: translateX(-10px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ========================================================================
   10. Mapa + notice — leve destaque no hover
   ======================================================================== */
.map-wrap { transition: box-shadow .3s ease, transform .3s var(--ease-out-soft); }
.map-wrap:hover { transform: translateY(-3px); }

/* ========================================================================
   PREFERS-REDUCED-MOTION — desliga tudo o que é ambiente/decorativo
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-foam { display: none; }
  .hero-scroll svg { animation: none; }
  .scroll-progress { display: none; }
  .btn-primary::after, .btn-cta::after, .btn-whatsapp::after { display: none; }
  .tab-ind { transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}