/* ═══════════════════════════════════════════════════════════════════
   ANIMATIONS.CSS — Animation layer for luziaverdascaantunes.com
   Companion to js/animations.js
   All motion respects prefers-reduced-motion via JS + CSS
═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CUSTOM CURSOR
   Only on hover-capable, fine-pointer devices
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor {
    cursor: none;
  }
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor [role="button"],
  body.has-custom-cursor .btn,
  body.has-custom-cursor label[for],
  body.has-custom-cursor input,
  body.has-custom-cursor select,
  body.has-custom-cursor textarea {
    cursor: none;
  }

  #cursor-dot {
    position: fixed;
    width: 7px;
    height: 7px;
    background: #4c050d; /* var(--c-accent) */
    border-radius: 50%;
    pointer-events: none;
    z-index: 100001;
    transform: translate(-50%, -50%);
    transition: width 0.15s cubic-bezier(.16,1,.3,1),
                height 0.15s cubic-bezier(.16,1,.3,1),
                background 0.2s ease,
                opacity 0.2s ease;
    will-change: left, top;
  }

  #cursor-ring {
    position: fixed;
    width: 32px;
    height: 32px;
    border: 1.5px solid rgba(76, 5, 13, 0.35);
    border-radius: 50%;
    pointer-events: none;
    z-index: 100000;
    transform: translate(-50%, -50%);
    transition: width 0.22s cubic-bezier(.16,1,.3,1),
                height 0.22s cubic-bezier(.16,1,.3,1),
                border-color 0.2s ease,
                opacity 0.2s ease;
    will-change: left, top;
  }

  /* Hover state — cursor grows on interactive elements */
  body.cursor-hover #cursor-dot {
    width: 12px;
    height: 12px;
    background: #94b1c8; /* var(--c-sage) */
  }
  body.cursor-hover #cursor-ring {
    width: 46px;
    height: 46px;
    border-color: rgba(148, 177, 200, 0.45);
  }

  /* Click state */
  body.cursor-click #cursor-dot {
    width: 5px;
    height: 5px;
  }
  body.cursor-click #cursor-ring {
    width: 24px;
    height: 24px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLL REVEAL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal][data-delay="50"]  { transition-delay: 0.05s; }
[data-reveal][data-delay="100"] { transition-delay: 0.10s; }
[data-reveal][data-delay="150"] { transition-delay: 0.15s; }
[data-reveal][data-delay="200"] { transition-delay: 0.20s; }
[data-reveal][data-delay="250"] { transition-delay: 0.25s; }
[data-reveal][data-delay="300"] { transition-delay: 0.30s; }
[data-reveal][data-delay="400"] { transition-delay: 0.40s; }

/* Reduced motion: fade only, no translate */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transform: none !important;
    transition: opacity 0.4s ease !important;
  }
  [data-reveal][data-delay],
  [data-reveal][data-delay="50"],
  [data-reveal][data-delay="100"],
  [data-reveal][data-delay="150"],
  [data-reveal][data-delay="200"],
  [data-reveal][data-delay="250"],
  [data-reveal][data-delay="300"],
  [data-reveal][data-delay="400"] {
    transition-delay: 0s !important;
  }
  #cursor-dot,
  #cursor-ring {
    display: none;
  }
}

/* No-JS fallback */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HEADER — enhanced on scroll
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.site-header {
  transition: box-shadow 0.35s ease, background-color 0.35s ease;
}
.site-header.header-scrolled {
  box-shadow: 0 2px 28px rgba(26, 9, 5, 0.10);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOCUS RING — preserve through animations
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-reveal]:focus-visible {
  outline: 2px solid #4c050d;
  outline-offset: 4px;
}