/*
 * Andressa Belentani Makeup: estilos dos efeitos premium (usados por premium.js).
 * Só valem quando o premium.js adiciona a classe .ab-motion, ou seja,
 * nunca com movimento reduzido nem se o script não carregar.
 */

:root {
  --ab-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* A rolagem suave é feita pelo premium.js; o CSS não pode suavizar por cima */
html.ab-smooth {
  scroll-behavior: auto !important;
}

/* ---------- Linha dourada de progresso no topo ---------- */

.ab-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;
  height: 5px;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(var(--ab-progress, 0));
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light), var(--color-cocoa));
}

/* ---------- Títulos: palavra por palavra, saindo de um desfoque ---------- */

.ab-motion .ab-word {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(0.25em);
  transition:
    opacity 1.3s var(--ab-ease) calc(var(--i) * 60ms),
    filter 1.5s var(--ab-ease) calc(var(--i) * 60ms),
    transform 1.5s var(--ab-ease) calc(var(--i) * 60ms);
}

.ab-motion .ab-words.is-visible .ab-word {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* ---------- Imagens: revelação com fade e zoom suave (sem desfoque) ---------- */

.ab-motion .ab-unveil .ab-unveil-target {
  opacity: 0;
  transform: scale(1.05);
  transition:
    opacity 1.6s var(--ab-ease),
    transform 2.4s var(--ab-ease),
    scale 0.7s var(--ab-ease); /* mantém o zoom do hover dos cards */
}

.ab-motion .ab-unveil.is-visible .ab-unveil-target {
  opacity: 1;
  transform: none;
}

/* ---------- Estrelas: brilho delicado ---------- */

@keyframes ab-twinkle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.82) rotate(15deg);
  }
}

@keyframes ab-drift {
  to {
    transform: rotate(360deg);
  }
}

.ab-motion svg:has(> path[d^="M12 0c.6"]) {
  transform-origin: 50% 50%;
  animation: ab-twinkle 5s ease-in-out infinite;
}

/* Estrelas das faixas: brilham em momentos diferentes */
.ab-motion span:nth-child(3n + 2) > svg:has(> path[d^="M12 0c.6"]) {
  animation-delay: -1.7s;
}

.ab-motion span:nth-child(3n) > svg:has(> path[d^="M12 0c.6"]) {
  animation-delay: -3.4s;
}

/* Estrelas grandes de fundo: estáticas (sem giro e sem brilho) */
.ab-motion section > svg.\-z-10:has(> path[d^="M12 0c.6"]) {
  animation: none;
}

/* ---------- Botões: reflexo de luz ---------- */

@keyframes ab-gleam {
  from {
    transform: skewX(-20deg) translateX(0);
  }
  to {
    transform: skewX(-20deg) translateX(420%);
  }
}

/* Repete a cada 7s: o reflexo passa nos primeiros 18% e o resto é pausa */
@keyframes ab-gleam-idle {
  0% {
    transform: skewX(-20deg) translateX(0);
  }
  18%,
  100% {
    transform: skewX(-20deg) translateX(420%);
  }
}

.ab-motion a[class*="rounded-full"][class*="px-7"],
.ab-motion .svc-card__cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ab-motion a[class*="rounded-full"][class*="px-7"]::after,
.ab-motion .svc-card__cta::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  z-index: -1;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg) translateX(0);
}

.ab-motion a[class*="rounded-full"][class*="px-7"]:hover::after,
.ab-motion .svc-card:hover .svc-card__cta::after {
  animation: ab-gleam 1.3s var(--ab-ease);
}

/* Botão principal da hero: o reflexo passa sozinho de tempos em tempos */
.ab-motion .hero-photo a[class*="rounded-full"][class*="px-7"]::after {
  animation: ab-gleam-idle 7s var(--ab-ease) 2.2s infinite;
}