/*
Theme Name: Ali-vs-foreman
*/

:root {
    --bg-clr : #FAE665;
    --main-red : #FD0002;
    --blue: #0470F6;

    --text-font: 'poppins', 'roboto', sans-serif;
    --title-font: 'anton', 'impact', sans-serif;
    --title-alt: 'oswald', 'fjalla one', sans-serif;
}

*, *:after, *:before {
    width: auto;
    height: auto;
    position: relative;
    box-sizing: border-box;
    transition: .3s ease-in-out;
}

html body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    width: 100dvw;
    background-color: var(--bg-clr);
    font-family: var(--text-font);
}

body > * {
    overflow-x: hidden;
}

section article div img,
section article div video  {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/*  Splash-page  */

main#splash > div, main#splash > main {
    display: flex
;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
}
main#splash {
    height: 100dvh;
}
main#splash div#fighters {
    bottom: 0;
    z-index: 99;
    height: 95%;
	--target-width: 100%;
}
main#splash div#fighters img {
    z-index: 99;
}
main#splash div.arrow {
    z-index: 999;
    height: 20dvh;
    --target-width: 90%;
    top: 70%;
}
main#splash div.arrow.big {
    height: 60dvh;
    z-index: 9;
    --target-width: 70%;
    top: 25%;
}
main#splash div img {
    height: 100%;
}
main#splash div.arrow img:first-child, 
main#splash div.bar img:not(:first-child) {
    transform: scaleX(-1);
}
main#splash div.bar {
    top: 92.5%;
    height: 7.5%;
    width: 90%;
}
main#splash img#fifty {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    height: 60%;
    bottom: 5%;
}
main#splash footer {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    bottom: 10%;
    width: 15%;
    height: 25dvh;
}
main#splash footer img {
    position: absolute;
}
main#splash footer img:first-child {
    right: 0;
    transform: translateX(70%);
    height: 25vmin;
}
main#splash footer img:not(:first-child) {
    left: 0;
    transform: translateX(-100%);
    top: 15dvh;
    height: 20vmin;
}
main#splash header {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 10px);
    display: flex;
    flex-direction: column;
    gap: 2vmax;
    top: 2vmax;
	z-index: 999999;
}
main#splash header nav {
    display: flex
;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    gap: 2vmax;
}
main#splash header nav a {
    font-family: var(--title-alt);
    text-decoration: none;
    color: black;
    font-size: xx-large;
    line-height: 1;
}
main#splash header nav a.actif {
    font-weight: 900;
}
main#splash header nav hr {
    height: 4dvh;
    border: none;
    border-left: solid 1pt black;
}
main#splash header > img {
    width: 32.5vw;
}


/*  Place  */

section#place {
    display: flex;
    align-items: center;
    margin: 2.5vmax auto 1vmax;
    justify-content: center;
    gap: 5vmax;
    font-family: var(--title-alt);
    font-size: 2.5em;
    line-height: 1;
    letter-spacing: .25em;
}
section#place img {
    height: 1.5em;
}


/*  Slider-section  */

section#slider {
    background-position: center center;
    background-size: cover;
    min-height: 90dvh;
    padding: 10vmax 0;
}
section#slider > img {
    position: absolute;
    top: 50%;
    width: 100%;
    left: 0;
    z-index: 1;
}
section#slider > main {
    z-index: 2;
    display: flex;
    padding: 0 10dvh;
    gap: 10dvh;
    ALIGN-ITEMS: CENTER;
}
section#slider > main > aside {
    display: flex;
    flex-direction: column;
    gap: 19dvh;
}
section#slider > main > aside > p {
    font-size: larger;
}
/*section#slider > main > aside > img {
}*/
section#slider > main > article {
    display: flex;
    flex-direction: column;
    gap: 2vmax;
    justify-content: start;
}
section#slider > main > article > section {
    display: flex;
    gap: 2vmax;
    align-items: center;
}
section#slider > main > article > section > div {
    overflow: hidden;
    aspect-ratio: 9 / 16;
    border-radius: 2vmax;
    height: 50dvh;
    order: 2;
}
section#slider > main > article > section > div.actif {
    height: 60dvh;
    order: 1;
}
section#slider > main > article > nav {
    display: flex;
    gap: 1.75dvh;
    width: calc((60dvh / 16) * 9);
    justify-content: center;
    z-index: 9999999;
}
section#slider > main > article > nav > div {
    background: red;
    aspect-ratio: 1;
    height: 1.75dvh;
    border-radius: 1vmax;
    cursor: pointer;
}
section#slider > main > article > nav > div:hover {
    background: goldenrod;
    aspect-ratio: 1.25;
}
section#slider > main > article > nav > div.actif {
    aspect-ratio: 3;
    background: black;
}

.play-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 999;
    height: 10dvh;
    width: 10dvh;
    transform: translate(-50%, -50%);
    filter: invert(1);
    opacity: .5;
}


/*  Program-standard  */

section#programme {
    display: flex;
    gap: 25dvh 8%;
    padding: 10%;
    flex-wrap: wrap;
    align-items: flex-start;
    overflow: hidden;
}
section#programme article {
    background: white;
    width: calc(50% - 4%);
    border-radius: 2vmax;
    padding: 0 6dvh 6dvh;
    box-shadow: 1vmin 1vmax 2vmax #00000033;
}
section#programme > article > header {
    transform: translate(-5vw, -7.5dvh);
    margin: 0 0 -5dvh;
}
section#programme article > header > h3 {
    font-family: var(--title-font);
    font-weight: 100;
    text-transform: uppercase;
    font-size: 6vw;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
}
section#programme > article > header > h3 > span {
    display: block;
    font-size: 90%;
}
section#programme article > header > i {
    font-family: var(--title-alt);
    font-style: normal;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .35rem;
    font-size: 1.5rem;
    display: block;
    width: fit-content;
    background: var(--blue);
    color: white;
    padding: 1vmin 1vmax;
    line-height: 1;
    margin: 2dvh 0 0;
}
section#programme > article > div > p {
    font-size: 90%;
}
section#programme > article > div > div {
    aspect-ratio: 2 / 1;
    margin: 5dvh 0 -15dvh;
    overflow: hidden;
    border-radius: 2vmax;
}

/*  Fight-Program  */


section#programme > section > article {
    width: 55%;
    border-radius: 5vmax;
    float: right;
    transform: translateX(-10dvh);
}
section#programme > section > article > header {
    display: flex;
    margin: 0 0 -4dvh;
    flex-direction: column;
    align-items: end;
    transform: translate(10vw, -7.5dvh);
}
section#programme > section > article > header > h3 {
    font-size: 8vw;
}
section#programme > section > article > header > i {
    background: var(--main-red);
    white-space: nowrap;
}
section#programme > section {
    width: 100%;
}
section#programme > section > div.boxing {
    position: absolute;
    left: 0;
    top: 20%;
    width: 65%;
    transform: translateX(-10vw);
}
section#programme > section > div.boxing > img.glove {
    width: 100%;
    transform: translate(-6%, 10px) rotate(22.5deg);
    z-index: 9999;
}
section#programme > section > div.boxing > img:not(.glove) {
    z-index: 9;
    position: absolute;
}
section#programme > section > div.boxing > img.left {
    left: 8%;
    top: 65%;
}
section#programme > section > div.boxing > img.right {
    left: 30%;
    scale: 2;
    top: 0%;
}
section#programme > section > article > footer {
    display: flex;
    gap: 1vmax;
    margin: 3vmax 0 -15dvh;
    width: 150%;
    transform: translateX(-50%);
    left: 50%;
}
section#programme > section > article > footer > div {
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 2vmax;
    overflow: hidden;
}


/*  Biography  */

section#biographies {
    background: var(--main-red);
    color: white;
    padding: 15dvh 10vmin;
    margin: 20dvh auto;
}
section#biographies header h2 {
    text-align: center;
    font-family: var(--title-font);
    text-transform: uppercase;
    line-height: 1.1;
    font-weight: 100;
    font-size: 6em;
    margin: 10dvh 0 30dvh;
}
section#biographies footer {
    display: flex;
    flex-direction: column;
    gap: 7.5dvh;
    margin: 15vmax auto 5vmax;
    width: 70%;
}
section#biographies footer h4 {
    font-family: var(--title-font);
    font-weight: 100;
    text-transform: uppercase;
    font-size: 4em;
    margin: 0;
    transform: translateX(-10dvh);
}
section#biographies main {
    width: 135%;
    left: 50%;
    transform: translateX(-50%);
    height: 75dvh;
}
section#biographies main > img {
    height: 75dvh;
    z-index: 999;
    float: left;
}
section#biographies main > img:not(:first-child) {
    float: right;
}
section#biographies main > div {
    position: absolute;
    width: 70%;
    left: 50%;
    transform: translate(-50%);
}
section#biographies main > div > img {
    position: absolute;
    max-height: 50dvh;
    border: solid .75vmin;
}
section#biographies main > div > img:nth-child(1) {
    width: 30%;
    left: 2%;
}
section#biographies main > div > img:nth-child(2) {
    left: 28%;
    rotate: -10deg;
    width: 25%;
    top: 10dvh;
    z-index: 2;
}
section#biographies main > div > img:nth-child(3) {
    left: 50%;
    width: 28%;
    rotate: 10deg;
    z-index: 1;
}
section#biographies main > div > img:nth-child(4) {
    rotate: 15deg;
    width: 28.5%;
    left: 10%;
    top: 32dvh;
    z-index: 3;
}
section#biographies main > div > img:nth-child(5) {
    left: 50%;
    top: 30dvh;
    width: 25%;
    rotate: -15deg;
    z-index: 1;
}
section#biographies main > div > img:nth-child(6) {
    left: 32%;
    width: 30%;
    top: 50dvh;
    z-index: 5;
}
section#biographies main > div > img:nth-child(7) {
    left: 70%;
    rotate: 10deg;
    top: 20dvh;
    height: 50dvh;
}
section#biographies aside {
    display: flex;
    gap: 2vmax;
}
section#biographies aside img {
    width: 33%;
}


/*  Counter  */

section#counter {
    display: flex;
    align-items: center;
    flex-direction: column;
}
section#counter h2 {
    font-size: 8em;
    font-family: var(--title-font);
    font-weight: 200;
    color: white;
    background: black;
    line-height: 1;
    padding: 2vmax 2.5vmax;
    margin: 0;
    user-select: none;
}
section#counter i {
    font-style: normal;
    font-weight: 600;
    font-size: 1.5em;
    padding: 1vmax;
}


/*  Footer  */

footer#footer {
    padding: 5vmax;
}
footer#footer header {
    display: flex;
    text-align: center;
    gap: 4vmax;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 3vmax 20%;
    background: white;
    margin: 5dvh auto 10vmax;
    border-radius: 3vmax;
}
footer#footer header img {
    height: 2vmax;
}
footer#footer header h5 {
    font-size: 1.25vmax;
    line-height: 1.25;
    color: var(--blue);
}
footer#footer footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/*footer#footer footer aside {
}*/
footer#footer footer aside img {
    height: 10dvh;
}
footer#footer footer main {
    display: flex;
    gap: 2vmax;
}
footer#footer footer main a {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 1vmax;
    background: black;
    color: white;
    font-weight: 700;
    font-size: 1.5vmax;
    line-height: 1;
    padding: 2vmin 4vmin;
    border-radius: 2vmin;
}
footer#footer footer main a:hover {
    background: var(--main-red);
}
footer#footer footer main a img {
    height: 3dvh;
    filter: invert(1);
}


/*  Responsives */

/*  Tablets and medium screens - 1400  */

@media only screen and (orientation: landscape) and (max-width: 1400px) {

/*  Programme   */

section#programme {
    gap: 15dvh 4%;
    padding: 10% 4%;
}
section#programme article {
    width: calc(50% - 2%);
}


/*  Biographies */
    section#biographies {
    padding: 15dvh 5vmin;
}

    section#biographies main > img:not(:first-child) {
    right: -10dvh;
}
    section#biographies main > img {
    height: 50vw;
}
    section#biographies main > div {
    width: 50%;
}   
    section#biographies main > div > img:nth-child(1) {
    width: 50%;
    left: -8%;
}
    section#biographies main > div > img:nth-child(2) {
    width: 32%;
}
    section#biographies main > div > img:nth-child(3) {
    left: 43%;
    width: 43%;
}   
    section#biographies main > div > img:nth-child(4) {
    width: 38.5%;
    left: 6%;
}
    section#biographies main > div > img:nth-child(5) {
    left: 43%;
    top: 32dvh;
    width: 35%;
}
    section#biographies main > div > img:nth-child(6) {
    left: 28%;
    width: 40%;
}
    section#biographies main > div > img:nth-child(7) {
    left: 70%;
    top: 25dvh;
    height: 40dvh;
}

/*  Splash  */
main#splash header {
    gap: 3vmax;
    top: 3vmax;
}
main#splash div#fighters {
    height: 85%;
}
main#splash img#fifty {
    height: 60%;
    bottom: 2.5%;
}
main#splash header > img {
    width: 35vw;
}
main#splash footer img:first-child {
    transform: translateX(80%);
    height: 20vmin;
}
/*  old monitors and small screens - 800  */

@media only screen and (orientation: landscape) and (max-width: 950px) {
main#splash img#fifty {
    height: 50%;
    bottom: 2.5%;
}
main#splash div#fighters {
    height: 95%;
}
section#biographies header h2 {
    font-size: 3em;
}
}
}


/*  tablets Portrait mode - 1000  */

@media only screen and (orientation: portrait) and (max-width: 1200px) { 

    /*  Slider  */

    section#slider > main {
    flex-direction: column;
    align-items: start;
    padding: 0 10vw 5dvh;
}
    section#slider > main > aside {
    gap: 5dvh;
    width: 100%;
}
    section#slider > main > article > nav {
    margin: 2vmax 0 0;
}


    /*  Programme   */

section#programme {
    padding: 10dvh 5vw 20dvh;
    flex-direction: column;
    gap: 15dvh;
}
    section#programme article {
    width: 100%;
    padding: 0 6vw 6dvh;
    box-shadow: 1vmin 1vmax 2vmax #fF000033;
}
    section#programme > article > header {
    transform: translate(0, -5dvh);
    margin: 0 0 -2.5dvh;
}
section#programme article > header > h3 {
    font-size: 4em;
}
section#programme > article > header > h3 > span {
    display: block;
    font-size: 90%;
}
section#programme article > header > i {
    font-weight: 500;
    width: fit-content;
    line-height: 1.25;
}

/*  Fight-Program  */


section#programme > section > article {
    width: 100%;
    border-radius: 2vmax;
    float: none;
    transform: translateX(0dvh);
    margin: 12dvh 0 0;
}
section#programme > section > article > header {
    align-items: start;
    transform: translate(0, -6.0dvh);
}
section#programme > section > article > header > h3 {
    font-size: 5em;
    text-align: right;
}
section#programme > section > article > header > h3,
section#programme > section > article > header > i {
    white-space: wrap;
}
section#programme > section > div.boxing {
    position: absolute;
    left: 0;
    top: 75%;
    width: 95%;
    transform: translateX(-5vw);
}
section#programme > section > div.boxing > img.glove {
    width: 100%;
}
section#programme > section > div.boxing > img.left {
    left: 5%;
    top: 60%;
    height: 35vw;
}
section#programme > section > div.boxing > img.right {
    left: 50%;
    scale: 1.0;
    top: -40%;
}
section#programme > section > article > footer {
    margin: 3vmax 0 -10dvh;
    align-items: start;
}
section#programme > section > article > footer > div {
    aspect-ratio: 2 / 2;
}
section#programme > section > article > footer > div:not(:first-child) {
    margin: 20dvh 0 0;
}


/*  Biography   */

section#biographies header h2 {
    text-align: left;
    font-size: 3.15em;
    margin: 0dvh 0 20dvh;
}

section#biographies main > img {
    height: 50dvh;
    z-index: 999;
}
section#biographies main > img:first-child {
    left: -10dvh;
    float: left;
}
section#biographies main > img:not(:first-child) {
    float: right;
    right: -20dvh;
}

section#biographies main > div > img {
    position: relative;
    max-height: 50dvh;
    border: solid .75vmin;
    float: left;
    top: unset !important;
    margin: 0 0 -5dvh;
}
section#biographies main > div > img:nth-child(1) {
    width: 90%;
    left: 2%;
}
section#biographies main > div > img:nth-child(2) {
    left: 10%;
    width: 45%;
}
section#biographies main > div > img:nth-child(3) {
    left: 10%;
    width: 68%;
    margin-left: -7vmax;
}
section#biographies main > div > img:nth-child(4) {
    width: 70%;
    left: 10%;
}
section#biographies main > div > img:nth-child(5) {
    left: -20%;
    width: 55%;
}
section#biographies main > div > img:nth-child(6) {
    left: 5%;
    width: 70%;
    margin-left: -20dvh;
}
section#biographies main > div > img:nth-child(7) {
    left: 10%;
    z-index: 9;
    height: 30dvh;
    margin-top: -7dvh;
}

section#biographies footer {
    width: 95%;
    margin-top: 45dvh;
}
section#biographies footer h4 {
    font-size: 4em;
    transform: translateX(0dvh);
    line-height: 1.1;
    margin: 0 0 4dvh;
}
  

/*  Splash  */

main#splash div#fighters {
    height: 65%;
    --target-width: 130%;
}
main#splash div.arrow.big {
    height: 40dvh;
    --target-width: 90%;
}
main#splash div.bar {
    top: 95%;
    height: 5%;
    width: 100%;
}
main#splash div.arrow {
    z-index: 999;
    height: 15dvh;
    --target-width: 90%;
    top: 75%;
}
main#splash header {
    gap: 3vmax;
    top: 3vmax;
}
main#splash header > img {
    width: 60vw;
}
main#splash header nav a {
    font-size: xxx-large;
}
main#splash img#fifty {
    height: 60%;
    bottom: 15%;
    z-index: 15;
}
main#splash footer {
    bottom: 0%;
    width: 5%;
    height: 25dvh;
}
main#splash footer img:first-child {
    top: 40%;
}


/*  Footer  */

footer#footer header {
    gap: 2vmax;
    padding: 3vmax 5%;
}

footer#footer footer {
    flex-direction: column;
    gap: 4vmax;
}


    /*  Phone portrait mode - 600  */

    @media screen and (max-width: 600px) { 
section#programme {
    padding: 10dvh 5vw 10dvh;
    flex-direction: column;
    gap: 15dvh;
}

section#biographies main > div > img:nth-child(1) {
    width: 90%;
    left: 2%;
}
section#biographies main > div > img:nth-child(2) {
    left: 40%;
    width: 55%;
}
section#biographies main > div > img:nth-child(3) {
    left: 50%;
    width: 68%;
    margin-left: 0vmax;
}
section#biographies main > div > img:nth-child(4) {
    width: 80%;
    left: 10%;
}
section#biographies main > div > img:nth-child(5) {
    left: -10%;
    width: 85%;
}
section#biographies main > div > img:nth-child(6) {
    left: 12%;
    width: 70%;
    margin-left: 0dvh;
}
section#biographies main > div > img:nth-child(7) {
    left: 0%;
    margin-top: 0dvh;
}

section#biographies aside {
    flex-direction: column;
}
section#biographies aside img {
    width: 100%;
}

/* Main Splash  */

main#splash header nav a {
    font-size: xx-large;
}
main#splash header > img {
    width: 90vw;
}
main#splash div.arrow.big {
    height: 30dvh;
    --target-width: 150%;
}
main#splash div.bar {
    top: 95%;
    height: 5%;
    width: 150%;
    z-index: 9999;
}
main#splash div#fighters {
    height: 55%;
    --target-width: 150%;
}
main#splash img#fifty {
    height: 45%;
    bottom: 27.5%;
    z-index: 15;
}
main#splash footer {
    bottom: 7%;
    width: 5%;
    height: 25dvh;
    scale: 1.5;
}


/*Footer*/

footer#footer {
    padding: 0 0 5dvh;
}
footer#footer header {
    padding: 8vmax 7.5%;
    border-radius: 0;
    flex-direction: column;
}
footer#footer header h5 {
    font-size: 1.75vmax;
}
section#counter h2 {
    font-size: 4.5em;
}
section#counter i {
    font-size: 1.0em;
}


}

}




main#splash div#fighters,
main#splash div.arrow,
main#splash div.arrow.big {
  opacity: 0;
  animation-name: widthReveal, fadeIn;
  animation-duration: 0.8s, 0.3s;
  animation-fill-mode: forwards, forwards;
  animation-delay: 0s, 0s;
}


/* Base animation keyframes */
@keyframes widthReveal {
  from { width: 300%; }
  to   { width: var(--target-width); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Target widths pulled from your current CSS */
main#splash div#fighters {
  animation-delay: 0s; /* first */
}

main#splash div.arrow {
  animation-delay: 0.4s; /* second */
}

main#splash div.arrow.big {
  animation-delay: 0.8s; /* third */
}