/* ==========================================================================
   MT Gamification – mt-gamification.css
   Follows the same structure / conventions as mt-overview.css:
   · Hardcoded brand colours (no CSS custom props here)
   · clamp() for all fluid sizes
   · Responsive breakpoints at the bottom
   · .realm--glitch / .realm--arcade overrides → mt-gamification-themes.css
   ========================================================================== */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.mtg-wrapper {
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    width: 100%;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    overflow-x: hidden;
    color: #18102e;
}


/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */
.mtg-hero {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 28%, #fff 100%),
        url('../images/hero-light.png') lightgray center top / 100% auto no-repeat,
        linear-gradient(160deg, #f0eaff 0%, #f9f5ff 50%, #fff 100%);
    position: relative;
    overflow: hidden;
    padding-top: clamp(6rem, 12vw, 10rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

/* Left cloud */
.mtg-hero::before {
    content: '';
    position: absolute;
    bottom: -2rem;
    left: -3%;
    width: clamp(240px, 34vw, 540px);
    aspect-ratio: 16 / 9;
    background: url('../images/blog-left-cloud-bg.png') center / contain no-repeat;
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
}

/* Right cloud */
.mtg-hero::after {
    content: '';
    position: absolute;
    bottom: -2rem;
    right: -3%;
    width: clamp(240px, 34vw, 540px);
    aspect-ratio: 16 / 9;
    background: url('../images/blog-right-cloud-bg.png') center / contain no-repeat;
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
}

.mtg-hero .container-fluid {
    position: relative;
    z-index: 1;
}

/* Left glow orb – Figma: rgba(177,46,165,0.40), opacity 0.13, blur 100px */
.mtg-hero__glow-left {
    position: absolute;
    top: -8rem;
    left: -18rem;
    width: 51.60475rem;
    height: 51.60475rem;
    border-radius: 51.60475rem;
    background: rgba(177, 46, 165, 0.40);
    opacity: 0.13;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}

/* Right glow orb – Figma: #7578FE linear gradient 25% → 0%, blur */
.mtg-hero__glow-right {
    position: absolute;
    top: -6rem;
    right: -14rem;
    width: 48rem;
    height: 48rem;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(117, 120, 254, 0.25) 0%, rgba(117, 120, 254, 0) 100%);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}

/* Center bottom glow – Figma: #4731AF */
.mtg-hero__glow-center {
    position: absolute;
    bottom: -10rem;
    left: 50%;
    transform: translateX(-50%);
    width: 40rem;
    height: 24rem;
    border-radius: 50%;
    background: #4731AF;
    opacity: 0.08;
    filter: blur(140px);
    pointer-events: none;
    z-index: 0;
}

.mtg-hero__heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2rem, 5.5vw, 4.75rem);
    font-style: normal;
    font-weight: 400;
    line-height: 112%;
    color: #030303;
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.mtg-hero__heading-accent {
    color: #7139D1;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2rem, 5.5vw, 4.75rem);
    font-style: normal;
    font-weight: 700;
    line-height: 112%;
    display: block;
}

.mtg-hero__subtext {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.125rem, 2.5vw, 1.875rem);
    font-style: italic;
    font-weight: 500;
    line-height: 150%;
    color: #000;
    text-align: center;
    margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   HOW IT WORKS
   ══════════════════════════════════════════════════════════════════════════ */
.mtg-how {
    background: #fff;
}

/* Dark rounded container – Figma: #17092E, border-radius 3.125rem */
.mtg-how__box {
    background: #17092E;
    border-radius: 3.125rem;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
    position: relative;
    overflow: hidden;
}

/* Glow orb – Figma: rgba(161,69,196,0.13), blur(240.75px), rotate(32.272deg) */
.mtg-how__box::before {
    content: '';
    position: absolute;
    bottom: 5%;
    left: -18rem;
    width: 50.40794rem;
    height: 47.54831rem;
    border-radius: 50.40794rem;
    background: rgba(161, 69, 196, 0.13);
    filter: blur(240.75px);
    transform: rotate(32.272deg);
    pointer-events: none;
    z-index: 0;
}

.mtg-how__box>* {
    position: relative;
    z-index: 1;
}

.mtg-how__eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 1.8vw, 2rem);
    font-style: normal;
    font-weight: 600;
    line-height: 184%;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0;
}

.mtg-how__heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 3.625rem);
    font-style: normal;
    font-weight: 500;
    line-height: 122%;
    color: #7139D1;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* ── Realm card – 3-island compositing (mirrors overview mto-exp pattern) ── */
@keyframes floatCenter {

    0%,
    100% {
        transform: translateY(-2px);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes floatLeft {

    0%,
    100% {
        transform: translateY(10px);
    }

    50% {
        transform: translateY(2px);
    }
}

@keyframes floatRight {

    0%,
    100% {
        transform: translateY(4px);
    }

    50% {
        transform: translateY(-4px);
    }
}

.mto-exp-card__islands {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mto-exp-island {
    position: absolute;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.mto-exp-island--center {
    width: clamp(120px, 14vw, 200px);
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    animation: floatCenter 6s ease-in-out infinite;
}

.mto-exp-island--left {
    width: clamp(60px, 7vw, 100px);
    height: auto;
    left: clamp(-5px, 1vw, 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0.5;
    animation: floatLeft 5s ease-in-out infinite;
}

.mto-exp-island--right {
    width: clamp(60px, 7vw, 100px);
    height: auto;
    right: clamp(-5px, 1vw, 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0.5;
    animation: floatRight 7s ease-in-out infinite;
}

.mto-exp-card__content {
    position: absolute;
    inset: 0;
    z-index: 4;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}


/* ── How cards ────────────────────────────────────────────────────────────── */
/* Figma: rgba(128,128,128,0.16) bg luminosity + backdrop-filter blur(50px) + gradient border */
.mtg-how-card {
    position: relative;
    background: rgba(128, 128, 128, 0.16);
    background-blend-mode: luminosity;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border-radius: 1.25rem;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: clamp(260px, 28vw, 380px);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}


/* Gradient border via mask technique */
.mtg-how-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1.25rem;
    padding: 1px;
    background: linear-gradient(180deg,
            #7139D1 0%,
            rgba(255, 255, 255, 0.01) 40%,
            rgba(255, 255, 255, 0.01) 60%,
            rgba(113, 57, 209, 0.60) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.mtg-how-card>*:not(.mto-exp-card__islands):not(.mto-exp-card__content) {
    position: relative;
    z-index: 1;
}

/* Realm card – flexbox layout (islands row + text row) */
.mtg-how-card--realm>.mto-exp-card__islands,
.mtg-how-card--realm>.mto-exp-card__content {
    position: relative;
    inset: auto;
}

.mtg-how-card--realm>.mto-exp-card__islands {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4%;
    padding: 4.25rem 1rem 0.5rem;
    overflow: visible;
}

.mtg-how-card--realm .mto-exp-island {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    flex-shrink: 1;
    min-width: 0;
}

.mtg-how-card--realm .mto-exp-island--center {
    width: 42%;
    max-width: 320px;
    top: auto;
    transform: translateY(-10%);
    z-index: 3;
}

.mtg-how-card--realm .mto-exp-island--left,
.mtg-how-card--realm .mto-exp-island--right {
    width: 20%;
    max-width: 160px;
    top: auto;
    left: auto;
    right: auto;
    transform: translateY(15%);
    opacity: 0.95;
    z-index: 2;
}

.mtg-how-card--realm>.mto-exp-card__content {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mtg-how-card--realm:hover .mto-exp-island--center {
    animation-play-state: paused;
    transform: translateY(calc(-10% - 10px)) scale(1.04);
}

.mtg-how-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(113, 57, 209, 0.2);
}

.mtg-how-card__icon-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4.25rem 1rem 0.5rem;
    min-height: clamp(10rem, 16vw, 18rem);
    overflow: visible;
}

.mtg-how-card__icon {
    max-width: 100%;
    max-height: clamp(10rem, 16vw, 18rem);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ── Ghosting effect for Progress card ── */
.mtg-how-card__icon-wrap--ghosted {
    position: relative;
    z-index: 2;
}

.mtg-how-card__icon-wrap--ghosted::before {
    content: '';
    position: absolute;
    top: 20%;
    bottom: 40%;
    left: 1rem;
    right: 1rem;
    background-image: url('../images/gamification/progress-card.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.25;
    filter: blur(6px);
    pointer-events: none;
    transition: transform 0.3s ease;
}



.mtg-how-card__icon-wrap--ghosted::before {
    transform: translateY(-25px) scale(0.95);
}

.mtg-how-card__icon-wrap--ghosted::after {
    transform: translateY(25px) scale(0.95);
}

.mtg-how-card:hover .mtg-how-card__icon-wrap--ghosted::before {
    transform: translateY(-35px) scale(0.98);
}

.mtg-how-card:hover .mtg-how-card__icon-wrap--ghosted::after {
    transform: translateY(35px) scale(0.98);
}

/* ── Rewards card custom layout ── */
.mtg-how-card__icon-wrap--rewards {
    position: relative;
    overflow: visible;
}

.mtg-how-rewards {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.mtg-how-rewards__xp {
    max-height: clamp(8rem, 12vw, 14rem);
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
    filter: drop-shadow(0 10px 25px rgba(113, 57, 209, 0.3));
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mtg-how-rewards__gem {
    position: absolute;
    /* width: 36%; */
    height: auto;
    right: -100%;
    top: -5%;
    z-index: 3;
    filter: drop-shadow(0 8px 15px rgba(247, 65, 235, 0.3));
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mtg-how-rewards__ghost {
    position: absolute;
    width: 80%;
    height: 80%;
    left: -40%;
    top: -15%;
    background-image: url('../images/gamification/gem.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.16;
    filter: blur(6px);
    z-index: 1;
    transform: rotate(-15deg);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none;
}

/* Hover effects */
.mtg-how-card:hover .mtg-how-rewards__xp {
    transform: translateY(-2px) scale(1.02);
}

.mtg-how-card:hover .mtg-how-rewards__gem {
    transform: translateY(-8px) translateX(4px) scale(1.06) rotate(5deg);
}

.mtg-how-card:hover .mtg-how-rewards__ghost {
    transform: translate(-15px, -8px) scale(1.05) rotate(-20deg);
}

.mtg-how-card__title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 3rem);
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    text-align: center;
    color: #7139D1;
    margin: 0;
    padding: 0 1.5rem 0.375rem;
}

.mtg-how-card__desc {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-align: center;
    color: #FFF;
    margin: 0;
    padding: 0 1.5rem 1.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   WHY THIS WORKS
   ══════════════════════════════════════════════════════════════════════════ */
.mtg-why {
    background: #fff;
    position: relative;
    overflow: hidden;
}

.mtg-why__glow-left {
    position: absolute;
    top: 50%;
    left: -24rem;
    transform: translateY(-50%);
    width: 48.335rem;
    height: 48.335rem;
    border-radius: 48.335rem;
    background: rgba(117, 120, 254, 0.30);
    opacity: 0.28;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}

/* Heading – Figma: #7139D1, 3.625rem, 500, 122% */
.mtg-why__heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 3.625rem);
    font-style: normal;
    font-weight: 500;
    line-height: 122%;
    text-align: center;
    color: #7139D1;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ── Text blocks ──────────────────────────────────────────────────────────── */
.mtg-why-text-block {
    padding: clamp(1rem, 2vw, 1.5rem) 0;
}

/* Label – Figma: 2rem, 600, 184%, 0.16rem letter-spacing, uppercase */
.mtg-why-label {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-style: normal;
    font-weight: 600;
    line-height: 184%;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
    margin: 0 0 0.25rem;
}

.mtg-why-label--tools {
    color: #565656;
}

.mtg-why-label--magic {
    color: #7139D1;
}

/* List – Figma: 1.625rem, 400, line-height 3.75rem */
.mtg-why-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mtg-why-list li,
.mtg-why-list p {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.625rem);
    font-style: normal;
    font-weight: 400;
    line-height: clamp(2.5rem, 3.5vw, 3.75rem);
    margin: 0;
}

.mtg-why-list--tools li,
.mtg-why-list--tools p {
    color: #565656;
    padding-left: 1.25em;
    position: relative;
}

.mtg-why-list--tools li::before,
.mtg-why-list--tools p::before {
    content: '•';
    position: absolute;
    left: 0;
}

.mtg-why-list--magic li,
.mtg-why-list--magic p {
    color: #7139D1;
    padding-left: 1.25em;
    position: relative;
}

.mtg-why-list--magic li::before,
.mtg-why-list--magic p::before {
    content: '•';
    position: absolute;
    left: 0;
}

/* ── Screenshot cards – loop card style ───────────────────────────────────── */
.mtg-why-img-wrap {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
}



.mtg-why-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(113, 57, 209, 0.1);
}


.mtg-why-card__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1.5rem;
}

.mtg-why-card--magic .mtg-why-card__img {
    border-radius: inherit;
}

/* ══════════════════════════════════════════════════════════════════════════
   REWARDS
   ══════════════════════════════════════════════════════════════════════════ */
.mtg-rewards {
    background: linear-gradient(135deg, #f0eaff 0%, #fff5f0 100%);
    position: relative;
    overflow: hidden;
}

/* Right glow orb – Figma: #FFA077, opacity 0.78, blur 458.649px */
.mtg-rewards__glow-right {
    position: absolute;
    top: -4rem;
    right: -12rem;
    width: 33.68769rem;
    height: 33.47225rem;
    border-radius: 33.68769rem;
    background: #FFA077;
    opacity: 0.78;
    filter: blur(458.649px);
    pointer-events: none;
    z-index: 0;
}

.mtg-rewards .container-fluid {
    position: relative;
    z-index: 1;
}

/* Eyebrow – Figma: #000, 2rem, 600, 184%, 0.16rem letter-spacing */
.mtg-rewards__eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 1.8vw, 2rem);
    font-style: normal;
    font-weight: 600;
    line-height: 184%;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
    text-align: center;
    color: #000;
    margin-bottom: 0;
}

/* Heading – Figma: #7139D1, 3.625rem, 500, 122% */
.mtg-rewards__heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 3.625rem);
    font-style: normal;
    font-weight: 500;
    line-height: 122%;
    text-align: center;
    color: #7139D1;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Divider – Figma: linear-gradient #BB93FF → #EFEFFF */
.mtg-rewards__divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, #BB93FF 0%, #EFEFFF 100%);
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    opacity: 1;
}

/* Section label – Figma: #484848, 1.75rem, 500, 120% */
.mtg-rewards__section-label {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.75rem);
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    color: #484848;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* Description – Figma: #7139D1, 2.25rem, 500, 122% */
.mtg-rewards__desc {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.25rem, 2.2vw, 2.25rem);
    font-style: normal;
    font-weight: 500;
    line-height: 122%;
    color: #7139D1;
    margin-bottom: 0;
}

/* ── Rewards list ─────────────────────────────────────────────────────────── */
.mtg-rewards__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mtg-rewards__item {
    padding: clamp(0.5rem, 1vw, 1rem) 0;
}

.mtg-rewards__item-inline-icon {
    display: inline-block;
    vertical-align: middle;
    width: clamp(1.2rem, 2.2vw, 1.625rem);
    height: auto;
    margin-left: 0.4rem;
    margin-top: -4px;
}

/* Item title – Figma: #000, 1.625rem, 600, 2.5rem line-height */
.mtg-rewards__item-title {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 1.6vw, 1.625rem);
    font-style: normal;
    font-weight: 600;
    line-height: clamp(1.5rem, 2.5vw, 2.5rem);
    color: #000;
}

/* Item desc – Figma: #605D5D, 1.625rem, 400, 2.5rem line-height */
.mtg-rewards__item-desc {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 1.6vw, 1.625rem);
    font-style: normal;
    font-weight: 400;
    line-height: clamp(1.5rem, 2.5vw, 2.5rem);
    color: #605D5D;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   UNLOCK WHAT'S INSIDE – CHARACTER SLIDER
   ══════════════════════════════════════════════════════════════════════════ */
.mtg-slider {
    padding-top: clamp(2rem, 4vw, 3rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    background: linear-gradient(135deg, #f0eaff 0%, #fff5f0 100%);
}

/* Header: label left, nav right */
.mtg-slider__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(1.25rem, 2vw, 2rem);
}

/* Label – Figma: #5C5C5C, 1.625rem, 400, 2.5rem line-height */
.mtg-slider__label {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 1.6vw, 1.625rem);
    font-style: normal;
    font-weight: 400;
    line-height: clamp(1.5rem, 2.5vw, 2.5rem);
    color: #5C5C5C;
    margin: 0;
}

/* Nav buttons group */
.mtg-slider__nav {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* Circular purple nav buttons */
.mtg-slider__btn {
    width: clamp(2.25rem, 3vw, 3rem);
    height: clamp(2.25rem, 3vw, 3rem);
    border-radius: 50%;
    background: #7139D1;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.mtg-slider__btn:hover:not(:disabled) {
    background: #5b28b3;
    transform: scale(1.08);
}

.mtg-slider__btn:disabled {
    background: rgba(113, 57, 209, 0.35);
    cursor: not-allowed;
    transform: none;
}

.mtg-slider__btn svg {
    width: 1.5625rem;
    height: 1.5625rem;
    flex-shrink: 0;
}

/* Viewport breaks out of any container to span full viewport width */
.mtg-slider__viewport {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

/* Scrollable track – no scrollbar, snap per card */
.mtg-slider__track {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.625rem, 1.2vw, 1rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: clamp(0.75rem, 2vw, 1rem) 0 clamp(1rem, 2vw, 2rem) clamp(0.75rem, 2vw, 1rem);
    scroll-padding-left: clamp(0.75rem, 2vw, 1rem);
}

.mtg-slider__track::-webkit-scrollbar {
    display: none;
}

/* Individual slide – Figma: 23.31263rem × 31.20844rem, aspect-ratio 62/83 */
.mtg-slider__slide {
    flex-shrink: 0;
    width: clamp(160px, 19.43vw, 23.31263rem);
    border-radius: 1.25rem;
    overflow: hidden;
    scroll-snap-align: start;
    transition: transform 0.25s ease;
}

/* Even cards shifted down – replicates Figma wave stagger */
.mtg-slider__slide--low {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.mtg-slider__slide img {
    width: 100%;
    aspect-ratio: 62 / 83;
    object-fit: cover;
    display: block;
    border-radius: 1.25rem;
}

.mtg-slider__slide:hover {
    transform: scale(1.02);
}

/* ══════════════════════════════════════════════════════════════════════════
   PROGRESSION
   ══════════════════════════════════════════════════════════════════════════ */
.mtg-progression {
    background: #fff;
}

/* Eyebrow – Figma: #000, 2rem, 600, 184%, 0.16rem letter-spacing */
.mtg-prog__eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 1.8vw, 2rem);
    font-style: normal;
    font-weight: 600;
    line-height: 184%;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
    text-align: center;
    color: #000;
    margin-bottom: 0;
}

/* Heading – Figma: #7139D1, 3.625rem, 500, 122% */
.mtg-prog__heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 3.625rem);
    font-style: normal;
    font-weight: 500;
    line-height: 122%;
    text-align: center;
    color: #7139D1;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* ── Bento cards – same treatment as overview loop section ────────────────── */
.mtg-prog-card {
    position: relative;
    background: linear-gradient(102deg, rgba(187, 147, 255, 0.11) 0%, rgba(113, 57, 209, 0.11) 100%);
    border-radius: 1.70194rem;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Gradient border – Figma: 3.468px, #320088 → #441E85 */
.mtg-prog-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 3.468px;
    background: linear-gradient(102deg, #320088, #441E85);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.mtg-prog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(113, 57, 209, 0.1);
}

/* Text header area */
.mtg-prog-card__header {
    position: relative;
    z-index: 1;
    padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 1.75rem) clamp(0.5rem, 1vw, 1rem);
}

/* Accent word – Figma: #7139D1, 2.25rem, 700, line-height 2.5rem */
.mtg-prog-card__accent {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.25rem, 2.2vw, 2.25rem);
    font-style: normal;
    font-weight: 700;
    line-height: clamp(1.5rem, 2.5vw, 2.5rem);
    color: #7139D1;
}

/* Body text – Figma: #000, 1.625rem, 400, line-height 2.5rem */
.mtg-prog-card__text {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.9375rem, 1.6vw, 1.625rem);
    font-style: normal;
    font-weight: 400;
    line-height: clamp(1.5rem, 2.5vw, 2.5rem);
    color: #000;
    margin: 0;
}

/* Image wrapper */
.mtg-prog-card__img-wrap {
    z-index: 1;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mtg-prog-card__img-wrap--full {
    padding: 0 clamp(0.75rem, 1.5vw, 1rem) clamp(0.75rem, 1.5vw, 1rem);
}
.mtg-prog-card__img-wrap--full img {
    border-radius: clamp(0.5rem, 1vw, 0.875rem);
    display: block;
    width: 100%;
}

/* ── Realm Stage (Choose Your Realm card) ─────────────────────────────── */
.mtg-prog-realm-stage {
    position: relative;
    min-height: clamp(260px, 28vw, 380px);
}

.mtg-prog-realm-stage__inner {
    min-height: clamp(220px, 24vw, 340px);
    border-radius: clamp(0.5rem, 1vw, 0.875rem);
    overflow: hidden;
}

.mtg-prog-realm-stage__bg,
.mtg-prog-realm-stage__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    display: block;
}

.mtg-prog-realm-stage__text {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: clamp(1.25rem, 2vw, 2rem) 1.5rem 0;
}

.mtg-prog-realm-stage .row {
    position: relative;
    z-index: 1;
}

.mtg-prog-card__overlay-heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.4rem;
    line-height: 1.2;
}

.mtg-prog-card__overlay-subtext {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.75rem, 1.1vw, 0.95rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.5;
}


.mtg-prog-realm-island {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.mtg-prog-realm-island__img {
    display: block;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 0;
}

.mtg-prog-realm-island--left,
.mtg-prog-realm-island--right {
    justify-content: center;
    padding-bottom: clamp(2.5rem, 5vw, 5rem) !important;
}

.mtg-prog-realm-island--center {
    justify-content: flex-end;
}

.mtg-prog-realm-island--left .mtg-prog-realm-island__img,
.mtg-prog-realm-island--right .mtg-prog-realm-island__img {
    width: clamp(60px, 7vw, 110px);
}

.mtg-prog-realm-island--center .mtg-prog-realm-island__img {
    width: clamp(140px, 20vw, 260px);
}

.mtg-prog-realm-island__label {
    position: relative;
    z-index: 1;
    color: #fff;
    text-transform: uppercase;
    font-style: normal;
}
.mtg-island-font--retro .mtg-prog-realm-island__label {
    font-family: 'Pixelify Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.24431rem;
}
.mtg-island-font--futuristic .mtg-prog-realm-island__label {
    font-family: 'Fjalla One', sans-serif;
    font-weight: 400;
    letter-spacing: 0.285rem;
}
.mtg-island-font--minimalist .mtg-prog-realm-island__label {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    letter-spacing: 0.66625rem;
}
/* Position-based sizes always come last to override font class rules */
.mtg-prog-realm-island--left .mtg-prog-realm-island__label,
.mtg-prog-realm-island--right .mtg-prog-realm-island__label {
    font-size: clamp(0.625rem, 1.2vw, 0.875rem);
    line-height: 1.5;
}
.mtg-prog-realm-island--center .mtg-prog-realm-island__label {
    font-size: clamp(0.875rem, 1.4vw, 1.25rem);
    line-height: 3.42631rem;
}

/* Floating animations */
.mtg-prog-realm-island--center .mtg-prog-realm-island__img {
    animation: realmFloatCenter 4s ease-in-out infinite;
}
.mtg-prog-realm-island--left .mtg-prog-realm-island__img {
    animation: realmFloatLeft 3.5s ease-in-out infinite;
}
.mtg-prog-realm-island--right .mtg-prog-realm-island__img {
    animation: realmFloatRight 5s ease-in-out infinite;
}

@keyframes realmFloatCenter {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-8px); }
}
@keyframes realmFloatLeft {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
}
@keyframes realmFloatRight {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
}

/* ── Row 1 / Row 3 card images (fill full card height) ────────────────── */
.mtg-prog-card--level img,
.mtg-prog-card--leaderboard img,
.mtg-prog-card--chest img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    object-position: top center;
}

/* ── Row 2 card images ─────────────────────────────────────────────────── */
.mtg-prog-card--badges,
.mtg-prog-card--tokens,
.mtg-prog-card--rewards {
    overflow: visible;
}

.mtg-prog-card--badges img,
.mtg-prog-card--tokens img,
.mtg-prog-card--rewards img {
    width: 100%;
    height: clamp(180px, 22vw, 248px);
    object-fit: contain;
    object-position: bottom center;
    display: block;
}

.mtg-prog-card--rewards img {
    object-fit: fill;
}


/* ══════════════════════════════════════════════════════════════════════════
   CTA
   ══════════════════════════════════════════════════════════════════════════ */
.mtg-cta {
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* Glow orb – Figma: 51.60475rem circle, rgba(177,46,165,0.40), opacity 0.13, blur 100px */
.mtg-cta__glow-left {
    position: absolute;
    top: 50%;
    left: -22rem;
    transform: translateY(-50%);
    width: 51.60475rem;
    height: 51.60475rem;
    border-radius: 51.60475rem;
    background: rgba(177, 46, 165, 0.40);
    opacity: 0.13;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}

.mtg-cta .container-fluid {
    position: relative;
    z-index: 1;
}

/* Pill – identical to overview .mto-cta__pill */
.mtg-cta__pill {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: clamp(18rem, 25vw, 23.5rem);
    background: linear-gradient(180deg, #F9F5FF 0%, #EDE4FF 100%);
    border-radius: 17.5rem;
    box-shadow: inset 0 -6px 24px rgba(255, 255, 255, 0.4), 0 16px 48px rgba(113, 57, 209, 0.08);
    padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 16vw, 18rem);
    position: relative;
}

/* Heading – Figma: #7139D1, 3.625rem, 500, 122% */
.mtg-cta__heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 3.625rem);
    font-style: normal;
    font-weight: 500;
    line-height: 122%;
    color: #7139D1;
    text-align: center;
    margin: 0 0 1.75rem;
}

/* Gem icons – identical to overview .mto-cta__icon */
.mtg-cta__icon {
    position: absolute;
    width: clamp(52px, 8vw, 110px);
    height: clamp(52px, 8vw, 110px);
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
}

.mtg-cta__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.mtg-cta__icon--left {
    left: clamp(1.5rem, 7vw, 7.125rem);
    transform: translateY(-50%);
}

.mtg-cta__icon--right {
    right: clamp(1.5rem, 7vw, 7.125rem);
    transform: translateY(-50%);
}

/* ── eb-btn-cta – Figma exact values ─────────────────────────────────────── */
.eb-btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8125rem;
    padding: 0.625rem 0.9375rem 0.625rem 1.6875rem;
    height: clamp(3.5rem, 6vw, 5.625rem);
    border-radius: 3.70719rem;
    background: linear-gradient(94deg, #7239D1 0%, #F741EB 100.42%);
    color: #fff;
    font-family: inherit;
    font-size: clamp(1.25rem, 0.875rem + 1vw, 1.75rem);
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.25s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 8px 28px rgba(113, 57, 209, 0.45);
    white-space: nowrap;
}

.eb-btn-cta:hover {
    background: #8a50e0;
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(113, 57, 209, 0.6);
    color: #fff;
    text-decoration: none;
}

.eb-btn-cta__arrow {
    width: clamp(3.5rem, 4.5vw, 4.375rem);
    height: clamp(3.5rem, 4.5vw, 4.375rem);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS  (mirrors mt-overview.css breakpoint structure)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Progression: cards stack below lg (992px) ─────────────────────────── */
@media (max-width: 991px) {
    .mtg-prog-card--level .row:last-child,
    .mtg-prog-card--leaderboard .row:last-child,
    .mtg-prog-card--chest .row:last-child {
        min-height: clamp(180px, 40vw, 280px);
    }

    .mtg-prog-card--level img,
    .mtg-prog-card--leaderboard img,
    .mtg-prog-card--chest img {
        height: auto !important;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .mtg-cta__pill {
        padding: 2rem 1rem;
    }
}

@media (max-width: 767px) {
    .mtg-cta__icon {
        display: none;
    }

    .mtg-cta__pill {
        border-radius: 2rem;
        padding: 2rem 1.5rem;
        min-height: unset;
    }

    .mtg-how__box {
        border-radius: 1.5rem;
        padding: 1.5rem 1rem;
    }

    .mtg-how-card__title {
        font-size: 1.25rem;
    }

    .mtg-why-label {
        letter-spacing: 0.08rem;
    }

    .mtg-why-screenshot {
        min-height: 220px;
    }

    .mtg-why-card--magic {
        padding: 1.5rem;
    }

    .mtg-rewards__item-icon {
        width: 1.75rem;
        height: 1.75rem;
    }

    .mtg-slider__track {
        padding-left: clamp(0.75rem, 4vw, 1.5rem);
        scroll-padding-left: clamp(0.75rem, 4vw, 1.5rem);
    }

    .mtg-slider__slide {
        width: clamp(140px, 38vw, 200px);
    }

    .mtg-why-list li {
        line-height: clamp(1.5rem, 2.5vw, 2.5rem);
    }

    .mtg-hero::before,
    .mtg-hero::after {
        display: none;
    }

    /* Progression Row 2 — smaller image height on mobile */
    .mtg-prog-card--badges img,
    .mtg-prog-card--tokens img,
    .mtg-prog-card--rewards img {
        height: clamp(140px, 40vw, 180px);
    }

    /* Lift left/right islands above center on mobile */
    .mtg-prog-realm-island--left,
    .mtg-prog-realm-island--right {
        transform: translateY(-2rem);
    }

    /* Island labels — reduce letter-spacing so text fits within col-4 on mobile */
    .mtg-island-font--retro .mtg-prog-realm-island__label {
        letter-spacing: 0.05rem;
    }
    .mtg-island-font--futuristic .mtg-prog-realm-island__label {
        letter-spacing: 0.06rem;
    }
    .mtg-island-font--minimalist .mtg-prog-realm-island__label {
        letter-spacing: 0.08rem;
    }
}


@media (min-width: 768px) and (max-width: 991px) {
    .mtg-prog-card--badges,
    .mtg-prog-card--tokens,
    .mtg-prog-card--rewards {
        min-height: 320px;
    }
}

@media (min-width: 992px) {
    .mtg-slider__track {
        padding-left: 1rem;
        scroll-padding-left: 1rem;
    }

    .mtg-slider__slide {
        width: calc(20vw - 1rem);
    }
}

/* Realm / theme overrides → see mt-gamification-themes.css */