/* ============================================================================
   Vehicly Polish — global micro-interactions & hover/focus animations.
   Loaded on every page after the base stylesheets. Desktop-first; mobile gets
   tap-states from mobile-appfeel.css.
   ============================================================================ */

/* =========================================================================
 * 1. Smooth defaults — no more flash-of-unstyled-text, smooth focus rings
 * ======================================================================= */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

:focus-visible {
    outline: 2px solid var(--vh-primary, #F2C94C);
    outline-offset: 2px;
    border-radius: 6px;
    transition: outline-offset .15s ease;
}
/* Buttons get a softer ring */
button:focus-visible,
a:focus-visible {
    outline-offset: 3px;
}

/* Hide focus ring for mouse users (only show on keyboard) */
:focus:not(:focus-visible) { outline: none; }

/* =========================================================================
 * 2. Global hover transitions on interactive elements
 * Only on devices with hover capability — avoids sticky hover on touch.
 * ======================================================================= */
@media (hover: hover) and (pointer: fine) {
    /* Generic button lift on hover */
    button:not(:disabled):not(.tab):not(.vh-mob-tab):not(.vh-mob-cta):not(.pf-tab):not(.opg-chip),
    .btn:not(:disabled),
    .v-btn:not(:disabled) {
        transition: transform .15s cubic-bezier(.22,1,.36,1),
                    box-shadow .2s ease,
                    background-color .15s ease,
                    border-color .15s ease,
                    color .15s ease;
    }
    button:not(:disabled):hover,
    .btn:not(:disabled):hover,
    .v-btn:not(:disabled):hover {
        transform: translateY(-1px);
    }
    button:not(:disabled):active,
    .btn:not(:disabled):active,
    .v-btn:not(:disabled):active {
        transform: translateY(0) scale(0.98);
        transition-duration: .08s;
    }

    /* Card lift on hover */
    .price-card:not(:disabled):not(.is-current):not(.is-dim),
    .credit-pack:not(:disabled),
    .pf-card,
    .pfm-card,
    .opg-item,
    .ana-item,
    .vh-mob-toggle-card,
    .feature-card,
    .testimonial-card,
    [data-vh-card] {
        transition: transform .22s cubic-bezier(.22,1,.36,1),
                    box-shadow .25s ease,
                    border-color .15s ease;
    }
    .price-card:not(.is-current):not(.is-dim):hover,
    .credit-pack:hover,
    .opg-item:hover,
    .ana-item:hover,
    .feature-card:hover,
    .testimonial-card:hover,
    [data-vh-card]:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(17,17,17,.08), 0 3px 10px rgba(17,17,17,.04);
    }

    /* Links — subtle opacity-shift on hover (no underline-grow; rely on native underline) */
    a:not(.btn):not(.v-btn):not(.vh-mob-tab):not(.vh-mob-cta):not(.pfm-row):not(.opg-item-link):not(.plan-btn):not(.vh-skip-link) {
        transition: color .15s ease, opacity .15s ease;
    }
    a:not(.btn):not(.v-btn):not(.vh-mob-tab):not(.vh-mob-cta):not(.pfm-row):not(.opg-item-link):not(.plan-btn):not(.vh-skip-link):hover {
        opacity: 0.78;
    }
}

/* =========================================================================
 * 3. Click ripple — applied by polish.js via .has-ripple class
 * ======================================================================= */
.has-ripple {
    position: relative;
    overflow: hidden;
}
.has-ripple .vh-ripple {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: .22;
    pointer-events: none;
    transform: scale(0);
    animation: vh-ripple .55s cubic-bezier(.4,0,.2,1);
}
@keyframes vh-ripple {
    to {
        transform: scale(2.6);
        opacity: 0;
    }
}

/* =========================================================================
 * 4. Loading button state — button gains data-loading="1"
 * ======================================================================= */
button[data-loading="1"],
.btn[data-loading="1"],
.v-btn[data-loading="1"] {
    pointer-events: none;
    color: transparent !important;
    position: relative;
}
button[data-loading="1"]::after,
.btn[data-loading="1"]::after,
.v-btn[data-loading="1"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,.2);
    border-top-color: currentColor;
    color: var(--vh-text, #1c1917);
    animation: vh-btn-spin .7s linear infinite;
}
@keyframes vh-btn-spin {
    to { transform: rotate(360deg); }
}

/* Success state — checkmark fades in */
button[data-success="1"]::before,
.btn[data-success="1"]::before {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #22C55E;
    font-size: 1.2em;
    font-weight: 800;
    animation: vh-success-pop .42s cubic-bezier(.34,1.56,.64,1) both;
}
button[data-success="1"] {
    color: transparent !important;
    pointer-events: none;
}
@keyframes vh-success-pop {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* =========================================================================
 * 5. Scroll-reveal — elements fade up when scrolled into view
 * polish.js sets data-vh-reveal-ready when in viewport
 * ======================================================================= */
[data-vh-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s cubic-bezier(.22,1,.36,1),
                transform .55s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--vh-reveal-delay, 0ms);
}
[data-vh-reveal][data-vh-reveal-ready] {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    [data-vh-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================================
 * 6. Input field polish — smooth focus transition
 *    Focus ring style moved to ux-consistency.css as single source of truth
 *    (was duplicated here with different values, causing per-page drift).
 *    This block now only provides the transition baseline.
 * ======================================================================= */
input[type="email"]:not(.fl-in):not(.hero-input):not(.chatbar-input),
input[type="text"]:not(.fl-in):not(.hero-input):not(.chatbar-input),
input[type="tel"]:not(.fl-in):not(.hero-input):not(.chatbar-input):not(.code-input),
input[type="url"]:not(.fl-in):not(.hero-input):not(.chatbar-input),
input[type="search"]:not(.fl-in):not(.sidebar-search):not(.hero-input):not(.chatbar-input),
input[type="password"]:not(.fl-in),
input[type="number"],
textarea:not(.ct-textarea) {
    transition: border-color .15s ease, box-shadow .2s ease, background-color .15s ease;
}

/* =========================================================================
 * 7. Image lazy-fade-in — images get .vh-img-loading until loaded
 * ======================================================================= */
img.vh-img-loading {
    opacity: 0;
    transition: opacity .35s ease;
}
img.vh-img-loaded {
    opacity: 1;
}

/* =========================================================================
 * 8. Page-level fade-in for content (no white flash)
 * Wraps the main element. polish.js adds data-vh-content-ready after DOMContentLoaded.
 * ======================================================================= */
main[data-vh-content] {
    opacity: 0;
    animation: vh-content-in .35s ease .05s forwards;
}
@keyframes vh-content-in {
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    main[data-vh-content] {
        opacity: 1;
        animation: none;
    }
}

/* =========================================================================
 * 9. Subtle text-link underline color shift
 * ======================================================================= */
@media (hover: hover) and (pointer: fine) {
    .pfm-row:hover .pfm-row-icon,
    .opg-item:hover .opg-item-ring {
        filter: brightness(1.05);
    }
}

/* =========================================================================
 * 10. Nicer disabled state across the site
 * ======================================================================= */
button:disabled,
input:disabled,
textarea:disabled,
select:disabled,
.btn:disabled,
.v-btn:disabled {
    cursor: not-allowed;
    opacity: .55;
}

/* =========================================================================
 * 11. Mouse hover on logo + topbar links
 * ======================================================================= */
@media (hover: hover) and (pointer: fine) {
    .vh-global-header a:not(.btn):hover,
    .vh-mob-logo:hover,
    .S-logo:hover,
    .ml:hover {
        opacity: 0.85;
    }
    .vh-global-header a,
    .vh-mob-logo,
    .S-logo,
    .ml {
        transition: opacity .15s ease;
    }
}

/* =========================================================================
 * 12. Smooth checkbox + radio interactions
 * ======================================================================= */
input[type="checkbox"],
input[type="radio"] {
    transition: transform .12s ease-out;
    cursor: pointer;
}
input[type="checkbox"]:active,
input[type="radio"]:active {
    transform: scale(0.92);
}

/* =========================================================================
 * 13. Score-ring micro-pulse on hover (result-card)
 * ======================================================================= */
@media (hover: hover) and (pointer: fine) {
    .card-score-ring:hover .card-score-num {
        transform: scale(1.04);
        transition: transform .2s ease;
    }
    .card-score-ring {
        cursor: default;
    }
}

/* =========================================================================
 * 15. Micro-interactions polish pack — globale "premium feel" touches.
 *     Compound effect van kleine details: knop press-scale, focus-ring
 *     duration, link transitions, image fade-in, card lift-consistency.
 *     Allemaal subtle — niet kakelend — maar samen voelt UI levend.
 * ======================================================================= */

/* 15a. Universal button press feedback — geen "harde klik" maar zachte
   scale-down (.98). Alleen op echte buttons, niet op disabled. */
@media (hover: hover) and (pointer: fine) {
    button:not(:disabled):not(.vh-skip-link):active,
    .vh-btn:not(:disabled):active,
    .v-btn:not(:disabled):active,
    .btn:not(:disabled):active,
    a.vh-btn-primary:active,
    a.vh-btn-ghost:active,
    [role="button"]:not([aria-disabled="true"]):active {
        transform: scale(0.98);
    }
}

/* 15b. Tap-highlight uit op iOS (Safari toont een ugly grijze flits) */
button, a, [role="button"] {
    -webkit-tap-highlight-color: transparent;
}

/* 15c. Card-lift consistency — alle "card"-achtige elementen krijgen
   dezelfde subtle 1-2px lift bij hover. Was eerder fragmented:
   -1px op de ene, -2px op de andere, -3px op de derde. */
@media (hover: hover) and (pointer: fine) {
    .vh-card:hover,
    .price-card:hover,
    .feature-card:hover,
    .question-card:hover,
    .pfm-card:hover,
    .ql-card:hover {
        transform: translateY(-2px);
    }
}

/* 15d. Image fade-in (lazyload polish) — voorkomt "pop in" bij images
   die later laden. Class wordt al gezet door bestaande code. */
img.vh-img-loading {
    opacity: 0;
    transition: opacity .4s var(--ease, cubic-bezier(.4,0,.2,1));
}
img.vh-img-loaded {
    opacity: 1;
}

/* 15e. Smooth focus-ring fade — geen instant "harde flits" maar
   zachte fade-in van focus-ring. Geldt voor alle elementen die niet
   al een specifieke transition hebben. */
*:focus-visible {
    transition:
        box-shadow var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1)),
        outline-color var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1));
}

/* 15f. Selection color — honey-soft ipv default blauw. Past in brand. */
::selection {
    background: rgba(242, 201, 76, .28);
    color: var(--vh-text, #1c1917);
}

/* 15g. Subtle hover-lift voor save-heart, score-rings, en andere
   "primary identity" elementen op de result-card */
@media (hover: hover) and (pointer: fine) {
    .card-save-heart:hover,
    .card-act:hover {
        transform: translateY(-1px);
    }
    .card-save-heart:active,
    .card-act:active {
        transform: translateY(0) scale(0.95);
    }
}

/* =========================================================================
 * 14. Reduced motion respect for all of the above
 * ======================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    /* Disable transform-based interactions */
    button:active, .vh-btn:active, .v-btn:active, .btn:active,
    .vh-card:hover, .price-card:hover, .feature-card:hover,
    .question-card:hover, .pfm-card:hover, .ql-card:hover {
        transform: none !important;
    }
}