/* ==============================================
   MysticBlood Portal — Home
   File: /home/mysticbloodsl/portal/public/css/home.css
   Narrative homepage — final spacing and card rhythm
============================================== */

body.mbp-home{
    --mbp-home-shell: 1180px;
    --mbp-home-text-col: 760px;
    --mbp-home-cards-col: 980px;
    --mbp-home-threshold-col: 860px;

    --mbp-home-gold: rgba(230, 195, 105, 0.98);
    --mbp-home-gold-soft: rgba(230, 195, 105, 0.84);
    --mbp-home-red: rgba(176, 58, 46, 0.95);
    --mbp-home-text: rgba(235, 238, 246, 0.88);
    --mbp-home-text-soft: rgba(235, 238, 246, 0.78);
    --mbp-home-violet: rgba(155, 123, 255, 0.84);
    --mbp-home-line: rgba(130, 130, 255, 0.14);
}

body.mbp-home main.mbp-main > .wrap{
    max-width: 1340px;
}

/* =========================
   PAGE
   ========================= */

body.mbp-home .mbp-home-page{
    width: 100%;
    margin-top: 0;
    margin-bottom: 120px;
}

body.mbp-home .mbp-home-shell{
    max-width: var(--mbp-home-shell);
    margin: 0 auto;
    padding: 104px 24px 0;
}

body.mbp-home .mbp-home-section{
    margin: 0 auto;
}

/* =========================
   HERO / INTRO
   ========================= */

body.mbp-home .mbp-home-hero{
    max-width: var(--mbp-home-text-col);
    margin: 0 auto;
    text-align: center;
}

body.mbp-home .mbp-home-kicker{
    margin: 0 0 12px;
    font-size: 0.60rem;
    line-height: 1.2;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.36);
}

body.mbp-home .mbp-home-title{
    margin: 0;
    font-family: "Cinzel", serif;
    font-size: clamp(3.5rem, 5vw, 5.8rem);
    line-height: 0.92;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mbp-home-gold);
    text-shadow:
        0 0 12px rgba(210, 165, 60, 0.08),
        0 0 26px rgba(210, 165, 60, 0.08);
}

body.mbp-home .mbp-home-subtitle{
    max-width: 900px;
    margin: 20px auto 18px;
    font-family: "Cinzel", serif;
    font-size: clamp(1.46rem, 2vw, 2.38rem);
    line-height: 1.04;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mbp-home-gold-soft);
}

body.mbp-home .mbp-home-lead{
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255,255,255,0.82);
    font-size: 0.96rem;
    line-height: 1.72;
}

body.mbp-home .mbp-home-lead p{
    margin: 0 0 15px;
}

body.mbp-home .mbp-home-lead p:last-child{
    margin-bottom: 0;
}

body.mbp-home .mbp-home-emphasis{
    display: block;
    margin: 22px 0 14px;
    font-family: "Cinzel", serif;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mbp-home-red);
    text-shadow: 0 0 10px rgba(150, 32, 24, 0.14);
}

body.mbp-home .mbp-home-quote{
    max-width: 860px;
    margin: 46px auto 0;
    font-family: "Cinzel", serif;
    font-size: 1rem;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(214, 183, 104, 0.86);
    text-shadow: 0 0 10px rgba(210, 165, 60, 0.08);
}

/* =========================
   THREE CARDS
   ========================= */

body.mbp-home .mbp-home-cards-wrap{
    max-width: var(--mbp-home-cards-col);
    margin: 64px auto 88px;
}

body.mbp-home .mbp-home-cards{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: var(--mbp-home-cards-col);
    margin: 0 auto;
    align-items: stretch;
}

body.mbp-home .mbp-home-card{
    background: rgba(9, 10, 18, 0.54);
    border: 1px solid rgba(130, 130, 255, 0.16);
    border-radius: 18px;
    padding: 28px 24px 24px;
    backdrop-filter: blur(5px);
    text-align: center;
    min-height: 100%;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition:
        transform .34s cubic-bezier(.22,.61,.36,1),
        box-shadow .34s ease,
        border-color .34s ease,
        background .34s ease;
    will-change: transform;
    transform: translateY(0);
}

body.mbp-home .mbp-home-card-head{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    min-height: 0;
    transition:
        transform .34s cubic-bezier(.22,.61,.36,1),
        color .28s ease,
        opacity .28s ease;
    will-change: transform;
}

body.mbp-home .mbp-home-card-body{
    flex: 1 1 auto;
    transition:
        transform .34s cubic-bezier(.22,.61,.36,1),
        color .28s ease,
        opacity .28s ease;
    will-change: transform;
}

body.mbp-home .mbp-home-card-ico{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--mbp-home-violet);
    flex: 0 0 auto;
    transition:
        transform .34s cubic-bezier(.22,.61,.36,1),
        color .28s ease,
        opacity .28s ease;
    will-change: transform;
}

body.mbp-home .mbp-home-card-ico .mbp-ico{
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

body.mbp-home .mbp-home-card:nth-child(1) .mbp-home-card-ico{
    color: rgba(191, 62, 47, 0.95);
}

body.mbp-home .mbp-home-card:nth-child(2) .mbp-home-card-ico{
    color: rgba(155, 123, 255, 0.90);
}

body.mbp-home .mbp-home-card:nth-child(3) .mbp-home-card-ico{
    color: rgba(224, 189, 89, 0.92);
}

body.mbp-home .mbp-home-card-title{
    margin: 0;
    font-family: "Cinzel", serif;
    font-size: 0.95rem;
    line-height: 1.28;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    color: var(--mbp-home-gold-soft);
    transition:
        transform .34s cubic-bezier(.22,.61,.36,1),
        color .28s ease,
        opacity .28s ease;
    will-change: transform;
}

body.mbp-home .mbp-home-card:nth-child(1) .mbp-home-card-title{
    color: rgba(191, 62, 47, 0.95);
}

body.mbp-home .mbp-home-card:nth-child(2) .mbp-home-card-title{
    color: rgba(155, 123, 255, 0.90);
}

body.mbp-home .mbp-home-card:nth-child(3) .mbp-home-card-title{
    color: rgba(224, 189, 89, 0.92);
}

body.mbp-home .mbp-home-card-text{
    margin: 0;
    max-width: 28ch;
    margin-left: auto;
    margin-right: auto;
    color: rgba(235, 238, 246, 0.84);
    font-size: 0.94rem;
    line-height: 1.72;
    text-align: center;
    transition:
        transform .34s cubic-bezier(.22,.61,.36,1),
        color .28s ease,
        opacity .28s ease;
    will-change: transform;
}

body.mbp-home .mbp-home-card:hover,
body.mbp-home .mbp-home-card:focus-within{
    transform: translateY(-10px);
    border-color: rgba(155, 123, 255, 0.34);
    box-shadow:
        0 14px 34px rgba(0,0,0,.45),
        0 0 0 1px rgba(155,123,255,.18);
    background: rgba(12, 14, 26, 0.78);
}

body.mbp-home .mbp-home-card:hover .mbp-home-card-head,
body.mbp-home .mbp-home-card:focus-within .mbp-home-card-head{
    transform: translateY(-2px);
}

body.mbp-home .mbp-home-card:hover .mbp-home-card-body,
body.mbp-home .mbp-home-card:focus-within .mbp-home-card-body{
    transform: translateY(-1px);
}

body.mbp-home .mbp-home-card:hover .mbp-home-card-ico,
body.mbp-home .mbp-home-card:focus-within .mbp-home-card-ico{
    transform: translateY(-4px) scale(1.03);
}

body.mbp-home .mbp-home-card:hover .mbp-home-card-title,
body.mbp-home .mbp-home-card:focus-within .mbp-home-card-title{
    transform: translateY(-2px);
}

body.mbp-home .mbp-home-card:hover .mbp-home-card-text,
body.mbp-home .mbp-home-card:focus-within .mbp-home-card-text{
    transform: translateY(-1px);
}

/* =========================
   THRESHOLD SECTION
   ========================= */

body.mbp-home .mbp-home-threshold-wrap{
    max-width: var(--mbp-home-threshold-col);
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
}

body.mbp-home .mbp-home-threshold{
    max-width: 780px;
    margin: 0 auto;
    text-align: left;
}

body.mbp-home .mbp-home-threshold-title{
    margin: 0 0 32px;
    font-family: "Cinzel", serif;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.04;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    color: var(--mbp-home-gold-soft);
    text-shadow: 0 0 10px rgba(210, 165, 60, 0.08);
}

body.mbp-home .mbp-home-threshold-copy{
    color: var(--mbp-home-text-soft);
    font-size: 0.88rem;
    line-height: 1.74;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.mbp-home .mbp-home-threshold-copy p{
    margin: 0 0 12px;
}

body.mbp-home .mbp-home-threshold-copy p:last-child{
    margin-bottom: 0;
}

body.mbp-home .mbp-home-minihead{
    margin: 24px 0 10px;
    font-family: "Cinzel", serif;
    font-size: 0.72rem;
    line-height: 1.3;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mbp-home-red);
}

body.mbp-home .mbp-home-threshold-copy strong{
    color: rgba(242, 244, 250, 0.92);
    font-weight: 700;
}

body.mbp-home .mbp-home-threshold-quote{
    max-width: 760px;
    margin: 42px auto 0;
    font-family: "Cinzel", serif;
    font-size: 0.96rem;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(214, 183, 104, 0.84);
    text-shadow: 0 0 10px rgba(210, 165, 60, 0.06);
}

/* =========================
   REMOVE CTA AREA
   ========================= */

body.mbp-home .mbp-home-actions{
    display: none;
}

/* =========================
   NO THRESHOLD CARD EFFECT
   ========================= */

body.mbp-home .mbp-home-glass{
    position: relative;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    box-shadow: none;
}

body.mbp-home .mbp-home-glass::before{
    display: none;
}

/* =========================
   ENTER MYSTICBLOOD LINK
   ========================= */

body.mbp-home .mbp-home-enter-link{
    color: rgba(230,195,105,0.98);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .05em;
    transition: color .25s ease, text-shadow .25s ease;
}

body.mbp-home .mbp-home-enter-link:hover{
    color: #fff;
    text-shadow: 0 0 12px rgba(230,195,105,.55);
}

/* =========================
   FOOTER BREATHING ROOM
   ========================= */

body.mbp-home footer,
body.mbp-home .site-footer,
body.mbp-home .mbp-footer{
    margin-top: 112px;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 980px){
    body.mbp-home .mbp-home-shell{
        padding-left: 18px;
        padding-right: 18px;
        padding-top: 78px;
    }

    body.mbp-home .mbp-home-page{
        margin-bottom: 96px;
    }

    body.mbp-home .mbp-home-cards-wrap{
        margin-top: 52px;
        margin-bottom: 72px;
    }

    body.mbp-home .mbp-home-cards{
        grid-template-columns: 1fr;
        max-width: 660px;
    }

    body.mbp-home .mbp-home-card{
        padding: 24px 20px 20px;
    }

    body.mbp-home .mbp-home-card-text{
        max-width: none;
    }

    body.mbp-home footer,
    body.mbp-home .site-footer,
    body.mbp-home .mbp-footer{
        margin-top: 92px;
    }
}

@media (max-width: 720px){
    body.mbp-home .mbp-home-shell{
        padding-top: 60px;
    }

    body.mbp-home .mbp-home-title{
        letter-spacing: 0.03em;
    }

    body.mbp-home .mbp-home-subtitle{
        margin-top: 14px;
        letter-spacing: 0.08em;
        font-size: 1.5rem;
    }

    body.mbp-home .mbp-home-lead{
        font-size: 0.92rem;
        line-height: 1.68;
    }

    body.mbp-home .mbp-home-threshold-copy{
        font-size: 0.84rem;
        line-height: 1.68;
    }

    body.mbp-home .mbp-home-quote,
    body.mbp-home .mbp-home-threshold-quote{
        font-size: 0.90rem;
    }
}

@media (max-width: 560px){
    body.mbp-home .mbp-home-shell{
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 48px;
    }

    body.mbp-home .mbp-home-page{
        margin-bottom: 72px;
    }

    body.mbp-home .mbp-home-title{
        font-size: 2.7rem;
    }

    body.mbp-home .mbp-home-subtitle{
        font-size: 1.24rem;
    }

    body.mbp-home .mbp-home-cards-wrap{
        margin-top: 42px;
        margin-bottom: 58px;
    }

    body.mbp-home .mbp-home-card{
        padding: 20px 16px 18px;
    }

    body.mbp-home .mbp-home-card-ico{
        width: 50px;
        height: 50px;
    }

    body.mbp-home .mbp-home-card-ico .mbp-ico{
        width: 22px;
        height: 22px;
    }

    body.mbp-home .mbp-home-card-title{
        font-size: 0.84rem;
    }

    body.mbp-home .mbp-home-card-text{
        font-size: 0.86rem;
    }

    body.mbp-home footer,
    body.mbp-home .site-footer,
    body.mbp-home .mbp-footer{
        margin-top: 78px;
    }
}