/*
============================================================
 THE SEVEN REALMS
 RESPONSIVE LIVING LANDING
 MOBILE FIRST
 Forge presentation layer
============================================================
*/


/* ---------------------------------------------------------
   ESCAPE THE OLD FIXED-DESKTOP SHELL
--------------------------------------------------------- */

html {
    min-height: 100%;
    background: #020207;
}

body.landing-page {
    width: 100%;
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #020207;
}

.landing-page .main-stage {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;

    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;
}

.landing-page .sage-back-btn {
    display: none !important;
}


/* ---------------------------------------------------------
   CODED COSMOS
--------------------------------------------------------- */

.sr-cosmos {
    position: fixed;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% -10%,
            rgba(102, 60, 158, 0.18),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 8% 38%,
            rgba(15, 82, 83, 0.12),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 90% 68%,
            rgba(132, 42, 87, 0.10),
            transparent 44%
        ),
        linear-gradient(
            180deg,
            #020207 0%,
            #05040d 46%,
            #020207 100%
        );
}

.sr-stars {
    position: absolute;
    inset: -20%;
    opacity: 0.58;
}

.sr-stars-one {
    background-image:
        radial-gradient(circle, rgba(255,255,255,.92) 0 1px, transparent 1.3px),
        radial-gradient(circle, rgba(239,199,105,.82) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(194,184,255,.55) 0 1px, transparent 1.4px);

    background-size:
        93px 93px,
        157px 157px,
        211px 211px;

    background-position:
        3px 7px,
        51px 39px,
        99px 73px;

    animation: sr-star-drift 70s linear infinite;
}

.sr-stars-two {
    opacity: .30;

    background-image:
        radial-gradient(circle, white 0 1px, transparent 1.5px);

    background-size: 47px 47px;

    animation: sr-star-drift-two 110s linear infinite;
}

.sr-nebula {
    position: absolute;
    width: 70vw;
    height: 70vw;
    min-width: 420px;
    min-height: 420px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .13;
}

.sr-nebula-one {
    top: 5%;
    left: -38%;
    background: #7d36aa;
    animation: sr-breathe 16s ease-in-out infinite alternate;
}

.sr-nebula-two {
    right: -42%;
    bottom: 2%;
    background: #0a756b;
    animation: sr-breathe 21s ease-in-out infinite alternate-reverse;
}

.sr-orbit-line {
    position: absolute;
    border: 1px solid rgba(213, 170, 70, .08);
    border-radius: 50%;
}

.sr-orbit-one {
    width: 130vw;
    height: 70vw;
    top: 22%;
    left: -18%;
    transform: rotate(-14deg);
}

.sr-orbit-two {
    width: 110vw;
    height: 55vw;
    top: 58%;
    left: -4%;
    transform: rotate(11deg);
}

@keyframes sr-star-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-93px, -93px, 0); }
}

@keyframes sr-star-drift-two {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(94px, -47px, 0); }
}

@keyframes sr-breathe {
    from {
        transform: scale(.82);
        opacity: .08;
    }

    to {
        transform: scale(1.18);
        opacity: .18;
    }
}


/* ---------------------------------------------------------
   WORLD WRAPPER
--------------------------------------------------------- */

.sr-world {
    position: relative;
    z-index: 5;
    width: 100%;
    min-height: 100vh;
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.sr-hero {
    width: min(100%, 900px);
    margin: 0 auto;
    padding:
        calc(88px + env(safe-area-inset-top))
        20px
        44px;

    text-align: center;
}

.sr-eyebrow {
    margin: 0 0 11px;
    color: #cfa84d;
    font-family: "Cinzel", Georgia, serif;
    font-size: .66rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.sr-hero h1 {
    margin: 0;
    color: #f0d486;
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(2.7rem, 13vw, 5.6rem);
    font-weight: 900;
    line-height: .92;
    letter-spacing: .035em;
    text-shadow:
        0 4px 30px rgba(0,0,0,.95),
        0 0 32px rgba(211,164,66,.16);
}

.sr-hero h1 span {
    display: block;
}

.sr-intro {
    max-width: 680px;
    margin: 24px auto 0;
    color: rgba(245, 238, 220, .82);
    font-family: "Crimson Text", Georgia, serif;
    font-size: clamp(1.05rem, 4.7vw, 1.4rem);
    line-height: 1.45;
}

.sr-network {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 26px;
}

.sr-network a {
    min-height: 42px;
    padding: 11px 17px;
    border: 1px solid rgba(216,170,70,.32);
    border-radius: 999px;

    background: rgba(6,5,15,.68);
    color: #e8d59d;

    font-family: "Inter", sans-serif;
    font-size: .67rem;
    letter-spacing: .13em;
    text-decoration: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sr-scroll-cue {
    margin-top: 38px;
    color: rgba(229,212,169,.52);
    font-family: "Inter", sans-serif;
    font-size: .59rem;
    letter-spacing: .19em;
}

.sr-scroll-cue span {
    display: block;
    width: 1px;
    height: 35px;
    margin: 0 auto 10px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(229,188,89,.7),
            transparent
        );
}


/* ---------------------------------------------------------
   REALM CARDS
--------------------------------------------------------- */

.sr-realms {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;

    width: min(100% - 28px, 1380px);
    margin: 0 auto;
    padding: 0 0 52px;
}

.sr-card {
    width: 100%;
    max-width: 520px;
}

.sr-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.sr-card-art {
    position: relative;
    width: 100%;
    min-height: 470px;
    overflow: hidden;

    border: 1px solid rgba(220,175,75,.34);
    border-radius: 24px;

    background: #070711;

    box-shadow:
        0 18px 50px rgba(0,0,0,.56),
        inset 0 0 0 1px rgba(255,255,255,.025);

    isolation: isolate;
}

.sr-card-art > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    transform: scale(1.01);
    transition:
        transform 1.1s cubic-bezier(.2,.7,.2,1),
        filter .5s ease;

    filter:
        saturate(1.03)
        contrast(1.05)
        brightness(.82);
}

.sr-card-shade {
    position: absolute;
    z-index: 2;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(2,2,8,.10) 0%,
            rgba(2,2,8,.14) 35%,
            rgba(2,2,8,.80) 75%,
            rgba(2,2,8,.98) 100%
        );
}

.sr-card-glow {
    position: absolute;
    z-index: 3;
    inset: 0;

    border-radius: inherit;

    box-shadow:
        inset 0 0 60px rgba(211,164,66,.08);

    pointer-events: none;
}

.sr-realm-number {
    position: absolute;
    z-index: 5;
    top: 19px;
    left: 19px;

    padding: 7px 10px;

    border: 1px solid rgba(237,199,107,.32);
    border-radius: 999px;

    background: rgba(3,3,10,.64);
    backdrop-filter: blur(8px);

    color: #e8c66f;
    font-family: "Inter", sans-serif;
    font-size: .58rem;
    letter-spacing: .16em;
}

.sr-card-copy {
    position: absolute;
    z-index: 5;
    right: 20px;
    bottom: 24px;
    left: 20px;

    text-align: center;
}

.sr-card-copy h2 {
    margin: 0;
    color: #f4e3ae;

    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(1.65rem, 8vw, 2.55rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .045em;

    text-shadow: 0 4px 18px rgba(0,0,0,.95);
}

.sr-card-copy p {
    max-width: 440px;
    margin: 10px auto 17px;

    color: rgba(245,238,221,.78);

    font-family: "Crimson Text", Georgia, serif;
    font-size: 1.02rem;
    line-height: 1.35;
}

.sr-enter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 43px;
    padding: 10px 18px;

    border: 1px solid rgba(239,199,103,.55);
    border-radius: 999px;

    background: rgba(4,4,12,.72);
    color: #efd582;

    font-family: "Inter", sans-serif;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .15em;
}

.sr-enter b {
    font-size: 1rem;
    font-weight: 400;
}

.sr-card-link:active .sr-card-art > img {
    transform: scale(1.04);
}


/* ---------------------------------------------------------
   DISCOVERY
--------------------------------------------------------- */

.sr-discovery {
    width: min(calc(100% - 28px), 900px);
    margin: 18px auto 76px;
    padding: 36px 20px;

    border-top: 1px solid rgba(211,170,76,.26);
    border-bottom: 1px solid rgba(211,170,76,.18);

    text-align: center;
}

.sr-discovery h2 {
    margin: 0;
    color: #efdc9e;
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(1.8rem, 8vw, 3rem);
}

.sr-discovery > p:not(.sr-eyebrow) {
    max-width: 650px;
    margin: 12px auto 24px;

    color: rgba(235,226,206,.72);

    font-family: "Crimson Text", Georgia, serif;
    font-size: 1.08rem;
    line-height: 1.5;
}

.sr-discovery-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
}

.sr-discovery-links a {
    padding: 10px 15px;

    border: 1px solid rgba(211,170,76,.26);
    border-radius: 8px;

    background: rgba(7,6,16,.64);
    color: #ddc688;

    font-family: "Inter", sans-serif;
    font-size: .7rem;
    letter-spacing: .08em;
    text-decoration: none;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

.sr-footer {
    position: relative;
    padding:
        28px
        20px
        calc(34px + env(safe-area-inset-bottom));

    border-top: 1px solid rgba(211,170,76,.13);

    color: rgba(231,213,168,.5);
    text-align: center;
}

.sr-footer span,
.sr-footer small {
    display: block;
}

.sr-footer span {
    margin-bottom: 5px;
    color: #bea15e;
    font-family: "Cinzel", Georgia, serif;
    font-size: .72rem;
    letter-spacing: .17em;
}

.sr-footer small {
    font-family: "Inter", sans-serif;
    font-size: .62rem;
    letter-spacing: .08em;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (min-width: 680px) {

    .sr-hero {
        padding-top: 112px;
        padding-bottom: 58px;
    }

    .sr-realms {
        gap: 22px;
    }

    .sr-card {
        width: calc(50% - 12px);
    }

    .sr-card-art {
        min-height: 520px;
    }
}


/* ---------------------------------------------------------
   DESKTOP
--------------------------------------------------------- */

@media (min-width: 1080px) {

    .sr-hero {
        padding-top: 126px;
        padding-bottom: 72px;
    }

    .sr-realms {
        gap: 24px;
        width: min(calc(100% - 70px), 1500px);
    }

    .sr-card {
        width: calc(25% - 18px);
        max-width: none;
    }

    .sr-card-art {
        min-height: 510px;
        border-radius: 28px;
    }

    .sr-card-link:hover .sr-card-art {
        border-color: rgba(238,197,100,.78);

        box-shadow:
            0 22px 70px rgba(0,0,0,.65),
            0 0 42px rgba(208,157,57,.13);
    }

    .sr-card-link:hover .sr-card-art > img {
        transform: scale(1.075);
        filter:
            saturate(1.09)
            contrast(1.07)
            brightness(.92);
    }

    .sr-card-link:hover .sr-enter {
        background: #d8ac4c;
        color: #09080d;
    }
}


/* ---------------------------------------------------------
   LARGE CINEMATIC DESKTOP
--------------------------------------------------------- */

@media (min-width: 1450px) {

    .sr-card-art {
        min-height: 570px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .sr-stars,
    .sr-nebula {
        animation: none !important;
    }

    .sr-card-art > img {
        transition: none;
    }
}


/*
============================================================
 SAGE SEVEN REALMS — COMPOSITION TIGHTEN
 2026-08-17
============================================================
*/


/* ---------------------------------------------------------
   SIDE ADS — THINNER, QUIETER
--------------------------------------------------------- */

@media (min-width: 1401px) {

    .landing-page .ad-slot.ad-left,
    .landing-page .ad-slot.ad-right {
        width: 105px !important;
        top: 108px !important;
        bottom: 58px !important;

        background: rgba(255,255,255,.018) !important;
        border-color: rgba(220,175,75,.16) !important;
    }

    .landing-page .ad-slot.ad-left {
        left: 12px !important;
    }

    .landing-page .ad-slot.ad-right {
        right: 12px !important;
    }

    .landing-page .ad-slot .ad-placeholder {
        font-size: .62rem !important;
        letter-spacing: .08em !important;
        opacity: .62;
    }
}


/* ---------------------------------------------------------
   DESKTOP HERO — SMALLER + TIGHTER
--------------------------------------------------------- */

@media (min-width: 1080px) {

    .sr-hero {
        padding-top: 82px;
        padding-bottom: 24px;
    }

    .sr-hero h1 {
        font-size: clamp(3rem, 5.4vw, 4.55rem);
        line-height: .88;
    }

    .sr-eyebrow {
        margin-bottom: 7px;
        font-size: .61rem;
    }

    .sr-intro {
        margin-top: 15px;
        max-width: 650px;
        font-size: 1.18rem;
        line-height: 1.35;
    }

    .sr-network {
        margin-top: 17px;
    }

    .sr-network a {
        min-height: 36px;
        padding: 8px 15px;
        font-size: .62rem;
    }

    .sr-scroll-cue {
        margin-top: 16px;
    }

    .sr-scroll-cue span {
        height: 20px;
        margin-bottom: 5px;
    }


    /* Pull realm artwork upward and keep it clear of side ads */

    .sr-realms {
        width: min(calc(100% - 270px), 1500px);
        gap: 20px;
        padding-top: 0;
    }

    .sr-card {
        width: calc(25% - 15px);
    }

    .sr-card-art {
        min-height: 485px;
    }
}


/* ---------------------------------------------------------
   LARGE DESKTOP — DON'T LET TITLE GROW HUGE AGAIN
--------------------------------------------------------- */

@media (min-width: 1450px) {

    .sr-hero h1 {
        font-size: 4.55rem;
    }

    .sr-card-art {
        min-height: 515px;
    }
}


/*
============================================================
 SAGE SEVEN REALMS — COMPOSITION TIGHTEN
 2026-08-17
============================================================
*/


/* ---------------------------------------------------------
   SIDE ADS — THINNER, QUIETER
--------------------------------------------------------- */

@media (min-width: 1401px) {

    .landing-page .ad-slot.ad-left,
    .landing-page .ad-slot.ad-right {
        width: 105px !important;
        top: 108px !important;
        bottom: 58px !important;

        background: rgba(255,255,255,.018) !important;
        border-color: rgba(220,175,75,.16) !important;
    }

    .landing-page .ad-slot.ad-left {
        left: 12px !important;
    }

    .landing-page .ad-slot.ad-right {
        right: 12px !important;
    }

    .landing-page .ad-slot .ad-placeholder {
        font-size: .62rem !important;
        letter-spacing: .08em !important;
        opacity: .62;
    }
}


/* ---------------------------------------------------------
   DESKTOP HERO — SMALLER + TIGHTER
--------------------------------------------------------- */

@media (min-width: 1080px) {

    .sr-hero {
        padding-top: 82px;
        padding-bottom: 24px;
    }

    .sr-hero h1 {
        font-size: clamp(3rem, 5.4vw, 4.55rem);
        line-height: .88;
    }

    .sr-eyebrow {
        margin-bottom: 7px;
        font-size: .61rem;
    }

    .sr-intro {
        margin-top: 15px;
        max-width: 650px;
        font-size: 1.18rem;
        line-height: 1.35;
    }

    .sr-network {
        margin-top: 17px;
    }

    .sr-network a {
        min-height: 36px;
        padding: 8px 15px;
        font-size: .62rem;
    }

    .sr-scroll-cue {
        margin-top: 16px;
    }

    .sr-scroll-cue span {
        height: 20px;
        margin-bottom: 5px;
    }


    /* Pull realm artwork upward and keep it clear of side ads */

    .sr-realms {
        width: min(calc(100% - 270px), 1500px);
        gap: 20px;
        padding-top: 0;
    }

    .sr-card {
        width: calc(25% - 15px);
    }

    .sr-card-art {
        min-height: 485px;
    }
}


/* ---------------------------------------------------------
   LARGE DESKTOP — DON'T LET TITLE GROW HUGE AGAIN
--------------------------------------------------------- */

@media (min-width: 1450px) {

    .sr-hero h1 {
        font-size: 4.55rem;
    }

    .sr-card-art {
        min-height: 515px;
    }
}


/*
============================================================
 SAGE SEVEN REALMS — MOBILE CLEAR VIEW
 2026-08-17
============================================================
*/

/* New landing already has its own footer. */
.landing-page .empire-footer {
    display: none !important;
}

/* Phones and tablets do not use desktop skyscraper rails. */
@media (max-width: 1079px) {

    .landing-page .ad-slot.ad-left,
    .landing-page .ad-slot.ad-right {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .landing-page .sr-world,
    .landing-page .sr-hero,
    .landing-page .sr-realms {
        max-width: 100% !important;
    }
}


/*
============================================================
 SAGE_SEVEN_REALMS_LANDING_AD_FLOW_20260817
============================================================
*/

/*
 Landing page scrolls normally.
 Ads belong in the page instead of floating over artwork.
*/
.landing-page .ad-slot.ad-top-global,
.landing-page .ad-slot.ad-bottom-global {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    width: min(728px, calc(100% - 28px)) !important;
    height: 60px !important;

    margin-right: auto !important;
    margin-left: auto !important;
}

.landing-page .ad-slot.ad-top-global {
    margin-top: 58px !important;
    margin-bottom: 0 !important;
}

.landing-page .ad-slot.ad-bottom-global {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}


/* Top banner now occupies the old hero breathing room. */
.landing-page .sr-hero {
    padding-top: 30px !important;
}


/* Phone landing. */
@media (max-width: 768px) {

    .landing-page .ad-slot.ad-top-global,
    .landing-page .ad-slot.ad-bottom-global {
        width: calc(100% - 20px) !important;
        height: 50px !important;
    }

    .landing-page .ad-slot.ad-top-global {
        margin-top: 56px !important;
    }

    .landing-page .sr-hero {
        padding-top: 24px !important;
    }
}