/* ============================================
   VeloVisa Marketing Site - Enhancements
   Loaded after styles.css on every page. Touch, focus and motion layers that sit
   on top of the base styles; nothing here changes layout, copy or brand colors.
   Sections: Touch -> Focus -> Mobile menu -> Hover on touch -> Motion
   ============================================ */

/* ============================================
   1. TOUCH
   ============================================ */

/* iOS inflates text in landscape unless told not to; pinch zoom is unaffected */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* No double-tap-zoom delay on controls. Panning and pinch zoom still work. */
a,
button,
summary,
label,
input,
textarea {
    touch-action: manipulation;
}

a,
button,
summary {
    -webkit-tap-highlight-color: rgba(24, 20, 15, 0.08);
}

/* ============================================
   2. FOCUS
   ============================================ */

/* --color-focus is 1.0-2.9:1 against the photo and tile bands (footer closing band,
   image heroes). On dark and image bands the ring is cream: 4.7:1 or better. */
:is(.site-footer, .section-dark, .products-hero, .home3-onboarding, .solution-hero-bg,
    .safesport-hero, .faq-hero, .article-cta) :is(a, button, summary):focus-visible,
.article-cta .btn-primary:focus-visible {
    outline-color: var(--color-light);
}

/* ============================================
   3. MOBILE MENU
   ============================================ */

/* The page behind the open menu must not scroll (enhance.js mirrors the menu state here) */
html.menu-open {
    overflow: hidden;
}

.mobile-menu.is-open {
    overscroll-behavior: none;
    padding-left: max(var(--container-padding), env(safe-area-inset-left));
    padding-right: max(var(--container-padding), env(safe-area-inset-right));
    padding-bottom: max(var(--space-32), env(safe-area-inset-bottom));
    animation: dropdown-in 0.15s ease;
}

/* Pull to dismiss (enhance.js): the sheet follows the finger, then settles or leaves */
.mobile-menu.is-dragging {
    animation: none;
    will-change: transform;
}

.mobile-menu.is-settling {
    animation: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ============================================
   4. HOVER ON TOUCH
   A tap leaves :hover applied until the next tap elsewhere, so lifts and tints
   stuck on. Touch-only devices keep the resting state; :active still responds.
   ============================================ */

@media (hover: none) {
    .btn-primary:hover,
    .btn-dark-sm:hover {
        background: var(--color-dark);
        transform: none;
        box-shadow: none;
    }

    .btn-primary-light:hover,
    .article-cta .btn-primary:hover {
        background: var(--color-light);
        transform: none;
        box-shadow: none;
    }

    .btn-outline-light:hover {
        border-color: rgba(237, 232, 219, 0.35);
        background: transparent;
        transform: none;
    }

    .footer-app:hover {
        border-color: rgba(237, 232, 219, 0.28);
        background: transparent;
        transform: none;
    }

    .home-article-card:hover,
    .blog-card:hover,
    .home3-solution a:hover,
    .company-approach article:hover,
    .sport-switch a:hover {
        transform: none;
        box-shadow: none;
    }

    .home-article-card:hover .home-article-image,
    .home3-solution a:hover .home3-solution-img img,
    .related-link:hover,
    .trust-card-link:hover::after {
        transform: none;
    }

    .mobile-menu-link:hover {
        opacity: 1;
    }

    .nav-link:not([aria-current]):hover {
        color: var(--color-dark);
        text-decoration-color: transparent;
    }

    .solutions-menu a:hover,
    details.faq-item summary:hover,
    .section-surface details.faq-item summary:hover {
        background: transparent;
    }

    .section-nav a:not(.is-active):hover {
        background: transparent;
        color: var(--color-paragraph-strong);
    }

    .footer-col a:not([aria-current]):hover,
    .footer-legal a:hover {
        color: #c2beb8;
        text-decoration-color: transparent;
    }

    .footer-social a:hover svg {
        fill: #c2beb8;
    }

    .products-link:hover,
    .products-lane:hover,
    .home3-link-light:hover,
    .home3-security:hover {
        text-decoration-color: transparent;
    }

    .products-lane:hover:not(:focus-visible)::after {
        opacity: 0;
    }

    .article-content a:hover {
        color: var(--color-blue-text);
    }

    .founder-linkedin:hover {
        color: var(--color-paragraph-strong);
    }

    .related-link:hover {
        color: var(--color-dark);
    }
}

/* ============================================
   5. MOTION
   Extends the site's existing language (fade-in-up on scroll, dropdown-in, the
   itinerary route rule). Every rule is inside prefers-reduced-motion: no-preference
   and, where scroll-driven, inside @supports, so the fallback is today's static page.
   ============================================ */

/* Edge fades on the section nav (registered so the scroll timeline can animate them) */
@property --nav-fade-start {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --nav-fade-end {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@media (prefers-reduced-motion: no-preference) {
    /* FAQ answers: the grid-rows reveal in styles.css never ran, because the answer is not
       rendered until the item opens. A starting style gives the transition somewhere to begin. */
    @starting-style {
        details.faq-item[open] .faq-answer {
            grid-template-rows: 0fr;
        }
    }

    @supports (animation-timeline: view()) {
        /* Same fade-in-up as .animate-in, for the blocks that carry no class for it */
        .home3-change-list,
        .home3-solutions-grid,
        .home3-roles,
        .home3-onboarding-grid,
        .home-articles-grid,
        .sport-moment-grid,
        .sport-more-grid,
        .company-values,
        .company-chapters {
            animation: fade-in-up 1s both;
            animation-timeline: view();
            animation-range: entry 0% entry 30%;
        }

        /* Route rule: the itinerary leg draws from origin to destination as its card arrives.
           Heroes are on screen at load, so their rules stay fully drawn. */
        .route-rule::after {
            animation: route-draw linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 28%;
        }

        .products-hero .route-rule::after,
        .solution-hero .route-rule::after,
        .safesport-hero .route-rule::after {
            animation: none;
        }

        @keyframes route-draw {
            from {
                clip-path: inset(0 100% 0 0);
            }
            to {
                clip-path: inset(0 0 0 0);
            }
        }

        /* Section nav: when the row scrolls sideways (phones), fade the edge that has more
           links behind it. No overflow means no active timeline and no mask change. */
        .section-nav ul {
            -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--nav-fade-start), #000 calc(100% - var(--nav-fade-end)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--nav-fade-start), #000 calc(100% - var(--nav-fade-end)), transparent 100%);
            animation: section-nav-fade linear both;
            animation-timeline: scroll(self inline);
        }

        @keyframes section-nav-fade {
            0% {
                --nav-fade-start: 0px;
                --nav-fade-end: 36px;
            }
            10% {
                --nav-fade-start: 36px;
                --nav-fade-end: 36px;
            }
            90% {
                --nav-fade-start: 36px;
                --nav-fade-end: 36px;
            }
            100% {
                --nav-fade-start: 36px;
                --nav-fade-end: 0px;
            }
        }
    }
}

/* Belt and braces with the base stylesheet's reduced-motion block: the menu neither
   animates in nor eases after a pull (it still follows the finger, then snaps). */
@media (prefers-reduced-motion: reduce) {
    .mobile-menu.is-open,
    .mobile-menu.is-settling {
        animation: none;
        transition: none;
    }
}