@import url('fonts.css');

:root {
    --color-black: #0D0D0D;
    --color-white: #FEF9F4;
    --light-grey: #B4B4B4;
    --white-opacity:#FEF9F480;
    --black-opacity:#0D0D0D90;

    --font-family:'Pacaembu', sans-serif;

    --font-size-base: 1rem;
    --font-size-h1:14rem;
    --font-size-h2: clamp(3rem, 9.3vw, 10rem);
    --font-size-h3: 2.5rem;
    --font-size-h4-h5: 1.5rem;

    --mobile-base: 0.875rem;
    --mobile-h1-:6rem;
    --mobile-h2: 3.5rem;
    --mobile-h3: 1.5rem;
    --mobile-h4-h5: 1rem;

    --weight-medium: 500;
    --weight-regular: 400;
    --weight-black: 900;
}


html{
    scroll-behavior: smooth;
}

body{
    font-family: var(--font-family);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-base);
    margin: 0;
}


/*
DEFINICIÓN TEMAS DARK/LIGHT
*/

/* PÁGINA CON FONDO BLANCO */

[data-theme="light"] {
   background-color: var(--color-white);
    color: var(--color-black);
    --light-grey: #666666;
}

[data-theme="light"] nav, .overlay {
    background-color: var(--white-opacity);
    border-bottom: 1.5px solid var(--color-black);
}

[data-theme="light"] footer, #footer-1991 a {
    background-color: var(--color-black);
    color: var(--color-white);
}

/* PÁGINAS CON FONDO NEGRO */
[data-theme="dark"] {
   background-color: var(--color-black);
    color: var(--color-white);
}

[data-theme="dark"] nav, .overlay {
    background-color: var(--black-opacity);
    border-bottom: 1.5px solid var(--color-white);
}

/* EFECTO FADE-IN al cargar cada página */

.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in;
}

.visible {
    opacity: 1;
}

/* 
CONFIGURACIÓN NAV FIXED TAB + MENU NAVIGATION
*/

nav {
    position: fixed;
    display: flex;
    justify-content: right;
    top: 0;
    width: calc(100% - 40px);
    z-index: 999;
    padding: 1rem 20px;
    border-bottom: 1.5px solid var(--color-white);
    backdrop-filter: blur(10px);
}

/* MENU NAVIGATION  */

.overlay {  
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  background-color: var(--color-black);
  overflow-x: hidden;
  transition: 0.5s;
}

/* CONTENIDO MENU: Posicionamento */
.overlay-content {
  position: relative;
  top: 30%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

/* LINKS */

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: var(--color-white);
  display: block; /* Display block instead of inline */
  transition: 0.3s;
}

a {
    color: var(--color-white);
    text-decoration: none;
}

footer a {
    color: var(--color-black);
}

a:hover {
    color: var(--light-grey);
    text-decoration: underline;
}

/* 
CONFIGURACIÓN TIPOGRÁFICA
*/

h1, h2, h3, h4, h5 {
    margin: 0;
}

h1, h2{
    margin: 0;
    font-weight: var(--weight-regular);

}

h1{
    font-size: var(--font-size-h1);
    line-height: 12rem;
}

h2 {
    font-size: var(--font-size-h2);
    
}

h3 {
    margin: 0;
    font-weight: var(--weight-medium);
    font-size: var(--font-size-h3);
}

h4 {
    font-weight: var(--weight-black);
    font-size: var(--font-size-h4-h5);
}

h5 {
    margin: 0;
    font-weight: var(--weight-medium);
    font-size: var(--font-size-h4-h5);
}

/* 
CONFIGURACIÓN GRID/SECCIONES
*/

/* SECCIONES FLEXBOX - Hero de cada página */
.landing {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 3rem;
    height: 100vh;
}

#legacy {
    margin: 20px;
    padding-bottom: 8rem;
}

.flex-section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    justify-content: space-between;
    background-position: center calc(50% - 4rem);
    background-repeat: no-repeat;
    background-size: 50%;
}

.flex-div {
    width: 100%;
    display: flex;
}

#flex-table {
    justify-content: flex-end;
    padding-bottom: 6rem;
}


/* EFECTO STICKY */
.wrapper {
    height: auto;
}

.hero {
    top: 0;
    padding-top: 3rem;
    position: sticky;
    height: 100vh;
    padding-bottom: 10rem;
}

#hero-1971 {
    background-image: url('../images/71/mexicoopening.jpeg');
}

#hero-1991 {
    background-image: url('../images/91/michelle-akers-hero.jpeg');
}

#hero-1999 {
    background-image: url('../images/99/brandi-hero.png');
}

#index-title {
    margin: 1rem;
}

#title-1991 {
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
}


/* SECCIONES GRID */

.grid-section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3rem;
    padding: 3rem 20px;
    
}

.intro {
    backdrop-filter: blur(10px);
    padding-top: 3rem;
    background: linear-gradient(to bottom, var(--black-opacity) 0%, var(--color-black) 50%);
}


#intro-1991{
    background: linear-gradient(to bottom, var(--white-opacity) 0%, var(--color-white) 50%);
}

.highlight, .subtitle {
    grid-column: span 12;
}

.grid-blocktext, .venues {
    grid-column: 7 / 13;
}

.quote {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    grid-column: 6 / 13;

}

/* FOOTER - NAVEGACIÓN A PRÓXIMAS PÁGINAS */

footer {
    padding: 0 2rem;
    color: var(--color-black);
    background-color: var(--color-white);
    border-radius: 26px 26px 0 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 8rem;
}

/* 
CONFIGURACIÓN TABLAS
*/

.venues{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 50%;
}

.three-factor-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/*EFECTO imagen aparece on hover - LEGACY*/

.three-factor-table p:hover img{
    display: block;
    left: 25%; 
}

.final-result {
    grid-column: 4 / 10;
}

#legacy-table, .index-table {
    grid-column: span 12;
}

.index-table, .three-factor-table  {
    align-items: baseline;
}

.item-left {
    text-align: left;
}

.item-center {
    text-align: center;
}

.item-right {
    text-align: right;
}

.tables-container {
    grid-column: 4 / 13;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    position: relative;
}
.tables {
    display: grid;
    grid-template-columns: 4fr repeat(6,1fr);
}

.tables p, .three-factor-table p, .venues p {
    margin: 0;
    padding: 10px 0;
}
.tables p, .three-factor-table p, .venues p {
    border-bottom: 1px solid var(--color-white);
}

#tables-1991 p, #final-1991 p, #venues-1991 p, #footer p {
    border-bottom: 1px solid var(--color-black);
}

.table-data {
    color: var(--light-grey);
}

/* 
CONFIGURACIÓN GENERAL IMAGENES
*/

.img, .blurred-img {
    grid-row: auto;
    width: 100%;
    overflow: hidden;
}

.img {
    grid-column: 4 / 10;
    height: 35rem;
    width: 100%;
}

.animated-img {
    animation-name: imgreveal;
    animation-timeline: view();
}

#final-img {
    height: 60rem;
} 

#hero-img {
    height: 150%;
}

.blurred-img {
    filter: grayscale(100%);
    transition: filter 0.5s ease-in-out;
    height: 100%;
    animation-name: imgscroll;
    animation-timeline: view();
}

.blurred-img:hover {
    filter: grayscale(0%);
}


.img img, .blurred-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.legacy-img {
    display: none;
    position: absolute;
    z-index: -1;
    width: 20%;
    height: auto;
    transform: translate(-50%, -50%);
}

/* 
POSICIONES EXACTAS DE DISTINTAS IMAGENES
*/

#img-intro {
    grid-column: 3 / 7;
    grid-row:2;
    height: 120%;
}


#img-groupstage {
    grid-column: 1 / 4;
    grid-row: 5;
    z-index:-1;
}

#img-final-section {
    grid-column: 1 / 6;
    height: 80%;
    grid-row: 2;
}

/* 
EFECTOS
*/

/* EFECTO PARALLAX */

@keyframes  imgscroll {
    0%{ transform: translateY(100px); }
    100%{ transform: translateY(-100px); }
}

/* EFECTO REVEAL */

@keyframes  imgreveal {
    from {
        opacity: 0;
        clip-path: inset(45% 20% 45% 20%);
    }
    to {
        opacity: 1;
        clip-path: inset(0% 0% 0% 0%);
    }
}





/* MEDIA QUERIES
Los media queries no están terminados, están en fase muy inicial.
Los mantengo para seguir con ello más adelante
*/

@media screen and (max-width:475px) {

/* 
CONFIGURACIÓN TIPOGRÁFICA
*/
    body{
        font-size: var(--mobile-base);
    }

    h1, h2, h3, h4, h5 {
        margin: 0;
    }

    h1, h2{
        margin: 0;
        font-weight: var(--weight-regular);

    }

    h1{
        font-size: 6rem;
        line-height: 12rem;
    }

    h2 {
        font-size: var(--mobile-h2);
        
    }

    h3 {
        margin: 0;
        font-weight: var(--weight-medium);
        font-size: var(--mobile-h3);
    }

    h4 {
        font-weight: var(--weight-black);
        font-size: var(--mobile-h4-h5);
    }

    h5 {
        margin: 0;
        font-weight: var(--weight-medium);
        font-size: var(--mobile-h4-h5);
    }

    .grid-section {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    }


    .highlight, .subtitle {
    grid-column: span 7;
    }

    .grid-blocktext, .venues {
        grid-column: 2 / 7;
    }

    .quote {
        display: flex;
        flex-direction: column;
        justify-content: center;
        grid-column: span 7;

    }

    footer {
        padding: 0 2rem;
        color: var(--color-black);
        background-color: var(--color-white);
        border-radius: 26px 26px 0 0;
    }


    /* 
    CONFIGURACIÓN TABLAS
    */

    .venues{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .three-factor-table {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: baseline;
    }


    #final-result, #legacy-table, .index-table, .tables-container {
        grid-column: span 7;
    }

    .tables-container {
        grid-template-columns: repeat(1, 1fr);
    }

    /* 
    CONFIGURACIÓN GENERAL IMAGENES
    */

    .img {
        grid-column: span 7;
        /*margin: 3rem 0;*/
        height: 18rem;
    }

    #final-img {
        height: 30rem;
    } 

}