/* ==========================================================================
   A mentor's chosen look: heading font, moving background and layout.
   Used on mentor pages (classes set by src/lib/seoPages.js) and in the
   dashboard's pickers, so a choice looks the same in both places.
   Everything moving uses transform/opacity only, and stops for visitors
   who ask their device for less motion.
   ========================================================================== */

/* ---------- heading fonts (files in fonts-display.css; each pairs a Latin and an Arabic font) ---------- */
.mp-font-elegant     { --mp-head: "Playfair Display", "Amiri", serif; --mp-head-w: 700; }
.mp-font-friendly    { --mp-head: "Nunito", "Tajawal", sans-serif; --mp-head-w: 800; }
.mp-font-bold        { --mp-head: "Space Grotesk", "Cairo", sans-serif; --mp-head-w: 700; }
.mp-font-classic     { --mp-head: "Lora", "Noto Naskh Arabic", serif; --mp-head-w: 700; }
.mp-font-playful     { --mp-head: "Fredoka", "Reem Kufi", sans-serif; --mp-head-w: 600; }
.mp-font-handwritten { --mp-head: "Caveat", "Aref Ruqaa", cursive; --mp-head-w: 700; }
.mp-page[class*="mp-font-"] :is(h1, h2, .mp-offer h3, .mp-prompt figcaption, .mp-rate) {
    font-family: var(--mp-head); font-weight: var(--mp-head-w); letter-spacing: 0;
}
.mp-page[class*="mp-font-"] .mp-prompt figcaption { text-transform: none; font-size: .95rem; }
/* Handwriting runs small: give it room. */
.mp-font-handwritten :is(h1) { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.mp-font-handwritten :is(h2, .mp-offer h3) { font-size: 1.45em; }

/* ---------- moving backgrounds (behind the top of the page) ---------- */
.mentor-hero { position: relative; isolation: isolate; }
.mentor-hero > .container { position: relative; z-index: 1; }
.mp-page[class*="mp-bg-"] .page-hero::after { display: none; }          /* replaces the default drift */
.mp-anim { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mp-anim i { position: absolute; display: block; will-change: transform, opacity; }

/* Aurora: soft blurred light that slowly wanders. */
.mp-bg-aurora .mp-anim i { width: 55%; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity: .45; }
.mp-bg-aurora .mp-anim i:nth-child(1) { background: var(--theme); top: -30%; left: -10%; animation: mp-wander 22s ease-in-out infinite alternate; }
.mp-bg-aurora .mp-anim i:nth-child(2) { background: var(--theme-soft); top: 10%; right: -15%; opacity: .9; animation: mp-wander 28s ease-in-out -8s infinite alternate-reverse; }
.mp-bg-aurora .mp-anim i:nth-child(3) { background: var(--theme-ink); bottom: -45%; left: 30%; opacity: .22; animation: mp-wander 34s ease-in-out -4s infinite alternate; }
@keyframes mp-wander { from { transform: translate(0, 0) scale(1); } to { transform: translate(12%, 10%) scale(1.15); } }

/* Bubbles: circles rising gently. */
.mp-bg-bubbles .mp-anim i {
    inset: 0 0 auto 0; height: 200%;
    background:
        radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--theme) 22%, transparent) 0 18px, transparent 19px),
        radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--theme) 16%, transparent) 0 10px, transparent 11px),
        radial-gradient(circle at 55% 35%, color-mix(in srgb, var(--theme) 18%, transparent) 0 26px, transparent 27px),
        radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--theme) 14%, transparent) 0 14px, transparent 15px),
        radial-gradient(circle at 92% 15%, color-mix(in srgb, var(--theme) 20%, transparent) 0 8px, transparent 9px);
    background-size: 100% 50%;
    animation: mp-rise 26s linear infinite;
}
.mp-bg-bubbles .mp-anim i:nth-child(2) { transform: translateX(7%); animation-duration: 38s; animation-delay: -12s; opacity: .7; }
.mp-bg-bubbles .mp-anim i:nth-child(3) { transform: translateX(-9%); animation-duration: 48s; animation-delay: -30s; opacity: .5; }
@keyframes mp-rise { from { translate: 0 0; } to { translate: 0 -50%; } }

/* Sparkle: small stars that twinkle. */
.mp-bg-sparkle .mp-anim i {
    inset: 0;
    background:
        radial-gradient(circle, var(--theme) 0 1.5px, transparent 2.5px) 0 0 / 90px 90px,
        radial-gradient(circle, color-mix(in srgb, var(--theme) 60%, transparent) 0 1px, transparent 2px) 45px 30px / 120px 120px;
    opacity: 0; animation: mp-twinkle 6s ease-in-out infinite;
}
.mp-bg-sparkle .mp-anim i:nth-child(2) { background-position: 30px 60px, 80px 10px; animation-delay: -2s; }
.mp-bg-sparkle .mp-anim i:nth-child(3) { background-position: 60px 20px, 10px 90px; animation-delay: -4s; }
@keyframes mp-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: .55; } }

/* Waves: layers of waves drifting along the bottom. */
.mp-bg-waves .mp-anim i {
    left: 0; bottom: 0; width: 200%; height: 120px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C150 0 300 120 450 60 S750 0 900 60 S1050 120 1200 60 V120 H0Z'/%3E%3C/svg%3E") 0 0 / 50% 100% repeat-x;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C150 0 300 120 450 60 S750 0 900 60 S1050 120 1200 60 V120 H0Z'/%3E%3C/svg%3E") 0 0 / 50% 100% repeat-x;
    background: var(--theme); opacity: .1; animation: mp-slide 18s linear infinite;
}
.mp-bg-waves .mp-anim i:nth-child(2) { height: 90px; opacity: .08; animation-duration: 26s; animation-direction: reverse; }
.mp-bg-waves .mp-anim i:nth-child(3) { height: 60px; opacity: .12; animation-duration: 34s; }
@keyframes mp-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Gradient: the page's colours slowly shifting. */
.mp-bg-gradient .mp-anim {
    background: linear-gradient(120deg, var(--theme-soft), color-mix(in srgb, var(--theme) 22%, #fff), var(--theme-soft), color-mix(in srgb, var(--theme-ink) 12%, #fff));
    background-size: 300% 300%; animation: mp-shift 20s ease-in-out infinite alternate; opacity: .9;
}
.mp-bg-gradient .mp-anim i { display: none; }
@keyframes mp-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

@media (prefers-reduced-motion: reduce) {
    .mp-anim, .mp-anim i { animation: none !important; }
    .mp-bg-sparkle .mp-anim i { opacity: .35; }
}

/* ---------- layouts (bigger screens; on phones every layout is one column) ---------- */
@media (min-width: 861px) {
    /* Centered: everything in one tidy column. */
    .mp-layout-centered .mp-head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .mp-layout-centered .mp-headline { margin-inline: auto; }
    .mp-layout-centered :is(.mp-badges, .mp-highlights) { justify-content: center; }
    .mp-layout-centered .mp-book { width: min(420px, 100%); }
    .mp-layout-centered.mp-page .has-cover .mp-book { margin-top: 0; }
    .mp-layout-centered .mp-grid { grid-template-columns: minmax(0, 1fr); max-width: 820px; margin-inline: auto; }

    /* Sidebar left: the facts first, the story beside them. */
    .mp-layout-left .mp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .mp-layout-left .mp-side { order: -1; position: sticky; top: 96px; }

    /* Spotlight: a big photo and name, offers across the page. */
    .mp-layout-spotlight .mp-avatar { width: 168px; height: 168px; font-size: 3rem; }
    .mp-layout-spotlight .mp-id h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
    .mp-layout-spotlight .mentor-hero { padding-bottom: 56px; }
    .mp-layout-spotlight .mp-offers { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .mp-layout-spotlight .mp-side { position: sticky; top: 96px; }
}