/* ============================================================================
   Biarritz-Box Microanimations
   Lightweight CSS micro-interactions for the reservation flow.
   No external dependencies. Respects prefers-reduced-motion.
   ============================================================================ */

/* ── ROOT ANIMATION TIMING ── */
:root {
    --bb-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --bb-ease-out: cubic-bezier(0.0, 0, 0.2, 1);
    --bb-dur: 0.4s;
    --bb-dur-fast: 0.2s;
    --bb-stagger-base: 80ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. ENTRANCE ANIMATIONS (fade-in-up, fade-in, slide-in-left, scale-in)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes bb-fade-in-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes bb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes bb-scale-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes bb-slide-in-left {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes bb-slide-in-right {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Entrance utility classes
   Note: Use 'backwards' fill-mode for transform animations so the final
   keyframe's transform doesn't permanently override :hover transforms.
   'backwards' applies the from-state during animation-delay, then lets
   the element return to its natural CSS state after completion. */
.bb-animate-in-up    { animation: bb-fade-in-up var(--bb-dur) var(--bb-ease) backwards; }
.bb-animate-fade     { animation: bb-fade-in var(--bb-dur) var(--bb-ease) backwards; }
.bb-animate-scale    { animation: bb-scale-in var(--bb-dur) var(--bb-ease) backwards; }
.bb-animate-slide-l  { animation: bb-slide-in-left var(--bb-dur) var(--bb-ease) backwards; }
.bb-animate-slide-r  { animation: bb-slide-in-right var(--bb-dur) var(--bb-ease) backwards; }

/* Staggered children helpers (set via CSS custom property --bb-i) */
.bb-stagger { animation-delay: calc(var(--bb-i, 0) * var(--bb-stagger-base)); }

/* ═══════════════════════════════════════════════════════════════════════════
   2. PILL STEPPER ENHANCEMENTS (animated line fill, active pulse)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Active step subtle pulse */
@keyframes bb-pill-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(243, 95, 43, 0.3); }
    50%      { box-shadow: 0 0 0 6px rgba(243, 95, 43, 0); }
}

.pill-btn.active {
    animation: bb-pill-pulse 2s ease-in-out infinite;
}

/* Done line fill animation */
@keyframes bb-line-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.pill-line.done-line {
    transform-origin: left center;
    animation: bb-line-fill 0.5s var(--bb-ease-out) both;
}

/* Done checkmark pop */
@keyframes bb-check-pop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.pill-btn.done .pill-num {
    animation: bb-check-pop 0.4s var(--bb-ease) both;
}

/* Stepper entrance */
.pill-track {
    animation: bb-fade-in-up 0.5s var(--bb-ease) backwards;
}

.pill-step {
    animation: bb-fade-in-up 0.4s var(--bb-ease) backwards;
}

.pill-step:nth-child(1) { animation-delay: 0.05s; }
.pill-step:nth-child(2) { animation-delay: 0.15s; }
.pill-step:nth-child(3) { animation-delay: 0.25s; }
.pill-step:nth-child(4) { animation-delay: 0.35s; }
.pill-step:nth-child(5) { animation-delay: 0.45s; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. BUTTON MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pulsing attention animation when a button becomes enabled */
@keyframes bb-btn-attention {
    0%   { transform: scale(1); box-shadow: 0 4px 14px rgba(255, 87, 34, 0.3); }
    50%  { transform: scale(1.04); box-shadow: 0 8px 24px rgba(255, 87, 34, 0.45); }
    100% { transform: scale(1); box-shadow: 0 4px 14px rgba(255, 87, 34, 0.3); }
}

.bb-btn-enabled {
    animation: bb-btn-attention 0.6s var(--bb-ease);
}

/* Active press feedback - scoped to plugin buttons only to avoid
   interfering with theme/Elementor widget dropdowns and flyouts */
.sm-button,
.btn-primary,
.bb-btn {
    position: relative;
    overflow: hidden;
    transition: transform 0.15s var(--bb-ease-out), box-shadow 0.2s ease, background-color 0.2s ease;
}

.sm-button:active,
.btn-primary:active,
.bb-btn:active {
    transform: translateY(1px) scale(0.98);
}

/* Ripple effect on click */
.bb-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: bb-ripple-expand 0.6s var(--bb-ease-out);
    pointer-events: none;
}

@keyframes bb-ripple-expand {
    to { transform: scale(4); opacity: 0; }
}

/* Shimmer sweep on primary CTA buttons */
@keyframes bb-shimmer {
    0%   { transform: translateX(-150%); }
    100% { transform: translateX(150%); }
}

.bb-btn-next,
.btn-primary,
.sm-button {
    position: relative;
    overflow: hidden;
}

.bb-btn-next::before,
.btn-primary::before,
.sm-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: translateX(-150%);
    pointer-events: none;
}

.bb-btn-next:hover::before,
.btn-primary:hover::before,
.sm-button:hover::before {
    animation: bb-shimmer 0.8s var(--bb-ease-out);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. BOX CARD ENTRANCE (staggered fade-in-up for selection grid)
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-box-card {
    animation: bb-fade-in-up 0.4s var(--bb-ease) backwards;
    animation-delay: calc(var(--bb-card-i, 0) * 60ms);
}

/* Home page box cards - backwards fill preserves :hover translateY(-6px) */
.box-card {
    animation: bb-scale-in 0.5s var(--bb-ease) backwards;
}

.box-card:nth-child(1) { animation-delay: 0.1s; }
.box-card:nth-child(2) { animation-delay: 0.2s; }
.box-card:nth-child(3) { animation-delay: 0.3s; }

/* Selected card bounce-in */
@keyframes bb-selected-bounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.bb-box-card.selected {
    animation: bb-selected-bounce 0.3s var(--bb-ease);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. INPUT FOCUS GLOW
   ═══════════════════════════════════════════════════════════════════════════ */

.inputform,
.inputform-xs,
.inputform-xs-margin,
.inputform-xs-margin-fixed,
.bb-switch input + .bb-slider {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.inputform:focus,
.inputform-xs:focus,
.inputform-xs-margin:focus,
.inputform-xs-margin-fixed:focus {
    border-color: #f35f2b;
    box-shadow: 0 0 0 3px rgba(243, 95, 43, 0.12), inset 0 3px 6px rgba(0,0,0,0.1);
    outline: none;
}

/* Select2 focus glow */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #f35f2b;
    box-shadow: 0 0 0 3px rgba(243, 95, 43, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. SCROLL REVEAL (elements with .bb-reveal start hidden, animate in on view)
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s var(--bb-ease), transform 0.5s var(--bb-ease);
}

.bb-reveal.bb-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. TOAST ENTRANCE ENHANCEMENT
   ═══════════════════════════════════════════════════════════════════════════ */

/* Note: Toastify already has its own slide-in animation. We don't override
   it here because Toastify uses transform for positioning (e.g.
   translate(-50%, -50%) for centered toasts), and overriding the animation
   would break the layout. The entrance is already smooth. */

/* ═══════════════════════════════════════════════════════════════════════════
   8. FOOTER ACTION BAR SLIDE-UP
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-footer-action-bar {
    animation: bb-slide-up 0.4s var(--bb-ease) 0.2s both;
}

@keyframes bb-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. SPINNER / LOADER ENHANCEMENT (smoother spin)
   ═══════════════════════════════════════════════════════════════════════════ */

.spinner,
.sm-wait,
.sm-wait-small {
    animation-timing-function: linear !important;
    will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. FEATURED TAG BADGE PULSE (home page)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes bb-badge-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(10, 79, 110, 0.3); }
    50%      { box-shadow: 0 0 16px rgba(10, 79, 110, 0.5); }
}

.featured-tag {
    animation: bb-badge-glow 2.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. REDUCED MOTION: Disable all animations for accessibility
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .bb-reveal {
        opacity: 1;
        transform: none;
    }
}