/* ==========================================================================
   MAGIA PAGE — PRL COL — Mobile-First
   She is the intelligence running through all four products, so the page is
   written from the house down: who she is, then what she does in each line.
   The introduction scene itself lives in pages/magia-meet.css, shared with
   the home page.
   ========================================================================== */

/* ── Hero — she fills the viewport, the words sit over her ── */
/* .section sets padding-block per breakpoint: two classes are needed to win */
.section.magia-hero {
    position: relative;
    display: flex;
    min-height: 100dvh;
    padding-top: calc(var(--nav-height, 72px) + var(--space-4));
    padding-bottom: var(--space-6);
    overflow: hidden;
}

.magia-hero > .container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.section.magia-hero .hero-mini__content {
    max-width: var(--container-narrow);
    margin-inline: auto;
    margin-bottom: 0;
    padding-bottom: 0;
    text-align: center;
}

.magia-hero .hero-mini__title {
    margin-bottom: var(--space-5);
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.magia-hero__mag {
    color: var(--text-primary);
}

.magia-hero .hero-mini__subtitle {
    max-width: 38rem;
    margin-inline: auto;
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--text-secondary);
}

.magia-hero .hero-mini__descriptor {
    margin-top: var(--space-3);
    margin-bottom: 0;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* Clipped gradient text goes mushy at this size — solid brand colour instead */
.magia-hero .hero-mini__descriptor .text-gradient {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--color-primary);
}

.magia-hero__star {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2dvh;
    pointer-events: none;
}

/* Bloom behind her — diffuse light, never a container */
.magia-hero__aura {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    max-width: 52rem;
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--color-primary) 26%, transparent) 0%,
        color-mix(in srgb, var(--color-primary) 10%, transparent) 38%,
        transparent 68%);
    opacity: 0.85;
    transform: translate(-50%, -50%);
    filter: blur(48px);
}

/* Veil — lifts the words off her without boxing them in */
.magia-hero__veil {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 55%;
    pointer-events: none;
    background: linear-gradient(to top,
        var(--bg-primary) 18%,
        color-mix(in srgb, var(--bg-primary) 72%, transparent) 48%,
        transparent 100%);
}

.magia-hero__mascot {
    position: relative;
    z-index: 1;
    width: auto;
    height: 72dvh;
    max-width: 116%;
    object-fit: contain;
}


/* ── Section headers ──────────────────────────────────────
   The product site has these as global components; here the class exists in
   eight views without a shared rule, so each page styles its own. Same values
   as the product site, scoped to this page so nothing else moves. */
.magia-showcase .section__header,
.magia-products .section__header,
.magia-conversation .section__header {
    max-width: var(--container-narrow);
    margin: 0 auto var(--space-10);
    text-align: center;
}

.magia-showcase .section__header .badge,
.magia-products .section__header .badge {
    margin-bottom: var(--space-4);
}

.magia-showcase .section__title,
.magia-products .section__title {
    margin: 0 0 var(--space-4);
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.magia-showcase .section__subtitle,
.magia-products .section__subtitle {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-secondary);
}
/* ── In every product — one band per trade ────────────────
   Four bands held apart by air alone. The brand identifies the product on the
   left; on the right she says what she does there, in her own voice. */
.magia-products__list {
    display: grid;
    gap: var(--space-10);
    margin-top: var(--space-12);
}

.magia-products__item {
    display: grid;
    gap: var(--space-6);
}

.magia-products__brand {
    display: grid;
    justify-items: start;
}

.magia-products__num {
    margin-bottom: var(--space-3);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--color-primary);
}

/* Brandmark and stand-in icon share a height so the four read as one series */
.magia-products__logo,
.magia-products__mark {
    display: block;
    height: 2.5rem;
    width: auto;
    margin-bottom: var(--space-3);
}

/* Where there is no brandmark, the icon stands in — a touch smaller, so it
   carries the same optical weight as a logo and not more */
.magia-products__mark {
    display: grid;
    place-items: center start;
    color: var(--color-primary);
}

.magia-products__mark svg {
    width: auto;
    height: 2rem;
}

.magia-products__name {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.magia-products__role {
    margin: var(--space-1) 0 0;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* Her line first, at a size that carries it */
.magia-products__lead {
    margin: 0 0 var(--space-4);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.magia-products__text {
    margin: 0;
    max-width: 42rem;
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--text-secondary);
}

/* Three concrete things, each with the icon that names it. No chips.
   They flow and wrap as whole items: fixed columns left one label on two lines
   and a hole under the other two. */
.magia-products__points {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-8);
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
}

.magia-products__points li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
}

.magia-products__points svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

/* The circuit told in beats, one at a time — the rotating note the courses and
   the library already use, so it reads the same across the site */
.magia-products__note {
    position: relative;
    max-width: 46rem;
    min-height: 9rem;
    margin: var(--space-16) auto 0;
}

.magia-products__note-line {
    position: absolute;
    inset: 0;
    margin: auto;
    height: max-content;
    text-align: center;
    text-wrap: balance;
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--duration-normal) var(--ease-smooth),
                transform var(--duration-normal) var(--ease-smooth);
}

/* The one leaving clears out first, then the next one comes in: stacked layers
   crossfading at the same speed read as a double exposure */
.magia-products__note-line.is-active {
    opacity: 1;
    transform: translateY(0);
    transition-duration: var(--duration-slow);
    transition-delay: var(--duration-normal);
}

/* ── Your data is yours ──────────────────────────────────
   A scene, not a paragraph: the rule is stated once at full size on the same
   night surface the rest of her scenes use, she signs it, and the legal detail
   sits quietly at the foot. The edges are cut clean, not faded into the page:
   a solid block is also what lets the nav measure the surface and turn its
   icons light. */
.section.magia-vault {
    position: relative;
    display: flex;
    align-items: center;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-block: var(--space-16);
    overflow: hidden;
    background-color: var(--surface-night);
    background-image: radial-gradient(ellipse 80% 50% at 50% 50%,
        color-mix(in srgb, var(--color-primary) 14%, transparent) 0%,
        transparent 70%);
    color: var(--text-on-primary);
}

.magia-vault__inner {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    text-align: center;
}

/* Glass badge, the same one the chat wears on its own dark surface */
.magia-vault .badge {
    margin-bottom: var(--space-6);
    background: var(--glass-bg);
    color: var(--text-on-primary);
    border: none;
    backdrop-filter: var(--glass-backdrop-soft);
    -webkit-backdrop-filter: var(--glass-backdrop-soft);
    box-shadow: var(--glass-shadow);
}

/* The whole section exists to say this one sentence */
.magia-vault__statement {
    margin: 0;
    max-width: 20ch;
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
    text-wrap: balance;
    color: var(--text-on-primary);
}

.magia-vault__mascot {
    width: 11rem;
    height: auto;
    margin-top: var(--space-10);
}

/* She signs it: the rule is hers, so it closes in her voice */
.magia-vault__sign {
    margin: var(--space-4) 0 0;
    font-size: var(--text-base);
    font-weight: 600;
    font-style: italic;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.72);
}

/* The legal detail: present, checkable, and not competing with the statement */
.magia-vault__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3) var(--space-10);
    margin: var(--space-12) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* ── Tablet  (>= 640px) ──────────────────────────────────── */
@media (min-width: 640px) {
    .magia-hero .hero-mini__title {
        font-size: var(--text-5xl);
    }

    .magia-hero__mascot {
        height: 74dvh;
    }

    .magia-vault__statement {
        font-size: var(--text-4xl);
    }

    .magia-vault__mascot {
        width: 13rem;
    }
}

/* ── Desktop  (>= 1024px) ────────────────────────────────── */
@media (min-width: 1024px) {
    .magia-hero {
        padding-top: calc(var(--nav-height, 72px) + var(--space-12));
        padding-bottom: var(--space-16);
    }

    .magia-hero .hero-mini__title {
        font-size: var(--text-hero);
    }

    .magia-hero__mascot {
        height: 78dvh;
    }

    /* The brand holds its own column and stays with the band while it is read */
    .magia-products__item {
        grid-template-columns: 17rem 1fr;
        gap: var(--space-6) var(--space-16);
    }

    .magia-products__brand {
        position: sticky;
        top: calc(var(--nav-height, 72px) + var(--space-10));
        align-content: start;
        height: fit-content;
    }

    .magia-products__logo,
    .magia-products__mark {
        height: 3rem;
    }

    .magia-products__mark svg {
        height: 2.5rem;
    }

    .magia-products__lead {
        font-size: var(--text-2xl);
    }

    .magia-products__note {
        min-height: 7rem;
    }

    .magia-products__note-line {
        font-size: var(--text-4xl);
    }

    .magia-vault__statement {
        font-size: var(--text-5xl);
    }

    .magia-vault__mascot {
        width: 15rem;
    }

    .magia-vault__sign {
        font-size: var(--text-md);
    }
}