/* ═══════════════════════════════════════════════
   interactive.css — Estilos de micro-interacciones
   (cursor custom, toasts, scroll progress, marquee, ripple)
═══════════════════════════════════════════════ */

/* ── SCROLL PROGRESS BAR ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--amarillo) 0%, var(--naranja) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.85;
}

/* ── CURSOR CUSTOM ── */
.acg-cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 0.2s;
  will-change: transform;
}
.acg-cursor-dot {
  width: 6px; height: 6px;
  background: var(--amarillo);
  border-radius: 50%;
  mix-blend-mode: difference;
}
.acg-cursor-ring {
  width: 34px; height: 34px;
  border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: 50%;
  mix-blend-mode: difference;
  transition: width 0.28s ease, height 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}
.acg-cursor-hover {
  width: 56px; height: 56px;
  border-color: var(--amarillo);
  background: rgba(245,157,31,0.08);
}
.acg-cursor-press {
  transform: translate(-50%, -50%) scale(0.4) !important;
  background: var(--naranja) !important;
}

/* Ocultar cursor nativo cuando el custom está activo */
.has-custom-cursor,
.has-custom-cursor * {
  cursor: none !important;
}
/* Excepciones donde el cursor nativo tiene sentido (inputs, textareas) */
.has-custom-cursor input,
.has-custom-cursor textarea,
.has-custom-cursor [contenteditable] {
  cursor: text !important;
}

/* En touch devices no hay cursor custom — garantía extra */
@media (hover: none) {
  .acg-cursor { display: none !important; }
  .has-custom-cursor,
  .has-custom-cursor * { cursor: auto !important; }
}

/* ── TOAST ── */
.acg-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  max-width: 360px;
  padding: 1rem 1.3rem;
  background: var(--gris-oscuro);
  border: 1px solid rgba(245,157,31,0.35);
  border-radius: var(--radius-md);
  color: var(--blanco);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
  z-index: 10000;
  opacity: 0;
  transform: translateY(60px);
  pointer-events: none;
}
.acg-toast[data-type="success"] {
  border-color: rgba(134,191,61,0.4);
}
.acg-toast[data-type="error"] {
  border-color: rgba(232,61,25,0.5);
}

/* ── MARQUEE ── */
.marquee {
  overflow: hidden;
  width: 100%;
  padding: 1rem 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: var(--negro);
}
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  padding: 0 1.75rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 700;
  color: var(--texto-claro);
  letter-spacing: -0.01em;
}
.marquee-item::after {
  content: '·';
  display: inline-block;
  margin-left: 1.75rem;
  color: var(--amarillo);
  font-style: normal;
  opacity: 0.7;
}
.marquee-item:last-child::after { content: ''; margin: 0; }

/* Variante: marquee con dirección inversa */
.marquee-reverse .marquee-track {
  animation-direction: reverse;
}

/* ── RIPPLE EFFECT en botones ── */
.btn-primary, .btn-ghost, .btn-ar, .nav-cta {
  position: relative;
  overflow: hidden;
}
.acg-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transform: scale(0);
  animation: acg-ripple-anim 0.6s ease-out;
  pointer-events: none;
}
@keyframes acg-ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* ── CARD TILT (preserve-3d se pone inline desde JS) ── */
.home-descubre-card,
.sf-edicion-card,
.about-card,
.e25-piece {
  will-change: transform;
  transition: box-shadow var(--dur-base) var(--ease-out);
}

/* ── VIEW TRANSITIONS API (nativa) ── */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  ::view-transition-old(root) {
    animation-name: vt-fade-out;
  }
  ::view-transition-new(root) {
    animation-name: vt-fade-in;
  }
  @keyframes vt-fade-out { to { opacity: 0; transform: translateY(-8px); } }
  @keyframes vt-fade-in  { from { opacity: 0; transform: translateY(8px); } }
}

/* ── Reduce motion: desactivar todo ── */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .acg-cursor,
  .acg-toast { display: none !important; }
  .marquee-track { animation: none !important; transform: none !important; }
}