/* =============================================================
   HOME UX ENHANCEMENTS — Busae
   Capa de mejoras de experiencia sin alterar el diseño base.
   Scope: index.php (cargado solo desde la home).
   ============================================================= */

/* Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }

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

/* ---------- Reading progress bar ---------- */
.scroll_progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #FF7400, #FFA64D);
    z-index: 9999;
    transition: width 0.1s linear;
    pointer-events: none;
}

/* ---------- Scroll reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children on grid sections */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger.is-visible > *:nth-child(1)  { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2)  { transition-delay: 0.10s; }
.reveal-stagger.is-visible > *:nth-child(3)  { transition-delay: 0.15s; }
.reveal-stagger.is-visible > *:nth-child(4)  { transition-delay: 0.20s; }
.reveal-stagger.is-visible > *:nth-child(5)  { transition-delay: 0.25s; }
.reveal-stagger.is-visible > *:nth-child(6)  { transition-delay: 0.30s; }
.reveal-stagger.is-visible > *:nth-child(7)  { transition-delay: 0.35s; }
.reveal-stagger.is-visible > *:nth-child(8)  { transition-delay: 0.40s; }
.reveal-stagger.is-visible > *:nth-child(9)  { transition-delay: 0.45s; }
.reveal-stagger.is-visible > *:nth-child(10) { transition-delay: 0.50s; }
.reveal-stagger.is-visible > *:nth-child(11) { transition-delay: 0.55s; }
.reveal-stagger.is-visible > *:nth-child(12) { transition-delay: 0.60s; }

/* ---------- Micro-interactions: cards & items ---------- */
.service_item,
.product_item,
.reference_item,
.price_item,
.team_item,
.distributor_item {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease;
}

.service_item:hover {
    transform: translateY(-4px);
}

.product_item:hover {
    transform: translateY(-4px);
}

.price_item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(10, 58, 90, 0.12);
}

.team_item:hover {
    transform: translateY(-3px);
}

.team_item img {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.team_item:hover img {
    transform: scale(1.04);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.reference_item:hover {
    transform: translateY(-3px);
}

/* Buttons: subtle press feedback */
a.button,
.product_item .button,
button.submit_button {
    transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

a.button:hover,
.product_item .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    filter: brightness(1.05);
}

a.button:active,
.product_item .button:active,
button.submit_button:active {
    transform: translateY(0);
    filter: brightness(0.95);
}

/* Links micro-feedback */
.main_menu a {
    position: relative;
}

.main_menu a:not(.login-button)::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: -6px;
    height: 2px;
    background: #FF7400;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.main_menu a:not(.login-button):hover::after {
    transform: scaleX(1);
}

.main_menu a:hover {
    text-decoration: none;
}

/* ---------- Accessibility: visible focus ring ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #FF7400;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- Back to top button ---------- */
.back_to_top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #125781;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(10, 58, 90, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease,
                visibility 0.3s ease, background 0.25s ease;
    z-index: 998;
}

.back_to_top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back_to_top:hover {
    background: #0e466a;
    transform: translateY(-2px);
}

.back_to_top svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

/* Avoid overlap with floating WhatsApp on small screens */
@media (max-width: 768px) {
    .back_to_top {
        right: 16px;
        bottom: 78px;
        width: 42px;
        height: 42px;
    }
}

/* ---------- Lazy iframes: smooth fade-in ---------- */
iframe[loading="lazy"] {
    transition: opacity 0.35s ease;
}

/* ---------- Image hint on team & flags ---------- */
.team_item img,
.distributor_front img {
    will-change: transform;
}