/* Pediuu — landing page
 * Complementa o Tailwind (utilitário) só com o que ele não cobre bem:
 * blur do header, textura de fundo do hero, o mockup em camadas
 * (monitor + tablet + celular) e as animações de entrada.
 */

/* ---------- header ---------- */
.header-blur {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.header-blur-dark {
  background: #0a121e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.logo-white {
  filter: brightness(0) invert(1);
}

/* ---------- hero com foto de fundo (slideshow) ---------- */
.hero-photo {
  background-size: cover;
  background-position: right center;
}

.hero-scrim {
  background: linear-gradient(
    100deg,
    rgba(6, 9, 18, 0.94) 0%,
    rgba(6, 9, 18, 0.86) 26%,
    rgba(6, 9, 18, 0.55) 46%,
    rgba(6, 9, 18, 0.12) 66%,
    rgba(6, 9, 18, 0) 80%
  );
}

.hero-slide {
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-slide.is-active {
  opacity: 1;
}

/* Todos os slides do desktop ficam na MESMA posição/altura fixa (480px,
   herdada do min-h do bloco de texto do slide 1) — a altura NUNCA muda
   entre slides, pra não "descer"/pular a página a cada troca. Slides
   sem texto (data-text="0") usam a mesma altura com "cover"; as artes
   promocionais (banner2/3) foram desenhadas com margem de sobra em
   cima/embaixo especificamente pra sobreviver a esse corte sem perder
   texto importante. */

.hero-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-slide-img.is-active {
  opacity: 1;
}

.hero-text-overlay {
  transition: opacity 0.8s ease;
}
.hero-text-overlay:not(.is-active) {
  opacity: 0;
  pointer-events: none;
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 20;
}
.hero-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
.hero-dots button.is-active {
  background: #ff6200;
  width: 20px;
}

/* ---------- fundo do hero: pontinhos + glow ---------- */
.hero-bg-dots {
  background-image: radial-gradient(rgba(255, 98, 0, 0.16) 1.6px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 85%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 85%);
}

.hero-glow {
  background: radial-gradient(circle, rgba(255, 138, 0, 0.16), transparent 70%);
  filter: blur(10px);
}

/* ---------- mockup em camadas ---------- */
.monitor-stand {
  width: 120px;
  height: 34px;
  margin-top: -2px;
  background: linear-gradient(180deg, #1a2233, #0d1320);
  clip-path: polygon(38% 0%, 62% 0%, 78% 100%, 22% 100%);
}

.mockup-monitor,
.mockup-tablet,
.mockup-phone {
  transition: transform 0.5s ease;
}

@media (min-width: 1024px) {
  .mockup-monitor { transform: perspective(1600px) rotateY(4deg) rotateX(1deg); }
  .mockup-tablet { transform: perspective(1600px) rotateY(-8deg) rotateX(2deg) translateY(-6px); }
  .mockup-phone { transform: perspective(1600px) rotateY(-6deg); }
}

.pulse-dot { position: relative; }
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid #22c55e;
  animation: pulse-ring 2.2s ease-out infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; }
.reveal[data-reveal="up"] { transform: translateY(28px); }
.reveal[data-reveal="left"] { transform: translateX(-28px); }
.reveal[data-reveal="right"] { transform: translateX(28px); }

.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-float {
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  animation: float-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards, float-idle 4s ease-in-out 1s infinite;
}
@keyframes float-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes float-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---------- cards ---------- */
.card-hover {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(17, 24, 39, 0.18);
  border-color: rgba(255, 98, 0, 0.35);
}

/* ---------- botões: ripple ---------- */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  animation: ripple-anim 0.6s ease-out;
}
@keyframes ripple-anim {
  to { transform: scale(3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-float, .btn-ripple .ripple, .pulse-dot::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}