/*
 * public-ui.css — Professional UI layer for the public site.
 *
 * Additive design system that sits on top of modern.css (the existing
 * public-site stylesheet). Nothing in modern.css is modified — every
 * rule here refines the existing `.mp-*` component vocabulary with
 * deeper polish, layered shadows, micro-interactions, and entrance /
 * scroll animations (all gated behind `prefers-reduced-motion`).
 */

:root {
    --pub-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --pub-shadow-lift: 0 24px 60px rgba(20, 21, 60, 0.14);
}

/* ============ NAV ============ */
.mp-nav {
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

.mp-nav.is-scrolled {
    background: rgba(247, 248, 251, 0.92);
    box-shadow: 0 8px 30px rgba(20, 21, 60, 0.08);
}

[data-theme-mode="dark"] .mp-nav.is-scrolled {
    background: rgba(15, 20, 32, 0.92);
}

.mp-nav-links a:not(.mp-btn) {
    position: relative;
    transition: color 0.2s ease;
}

.mp-nav-links a:not(.mp-btn)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(100deg, var(--mp-grad-1), var(--mp-grad-2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--pub-ease);
}

.mp-nav-links a:not(.mp-btn):hover::after,
.mp-nav-links a.active:not(.mp-btn)::after {
    transform: scaleX(1);
}

/* ============ BUTTONS ============ */
.mp-btn {
    position: relative;
    overflow: hidden;
    transition: transform 0.28s var(--pub-ease), box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}

.mp-btn-gradient {
    background-size: 180% 180%;
    animation: pub-grad-shift 8s ease infinite;
}

.mp-btn-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: translateX(-130%);
    transition: transform 0.7s ease;
}

.mp-btn-gradient:hover::after {
    transform: translateX(130%);
}

@keyframes pub-grad-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ============ HERO ============ */
.mp-eyebrow {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mp-stat {
    position: relative;
    transition: background 0.3s ease, transform 0.3s var(--pub-ease);
}

.mp-stat:hover {
    background: rgba(255, 255, 255, 0.98);
}

.mp-stat .num {
    display: inline-block;
    transition: transform 0.35s var(--pub-ease);
}

.mp-stat:hover .num {
    transform: scale(1.12);
}

.mp-scroll-cue {
    transition: opacity 0.3s ease;
}

/* ============ CARDS ============ */
.mp-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.35s var(--pub-ease), box-shadow 0.35s ease, border-color 0.35s ease;
}

.mp-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(90% 60% at 50% -10%, rgba(106, 109, 240, 0.12), transparent 70%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.mp-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--pub-shadow-lift);
}

.mp-card:hover::before {
    opacity: 1;
}

/* Course card banner zoom */
.mp-course-banner,
.mp-course-banner-fallback {
    transition: transform 0.5s var(--pub-ease);
}

.mp-course-card:hover .mp-course-banner {
    transform: scale(1.05);
}

.mp-course-fee .amount {
    transition: color 0.25s ease;
}

.mp-course-card:hover .mp-course-fee .amount {
    color: var(--mp-grad-1);
}

/* Teacher avatar subtle glow */
.mp-teacher-avatar {
    transition: transform 0.4s var(--pub-ease), box-shadow 0.4s ease;
}

.mp-teacher:hover .mp-teacher-avatar {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 16px 34px rgba(106, 109, 240, 0.32);
}

/* ============ SECTION HEADS ============ */
.mp-section-head h2 {
    position: relative;
}

.mp-section-head h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: 16px auto 0;
    border-radius: 3px;
    background: linear-gradient(100deg, var(--mp-grad-1), var(--mp-grad-3));
}

/* ============ REVEAL STAGGERING ============ */
.mp-grid-3 .mp-reveal:nth-child(2) { transition-delay: 0.06s; }
.mp-grid-3 .mp-reveal:nth-child(3) { transition-delay: 0.12s; }
.mp-grid-teachers .mp-reveal:nth-child(2) { transition-delay: 0.06s; }
.mp-grid-teachers .mp-reveal:nth-child(3) { transition-delay: 0.12s; }

/* ============ FLOATING CONTACT WIDGET ============ */
.mp-float-toggle {
    transition: transform 0.3s var(--pub-ease), box-shadow 0.3s ease;
}

.mp-float-toggle:hover {
    transform: scale(1.08) rotate(4deg);
}

.mp-float-panel {
    border-radius: 18px;
}

/* ============ FOOTER ============ */
.mp-footer {
    position: relative;
}

.mp-footer a {
    transition: color 0.2s ease, transform 0.2s ease;
}

.mp-footer ul li a:hover {
    padding-left: 2px;
}

/* ============ CENTER PAGES (pay / not-found) ============ */
.mp-panel {
    animation: pub-rise 0.6s var(--pub-ease) backwards;
}

.mp-result-icon {
    animation: pub-pop 0.6s var(--pub-ease) backwards;
}

@keyframes pub-rise {
    0% { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes pub-pop {
    0% { opacity: 0; transform: scale(0.6); }
    70% { transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
    .mp-btn-gradient {
        animation: none;
    }

    .mp-btn-gradient::after {
        display: none;
    }

    .mp-card,
    .mp-teacher-avatar,
    .mp-course-banner {
        transition: none;
    }
}