/* ==========================================================================
   Site-wide motion layer (paired with js/motion.js)
   --------------------------------------------------------------------------
   - Only transform/opacity are animated (compositor-friendly, mostly mobile users)
   - Hidden states are gated behind html.js so nothing is hidden without JS
   - Keep the auto-reveal selector list in sync with AUTO_REVEAL in js/motion.js
   - style.css collapses animations under prefers-reduced-motion; end states
     below are complete so the pages look right there too
   ========================================================================== */

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 2000;
    background: linear-gradient(90deg, var(--primary) 0%, var(--success) 100%);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

[dir="rtl"] .scroll-progress {
    transform-origin: 100% 50%;
}

/* ---------- Reveal on scroll ---------- */
/* :where() keeps the hidden state at low specificity so .is-visible always wins */
.js :where([data-reveal]),
.js :where(
    .workshops-main .garage-card,
    .city-main .garage-card,
    .city-main .row.g-4 > [class*="col-"],
    .workshop-detail-main .card,
    .workshop-detail-main .info-box,
    .details-wrapper .selection-card,
    .details-wrapper .region-card,
    .details-wrapper .manufacturer-card,
    .details-wrapper .model-card,
    .auth-main .card,
    .result-page-results .card,
    .result-page-results .alert,
    .blog-article .content-section,
    .blog-article .table-of-contents,
    .blog-article .final-cta,
    .blog-article .related-articles,
    .articles-grid .article-card,
    .cta-section,
    .privacy-page main .card
) {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Hover transitions must not fight the reveal transition once it has finished */
.js .garage-card.is-visible,
.js .article-card.is-visible,
.js .region-card.is-visible,
.js .manufacturer-card.is-visible,
.js .model-card.is-visible {
    transition-delay: 0s;
    transition-duration: 0.25s;
}

/* ---------- Page heading entrance (pure CSS) ---------- */
@keyframes pageRise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.workshops-main .page-title,
.workshop-detail-main .page-head,
.city-main .city-hero,
.details-hero,
.blog-index-header,
.blog-post-header,
.blog-article .article-header,
.result-page-search-card,
.auth-main h1 {
    animation: pageRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.workshops-main .filter-card,
.city-main .card.border-primary,
.details-wrapper .step-indicator,
.category-filters {
    animation: pageRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

/* ---------- Card hover polish ---------- */
.garage-card,
.article-card,
.region-card,
.manufacturer-card,
.model-card {
    will-change: auto;
}

.garage-card:hover,
.article-card:hover {
    box-shadow: 0 16px 34px rgba(var(--shadow-color, 11, 37, 69), 0.14) !important;
}

/* ---------- Count-up numbers ---------- */
[data-countup] {
    font-variant-numeric: tabular-nums;
}

/* ---------- Hjuldata step indicator: pulse on the active step ---------- */
.details-wrapper .step.active .step-number {
    position: relative;
}

.details-wrapper .step.active .step-number::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    opacity: 0;
    animation: stepPulse 2.4s ease-out 0.8s infinite;
}

@keyframes stepPulse {
    0%   { opacity: 0.7; transform: scale(0.85); }
    70%  { opacity: 0;   transform: scale(1.5); }
    100% { opacity: 0;   transform: scale(1.5); }
}

.details-wrapper .step-line.active {
    background-image: linear-gradient(90deg, var(--primary), var(--success));
}

/* ---------- Star ratings: light sparkle when revealed ---------- */
.js .reviews-section.is-visible .reviews-summary .fa-star.text-warning {
    display: inline-block;
    animation: starPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.js .reviews-section.is-visible .reviews-summary .fa-star.text-warning:nth-child(2) { animation-delay: 0.08s; }
.js .reviews-section.is-visible .reviews-summary .fa-star.text-warning:nth-child(3) { animation-delay: 0.16s; }
.js .reviews-section.is-visible .reviews-summary .fa-star.text-warning:nth-child(4) { animation-delay: 0.24s; }
.js .reviews-section.is-visible .reviews-summary .fa-star.text-warning:nth-child(5) { animation-delay: 0.32s; }

@keyframes starPop {
    from { transform: scale(0.4) rotate(-20deg); opacity: 0; }
    to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------- Buttons: press feedback everywhere ---------- */
.btn {
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:active {
    transform: scale(0.97);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }

    .details-wrapper .step.active .step-number::after {
        animation: none;
    }
}