/* ═══════════════════════════════════════════════════
   L'Acqua Marina — Motion Design Fase 1 Core
   motion.css
═══════════════════════════════════════════════════ */

/* ── Override scroll-behavior nativo (Lenis assume controle) ── */
html {
  scroll-behavior: auto !important;
}

/* ── Reduced motion: zera tudo ── */
@media (prefers-reduced-motion: reduce) {
  .reveal-init,
  .reveal-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  #custom-cursor { display: none !important; }
  html, body, a, button { cursor: auto !important; }
}

/* ── Custom cursor (desktop pointer only) ── */
@media (pointer: fine) {
  html, body, a, button { cursor: none !important; }
}

#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d4af37;
  pointer-events: none;
  z-index: 99999;
  mix-blend-mode: difference;
  transition: width 0.25s cubic-bezier(.16,1,.3,1),
              height 0.25s cubic-bezier(.16,1,.3,1),
              background 0.25s ease,
              border 0.25s ease,
              margin 0.25s ease;
  will-change: transform;
}

#custom-cursor.hover {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1.5px solid #d4af37;
  margin-left: -16px;
  margin-top: -16px;
}

/* ── Scroll reveal ── */
.reveal-init {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(4px);
  transition: opacity 0.8s cubic-bezier(.16,1,.3,1),
              transform 0.8s cubic-bezier(.16,1,.3,1),
              filter 0.8s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform, filter;
}

.reveal-in {
  opacity: 1;
  transform: translateY(0) !important;
  filter: blur(0) !important;
}

/* stagger entre irmãos — aplicado via JS com nth-child */
.reveal-stagger-1 { transition-delay: 0.1s; }
.reveal-stagger-2 { transition-delay: 0.2s; }
.reveal-stagger-3 { transition-delay: 0.3s; }
.reveal-stagger-4 { transition-delay: 0.4s; }

/* ── Nav active indicator ── */
.nav-links a.nav-active,
.mob-link.nav-active,
.hero-side-nav a.nav-active {
  color: #d4af37 !important;
}

.nav-links a.nav-active::after {
  width: 100% !important;
  background: #d4af37 !important;
}

/* Indica item ativo no side nav com glow */
.hero-side-nav a.nav-active {
  opacity: 1 !important;
  text-shadow: 0 0 12px rgba(212,175,55,0.6);
}

/* ── Magnetic items — suaviza o reset ── */
.nav-links a,
.hero-side-nav a,
.mob-link {
  transition-property: transform, color;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(.16,1,.3,1);
}

/* ── Hero logo glow (complementa logoReveal existente) ── */
.hero-logo {
  will-change: filter;
}