/* ============================================================
   Bella Cumbre — Animations
   Load order: … → variables.css → animations.css → main.css

   Centralizes all @keyframes and animation utility classes.
   Component files only consume classes defined here —
   never define @keyframes directly in component stylesheets.
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   @keyframes
   ══════════════════════════════════════════════════════════ */

/* Entrance — fades in while sliding up */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(1.25rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Entrance — fades in in place */
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Number highlight — scale + color pop (countdowns, prices) */
@keyframes num-pulse {
    0%   { transform: scale(1);   color: var(--color-black); }
    40%  { transform: scale(1.1); color: var(--color-olive); }
    100% { transform: scale(1);   color: var(--color-olive); }
}

/* Slide in from the right */
@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(2rem); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Spinner — used for button loading states */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Infinite horizontal scroll — track must be duplicated in HTML for seamless loop */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.marquee {
    overflow:   hidden;
    /* Soft fade on both edges so words appear/disappear smoothly */
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black       8%,
        black       92%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black       8%,
        black       92%,
        transparent 100%
    );
}

.marquee__track {
    display:    flex;
    align-items: center;
    gap:        2rem;
    width:      max-content;
    animation:  marquee 35s linear infinite;
}

/* Pause on hover — gives the user a chance to read */
.marquee__track:hover { animation-play-state: paused; }

.marquee__word {
    font-style:     italic;
    font-weight:    700;
    font-size:      clamp(2rem, 3.5vw, 3rem);
    color:          rgba(255, 255, 255, 0.80);
    white-space:    nowrap;
    letter-spacing: 0.02em;
    user-select:    none;
}

.marquee__sep {
    color:       rgba(255, 255, 255, 0.30);
    font-size:   0.7rem;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
}

/* Status glow — radiates outward and dissolves */
@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--glow-start); }
    50%       { box-shadow: 0 0 8px 6px var(--glow-end); }
}


/* ══════════════════════════════════════════════════════════
   Entrance utilities
   ══════════════════════════════════════════════════════════ */

.animate-fade-up {
    animation: fade-up 0.9s ease both;
}

.animate-fade-in {
    animation: fade-in 0.6s ease both;
}

/* Staggered delay helpers — add alongside .animate-fade-up */
.animate-delay-1 { animation-delay: 0.10s; }
.animate-delay-2 { animation-delay: 0.25s; }
.animate-delay-3 { animation-delay: 0.40s; }
.animate-delay-4 { animation-delay: 0.55s; }
.animate-delay-5 { animation-delay: 0.70s; }
.animate-delay-6 { animation-delay: 0.85s; }

.animate-slide-in-right {
    animation: slide-in-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* ══════════════════════════════════════════════════════════
   Glow dot — status indicator
   Usage:
     <span class="glow-dot glow-dot--primary"></span>  ← open
     <span class="glow-dot glow-dot--danger"></span>   ← closed
   ══════════════════════════════════════════════════════════ */

.glow-dot {
    display:       inline-block;
    flex-shrink:   0;
    width:         9px;
    height:        9px;
    border-radius: 50%;
    animation:     glow-pulse 2s ease-in-out infinite;
}

/* Primary — olive green (local abierto) */
.glow-dot--primary {
    --glow-start: rgba(95, 107, 58, 0.65);
    --glow-end:   rgba(95, 107, 58, 0.00);
    background:   var(--color-olive);
}

/* Danger — rojo (local cerrado) */
.glow-dot--danger {
    --glow-start: rgba(var(--bs-danger-rgb), 0.65);
    --glow-end:   rgba(var(--bs-danger-rgb), 0.00);
    background:   var(--bs-danger);
}


/* ══════════════════════════════════════════════════════════
   Reduced motion — respects user preference
   ══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .animate-fade-up,
    .animate-fade-in {
        animation: none;
        opacity:   1;
        transform: none;
    }

    .glow-dot {
        animation: none;
    }
}