/* =============================================================
   homepage.css – Mirage Classic: front-page only styles
   All colours/spacing inherit from theme.css custom properties.
   ============================================================= */

/* ─── Scroll-reveal ─────────────────────────────────────────── */
.mc-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: var(--mc-delay, 0ms);
}
.mc-reveal--right {
    transform: translateX(28px);
}
.mc-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ─── Section shared ─────────────────────────────────────────── */
.mc-section {
    padding: var(--sp) 0;
}
.mc-section--alt {
    background: var(--bg2);
}
.mc-section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto clamp(40px, 6vw, 72px);
}
.mc-section-head h2 {
    margin: .35em 0 .55em;
}
.mc-section-head p {
    color: var(--text2);
    font-size: 1.05rem;
    line-height: 1.7;
}
.mc-eyebrow {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal);
    background: rgba(24,200,144,.1);
    border: 1px solid rgba(24,200,144,.25);
    border-radius: 99px;
    padding: .28em .9em;
}

/* ─── HERO ───────────────────────────────────────────────────── */
.mc-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: var(--header-h);
}

.mc-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: .28;
    transform: scale(1.04);  /* slight scale so parallax JS has room */
    will-change: transform;
}
.mc-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(7,5,15,.92) 0%,
        rgba(12,8,24,.80) 50%,
        rgba(7,5,15,.70) 100%
    );
}

/* Floating particles */
.mc-hero__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.mc-particle {
    position: absolute;
    left: var(--x);
    bottom: -6px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: var(--teal-l);
    opacity: var(--o);
    animation: particle-rise var(--d) linear infinite;
}
@keyframes particle-rise {
    0%   { transform: translateY(0)      scale(1);   opacity: var(--o); }
    80%  { opacity: var(--o); }
    100% { transform: translateY(-105vh) scale(.4);  opacity: 0; }
}

.mc-hero__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
    padding-top: clamp(40px, 8vw, 96px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

/* Text column */
.mc-hero__pill {
    display: inline-block;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(255,0,255,.08);
    border: 1px solid rgba(255,0,255,.2);
    border-radius: 99px;
    padding: .3em 1em;
    margin-bottom: 1.4em;
}

.mc-hero__heading {
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: 1.08;
    margin: 0 0 .6em;
}
.mc-hero__h-top {
    display: block;
    background: linear-gradient(135deg, var(--gold) 20%, var(--gold-h) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 32px rgba(255,0,255,.45));
    animation: hero-glow-pulse 3.5s ease-in-out infinite alternate;
}
.mc-hero__h-bot {
    display: block;
    color: var(--text);
    font-size: .58em;
    letter-spacing: .04em;
}
@keyframes hero-glow-pulse {
    from { filter: drop-shadow(0 0 20px rgba(255,0,255,.35)); }
    to   { filter: drop-shadow(0 0 48px rgba(255,0,255,.75)); }
}

.mc-hero__sub {
    color: var(--text2);
    font-size: clamp(.95rem, 1.4vw, 1.1rem);
    line-height: 1.75;
    max-width: 46ch;
    margin-bottom: 2.2em;
}

.mc-hero__btns {
    display: flex;
    flex-wrap: wrap;
    gap: .85em;
    margin-bottom: 2.2em;
}

.mc-hero__tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6em .9em;
}
.mc-hero__tags li {
    font-size: .78rem;
    color: var(--text2);
}

/* Dragon column */
.mc-hero__dragon {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.mc-hero__dragon img {
    width: 100%;
    max-width: 480px;
    height: auto;
    filter: drop-shadow(0 0 40px rgba(122,69,216,.55))
            drop-shadow(0 0 80px rgba(24,200,144,.25));
    animation: dragon-float 6s ease-in-out infinite;
}
@keyframes dragon-float {
    0%, 100% { transform: translateY(0)     rotate(0deg); }
    33%       { transform: translateY(-14px) rotate(.6deg); }
    66%       { transform: translateY(-8px)  rotate(-.4deg); }
}

/* Scroll chevron */
.mc-hero__scroll {
    position: absolute;
    bottom: clamp(20px, 4vw, 36px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-decoration: none;
}
.mc-hero__scroll span {
    display: block;
    width: 16px;
    height: 16px;
    border-right: 2px solid rgba(255,0,255,.6);
    border-bottom: 2px solid rgba(255,0,255,.6);
    transform: rotate(45deg);
    animation: chevron-bounce 1.8s ease-in-out infinite;
}
.mc-hero__scroll span:nth-child(2) { animation-delay: .18s; }
.mc-hero__scroll span:nth-child(3) { animation-delay: .36s; }
@keyframes chevron-bounce {
    0%, 100% { opacity: .3; transform: rotate(45deg) translateY(-4px); }
    50%       { opacity: .9; transform: rotate(45deg) translateY(4px); }
}

/* ─── STATS STRIP ────────────────────────────────────────────── */
.mc-stats {
    background: linear-gradient(90deg, var(--bg3), var(--card), var(--bg3));
    border-top: 1px solid var(--border2);
    border-bottom: 1px solid var(--border2);
    padding: clamp(20px, 3.5vw, 32px) 0;
}
.mc-stats__list {
    list-style: none;
    margin: 0;
    padding: 0 clamp(16px, 4vw, 40px);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(24px, 4vw, 56px);
}
.mc-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2em;
    text-align: center;
}
.mc-stats__val {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(1.1rem, 2.4vw, 1.7rem);
    color: var(--gold);
    line-height: 1;
}
.mc-stats__val sup {
    font-size: .55em;
    vertical-align: super;
}
.mc-stats__lbl {
    font-size: .72rem;
    color: var(--text2);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ─── ABOUT ──────────────────────────────────────────────────── */
.mc-about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(40px, 7vw, 100px);
}
.mc-about__text h2 {
    margin: .35em 0 .8em;
}
.mc-about__text p {
    color: var(--text2);
    line-height: 1.75;
    margin-bottom: 1.1em;
}
.mc-checklist {
    list-style: none;
    margin: 0 0 2em;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .65em;
}
.mc-checklist li {
    display: flex;
    align-items: flex-start;
    gap: .7em;
    color: var(--text2);
    font-size: .93rem;
    line-height: 1.5;
}
.mc-checklist li::before {
    content: '✓';
    flex-shrink: 0;
    color: var(--teal);
    font-weight: 700;
    margin-top: .05em;
}

/* Screenshot frame */
.mc-frame {
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--border2);
    box-shadow:
        0 0 0 1px rgba(122,69,216,.18),
        0 20px 60px rgba(0,0,0,.55),
        0 0 40px rgba(122,69,216,.12);
}
.mc-frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* ─── FEATURES ───────────────────────────────────────────────── */
.mc-feat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: clamp(16px, 2.5vw, 28px);
}
.mc-feat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: clamp(24px, 3.5vw, 36px);
    transition: transform .25s, border-color .25s, box-shadow .25s;
}
.mc-feat-card:hover {
    transform: translateY(-4px);
    border-color: var(--border2);
    box-shadow: 0 12px 40px rgba(122,69,216,.18);
}
.mc-feat-card__icon {
    font-size: 2rem;
    margin-bottom: .75em;
    line-height: 1;
}
.mc-feat-card h3 {
    font-size: .95rem;
    color: var(--gold);
    margin: 0 0 .6em;
}
.mc-feat-card p {
    font-size: .87rem;
    color: var(--text2);
    line-height: 1.65;
    margin: 0;
}

/* ─── SCREENSHOTS ────────────────────────────────────────────── */
.mc-shots__track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
    gap: clamp(10px, 1.5vw, 16px);
    padding: 0 clamp(16px, 4vw, 48px);
    max-width: calc(var(--mw) + 96px);
    margin: 0 auto;
}
.mc-shot {
    margin: 0;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform .3s, box-shadow .3s;
}
.mc-shot:hover {
    transform: scale(1.025);
    box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 24px rgba(122,69,216,.2);
}
.mc-shot img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
}

/* ─── CLASSES ────────────────────────────────────────────────── */
.mc-class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: clamp(12px, 2vw, 20px);
}
.mc-class-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: clamp(18px, 2.5vw, 28px) clamp(14px, 2vw, 22px);
    text-align: center;
    transition: transform .25s, border-color .25s, background .25s;
}
.mc-class-card:hover {
    transform: translateY(-4px);
    background: var(--card-h);
    border-color: var(--purple);
}
.mc-class-card__icon {
    font-size: 1.8rem;
    margin-bottom: .55em;
    line-height: 1;
}
.mc-class-card__name {
    font-size: .8rem;
    color: var(--gold);
    margin: 0 0 .4em;
}
.mc-class-card__desc {
    font-size: .78rem;
    color: var(--text2);
    line-height: 1.55;
    margin: 0;
}
.mc-classes__foot {
    text-align: center;
    margin-top: clamp(28px, 4vw, 48px);
}

/* ─── COMMUNITY CTA ──────────────────────────────────────────── */
.mc-community {
    position: relative;
    padding: var(--sp) 0;
    overflow: hidden;
    background: linear-gradient(160deg, var(--bg3) 0%, var(--bg2) 60%, var(--bg3) 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.mc-community__dragon {
    position: absolute;
    right: clamp(-60px, -4vw, 0px);
    bottom: -20px;
    width: clamp(220px, 28vw, 400px);
    pointer-events: none;
}
.mc-community__dragon img {
    width: 100%;
    height: auto;
    opacity: .18;
    filter: drop-shadow(0 0 30px rgba(122,69,216,.4));
}
.mc-community__inner {
    position: relative;
    z-index: 2;
    max-width: 620px;
    margin: 0 auto;
}
.mc-community__inner .mc-eyebrow {
    margin-bottom: 1em;
}
.mc-community__inner h2 {
    margin: .3em 0 .65em;
}
.mc-community__inner p {
    color: var(--text2);
    line-height: 1.75;
    margin-bottom: 2em;
}
.mc-community__btns {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .85em;
}

/* ─── NEWS ───────────────────────────────────────────────────── */
.mc-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: clamp(18px, 2.5vw, 28px);
}
.mc-news-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s, border-color .25s;
}
.mc-news-card:hover {
    transform: translateY(-4px);
    border-color: var(--border2);
}
.mc-news-card__cover {
    display: block;
    overflow: hidden;
    line-height: 0;
}
.mc-news-card__cover img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform .4s ease;
}
.mc-news-card:hover .mc-news-card__cover img {
    transform: scale(1.04);
}
.mc-news-card__body {
    padding: clamp(18px, 2.5vw, 26px);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.mc-news-card__date {
    font-size: .72rem;
    color: var(--teal);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .6em;
}
.mc-news-card__title {
    font-size: .9rem;
    margin: 0 0 .65em;
    line-height: 1.45;
}
.mc-news-card__title a {
    color: var(--text);
    text-decoration: none;
}
.mc-news-card__title a:hover {
    color: var(--gold);
}
.mc-news-card__excerpt {
    font-size: .85rem;
    color: var(--text2);
    line-height: 1.65;
    margin: 0 0 1.1em;
    flex: 1;
}
.mc-news-card__more {
    font-size: .78rem;
    color: var(--purple-l);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .04em;
    align-self: flex-start;
}
.mc-news-card__more:hover {
    color: var(--teal-l);
}
.mc-news__all {
    text-align: center;
    margin-top: clamp(28px, 4vw, 48px);
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
    .mc-hero__content {
        grid-template-columns: 1fr;
        text-align: center;
        padding-bottom: clamp(80px, 14vw, 140px);
    }
    .mc-hero__dragon {
        order: -1;
    }
    .mc-hero__dragon img {
        max-width: 300px;
    }
    .mc-hero__sub {
        margin-left: auto;
        margin-right: auto;
    }
    .mc-hero__btns {
        justify-content: center;
    }
    .mc-hero__tags {
        justify-content: center;
    }
    .mc-about__grid {
        grid-template-columns: 1fr;
    }
    .mc-about__media {
        order: -1;
    }
    .mc-community__dragon {
        display: none;
    }
}

@media (max-width: 600px) {
    .mc-hero__heading {
        font-size: clamp(1.8rem, 8vw, 2.6rem);
    }
    .mc-stats__list {
        gap: clamp(16px, 5vw, 28px);
    }
    .mc-feat-grid,
    .mc-class-grid {
        grid-template-columns: 1fr;
    }
    .mc-news-grid {
        grid-template-columns: 1fr;
    }
    .mc-shots__track {
        grid-template-columns: 1fr;
        padding: 0 clamp(12px, 4vw, 24px);
    }
    .mc-shot img {
        height: 200px;
    }
}