/* ===================================================================================================
 * Frontend MOTION + POLISH layer — shared by all themes (dark-lux, bold-color, light-clean).
 * Loaded AFTER the active theme's style.css, so it layers on top. Every rule derives its colour from
 * --accent-red (defined by every theme), so each tenant keeps its own identity. The reveal animations
 * are activated only when JS adds the `.mcq` class to targets, so with JS off / reduced-motion the page
 * is fully visible and static. No layout/colour of any tenant is hardcoded here.
 * =================================================================================================== */

/* ---- Scroll reveal (JS adds .mcq to targets, then .mcq--in when they enter the viewport) ---- */
.mcq { opacity: 0; transform: translateY(24px);
       transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
       will-change: opacity, transform; }
.mcq.mcq--in { opacity: 1; transform: none; }

/* ---- Hero entrance on load (pure CSS, independent of scroll → always ends visible) ---- */
.hero-content { animation: mc-hero-in .85s cubic-bezier(.2,.7,.2,1) both; }
.hero-image   { animation: mc-hero-in .85s .12s cubic-bezier(.2,.7,.2,1) both; }
@keyframes mc-hero-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---- Card interactions: lift + accent glow (layers over each theme's own hover) ---- */
.service-card, .feature-item, .review-card, .pricing-card {
    transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease, border-color .38s ease;
}
.service-card:hover, .feature-item:hover, .review-card:hover, .pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -18px color-mix(in srgb, var(--accent-red) 50%, transparent),
                0 6px 18px -10px rgba(0,0,0,.25);
    border-color: color-mix(in srgb, var(--accent-red) 55%, transparent);
}

/* ---- Feature icons → a designed badge instead of a bare floating emoji (keeps tenant content) ---- */
.feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 66px; height: 66px; margin-left: auto; margin-right: auto;
    border-radius: 20px; font-size: 1.75rem; line-height: 1; position: relative; isolation: isolate;
    background: color-mix(in srgb, var(--accent-red) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-red) 24%, transparent);
    transition: transform .4s cubic-bezier(.2,.7,.2,1), background .4s ease, border-color .4s ease;
}
.feature-icon::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0;
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent-red) 30%, transparent), transparent 70%);
    transition: opacity .4s ease;
}
.feature-item:hover .feature-icon {
    transform: translateY(-3px) scale(1.06);
    background: color-mix(in srgb, var(--accent-red) 17%, transparent);
    border-color: color-mix(in srgb, var(--accent-red) 45%, transparent);
}
.feature-item:hover .feature-icon::before { opacity: 1; }

/* ---- Primary CTA: a single restrained shine sweep on hover ---- */
.btn-primary, .btn.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
    content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent);
    transform: skewX(-18deg); transition: left .65s cubic-bezier(.2,.7,.2,1);
}
.btn-primary:hover::after { left: 150%; }

/* ---- Header: condense + deepen shadow once the page is scrolled ---- */
.header { transition: padding .3s ease, background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
.header.mc-scrolled { box-shadow: 0 8px 30px -10px rgba(0,0,0,.5); }
.header.mc-scrolled .logo img, .header.mc-scrolled .logo-img { transform: scale(.92); transition: transform .3s ease; }

/* ---- Section header: let the accent underline grow in when the header reveals ---- */
.section-header .section-divider, .section-header .divider, .section-header hr { transform-origin: center; }
.section-header.mcq--in .section-divider, .section-header.mcq--in .divider, .section-header.mcq--in hr {
    animation: mc-grow .65s .12s both;
}
@keyframes mc-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* ---- Smooth anchor scrolling for in-page nav ---- */
html { scroll-behavior: smooth; }

/* ---- Respect users who prefer no motion: everything visible + still ---- */
@media (prefers-reduced-motion: reduce) {
    .mcq { opacity: 1 !important; transform: none !important; transition: none; }
    .hero-content, .hero-image { animation: none; }
    .btn-primary::after { display: none; }
    .section-header.mcq--in .section-divider,
    .section-header.mcq--in .divider,
    .section-header.mcq--in hr { animation: none; }
    html { scroll-behavior: auto; }
}