/* ============================================
   YouCar — extra styles
   Complementa Tailwind: scroll reveal, smooth scroll,
   gradient text shine, foco acessível.
   ============================================ */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Scrollbar sutil */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0A0B1E;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4F46E5, #8B5CF6);
  border-radius: 999px;
  border: 2px solid #0A0B1E;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6366F1, #A78BFA);
}

/* Focus visível e elegante */
:focus-visible {
  outline: 2px solid #67E8F9;
  outline-offset: 3px;
  border-radius: 8px;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger natural via nth-child onde aplicável */
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.4s; }

/* Acessibilidade: respeita preferência reduzida */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* Shine sutil em textos com gradient */
.shine-text {
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shine 8s linear infinite;
}
@keyframes shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Removendo a setinha padrão dos <details> */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] summary span:last-child svg { transform: rotate(45deg); }

/* Sticky nav blur reforçado quando scrollou */
#nav.scrolled nav {
  background-color: rgba(10, 11, 30, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px -25px rgba(0, 0, 0, 0.8);
}

/* Selection cor */
::selection {
  background: rgba(139, 92, 246, 0.45);
  color: #fff;
}

/* Tipografia: títulos display ajustados */
.font-display { letter-spacing: -0.02em; }

/* Garante que SVG do mockup não estoure no mobile */
img { max-width: 100%; height: auto; }

/* =========================================
   Elemento UAU: rota traçada no scroll
   SVG cobre toda a altura do documento (absolute);
   serpenteia atrás do conteúdo, com stroke uniforme
   ========================================= */
.route-trail {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 94vw);
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  mix-blend-mode: screen;
}
@media (max-width: 768px) {
  .route-trail {
    width: 100vw;
    opacity: 0.45;
  }
}
/* O path principal arranca invisível e vai sendo "preenchido" pelo JS */
#routePath {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 90ms linear;
  will-change: stroke-dashoffset;
}
/* Dot que cavalga o path */
#routeDot {
  opacity: 0;
  transition: opacity 200ms ease;
}
.route-active #routeDot { opacity: 1; }

/* Garantir que o conteúdo principal fique ACIMA da trilha */
body > header,
body > section,
body > footer { position: relative; z-index: 2; }

/* =========================================
   CUPONS — Scratch & Reveal (crossfade + scale)
   ========================================= */
.coupon { display: block; cursor: pointer; }
.coupon-card {
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 600ms ease;
  position: relative;
}
.coupon:hover .coupon-card {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(99,102,241,0.4);
}
.coupon-front, .coupon-back {
  transition: opacity 450ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1);
}
.coupon-back  { opacity: 0; transform: scale(1.05); pointer-events: none; }
.coupon-front { opacity: 1; transform: scale(1); }

.coupon.is-revealed .coupon-front { opacity: 0; transform: scale(0.96); pointer-events: none; }
.coupon.is-revealed .coupon-back  { opacity: 1; transform: scale(1); pointer-events: auto; }

/* Brilho holográfico animado no cupom */
.coupon-shine {
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,0.15) 45%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.15) 55%,
    transparent 70%);
  background-size: 250% 250%;
  animation: couponShine 7s linear infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@keyframes couponShine {
  0%   { background-position: 200% 50%; }
  100% { background-position: -100% 50%; }
}