/* MaaCart Motion System — subtle, accessible, performance-conscious motion. */
:root {
    --mc-motion-ease: cubic-bezier(.22, 1, .36, 1);
    --mc-motion-duration: 680ms;
}

@keyframes mc-header-enter {
    from { opacity: 0; translate: 0 -9px; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes mc-soft-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-9px) rotate(-1deg); }
}
@keyframes mc-chip-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
}
@keyframes mc-glow-breathe {
    0%, 100% { opacity: .62; scale: 1; }
    50% { opacity: .92; scale: 1.06; }
}
@keyframes mc-sparkle {
    0%, 100% { opacity: .8; scale: 1; rotate: 0deg; }
    50% { opacity: 1; scale: 1.18; rotate: 8deg; }
}
@keyframes mc-orbit-drift {
    from { rotate: 0deg; }
    to { rotate: 1turn; }
}
@keyframes mc-promo-back-float {
    0%, 100% { transform: translate(28px, -3px) rotate(11deg); }
    50% { transform: translate(28px, -10px) rotate(13deg); }
}
@keyframes mc-promo-front-float {
    0%, 100% { transform: translate(-12px, 10px) rotate(-8deg); }
    50% { transform: translate(-12px, 3px) rotate(-6deg); }
}
@keyframes mc-auth-panel-in {
    from { opacity: 0; translate: -16px 10px; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes mc-auth-form-in {
    from { opacity: 0; translate: 14px 12px; scale: .99; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

/* Reveal-on-scroll is opt-in: content remains visible if JavaScript is unavailable. */
html.mc-motion-enabled .mc-motion-item {
    opacity: 0;
    translate: 0 19px;
    transition:
        opacity var(--mc-motion-duration) var(--mc-motion-ease),
        translate var(--mc-motion-duration) var(--mc-motion-ease);
    transition-delay: var(--mc-motion-delay, 0ms);
}
html.mc-motion-enabled .mc-motion-item.mc-motion-visible {
    opacity: 1;
    translate: 0 0;
}
html.mc-motion-enabled .mc-motion-from-left { translate: -18px 0; }
html.mc-motion-enabled .mc-motion-from-right { translate: 18px 0; }
html.mc-motion-enabled .mc-motion-from-left.mc-motion-visible,
html.mc-motion-enabled .mc-motion-from-right.mc-motion-visible { translate: 0 0; }

/* Header and interaction details */
.announcement-spark { display: inline-block; transform-origin: center; animation: mc-sparkle 3.4s ease-in-out infinite; }
.site-header { animation: mc-header-enter 560ms var(--mc-motion-ease) both; }
.brand-mark, .market-category-icon, .market-product-icon, .home-course-arrow,
.mc-quick-link-icon, .mc-help-symbol { transition: transform 240ms var(--mc-motion-ease), box-shadow 240ms ease; }
.brand:hover .brand-mark, .admin-brand:hover .admin-brand-mark { transform: translateY(-2px) rotate(-4deg); }
.market-category-card:hover .market-category-icon,
.mc-profile-link:hover .mc-quick-link-icon,
.mc-help-card:hover .mc-help-symbol { transform: translateY(-3px) rotate(-4deg); }
.btn, .market-product-card, .market-category-card, .course-card, .service-card,
.admin-stat, .admin-side-link, .footer-social-link, .footer-whatsapp-link {
    -webkit-tap-highlight-color: transparent;
}
.btn { transition: transform 220ms var(--mc-motion-ease), box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.site-search:focus-within { box-shadow: 0 0 0 4px rgba(11,102,255,.08); }
.category-nav-inner a::after { transform-origin: left center; transition: transform 240ms var(--mc-motion-ease); }

/* A little life for MaaCart's existing illustrated learning cards. */
.hero-art .art-card-main { animation: mc-soft-float 7.2s ease-in-out infinite; }
.hero-art .art-glow { animation: mc-glow-breathe 7.5s ease-in-out infinite; transform-origin: center; }
.hero-art .chip-top { animation: mc-chip-float 5.6s ease-in-out infinite; }
.hero-art .chip-bottom { animation: mc-chip-float 6.3s ease-in-out -1.8s infinite; }
.hero-art .orbit-one { animation: mc-orbit-drift 42s linear infinite; }
.hero-art .orbit-two { animation: mc-orbit-drift 54s linear reverse infinite; }
.art-progress span { transform-origin: left center; animation: mc-progress-entrance 1.15s var(--mc-motion-ease) both; }
@keyframes mc-progress-entrance { from { scale: 0 1; } to { scale: 1 1; } }
.home-promo-card.promo-card-back { animation: mc-promo-back-float 7s ease-in-out infinite; }
.home-promo-card.promo-card-front { animation: mc-promo-front-float 6.5s ease-in-out infinite; }
.home-promo-orbit { animation: mc-orbit-drift 48s linear infinite; }
.home-promo-spark { animation: mc-sparkle 3.8s ease-in-out infinite; }
.mc-auth-showcase { animation: mc-auth-panel-in 760ms var(--mc-motion-ease) both; }
.mc-auth-form-card { animation: mc-auth-form-in 760ms var(--mc-motion-ease) 90ms both; }
.mc-auth-glow-one { animation: mc-glow-breathe 8s ease-in-out infinite; }
.mc-auth-glow-two { animation: mc-glow-breathe 9s ease-in-out -2.4s infinite; }
.mc-auth-preview-card { animation: mc-chip-float 7s ease-in-out 900ms infinite; }
.mc-auth-feature:nth-child(1) { animation: mc-auth-panel-in 520ms var(--mc-motion-ease) 260ms both; }
.mc-auth-feature:nth-child(2) { animation: mc-auth-panel-in 520ms var(--mc-motion-ease) 360ms both; }
.mc-account-hero-art { animation: mc-chip-float 6.5s ease-in-out infinite; }

/* Admin panel: brief, restrained entrances; tables themselves are not animated. */
.admin-stat { transition: transform 220ms var(--mc-motion-ease), box-shadow 220ms ease, border-color 220ms ease; }
.admin-stat:hover { transform: translateY(-3px); }
.admin-side-link:hover { transform: translateX(2px); }
.admin-table tbody tr { transition: background-color 160ms ease; }

/* Avoid motion for users who have requested reduced animation. */
@media (max-width: 680px) {
    :root { --mc-motion-duration: 420ms; }
    .hero-art .art-card-main { animation-duration: 9s; }
    .hero-art .chip-bottom { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
    html.mc-motion-enabled .mc-motion-item,
    html.mc-motion-enabled .mc-motion-item.mc-motion-visible,
    html.mc-motion-enabled .mc-motion-from-left,
    html.mc-motion-enabled .mc-motion-from-right {
        opacity: 1 !important;
        translate: none !important;
        transition: none !important;
    }
}

/* MaaCart Hero Micro-Motion — animate the illustration details, not only the card. */
@keyframes mc-book-front-bob {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    50% { translate: -1px -6px; rotate: 2deg; }
}
@keyframes mc-book-back-bob {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    50% { translate: 2px -4px; rotate: -1.7deg; }
}
@keyframes mc-glyph-glint {
    0%, 100% { scale: 1; rotate: 0deg; opacity: .82; filter: drop-shadow(0 0 0 rgba(255,174,112,0)); }
    45% { scale: 1.14; rotate: 8deg; opacity: 1; filter: drop-shadow(0 0 7px rgba(255,174,112,.42)); }
    65% { scale: .98; rotate: -4deg; opacity: .92; }
}
@keyframes mc-orbit-spin-one {
    from { transform: rotate(-24deg); }
    to { transform: rotate(336deg); }
}
@keyframes mc-orbit-spin-two {
    from { transform: rotate(34deg); }
    to { transform: rotate(-326deg); }
}
@keyframes mc-icon-bob {
    0%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
    50% { translate: 0 -3px; rotate: -2deg; scale: 1.035; }
}
@keyframes mc-copy-arrive {
    from { opacity: 0; translate: 0 7px; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes mc-underline-grow {
    from { width: 0; }
    to { width: 58%; }
}
@keyframes mc-underline-pulse {
    0%, 100% { opacity: .72; box-shadow: 0 0 0 rgba(11,102,255,0); }
    50% { opacity: 1; box-shadow: 0 2px 10px rgba(11,102,255,.22); }
}
@keyframes mc-progress-breathe {
    0%, 100% { box-shadow: 0 0 0 rgba(125,92,255,0); }
    50% { box-shadow: 0 0 9px rgba(125,92,255,.20); }
}
@keyframes mc-progress-sheen {
    0% { translate: -130% 0; }
    55%, 100% { translate: 280% 0; }
}
@keyframes mc-chip-icon-pop {
    0%, 100% { scale: 1; rotate: 0deg; }
    50% { scale: 1.08; rotate: 5deg; }
}

/* Floating books move independently inside the already-floating hero card. */
.hero-art .book-back {
    animation: mc-book-back-bob 5.8s ease-in-out -1.4s infinite;
    will-change: translate, rotate;
}
.hero-art .book-front {
    animation: mc-book-front-bob 4.8s ease-in-out infinite;
    will-change: translate, rotate;
}
.hero-art .book-icon,
.hero-art .art-top .spark,
.hero-art .mini-star,
.hero-proof-mark {
    display: inline-grid;
    place-items: center;
    transform-origin: center;
    animation: mc-glyph-glint 3.2s ease-in-out infinite;
}
.hero-art .book-icon { animation-delay: -.9s; }
.hero-art .art-top .spark { animation-delay: -.45s; }
.hero-art .star-a { animation-delay: -1.6s; }
.hero-art .star-b { animation-delay: -.25s; }
.hero-art .orbit-one { animation: mc-orbit-spin-one 34s linear infinite; }
.hero-art .orbit-two { animation: mc-orbit-spin-two 43s linear infinite; }
.hero-art .chip-top .chip-icon { animation: mc-chip-icon-pop 3.7s ease-in-out infinite; }
.hero-art .chip-bottom .chip-icon { animation: mc-chip-icon-pop 4.1s ease-in-out -1.2s infinite; }

/* The headline gets a gentle entrance and a small moving accent underline. */
.hero-art .art-card-main h3 {
    position: relative;
    display: table;
    max-width: 100%;
    animation: mc-copy-arrive 780ms cubic-bezier(.22, 1, .36, 1) 180ms both;
}
.hero-art .art-card-main h3::after {
    content: "";
    display: block;
    width: 58%;
    height: 3px;
    margin-top: 5px;
    border-radius: 99px;
    background: linear-gradient(90deg, #0b66ff, #8b70ff 58%, #ffab70);
    transform-origin: left center;
    animation: mc-underline-grow 900ms cubic-bezier(.22, 1, .36, 1) 520ms both,
               mc-underline-pulse 3.8s ease-in-out 1.5s infinite;
}
.hero-art .art-progress span {
    position: relative;
    overflow: hidden;
    animation: mc-progress-breathe 3.6s ease-in-out infinite;
}
.hero-art .art-progress span::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -35%;
    width: 32%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
    animation: mc-progress-sheen 3.8s ease-in-out .5s infinite;
}

/* The symbol tiles (including ▤, music notes and course icons) gently bob. */
.market-category-icon,
.market-product-icon,
.course-art-icon,
.product-symbol,
.service-icon,
.detail-art-book {
    animation: mc-icon-bob 4.8s ease-in-out infinite;
}
.market-category-card:nth-child(2) .market-category-icon,
.market-product-card:nth-child(2) .market-product-icon { animation-delay: -.8s; }
.market-category-card:nth-child(3) .market-category-icon,
.market-product-card:nth-child(3) .market-product-icon { animation-delay: -1.6s; }
.market-category-card:nth-child(4) .market-category-icon { animation-delay: -2.4s; }
.market-category-card:nth-child(5) .market-category-icon { animation-delay: -1.2s; }
.market-category-card:nth-child(6) .market-category-icon { animation-delay: -3.2s; }
.market-category-card:hover .market-category-icon,
.market-product-card:hover .market-product-icon,
.service-card:hover .service-icon {
    animation-play-state: paused;
    translate: 0 -4px;
    rotate: -5deg;
    scale: 1.08;
}

@media (prefers-reduced-motion: reduce) {
    .hero-art .book-back,
    .hero-art .book-front,
    .hero-art .book-icon,
    .hero-art .art-top .spark,
    .hero-art .mini-star,
    .hero-art .orbit-one,
    .hero-art .orbit-two,
    .hero-art .chip-icon,
    .hero-proof-mark,
    .hero-art .art-card-main h3,
    .hero-art .art-card-main h3::after,
    .hero-art .art-progress span,
    .hero-art .art-progress span::after,
    .market-category-icon,
    .market-product-icon,
    .course-art-icon,
    .product-symbol,
    .service-icon,
    .detail-art-book {
        animation: none !important;
        translate: none !important;
        rotate: none !important;
        scale: 1 !important;
    }
}