/*
Theme Name: AGLR Portfolio
Theme URI: https://julianaguilar.com
Author: Julian Aguilar
Description: Thème portfolio plein écran inspiré de gabrielcontassot.com (images révélées au défilement, titres géants, en-tête fixe, transitions). Projets dans « Projets », textes et couleurs dans Apparence > Personnaliser > Portfolio AGLR.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: aglr
*/

/* ---------- Tokens ---------- */
:root {
	--bg: #0a0a0a;
	--fg: #ffffff;
	--page-bg: #f8f9fa;
	--page-fg: #000000;
	--wipe: #000000;
	--font: Helvetica, Arial, sans-serif;
	--gx: 5vw;
	--gy: 2rem;
	--expo: cubic-bezier(.16, 1, .3, 1);
	--power2: cubic-bezier(.33, 1, .68, 1);
}

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

html {
	background: var(--bg);
	color: var(--fg);
	-webkit-text-size-adjust: 100%;
	overscroll-behavior: none;
	scrollbar-width: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.2em;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: transparent;
	color: inherit;
	overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; font-size: inherit; }
ul, ol { padding: 0; list-style: none; }
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; z-index: 1000;
	top: 8px; left: 8px; padding: 8px 12px; background: #fff; color: #000;
}
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.link-line { position: relative; text-transform: uppercase; }
.link-line::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
	background: currentColor; transform: scaleX(0); transform-origin: right;
	transition: transform .5s var(--expo);
}
.link-line:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Loader: the counter travels from left to right ---------- */
.loader {
	position: fixed; inset: 0; z-index: 100;
	display: flex; align-items: center;
	padding: 0 var(--gx);
	background: #000; color: #fff;
	font-size: 1.1rem; overflow: clip;
	transition: opacity .8s ease-in, visibility .8s;
}
.loader__num { width: 100%; font-variant-numeric: tabular-nums; will-change: transform; }
.loader.is-done { opacity: 0; visibility: hidden; }
.no-js .loader { display: none; }

/* ---------- Background colour layer (home hover colour) ---------- */
.bg-layer {
	position: fixed; inset: 0; z-index: -10; pointer-events: none;
	background-color: var(--bg);
	transition: background-color .6s ease-in;
}

/* ---------- Page transition: grows from the bottom, leaves through the top ---------- */
.wipe {
	position: fixed; inset: 0; z-index: 90;
	background: var(--wipe);
	transform: scaleY(0); transform-origin: bottom center;
	pointer-events: none;
}
.wipe.is-in { transform: scaleY(1); transition: transform .8s var(--expo); }
.wipe.is-cover { transform: scaleY(1); transition: none; }
.wipe.is-out { transform: scaleY(0); transform-origin: top center; transition: transform .8s var(--power2); }

/* ---------- Grain (optional) ---------- */
.grain {
	position: fixed; inset: -50%; z-index: 70; pointer-events: none; opacity: .07;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	animation: grain 1s steps(6) infinite;
}
@keyframes grain {
	0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); }
	40% { transform: translate(3%, -5%); } 60% { transform: translate(-6%, 2%); }
	80% { transform: translate(5%, 5%); } 100% { transform: translate(0, 0); }
}

/* ---------- Close ---------- */
.close {
	position: fixed; top: var(--gy); right: var(--gx); z-index: 60;
	font-size: .75rem; line-height: 1.2em; text-transform: uppercase;
	color: #fff; mix-blend-mode: difference;
}

/* =================================================================== */
/* HOME                                                                */
/* =================================================================== */

/* Central block */
.intro {
	position: fixed; inset: 0; z-index: 10;
	display: flex; align-items: center; justify-content: center;
	font-size: 17.6px;
	pointer-events: none;
}
@media (min-width: 1920px) { .intro { font-size: 21.6px; } }
.intro__nav {
	display: flex; flex-direction: column;
	width: max-content; max-width: 90vw;
	overflow: hidden; white-space: nowrap;
	line-height: 1.2em;
	text-transform: uppercase;
	pointer-events: auto;
	will-change: transform, opacity;
}
.intro__row { display: flex; justify-content: space-between; gap: 1.2em; }
.intro__role { text-align: justify; text-align-last: justify; }
.intro__links { margin-top: var(--gy); }
.intro [data-text] { font-kerning: none; }

/* Projects */
.works { position: relative; }
.works__start {
	height: 120vh;
	display: flex; align-items: flex-end; justify-content: center; padding-bottom: 20vh;
}
.works__end {
	height: 180vh;
	display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3vh;
}
.scroll-hint, .scroll-up {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
	display: flex; justify-content: center;
	padding-bottom: var(--gy);
	font-size: 10px; text-transform: uppercase;
	pointer-events: none;
	opacity: 0; transition: opacity .6s ease-in;
}
.scroll-hint.is-on, .scroll-up.is-on { opacity: 1; }
.scroll-up.is-on .scroll-up__label { pointer-events: auto; }
.works__empty { position: relative; z-index: 20; text-align: center; padding: 20vh 0; }

.work { position: relative; z-index: 20; pointer-events: none; }
.work__title-wrap {
	height: 70vh;
	display: flex; align-items: center; justify-content: center;
	padding: 0 var(--gx);
}
@media (min-width: 768px) { .work__title-wrap { height: 100vh; } }
.work__title {
	width: 83.333%;
	display: flex; justify-content: center; white-space: nowrap;
	font-size: 14.8vw; line-height: .9;
	text-align: center; text-transform: uppercase;
}
.work__title a { pointer-events: auto; display: inline-block; }

/* In-flow box you hover / click; the picture itself is fixed in the middle of the screen. */
.work__track {
	height: 40vh;
	display: flex; align-items: center; justify-content: center;
	padding: 0 var(--gx);
}
.work__hit { width: 83.333%; aspect-ratio: 4 / 5; display: flex; pointer-events: auto; }
.work__hit a { display: block; width: 100%; height: 100%; }
@media (min-width: 1024px) { .work__hit { width: 33.333%; } }

.work__fixed {
	position: fixed; top: 0; left: 0; z-index: 50;
	width: 100vw; height: 100svh;
	display: flex; align-items: center; justify-content: center;
	padding: 0 var(--gx);
	pointer-events: none;
}
@media (min-width: 768px) { .work__fixed { height: 100vh; } }
.work__img {
	width: 83.333%; aspect-ratio: 9 / 16;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
	visibility: hidden;
	clip-path: inset(100% 0 0 0);
}
@media (min-width: 768px) { .work__img { aspect-ratio: 4 / 5; } }
@media (min-width: 1024px) { .work__img { width: 41.667%; transform: scale(.92); } }
.work__img img, .work__img video { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.no-js .work__img { visibility: visible; clip-path: none; }

/* =================================================================== */
/* PROJECT                                                             */
/* =================================================================== */
.phead {
	position: fixed; top: 0; left: 0; width: 100%;
	height: 100vw; overflow: clip;
	background: #111;
}
@media (min-width: 768px) { .phead { height: 100vh; padding-bottom: var(--gy); } }
.phead__title-wrap {
	position: absolute; top: 0; left: 0; width: 100vw; height: 100%;
	display: flex; align-items: center; justify-content: center;
	padding: 0 var(--gx); z-index: 10;
}
.phead__title { white-space: nowrap; font-size: 14vw; line-height: 1; text-transform: uppercase; color: #fff; text-align: center; }
.phead__title span { display: inline-block; will-change: transform; }
.js .phead__title { opacity: 0; transform: scale(1.4); }
.phead__title.is-in { opacity: 1; transform: none; transition: opacity 2.44s var(--expo), transform 2.44s var(--expo); }
.phead__img {
	width: 100%; height: 100vw; overflow: clip;
	display: flex; align-items: center; justify-content: center;
	background-position: center; background-size: cover;
}
@media (min-width: 768px) { .phead__img { height: 100vh; } }
.phead__img img, .phead__img video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); will-change: transform; }

.pbody { position: relative; z-index: 20; width: 100%; pointer-events: none; color: var(--page-fg); }
.pbody__spacer { height: 100vw; }
@media (min-width: 768px) { .pbody__spacer { height: 100vh; } }
.pbody__light { background: var(--page-bg); padding-block: 60px; pointer-events: auto; }
@media (min-width: 768px) { .pbody__light { padding-block: 0; } }
.pbody__end { height: 100vh; }

.pintro {
	max-width: 1820px; margin: 0 auto;
	padding: 0 var(--gx) 30px;
}
@media (min-width: 768px) { .pintro { padding-top: 180px; } }
@media (min-width: 1024px) { .pintro { display: flex; gap: 8rem; } }
.pintro__headline { font-size: 26px; line-height: 1; padding-block: 1.5rem; }
@media (min-width: 768px) { .pintro__headline { font-size: 40px; } }
@media (min-width: 1024px) { .pintro__headline { width: 40%; padding-block: 0; flex-shrink: 0; } }
.pintro__text { font-size: 1.1rem; line-height: 1.5rem; }
@media (min-width: 1024px) { .pintro__text { width: 60%; } }
.pintro__meta {
	display: flex; justify-content: space-between; gap: 16px;
	padding-block: 70px; font-size: 15px; text-transform: uppercase;
}

/* Gutenberg blocks laid out like the reference */
.entry { margin: 0 auto; }
@media (min-width: 768px) { .pbody .entry { padding-bottom: 180px; } }
.entry > * { padding-block: var(--gy); margin: 0; }
@media (min-width: 1024px) { .entry > * { padding-block: 4rem; } }
.entry img, .entry video { width: 100%; height: auto; }
.entry figure { overflow: clip; }
.entry figcaption { font-size: .75rem; text-transform: uppercase; margin-top: 10px; opacity: .6; }
.entry > .wp-block-image, .entry > .wp-block-video, .entry > .wp-block-embed, .entry > .wp-block-gallery { padding-inline: var(--gx); }
.entry > .alignfull { padding-inline: 0; }
@media (min-width: 1024px) { .entry > .is-style-aglr-narrow { padding-left: 25%; } }
@media (min-width: 1024px) { .entry > .is-style-aglr-portrait { padding-inline: 33.333%; } }

/* Two pictures: a large one (7/12) and a small one (4/12), alternating sides */
.entry > .wp-block-columns {
	display: flex; flex-direction: column; justify-content: space-between;
	gap: 0; padding-inline: var(--gx);
}
.entry > .wp-block-columns > .wp-block-column { margin: 2rem 0; flex-basis: auto !important; }
@media (min-width: 1024px) {
	.entry > .wp-block-columns { flex-direction: row; align-items: flex-start; }
	.entry > .wp-block-columns:nth-of-type(even) { flex-direction: row-reverse; }
	.entry > .wp-block-columns > .wp-block-column { margin: 0; }
	.entry > .wp-block-columns > .wp-block-column:nth-child(1):nth-last-child(2) { width: 58.333%; }
	.entry > .wp-block-columns > .wp-block-column:nth-child(2):nth-last-child(1) { width: 33.333%; }
	.entry > .wp-block-columns > .wp-block-column:nth-child(1):nth-last-child(3),
	.entry > .wp-block-columns > .wp-block-column:nth-child(1):nth-last-child(3) ~ .wp-block-column { width: 31%; }
	.entry > .wp-block-columns.are-vertically-aligned-center { align-items: center; }
}
.entry .wp-block-column > * + * { margin-top: var(--gy); }
.entry .wp-block-gallery { gap: var(--gy) !important; }
.entry .wp-block-embed iframe { width: 100%; }
.entry .wp-block-embed.is-type-video .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.entry .wp-block-embed.is-type-video iframe { position: absolute; inset: 0; height: 100%; }

/* Text blocks: small label on the left, uppercase text on 9/12 */
.entry > p, .entry > ul, .entry > ol, .entry > h2, .entry > h3, .entry > h4 { padding-inline: var(--gx); max-width: 1820px; margin-inline: auto; }
.entry > h2 { font-size: 26px; line-height: 1; }
@media (min-width: 768px) { .entry > h2 { font-size: 40px; } }
.entry > .is-style-aglr-text { max-width: 1820px; margin-inline: auto; padding-inline: var(--gx); }
@media (min-width: 1024px) {
	.entry > .is-style-aglr-text { display: flex; justify-content: space-between; align-items: flex-start; }
	.entry > .is-style-aglr-text > :first-child { width: 25%; }
	.entry > .is-style-aglr-text > :not(:first-child) { width: 75%; }
}
.entry .is-style-aglr-text > :first-child { font-size: .75rem; padding-block: 1.5rem; }
@media (min-width: 1024px) { .entry .is-style-aglr-text > :first-child { padding-block: 0; } }
.entry .is-style-aglr-text > :not(:first-child) { font-size: 1.1rem; line-height: 1.5rem; text-transform: uppercase; }
.entry .is-style-aglr-text li, .entry .is-style-aglr-text p { padding-bottom: .75rem; }
.entry .is-style-aglr-label { font-size: .75rem !important; text-transform: uppercase; }
.entry .is-style-aglr-list li { padding-block: .4rem; text-transform: uppercase; }
.entry .is-style-aglr-panel { background: rgba(127, 127, 127, .12); padding: clamp(30px, 9vw, 150px) !important; margin-inline: var(--gx); }
.entry > .wp-block-group.is-style-aglr-panel { margin-block: var(--gy); }

/* Project media: stacked one under the other, same width, original format (no cropping). */
.pbody .entry { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding-top: 2rem; }
@media (min-width: 768px) { .pbody .entry { padding-top: 4rem; } }
.pbody .entry > * { width: 90vw; max-width: 1600px; padding-block: 0 !important; padding-inline: 0 !important; margin: 0 !important; }
@media (min-width: 1024px) { .pbody .entry > * { width: 80vw; } }
.pbody .entry > .alignfull { width: 100vw; max-width: none; }
.pbody .entry img, .pbody .entry video { width: 100%; height: auto !important; object-fit: contain; }
.pbody .entry > .wp-block-columns, .pbody .entry > .wp-block-columns:nth-of-type(even) {
	display: flex; flex-direction: column !important; gap: 2rem; align-items: stretch;
}
.pbody .entry > .wp-block-columns > .wp-block-column { width: 100% !important; margin: 0 !important; }
.pbody .entry > .wp-block-gallery { display: flex; flex-direction: column; gap: 2rem !important; }
.pbody .entry > .wp-block-gallery > .wp-block-image { width: 100% !important; }
.pbody .entry .is-style-aglr-narrow, .pbody .entry .is-style-aglr-portrait { padding: 0 !important; }
.pbody .entry > .is-style-aglr-text { padding-block: 2rem !important; }
.pbody .entry > p, .pbody .entry > h2, .pbody .entry > h3, .pbody .entry > ul, .pbody .entry > ol { max-width: 1600px; }
.pbody .entry > .wp-block-video video { background: #000; }

/* Reveal: pictures fade in and settle from 110 %, texts rise from 20 % */
.js .reveal-img > img, .js .reveal-img > video, .js .reveal-img .wp-block-embed__wrapper { opacity: 0; transform: scale(1.1); }
.reveal-img.is-in > img, .reveal-img.is-in > video, .reveal-img.is-in .wp-block-embed__wrapper {
	opacity: 1; transform: none;
	transition: opacity 1.2s var(--expo) .1s, transform 1.2s var(--expo) .1s;
}
.js .reveal-text { opacity: 0; transform: translateY(20%); }
.reveal-text.is-in { opacity: 1; transform: none; transition: opacity 1.2s var(--expo) .1s, transform 1.2s var(--expo) .1s; }

/* Next project: fixed under the page, uncovered at the end */
.pnext { position: fixed; left: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; }
.pnext[hidden] { display: none; }
.pnext__link { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: clip; }
.pnext__title-wrap {
	position: absolute; inset: 0; z-index: 10;
	display: flex; align-items: center; justify-content: center; padding: 0 var(--gx);
}
.pnext__title { white-space: nowrap; font-size: 15vw; line-height: 1; color: #fff; text-transform: uppercase; text-align: center; will-change: transform; }
.pnext__img { width: 100%; height: 100%; overflow: clip; }
.pnext__img img, .pnext__img video { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* =================================================================== */
/* INFO                                                                */
/* =================================================================== */
.big-label {
	position: fixed; inset: 0; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	padding: 0 var(--gx); pointer-events: none;
}
.big-label__inner { font-size: 14.4vw; line-height: 1em; white-space: nowrap; text-transform: uppercase; will-change: transform, opacity; }
.info__spacer { height: 100vh; }
.info__body {
	position: relative; z-index: 10;
	display: flex; flex-direction: column; align-items: center;
	padding-block: var(--gy) 30vh;
}
.info__col.entry {
	width: 90%; max-width: 950px; padding: 0 var(--gx);
	display: flex; flex-direction: column; align-items: center;
	text-align: center; text-transform: uppercase;
}
@media (min-width: 1024px) { .info__col.entry { width: 60%; } }
.info__col.entry > * { padding: 0; margin: 0; max-width: 100%; }
.info__col.entry > h1, .info__col.entry > h2 { font-size: 26px; line-height: 1em; padding-top: 1.2em; }
@media (min-width: 768px) { .info__col.entry > h1, .info__col.entry > h2 { font-size: 40px; } }
.info__col.entry > p { width: 80%; max-width: 78%; padding-block: 1.2em 2.4em; font-size: 14px; line-height: 1.37; }
.info__col.entry > ul, .info__col.entry > ol { padding-block: 40px; }
.info__col.entry li { padding-block: 15px; font-size: 14px; line-height: 1.37; }
.info__col.entry > p.is-style-aglr-big { width: auto; max-width: 100%; font-size: 26px; line-height: 1em; padding-block: 1.2em 0; }
@media (min-width: 768px) { .info__col.entry > p.is-style-aglr-big { font-size: 40px; } }
.info__col.entry a:hover { opacity: .6; }

/* =================================================================== */
/* CONTACT                                                             */
/* =================================================================== */
.contact__inner {
	position: relative; z-index: 2;
	height: 100vh; height: 100svh;
	display: flex; align-items: center; justify-content: center;
	padding: 0 var(--gx);
}
.contact__list { text-align: center; text-transform: uppercase; }
.contact__list a { font-size: min(14.4vw, var(--contact-size, 21vh)); line-height: 1em; display: inline-block; }

/* [data-title] intro (Info label, Contact links): from 140 % and transparent */
.js .big-label [data-title], .js .contact [data-title] { opacity: 0; transform: scale(1.4); }
.big-label [data-title].is-in, .contact [data-title].is-in { opacity: 1; transform: none; transition: opacity 2.44s var(--expo), transform 2.44s var(--expo); }

/* =================================================================== */
/* Generic pages                                                       */
/* =================================================================== */
.page-plain { padding: 180px var(--gx) 100px; }
.page-plain__title { font-size: 14.4vw; line-height: 1; text-transform: uppercase; margin-bottom: 60px; }
.posts-list { border-top: 1px solid rgba(127,127,127,.3); }
.posts-list li { border-bottom: 1px solid rgba(127,127,127,.3); padding: 18px 0; text-transform: uppercase; }
.site-footer {
	position: relative; z-index: 20;
	display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	padding: var(--gy) var(--gx); font-size: .75rem; text-transform: uppercase;
}
.home .site-footer, .single-project .site-footer, .page-template-template-info .site-footer, .page-template-template-contact .site-footer { display: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
	.js .reveal-img > img, .js .reveal-img > video, .js .reveal-text, .js .phead__title,
	.js .big-label [data-title], .js .contact [data-title] { opacity: 1; transform: none; }
}