/*=========================================================
    PART 1 START
=========================================================*/

/*=========================================================
    ROOT
=========================================================*/

:root{

    --content-width:980px;

    --title-width:720px;

    --orb-size:310px;
    --stand-size:300px;

    --button-width:445px;

    --ritual-gap-status:18px;

    --ritual-gap-button:82px;

    --ritual-gap-card:96px;

}

/*=========================================================
    DOCUMENT
=========================================================*/

html,
body{

    margin:0;
    padding:0;

    width:100%;
    min-height:100%;

}

body{

    background:#05020b;

    color:#efe7ff;

    font-family:Georgia,serif;

    overflow-x:hidden;

}

/*=========================================================
    RESET
=========================================================*/

*,
*::before,
*::after{

    box-sizing:border-box;

    margin:0;
    padding:0;

    user-select:none;
    -webkit-user-select:none;

    -webkit-user-drag:none;

}

img{

    display:block;

    pointer-events:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font:inherit;

}

/*=========================================================
    GLOBAL LAYERS
=========================================================*/

#particles{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:0;

}

#flashOverlay{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:1000;

}

#preloader{

    position:fixed;

    inset:0;

    z-index:2000;

}

/*=========================================================
    APPLICATION
=========================================================*/

#app{

    position:relative;

    z-index:2;

    width:min(96vw,var(--content-width));

    margin:0 auto;

    padding:0;

    display:flex;

    flex-direction:column;

    align-items:center;

}

/*=========================================================
    PROJECT TITLE
=========================================================*/

.project-header{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

#projectTitle{

    width:min(94vw,var(--title-width));

    height:auto;

}

/*=========================================================
    RITUAL
=========================================================*/

.orb-section{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-top:-35px;

}

.orb-wrapper{

    position:relative;

    width:390px;

    height:390px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:18px;

    margin-bottom:18px;

}

/*=========================================================
    ORB
=========================================================*/

#magicOrb{

    position:relative;

    top:-40px;

    width:var(--orb-size);

    height:var(--orb-size);

    z-index:3;

    opacity:.92;

    transition:
        transform .45s ease,
        filter .45s ease,
        opacity .45s ease;

}

#magicOrb.glow{

    filter:
        drop-shadow(0 0 20px rgba(180,145,255,.82))
        drop-shadow(0 0 52px rgba(140,95,255,.62))
        drop-shadow(0 0 105px rgba(120,80,255,.45));

}

/*=========================================================
    STAND
=========================================================*/

#orbStand{

    position:absolute;

    width:var(--stand-size);

    bottom:-100px;

    z-index:1;

}

/*=========================================================
    STATUS
=========================================================*/

#orbStatus{

    margin-top:60px;

    margin-bottom:var(--ritual-gap-status);

    font-size:1.22rem;

    font-weight:700;

    letter-spacing:.04em;

    text-align:center;

}

/*=========================================================
    BUTTON
=========================================================*/

.button-section{

    margin-top:var(--ritual-gap-button);

    margin-bottom:var(--ritual-gap-card);

    width:var(--button-width);

    min-height:116px;

    display:flex;

    justify-content:center;

    align-items:center;

}

#summonButton{

    position:relative;

    top:-75px;

    opacity:1;

    transition:
        transform .25s ease,
        filter .25s ease,
        opacity .8s ease;

}

#summonButton.hidden{

    opacity:0;

    pointer-events:none;

}

#summonButton:hover{

    transform:scale(1.05);

}

#summonButton:active{

    transform:scale(.97);

}

#summonButton img{

    width:var(--button-width);

    height:auto;

}
/*=========================================================
    BUTTON HIDDEN
=========================================================*/

#summonButton.hidden{

    opacity:0;

    pointer-events:none;

}

/*=========================================================
    PART 1 END
=========================================================*/
/**********************************************************
    PART 2 START
**********************************************************/

/*=========================================================
    FAMILIAR CARD
=========================================================*/

.familiar-card{

    position:relative;

    width:min(84vw,600px);

    margin:
        -168px
        auto
        15px;

    padding:
        50px
        50px
        37px;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    transform-origin:center top;

    z-index:0;

}

/*=========================================================
    CARD BACKGROUND
=========================================================*/

.familiar-card::before{

    content:"";

    position:absolute;
    transform:scale(0.97);

    inset:0;

    background:#08080a;

    z-index:0;

}

/*=========================================================
    CARD FRAME
=========================================================*/

.card-frame{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:fill;

    pointer-events:none;

    z-index:1;

}

/*=========================================================
    CARD CONTENT
=========================================================*/

.card-content{

    position:relative;

    z-index:5;

    display:flex;

    flex-direction:column;

    align-items:center;

    width:100%;

}

/*=========================================================
    FAMILIAR IMAGE
=========================================================*/

#familiarImage{

    display:block;

    width:450px;

    height:450px;

    margin:
        0
        auto
        8px;

    object-fit:contain;

}

/*=========================================================
    CARD INFO
=========================================================*/

.card-info{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    width:100%;

    margin-top:0;

}
/*=========================================================
    NAME
=========================================================*/

#familiarName{

    color:#d8b66b;

    font-size:1.564rem;

    font-weight:700;

    line-height:1.06;

    margin-bottom:10px;

    text-align:left;

}

/*=========================================================
    META
=========================================================*/

.familiar-meta{

    display:flex;

    flex-direction:column;

    gap:6px;

    width:100%;

    margin-bottom:8px;

}

.meta-row{

    display:grid;

    grid-template-columns:140px 1fr;

    column-gap:10px;

    align-items:start;

}

.meta-title{

    color:#d8b66b;

    font-size:1.1rem;

    font-weight:700;

    text-align:left;

}

#familiarArchetype,
#familiarGift,
#familiarElement{

    color:#f2ecff;

    font-size:1.10rem;

    line-height:1.2;

    text-align:left;

}

/*=========================================================
    DESCRIPTION
=========================================================*/

#familiarDescription{

    width:100%;

    color:#ddd4f1;

    font-size:1.10rem;

    line-height:1.65;

    text-align:center;

    margin-top:8px;

    margin-bottom:8px;

}

/*=========================================================
    MESSAGE
=========================================================*/

.message-block{

    display:flex;

    flex-direction:column;

    align-items:center;

    width:100%;

    margin-top:0px;

    padding-bottom:12px;

}

.message-separator{

    width:46%;

    max-width:330px;

    align-self:center;

    margin:0 0 8px;

}

.message-title-image{

    display:none;

}

.message-title{

    width:100%;

    color:#d8b66b;

    font-size:1.84rem;

    font-weight:700;

    line-height:1.2;

    margin-bottom:14px;

    text-align:center;

}

#messageText{

    width:100%;

    color:#efe8ff;

    font-size:1.10rem;

    line-height:1.65;

    text-align:center;

}

/*=========================================================
    PART 2 END
=========================================================*/
/*=========================================================
    PART 3 START
=========================================================*/


/*=========================================================
    PRELOADER
=========================================================*/

#preloader{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#05020b;
    opacity:1;
    visibility:visible;
    transition:opacity 250ms ease, visibility 250ms ease;
}

#preloader.preloader-hiding{
    opacity:0;
    visibility:hidden;
}

.preloader-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:24px;
    text-align:center;
}

.loader-orb{
    width:110px;
    height:110px;
    border-radius:50%;
    background:
        radial-gradient(circle at 35% 30%, #efe7ff 0%, #b58cff 10%, #6d35c9 32%, #1a0b38 62%, #05020b 72%);
    box-shadow:
        0 0 24px rgba(181,140,255,.65),
        0 0 70px rgba(109,53,201,.45),
        inset 0 0 24px rgba(255,255,255,.22);
    animation:preloaderOrb 1.4s ease-in-out infinite;
}

.loader-text{
    color:#efe7ff;
    font-size:18px;
    letter-spacing:.08em;
    text-shadow:0 0 12px rgba(181,140,255,.7);
    animation:preloaderText 1.4s ease-in-out infinite;
}

@keyframes preloaderOrb{
    0%,100%{ transform:scale(.94); opacity:.82; }
    50%{ transform:scale(1); opacity:1; }
}

@keyframes preloaderText{
    0%,100%{ opacity:.55; }
    50%{ opacity:1; }
}

/*=========================================================
    STATES
=========================================================*/

.hidden{

    display:none !important;

}

/*=========================================================
    ORB ANIMATION
=========================================================*/

@keyframes orbFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes orbRitual{

    0%{

        transform:translate(0,0);

    }

    25%{

        transform:translate(-2px,1px);

    }

    50%{

        transform:translate(2px,-1px);

    }

    75%{

        transform:translate(-1px,-2px);

    }

    100%{

        transform:translate(0,0);

    }

}

.orb-floating{

    animation:orbFloat 4.8s ease-in-out infinite;

}

.orb-ritual{

    animation:orbRitual .16s linear infinite;

}

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

@media (max-width:900px){

    :root{

        --button-width:360px;

        --orb-size:285px;

        --stand-size:275px;

        --ritual-gap-status:34px;

        --ritual-gap-button:26px;

        --ritual-gap-card:42px;

    }

    .familiar-card{

        padding:
            210px
            42px
            50px;

    }

    .card-frame{

        top:155px;

        height:calc(100% - 155px);

    }

    .card-image{

        width:340px;

        height:340px;

        top:-118px;

    }

    #familiarImage{

        width:285px;

        height:285px;

    }

    #familiarBorder{

        width:340px;

        height:340px;

    }

    .card-info{

        margin-top:140px;

    }

    .message-title{

        font-size:1.9rem;

    }

}

@media (max-width:640px){

    :root{

        --button-width:330px;

        --orb-size:235px;

        --stand-size:235px;

        --ritual-gap-status:30px;

        --ritual-gap-button:24px;

        --ritual-gap-card:36px;

    }

    #projectTitle{

        width:94vw;

    }

    .familiar-card{

        padding:
            190px
            26px
            42px;

    }

    .card-frame{

        top:145px;

        height:calc(100% - 145px);

    }

    .card-image{

        width:285px;

        height:285px;

        top:-102px;

    }

    #familiarImage{

        width:235px;

        height:235px;

    }

    #familiarBorder{

        width:285px;

        height:285px;

    }

    .card-info{

        margin-top:115px;

    }

    .meta-row{

        grid-template-columns:1fr;

        row-gap:6px;

    }

    .message-title{

        font-size:1.7rem;

    }

    #messageText{

        font-size:1.12rem;

    }

}
/*=========================================================
    PART 3 END
=========================================================*/
@media (max-width:640px){

    .orb-section{
        margin-top:0;
    }

    .orb-wrapper{
        width:92vw;
        aspect-ratio:1;
        height:auto;
        margin:10px auto 20px;
    }

    #magicOrb{
        top:0;
        width:72vw;
        max-width:260px;
        height:auto;
    }

    #orbStand{
        width:72vw;
        max-width:250px;
        bottom:-35px;
    }

    .button-section{
        margin-top:30px;
        margin-bottom:40px;
        width:100%;
    }

    #summonButton{
        top:0;
    }

    #summonButton img{
        width:min(90vw,330px);
    }

    .familiar-card{
        margin:45px auto 20px;
        padding:26px 18px 30px;
        width:94vw;
    }

    #familiarImage{
        width:200px;
        height:200px;
    }
}
/*=========================================================
    PART 4 START — COMMUNITY INFORMATION
=========================================================*/

.community-section{

    width:min(94vw,1180px);
    margin:10px auto 80px;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:26px;
    text-align:center;

}

.team-message{

    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
    align-items:center;
    gap:0;
    padding:0;
    background:transparent;
    border:none;
    box-shadow:none;

}

.team-message-image-wrap{

    order:0;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    min-height:560px;
    position:relative;
    z-index:1;

}

.team-message-image{

    width:100%;
    max-width:1000px;
    width:130%;
    height:auto;
    pointer-events:none;
    filter:drop-shadow(0 0 22px rgba(145,93,201,.2));
    transform:scale(1.08);
    transform-origin:center bottom;

}

.team-message-copy{

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:0 12px 42px 0;
    transform:translate(-26px,-58px);
    position:relative;
    z-index:2;

}

.community-title{

    color:#d8b66b;
    font-size:1.6rem;
    font-weight:700;
    line-height:1.2;
    margin:0 0 16px;
    text-align:center;

}

.community-text{

    max-width:650px;
    color:#efe8ff;
    font-size:1.2rem;
    line-height:1.7;
    text-align:center;

}

.rules-link{

    display:block;
    width:min(94vw,85%);
    max-width:calc(var(--button-width) * .85);
    margin-top:24px;
    transition:transform .25s ease, filter .25s ease;

}

.rules-link:hover{
    transform:scale(1.025);
    filter:drop-shadow(0 0 18px rgba(216,182,107,.22));
}

.rules-link:active{
    transform:scale(.985);
}

.rules-link img{
    width:100%;
    height:auto;
}

.social-section{

    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    z-index:5;
    margin-top:-250px;

}

.social-heading{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    width:min(100%,900px);
    margin-bottom:18px;

}

.social-heading .community-title{
    margin:0;
    white-space:nowrap;
}

.social-divider{
    width:150px;
    height:auto;
    flex:0 0 auto;
}

.social-links{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    width:auto;

}

.social-links a{
    display:flex;
    justify-content:center;
    align-items:center;
    transition:transform .25s ease, filter .25s ease;
}

.social-links a:hover{
    transform:translateY(-3px);
    filter:drop-shadow(0 0 14px rgba(216,182,107,.2));
}

.social-links a:active{
    transform:scale(.98);
}

.social-links img{
    width:76px;
    height:auto;
}

.promotion-section{

    width:100%;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;

}

.community-text-link{
    color:#d8b66b;
    font-size:1.08rem;
    line-height:1.5;
    font-weight:700;
    text-decoration:none;
    transition:color .2s ease, text-shadow .2s ease;
}

.community-text-link:hover{
    color:#f3d99a;
    text-shadow:0 0 14px rgba(216,182,107,.35);
}

.promotion-icon-link{
    display:flex;
    justify-content:center;
    align-items:center;
    width:76px;
    height:76px;
    border-radius:50%;
    transition:transform .25s ease, filter .25s ease;
}

.promotion-icon-link img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.promotion-icon-link:hover{
    transform:translateY(-3px);
    filter:drop-shadow(0 0 14px rgba(216,182,107,.2));
}

.promotion-icon-link:active{
    transform:scale(.98);
}

@media (max-width:900px){

    .community-section{
        margin-top:0;
        margin-bottom:65px;
        gap:24px;
    }

    .team-message{
        grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
    }

    .team-message-image-wrap{
        min-height:470px;
    }

    .team-message-image{
        max-width:760px;
        width:125%;
        transform:scale(1.06);
    }

    .team-message-copy{
        padding-bottom:30px;
        transform:translate(-12px,-44px);
    }

    .social-section{
        margin-top:-190px;
    }

    .social-divider{
        width:110px;
    }

    .social-links{
        gap:14px;
    }

    .social-links img{
        width:68px;
    }

    .promotion-icon-link{
        width:68px;
        height:68px;
    }

}

@media (max-width:640px){

    .community-section{
        width:94vw;
        margin-top:0;
        margin-bottom:48px;
        gap:18px;
    }

    .team-message{
        grid-template-columns:1fr;
        gap:0;
    }

    .team-message-image-wrap{
        min-height:0;
        height:auto;
        margin-bottom:-18px;
    }

    .team-message-image{
        width:100%;
        max-width:620px;
        width:112%;
        transform:scale(1.08);
        transform-origin:center bottom;
    }

    .team-message-copy{
        padding:0 4px 8px;
        transform:translateY(-18px);
    }

    .community-title{
        font-size:1.377rem;
    }

    .community-text{
        font-size:1.04rem;
        line-height:1.6;
    }

    .rules-link{
        width:min(90vw,85%);
        max-width:calc(var(--button-width) * .85);
        margin-top:18px;
    }

    .social-section{
        margin-top:-92px;
    }

    .social-heading{
        gap:8px;
        margin-bottom:12px;
    }

    .social-divider{
        width:58px;
    }

    .social-links{
        display:flex;
        width:auto;
        gap:6px;
    }

    .social-links a{
        width:auto;
    }

    .social-links img{
        width:62px;
    }

}

/*=========================================================
    NO-CARD COMMUNITY SPACING
=========================================================*/

body:has(#familiarCard.hidden) .button-section{
    margin-bottom:0;
}

body:has(#familiarCard.hidden) .community-section{
    margin-top:-34px;
}

body:has(#familiarCard.hidden) .social-section{
    margin-top:-250px;
}

@media (max-width:640px){
    body:has(#familiarCard.hidden) .community-section{
        margin-top:-18px;
    }
    body:has(#familiarCard.hidden) .social-section{
        margin-top:-92px;
    }
}

/*=========================================================
    PART 4 END — COMMUNITY INFORMATION
=========================================================*/