/* ─── animations.css ─────────────────────────────────────────────
   Motion layer separado do styles.css.
   Contém: splash, hero entrance, scroll reveal, micro-interações.
─────────────────────────────────────────────────────────────────── */

/* ─── Splash — logo blur-to-sharp com glow âmbar ────────────── */

/* Glow radial sob o logo */
.splash-glow {
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(181,129,60,0.18) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
  pointer-events: none;
  z-index: 0;
}

/* Logo: blur → sharp */
.splash-logo {
  opacity: 0;
  transform: scale(1.08);
  filter: blur(12px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Nome: fade + slide up */
.splash-name {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s ease 0.35s, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s;
}

/* Especialidade: stagger após nome */
.splash-specialty {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease 0.55s, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.55s;
}

/* Linha: expande */
.splash-line {
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}

/* Cortinas: ease mais dramático */
.splash-curtain--top    { transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1); }
.splash-curtain--bottom { transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1) 0.08s; }

/* ── Estado: reveal ── */
.splash.reveal .splash-glow {
  transform: translate(-50%, -50%) scale(1);
}

.splash.reveal .splash-logo {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
}

.splash.reveal .splash-name,
.splash.reveal .splash-specialty {
  opacity: 1;
  transform: translateY(0);
}

.splash.reveal .splash-line {
  width: clamp(80px, 14vw, 140px);
}


/* ─── Hero entrance — stagger por elemento ───────────────────── */

/* Default: sem animação (aguarda .hero-ready no body) */
.hero-left .eyebrow,
.hero-title,
.hero-name-line,
.hero-description,
.hero-features,
.hero-actions,
.hero-right img {
  animation: none;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroPhotoReveal {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0% 0 0 0); }
}

body.hero-ready .hero-left .eyebrow {
  animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
body.hero-ready .hero-title {
  animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
body.hero-ready .hero-name-line {
  animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
body.hero-ready .hero-description {
  animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
body.hero-ready .hero-features {
  animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}
body.hero-ready .hero-actions {
  animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}
body.hero-ready .hero-right img {
  animation: heroPhotoReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}


/* ─── Scroll Reveal — reveal-item com stagger ────────────────── */
.reveal-item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-item.visible {
  opacity: 1;
  transform: none;
}


/* ─── Nav link — underline que cresce ───────────────────────── */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.25s ease;
}
.nav-link:hover::after { width: 100%; }


/* ─── Botão shimmer no hover ─────────────────────────────────── */
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.12), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}
.btn:hover::after { left: 140%; }


/* ─── Specialty card — linha dourada que cresce no hover ──────── */
.specialty-card::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.specialty-card:hover::before { width: 100%; }