/* FONTS*/

@font-face {
    font-family: 'RomanaBT';
    src: url(./assets/fonts/RomanaBT.woff2) format('woff2');
    font-display: swap;
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'RomanaBT';
    src: url(./assets/fonts/RomanaBT.woff) format('woff');
    font-display: swap;
    font-weight: 300;
    font-style: normal;
}

/* RESET */

*, 
*::before, 
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* GLOBALS */

:root {
    --color-blue300: #000128;
    --color-blue200: #00023B;
    --color-blue100: #000A5C;
    --fontsize-title: clamp(22px, 4.7vw, 44px);
    --fontsize-text: clamp(12px, 3vw, 21px);
    --lineheight-text: 1.2;
    --lineheight-title: 0.95;
}

body {
    background-color: var(--color-blue300);
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'RomanaBT', serif;
    text-align: center;
    word-spacing: -2.5px;
}

.main-content {
    aspect-ratio: 5/7;
    background: var(--color-blue100);
    max-width: 60vw;
    max-height: 90vw;
    overflow: hidden;
    position: relative;
}


/* INFO */

.info-container {
    display: flex;
    justify-content: center;
}

.text-container {
    max-width: 80%;
    padding-top: 70px;
}

.text-container p {
    letter-spacing: var(--letter-spacing);
    cursor: pointer;
}

.autor p {
    font-size: var(--fontsize-text);
    line-height: var(--lineheight-text);
    letter-spacing: -0.5px;
    padding-bottom: 5px;
    opacity: 0;
    animation: subirfrases cubic-bezier(0.075, 0.82, 0.165, 1) 5s 2.2s 1 forwards;
}

.cita {
    position: relative;
}

.cita p {
    font-size: var(--fontsize-title);
    line-height: var(--lineheight-title);
    letter-spacing: -1.2px;
}

.frase {
    opacity: 0;
}

.f1 {
    animation: subirfrases cubic-bezier(0.075, 0.82, 0.165, 1) 5s 0.6s 1 forwards;
}

.f2 {
    animation: subirfrases cubic-bezier(0.075, 0.82, 0.165, 1) 5s 0.9s 1 forwards;
}

.f3 {
    animation: subirfrases cubic-bezier(0.075, 0.82, 0.165, 1) 5s 1.2s 1 forwards;
}



/* ILLUSTRATIONS */

.illustration-container {
    background: radial-gradient(50% 50% at 50% 50%, #00023B 22.6%, #040A50 71.63%, #000A5C 100%);
}

.image-container img {
    max-width: 50%;
}

.star-container {
    position: absolute;
    bottom: -38px;
    animation: rotar linear 5s infinite, aparecer ease-in 3s forwards;
    width: 100%;
    /* mix-blend-mode: screen; */
}

.star-container img {
    scale: 3;
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    height: auto;
    /* filter: saturate(60%); */
} 

.character-container {
    scale: 0.85;
    transform: translate(-65px, 200px);
    animation: subir cubic-bezier(0.19, 1, 0.22, 1) 5s 0.9s both;
    opacity: 0;
}

.character-artwork {
    position: relative;
    width: 50%;
    margin-inline: auto;
    --separacio: 1.8;
}

.character-artwork .pedestal {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

.escombra-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.character-artwork .escombra {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: auto;
    opacity: 0;
    transform: translate(0, 0);
    pointer-events: none;
    z-index: var(--i, 0);
    transition: transform 1s ease-in-out, opacity 0.5s ease 1.3s;
}

.escombra-trigger {
    position: absolute;
    left: 61.46%;
    top: 1.48%;
    width: 33.84%;
    height: 21.04%;
    z-index: 100;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.escombra-trigger:focus-visible {
    outline: 2px solid white;
    outline-offset: 3px;
}

.fig2  { --i: 1;  --x: -12%;  --y: 2%; }
.fig3  { --i: 2;  --x: 12%;   --y: -1%; }
.fig4  { --i: 3;  --x: -24%;  --y: -3%; }
.fig5  { --i: 4;  --x: 24%;   --y: 4%; }
.fig6  { --i: 5;  --x: -36%;  --y: 5%; }
.fig7  { --i: 6;  --x: 36%;   --y: -2%; }
.fig8  { --i: 7;  --x: -48%;  --y: -1%; }
.fig9  { --i: 8;  --x: 48%;   --y: 6%; }
.fig10 { --i: 9;  --x: -60%;  --y: 4%; }
.fig11 { --i: 10; --x: 60%;   --y: -4%; }
.fig12 { --i: 11; --x: -72%;  --y: -5%; }
.fig13 { --i: 12; --x: 72%;   --y: 3%; }
.fig14 { --i: 13; --x: -8%;   --y: 12%; }
.fig15 { --i: 14; --x: 8%;    --y: -11%; }
.fig16 { --i: 15; --x: -20%;  --y: -13%; }
.fig17 { --i: 16; --x: 20%;   --y: 14%; }
.fig18 { --i: 17; --x: -32%;  --y: 15%; }
.fig19 { --i: 18; --x: 32%;   --y: -12%; }
.fig20 { --i: 19; --x: -44%;  --y: -11%; }
.fig21 { --i: 20; --x: 44%;   --y: 16%; }
.fig22 { --i: 21; --x: -56%;  --y: 14%; }
.fig23 { --i: 22; --x: 56%;   --y: -14%; }
.fig24 { --i: 23; --x: -68%;  --y: -15%; }
.fig25 { --i: 24; --x: 68%;   --y: 13%; }
.fig26 { --i: 25; --x: -14%;  --y: -22%; }
.fig27 { --i: 26; --x: 14%;   --y: 21%; }
.fig28 { --i: 27; --x: -26%;  --y: 23%; }
.fig29 { --i: 28; --x: 26%;   --y: -24%; }
.fig30 { --i: 29; --x: -38%;  --y: -25%; }
.fig31 { --i: 30; --x: 38%;   --y: 22%; }
.fig32 { --i: 31; --x: -50%;  --y: 21%; }
.fig33 { --i: 32; --x: 50%;   --y: -26%; }
.fig34 { --i: 33; --x: -62%;  --y: -24%; }
.fig35 { --i: 34; --x: 62%;   --y: 24%; }
.fig36 { --i: 35; --x: -74%;  --y: 25%; }
.fig37 { --i: 36; --x: 74%;   --y: -23%; }
.fig38 { --i: 37; --x: -5%;   --y: 32%; }
.fig39 { --i: 38; --x: 5%;    --y: -31%; }
.fig40 { --i: 39; --x: -18%;  --y: -33%; }
.fig41 { --i: 40; --x: 18%;   --y: 34%; }
.fig42 { --i: 41; --x: -30%;  --y: 35%; }
.fig43 { --i: 42; --x: 30%;   --y: -32%; }
.fig44 { --i: 43; --x: -42%;  --y: -31%; }
.fig45 { --i: 44; --x: 42%;   --y: 36%; }
.fig46 { --i: 45; --x: -54%;  --y: 34%; }
.fig47 { --i: 46; --x: 54%;   --y: -34%; }
.fig48 { --i: 47; --x: -66%;  --y: -35%; }
.fig49 { --i: 48; --x: 66%;   --y: 33%; }
.fig50 { --i: 49; --x: 0%;    --y: -38%; }
.fig51  { --i: 50; --x: 0%;    --y: 38%; }
.fig52  { --i: 51; --x: -10%;  --y: 42%; }
.fig53  { --i: 52; --x: 10%;   --y: -41%; }
.fig54  { --i: 53; --x: -22%;  --y: -43%; }
.fig55  { --i: 54; --x: 22%;   --y: 44%; }
.fig56  { --i: 55; --x: -34%;  --y: 45%; }
.fig57  { --i: 56; --x: 34%;   --y: -42%; }
.fig58  { --i: 57; --x: -46%;  --y: -41%; }
.fig59  { --i: 58; --x: 46%;   --y: 46%; }
.fig60  { --i: 59; --x: -58%;  --y: 44%; }
.fig61  { --i: 60; --x: 58%;   --y: -44%; }
.fig62  { --i: 61; --x: -70%;  --y: -45%; }
.fig63  { --i: 62; --x: 70%;   --y: 43%; }
.fig64  { --i: 63; --x: -6%;   --y: -52%; }
.fig65  { --i: 64; --x: 6%;    --y: 51%; }
.fig66  { --i: 65; --x: -18%;  --y: 53%; }
.fig67  { --i: 66; --x: 18%;   --y: -54%; }
.fig68  { --i: 67; --x: -30%;  --y: -55%; }
.fig69  { --i: 68; --x: 30%;   --y: 52%; }
.fig70  { --i: 69; --x: -42%;  --y: 51%; }
.fig71  { --i: 70; --x: 42%;   --y: -56%; }
.fig72  { --i: 71; --x: -54%;  --y: -54%; }
.fig73  { --i: 72; --x: 54%;   --y: 54%; }
.fig74  { --i: 73; --x: -66%;  --y: 55%; }
.fig75  { --i: 74; --x: 66%;   --y: -53%; }
.fig76  { --i: 75; --x: -12%;  --y: 62%; }
.fig77  { --i: 76; --x: 12%;   --y: -61%; }
.fig78  { --i: 77; --x: -24%;  --y: -63%; }
.fig79  { --i: 78; --x: 24%;   --y: 64%; }
.fig80  { --i: 79; --x: -36%;  --y: 65%; }
.fig81  { --i: 80; --x: 36%;   --y: -62%; }
.fig82  { --i: 81; --x: -48%;  --y: -61%; }
.fig83  { --i: 82; --x: 48%;   --y: 66%; }
.fig84  { --i: 83; --x: -60%;  --y: 64%; }
.fig85  { --i: 84; --x: 60%;   --y: -64%; }
.fig86  { --i: 85; --x: -72%;  --y: -65%; }
.fig87  { --i: 86; --x: 72%;   --y: 63%; }
.fig88  { --i: 87; --x: -84%;  --y: 3%; }
.fig89  { --i: 88; --x: 84%;   --y: -4%; }
.fig90  { --i: 89; --x: -88%;  --y: -18%; }
.fig91  { --i: 90; --x: 88%;   --y: 19%; }
.fig92  { --i: 91; --x: -82%;  --y: 32%; }
.fig93  { --i: 92; --x: 82%;   --y: -33%; }
.fig94  { --i: 93; --x: -86%;  --y: -46%; }
.fig95  { --i: 94; --x: 86%;   --y: 47%; }
.fig96  { --i: 95; --x: -80%;  --y: 60%; }
.fig97  { --i: 96; --x: 80%;   --y: -61%; }
.fig98  { --i: 97; --x: -8%;   --y: -74%; }
.fig99  { --i: 98; --x: 8%;    --y: 75%; }
.fig100 { --i: 99; --x: 0%;    --y: -82%; }


.character-artwork:has(.escombra-trigger:is(:hover, :focus-visible)) .escombra {
    opacity: 1;
    transform: translate(
        calc(var(--x, 0%) * var(--separacio)),
        calc(var(--y, 0%) * var(--separacio))
    );
    transition: transform 1s ease-out, opacity 0.3s ease;
    transition-delay: max(0s, calc((var(--i, 0) - 1) * 0.025s));
}

/* ANIMATIONS */

@keyframes rotar {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes aparecer {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@keyframes subir {
    0% {
        opacity: 0;
        transform: translate(-75px, 400px)
    }

    100% {
        opacity: 1;
        transform: translate(-75px, 280px);
    }
}

@keyframes subirfrases {
    0% {
        opacity: 0;
        transform: translateY(30px)
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}


@media (max-width: 1000px) {

    .star-container {
    bottom: -45px;
    }
    
    .text-container {
    padding-top: 50px;
    }
   
    @keyframes subir {
    0% {
        opacity: 0;
        transform: translate(-8vw, 400px)
    }

    100% {
        opacity: 1;
        transform: translate(-8vw, 25vw);
    }
    }
}

@media (max-width: 750px) {

    .star-container {
    bottom: -45px;
    }
    
    .text-container {
    padding-top: 38px;
    }
}

@media (max-width: 450px) {

    .star-container {
    bottom: -55px;
    }
    
    .text-container {
    padding-top: 38px;
    }

    .main-content {
    max-width: 95vw;
    height: 388px;
    width: 300px;
    aspect-ratio: unset;
    max-height: unset;
    }

    @keyframes subir {
    0% {
        opacity: 0;
        transform: translate(-8vw, 400px)
    }

    100% {
        opacity: 1;
        transform: translate(-8vw, 27vw);
    }
    }
}