/* ==========================================
   Homepage
========================================== */

.homepage{
    display:flex;
    flex-direction:column;
    gap:35px;
}


/* ==========================================
   Hero Section
========================================== */

.hero-section{
    background:white;
    text-align:center;
    padding:30px 40px 15px;
}

.hero-logo{
    width:80%;
    max-width:700px;
    height:auto;
}

.hero-description{
    margin:5px 0 0;
    font-size:22px;
    color:#555;
    font-weight:400;
}


/* ==========================================
   Homepage Character Token
========================================== */

.character-token{
    cursor:pointer;
}

.token-circle{
    width:220px;
    height:220px;

    background:
        url("/images/token.png")
        center center
        / contain
        no-repeat;

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

    position:relative;
}

.token-background{
    position:absolute;

    width:100%;
    height:100%;

    left:0;
    top:0;
}

.token-face{
    position:absolute;

    width:165px;
    height:165px;

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

.token-face img{
    width:165px;
    height:165px;

    object-fit:contain;
}


/* Character Name + Team */

#interactionCharacter{
    cursor:pointer;
    text-decoration:none;
}

#interactionCharacter:hover{
    text-decoration:none;
}

#interactionTeam{
    font-size:20px;
    font-weight:normal;
    opacity:.8;
}

#interactionTeam.blue,
#interactionCharacter.blue{
    color:var(--blue);
}

#interactionTeam.red,
#interactionCharacter.red{
    color:var(--red);
}

#interactionTeam.traveller,
#interactionCharacter.traveller{
    color:var(--traveller);
}

#interactionTeam.lime,
#interactionCharacter.lime{
    color:var(--lime);
}

#interactionTeam.copper,
#interactionCharacter.copper{
    color:var(--copper);
}


/* Token Hover */

.character-token:hover .token-circle{
    scale:1.05;
}


/* Token Spin */

.token-spin{
    animation:tokenSpin .8s ease;
}

@keyframes tokenSpin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* ==========================================
   Featured Character
========================================== */

.character-feature{
    width:100%;
    max-width:1100px;

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

    margin:-10px auto 0;
}

#characterToken{
    width:220px;

    position:relative;
    z-index:2;
}

.home-interaction-card{
    flex:1;

    height:220px;

    margin-left:-55px;

    padding:
        15px 30px
        20px 70px;

    overflow:hidden;

    background:white;

    border-radius:25px;

    border-right:
        5px solid
        var(--team-color);

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.12);

    transform-origin:
        left center;

    transition:
        transform .8s ease,
        opacity .8s ease;
}

.home-interaction-card.card-spin{
    transform:
        scale(.05)
        translateX(-200px);

    opacity:0;
}


/* Character Card Team Colors */

.home-interaction-card.blue{
    --team-color:var(--blue);
}

.home-interaction-card.red{
    --team-color:var(--red);
}

.home-interaction-card.traveller{
    --team-color:var(--traveller);
}

.home-interaction-card.lime{
    --team-color:var(--lime);
}

.home-interaction-card.copper{
    --team-color:var(--copper);
}


/* Character Card */

.interaction-title{
    display:flex;

    align-items:baseline;

    gap:10px;

    font-size:26px;
}

.interaction-title h2{
    margin:0;

    font-size:26px;
}

.interaction-ability{
    margin-top:6px;

    padding-bottom:12px;

    border-bottom:
        1px solid
        var(--team-color);

    font-size:16px;
}

.interaction-fact{
    margin-top:8px;

    padding-top:8px;

    border-top:none;
}

.interaction-fact strong{
    display:block;

    color:var(--team-color);

    font-size:18px;
}

.interaction-fact p{
    margin-top:2px;
}


/* ==========================================
   Script of the Day
========================================== */
.daily-script{
    position:relative;

    width:100%;
    max-width:1100px;
    margin:0 auto;

    display:flex;
    align-items:stretch;

    overflow:hidden;

    border-radius:20px;

    background:var(--purple);

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.12);
}

.daily-script::before{
    content:"";

    position:absolute;

    width:300px;
    height:300px;

    left:-120px;
    top:50%;

    transform:
        translateY(-50%);

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.08),
            transparent 70%
        );

    pointer-events:none;
}


/* Purple Information Panel */

.daily-script-info{
    position:relative;

    width:400px;
    min-height:220px;

    padding:30px 40px;

    flex-shrink:0;

    display:flex;
    flex-direction:column;
    justify-content:center;

    overflow:hidden;

    color:white;
}

.daily-script-info::after{
    content:"★★★★★";

    position:absolute;

    right:-30px;
    bottom:-50px;

    font-size:130px;
    font-weight:900;

    color:
        rgba(255,255,255,.08);

    pointer-events:none;

    transform:
        rotate(-15deg);
}


/* Script Label */

.daily-script-label{
    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;

    font-size:18px;
    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    opacity:.95;
}

.daily-script-label::before,
.daily-script-label::after{
    content:"✦";

    font-size:12px;
}


/* Script Title */

#dailyScriptName{
    display:block;

    margin:
        0 0 15px;

    color:white;

    font-size:
        clamp(
            28px,
            3vw,
            46px
        );

    font-weight:700;

    line-height:1;

    text-decoration:none;

    text-shadow:
        0 4px 15px
        rgba(0,0,0,.25);

    transition:
        .2s ease;
}

#dailyScriptName:hover{
    transform:
        translateX(5px);

    text-shadow:
        0 4px 20px
        rgba(255,255,255,.35);
}


/* Author */

#dailyScriptAuthor{
    margin:
        0 0 15px;

    font-size:16px;

    opacity:.85;
}


/* Tags */

.daily-script-tags{
    display:flex;

    flex-wrap:wrap;

    gap:10px;
}

.daily-script-tag{
    padding:
        6px 12px;

    border:
        1px solid
        rgba(255,255,255,.35);

    border-radius:20px;

    background:
        rgba(255,255,255,.18);

    font-size:13px;

    backdrop-filter:
        blur(5px);
}


/* ==========================================
   Script Carousel
========================================== */

.daily-script-carousel{
    position:relative;

    flex:1;

    margin-left:-25px;

    display:flex;
    justify-content:center;
    align-items:flex-end;

    overflow:hidden;

    border-radius:
        50px 20px 20px 50px;

    border-right:
        5px solid
        var(--purple);

    background-image:
        url("/images/botcbackground-white.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.daily-character-wheel-wrapper{
    position:absolute;

    width:800px;
    height:300px;

    left:50%;
    bottom:0;

    transform:
        translateX(-50%);

    overflow:hidden;
}

.daily-character-wheel,
.daily-particle-wheel{
    position:absolute;

    width:800px;
    height:800px;

    left:0;
    top:0;
}

.daily-character-wheel{
    z-index:1;
}

.daily-particle-wheel{
    z-index:0;

    pointer-events:none;
}

.daily-character-icon{
    position:absolute;

    width:140px;
    height:140px;

    background-image:
        url("/images/token.png");

    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;

    object-fit:contain;

    filter:
        drop-shadow(
            0 0 6px
            rgba(102,102,153,.45)
        )
        drop-shadow(
            0 0 12px
            rgba(102,102,153,.30)
        );

    animation:
        tokenGlow
        4s
        ease-in-out
        infinite;
}

@keyframes tokenGlow{

    0%,
    100%{
        filter:
            drop-shadow(
                0 0 6px
                rgba(102,102,153,.45)
            )
            drop-shadow(
                0 0 12px
                rgba(102,102,153,.30)
            );
    }

    50%{
        filter:
            drop-shadow(
                0 0 10px
                rgba(102,102,153,.60)
            )
            drop-shadow(
                0 0 18px
                rgba(102,102,153,.35)
            );
    }

}


/* ==========================================
   Carousel Particles
========================================== */

.daily-particle{
    position:absolute;

    border-radius:50%;

    background:
        var(--purple);

    filter:
        blur(.4px);

    opacity:.5;

    animation:
        particlePulse
        2s
        ease-in-out
        infinite;
}

@keyframes particlePulse{

    0%,
    100%{
        opacity:.3;
    }

    50%{
        opacity:1;
    }

}