/*   
Theme Name: Pablo de la Reina
Author: www.icarochaparrop.com
Author URI: www.icarochaparrop.com
Version: 02.26
.
General comments/License Statement if any.
.
*/



/* FONTS */
@font-face {
    font-family: 'GaisyrMono';
    src: url('/wp-content/themes/pablodelareina-theme/fonts/Gaisyr/GaisyrMono-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gaisyr';
    src: url('/wp-content/themes/pablodelareina-theme/fonts/Gaisyr/Gaisyr-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Haas Grotesk';
    src: url('/wp-content/themes/pablodelareina-theme/fonts/Neue Haas Grotesk/NeueHaasGrotDisp-75Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* GLOBAL VARS */
:root {
    /* colors */
    --white: #ffffff;
    --black: #0f0f0f;
    --grey: #999999;

    /* fonts */
    --mono-16: 400 1rem/1.25 'GaisyrMono', monospace ; 
    --serif-16: 400 1rem/1.25 'Gaisyr', 'Times New Roman', Times, serif  ; 
    --serif-21: 400 1.33rem/1.25 'Gaisyr', 'Times New Roman', Times, serif ; 
    --sans-16: 700 1rem/1.25 'Neue Haas Grotesk', sans-serif ;
    --sans-21: 700 1.33rem/1.25 'Neue Haas Grotesk', sans-serif ;

    /* spacing */
    --xs: .25rem;
    --s: .5rem;
    --m: 1rem;
    --l: 2rem;
    --xl: 4rem;

    /* vars */
    --opacity: 0.5;
}

/* animations */
@keyframes blink {0%, 100% { opacity: 1; } 50% { opacity: 0; }}



/* RESET */
*{margin: 0; padding: 0; list-style: none; }
a{color: inherit; text-decoration: none;}



/* BODY */
body{margin: 1rem; transition: background 0.3s ease; font: 'GaisyrMono' !important;}



/* HEADER */
.header{width: calc(100% - ( var(--m) * 2)); font: var(--mono-16); display: flex; flex-direction: column; gap: var(--m);position: fixed; top: var(--m); left: var(--m); z-index: 999;}
.logo{font: var(--mono-16); display: flex; gap: var(--s);justify-content: center;}
.logo span{opacity: var(--opacity);}
.nav{display: flex; gap: var(--xl); justify-content: center;}
.black-white{display: flex; gap: var(--s);}

/* black-white */
.black-white a {transition: opacity 0.3s ease;}
body.white {background: var(--white); color: var(--black);}
body.black {background: var(--black); color: var(--white);}
body.white .btn-white, body.black .btn-black{opacity: 1;}
body.white .btn-black, body.black .btn-white{opacity: var(--opacity);}

.color-inactive{opacity: var(--opacity);}
body.home .nav {color: var(--white) !important;}
body.home .nav a {color: var(--white) !important;}
body.home .logo,body.ome .logo span {color: var(--white) !important;}
body.home footer>p , body.home .imprint{color: var(--white) !important;}



/* FOOTER */
footer{font: var(--serif-16); width: calc(100% - ( var(--m) * 2));  display: flex; flex-direction: column; gap: 0;align-items: center;position: fixed; bottom: var(--m); left: var(--m); z-index: 999}
footer p, .imprint{opacity: var(--opacity);}



/* HOME */
.projects-3d {position: fixed;inset: 0;overflow: hidden;perspective: 1200px;height: 100vh;}
.projects-stage {position: absolute;top: 50%; left: 50%;transform: translate(-50%, -50%); height: auto;}

.project-3d:not(.active) {pointer-events: none;}
.project-3d.active {pointer-events: auto;}
.project-3d {
    font-family: 'Neue Haas Grotesk',sans-serif;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    font-size: 9.5vw;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    opacity: 1;
    color: var(--white);
    letter-spacing: -.25vw;
    line-height: 1;
    transform-origin: center center;
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden;       
    will-change: transform, opacity;     
}

#previewA, #previewB {position: fixed;inset: 0;width: 100%;height: 100%;object-fit: cover;z-index: -1;opacity: 0;}
#previewA.active,#previewB.active {opacity: 1;}

.work-client__home, .work-category__home {display: none;}



/* INFO */
.about{margin-top:calc(var(--xl) * 2); font: var(--serif-21); text-indent: var(--l);text-wrap: pretty;}
.info section{margin-top: calc(var(--xl) * 2);margin-bottom: calc(var(--xl) * 6) ;}
.info section > div{margin-top: var(--xl);}
.info-titles{font: var(--mono-16);margin-bottom: var(--s);}
.clients, .represented, .contact-link{font: var(--serif-21)}



/* WORK */
.work {display: grid;grid-template-columns: 1fr;gap: var(--m);margin-top: calc(var(--xl) * 2);margin-bottom: calc(var(--xl) * 2); align-items: start;}
.work-article {position: relative;cursor: pointer;}
.work-media {position: relative;display: flex;justify-content: center;align-items: center;overflow: hidden; aspect-ratio: 16 / 9;}
.work-media video,.work-media img {width: 100%;height: auto;display: block;object-fit: cover;}
.work-text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;color: var(--white); padding: 1rem;z-index: 2;width: 100%;}

.work-title {font: var(--sans-21);}
.work-info {display: flex; gap: var(--xs);justify-content: center;}
.work-category::before,.work-category__home::before{content: '(';}
.work-category::after,.work-category__home::after{content: ')';}
.work-info h3 {font: var(--serif-16);}



/* PROJECT */
.project-text{display: flex; width: 100%;justify-content: center; gap: 0; position: static; flex-direction: column;text-align: center; margin-top: var(--xl);}

.slider {margin-top: calc(var(--m) + 56px + var(--l));display: flex;flex-direction: column;align-items: center;gap: var(--m);position: relative;}
.slider-track {position: relative;width: 100%;height: 37.5vh; overflow: hidden;display: flex;justify-content: center;align-items: center;}
.slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;pointer-events: none;display: flex;justify-content: center;align-items: center;}
.slide.active {opacity: 1;pointer-events: auto;}
.slide img,.slide video {max-width: 100%;max-height: 100%;object-fit: contain; display: block;}

.slider-nav {background: none;border: none;cursor: pointer;font: var(--mono-16);padding: var(--l); padding: var(--l); position: relative; }
body.white  .slider-prev-number, body.white .slider-next-number{color: var(--black);}
body.black  .slider-prev-number, body.black .slider-next-number{color: var(--white);}

.preview {display: none;}

.credits h2{font: var(--mono-16);margin-bottom: var(--s);}
.credit-item{font: var(--serif-21);}
.sinopsis{font: var(--serif-21); margin-bottom: var(--l);width: 92.5%; text-wrap: pretty;}
.credits-link {white-space: normal; margin-bottom: calc(var(--m) + 20px + var(--xl) + var(--xl)); margin-top: calc(var(--xl) * 2);display: flex; justify-content: space-between;width: calc(100vw - 2rem);align-items: start;gap: var(--l);flex-direction: column;gap: var(--xl);}
.credits-list{display: flex; gap:  var(--m); width: 92.5%; flex-direction: column; margin-top: var(--m);}
.credits{flex: 1;width: 100%;}
.link-vimeo{font: var(--mono-16);color: var(--black);white-space: nowrap;}
.link-vimeo:hover{animation: blink 0.45s linear infinite;}


/* RESPONSIVE */

/* tablet */
@media (min-width: 768px) {

    /* HEADER */
    .header{flex-direction: row;}
    .logo{justify-content: start; flex: 1;}
    .nav{justify-content: end; flex: 1;}

    /* FOOTER */
    footer{flex-direction: row; align-items: start; justify-content: space-between;}

    /* INFO */
    .info section{margin-top: var(--xl); margin-bottom: 0; display: flex; gap: var(--m);}
    .info section > div{flex: 1; margin-top: 0;}

    /* WORK */
    .work{grid-template-columns: repeat(2, 1fr);grid-auto-flow: dense;}

    /* PROJECT */
    .slider-track{height: 50vh;}
}


/* desktop */
@media (min-width: 1024px) {

    body{overflow: hidden;}

    /* HEADER */
    body.white .btn-black:hover,  body.black .btn-white:hover , .nav .link:hover{animation: blink 0.45s linear infinite;}

    /* FOOTER */
    .imprint{transition: all .3s ease-in-out;}
    .imprint:hover{opacity: 1;}

    /* HOME */
    .project-3d{font-size: 8vw;}

    .work-client__home, .work-category__home {display: block; position: fixed;top: 50%;transform: translateY(-50%);color: var(--white);font: var(--serif-16);pointer-events: none;z-index: 10;}
    .work-client__home {left: var(--m);text-align: left;}
    .work-category__home {right: var(--m);text-align: right;}

    /* INFO */
    .about{position: sticky; text-indent: calc(305px + var(--s));margin-top: -.25rem; width: calc(75% - var(--l));}
    .info section {display: grid; grid-template-columns: repeat(4, 1fr)}
    .contact-link, .represented {transition: all .3s ease; opacity: 1;}
    .contact-link:hover, .represented:hover {opacity: var(--opacity);}

    /* WORK */
    .work{grid-template-columns: repeat(4, 1fr);position: fixed;
    margin-top: 0; top: calc(20px + 2rem); width: calc(100vw - var(--m) - var(--m));overflow-y: scroll; height: calc(100vh - 4rem);}
    .work::-webkit-scrollbar{display: none;}
    .work > .work-article:last-child{padding-bottom: calc(4rem + var(--l))}
    .work-article:nth-child(4n+1) {grid-column: span 2;}
    .work-article:nth-child(4n+2),.work-article:nth-child(4n+3),.work-article:nth-child(4n+4) {grid-column: span 1;}

    .work-text {position: fixed;top: var(--m);left: 50%;transform: translateX(-50%);text-align: center;color: inherit;z-index: 999;opacity: 0;pointer-events: none;transition: all 0.15s ease;display: flex; align-items: center;justify-content: center; gap: var(--s);padding: 0;}
    .work-article:hover .work-text {opacity: 1;}
    .work-title {font: var(--sans-16);}

    /* PROJECT */
    .project-text{width: calc( 100% - var(--m) - var(--m)); gap: var(--s); position: fixed; top: var(--m);flex-direction: row;width: calc( 100% - var(--m) - var(--m));margin-top: 0}

    .slider {display: grid; grid-template-columns: 15% 70% 15%; gap: 0;width: 100%; height: 100%; margin-top: 0;margin-bottom: calc(var(--xl) * 2);}
    .slider-track{height: 50vh;}
    .slider-wrapper {min-height: 100vh;  display: flex; justify-content: center; align-items: center;}

    .slider-nav:hover .preview {opacity: 1;pointer-events: auto;}

    .preview {display: block !important;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);opacity: 0;pointer-events: none;overflow: hidden;z-index: 999;transition: all 0.15s ease;}
    .preview img,.preview video {max-inline-size: 100px;max-block-size: 100px; display: block;}

    .credits-list{display: flex; gap: var(--xs) var(--m); flex-direction: row; margin-top: 0; flex-wrap: wrap;}
    .credits-link {white-space: nowrap; position: fixed; bottom: calc(var(--m) + 20px + var(--l));margin: 0;flex-direction: row;}
    .credits br{display: none;}
}