<?php
/**
* Template Name: Portfolio ItsArielRodriguez
*/
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ItsArielRodriguez — Fotografía Documental de Bodas</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Mulish:wght@300;400&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--cream: #f5f0e8;
--warm-white: #faf8f4;
--ink: #1a1714;
--ink-light: #3d3730;
--gold: #b8935a;
--gold-light: #d4af7a;
--muted: #7a7168;
--serif: 'Cormorant Garamond', Georgia, serif;
--sans: 'Mulish', system-ui, sans-serif;
}
html { scroll-behavior: smooth; }
body {
background: var(--ink);
color: var(--cream);
font-family: var(--sans);
font-weight: 300;
overflow-x: hidden;
}
/* ── NAV ── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 3rem;
mix-blend-mode: normal;
transition: background 0.4s;
}
nav.scrolled {
background: rgba(26,23,20,0.92);
backdrop-filter: blur(8px);
border-bottom: 0.5px solid rgba(184,147,90,0.2);
}
.nav-logo {
font-family: var(--serif);
font-size: 1.1rem;
font-weight: 300;
letter-spacing: 0.15em;
color: var(--cream);
text-decoration: none;
text-transform: uppercase;
}
.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
}
.nav-links a {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(245,240,232,0.65);
text-decoration: none;
transition: color 0.25s;
}
.nav-links a:hover { color: var(--gold-light); }
/* ── HERO ── */
.hero {
height: 100vh;
min-height: 600px;
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
overflow: hidden;
}
.hero-visual {
position: relative;
background: #0e0c0a;
overflow: hidden;
}
.hero-img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.75;
display: block;
filter: contrast(1.05) saturate(0.85);
}
.hero-img-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(160deg, #2a2218 0%, #0e0c0a 60%, #1c1710 100%);
display: flex;
align-items: center;
justify-content: center;
}
.hero-img-placeholder span {
font-family: var(--serif);
font-size: 0.8rem;
letter-spacing: 0.2em;
color: rgba(184,147,90,0.4);
text-transform: uppercase;
}
.hero-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 6rem 5rem 4rem 5rem;
position: relative;
}
.hero-eyebrow {
font-size: 0.65rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 2rem;
opacity: 0;
animation: fadeUp 0.8s 0.3s forwards;
}
.hero-title {
font-family: var(--serif);
font-size: clamp(3rem, 5vw, 5.5rem);
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--cream);
margin-bottom: 2rem;
opacity: 0;
animation: fadeUp 0.8s 0.5s forwards;
}
.hero-title em {
font-style: italic;
color: var(--gold-light);
}
.hero-desc {
font-size: 0.85rem;
line-height: 1.8;
color: rgba(245,240,232,0.55);
max-width: 320px;
margin-bottom: 3rem;
letter-spacing: 0.03em;
opacity: 0;
animation: fadeUp 0.8s 0.7s forwards;
}
.hero-cta {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-size: 0.7rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--cream);
text-decoration: none;
padding-bottom: 0.5rem;
border-bottom: 0.5px solid var(--gold);
transition: color 0.25s, gap 0.25s;
opacity: 0;
animation: fadeUp 0.8s 0.9s forwards;
width: fit-content;
}
.hero-cta:hover { color: var(--gold-light); gap: 1.25rem; }
.hero-scroll {
position: absolute;
bottom: 2.5rem;
left: 5rem;
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(245,240,232,0.3);
display: flex;
align-items: center;
gap: 1rem;
}
.hero-scroll::before {
content: '';
display: block;
width: 40px;
height: 0.5px;
background: rgba(245,240,232,0.3);
}
/* ── ABOUT / MANIFIESTO ── */
.about {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 70vh;
}
.about-img {
position: relative;
overflow: hidden;
background: #0e0c0a;
}
.about-img img {
width: 100%; height: 100%;
object-fit: cover;
opacity: 0.7;
filter: contrast(1.05) saturate(0.75);
}
.about-img-placeholder {
width: 100%; height: 100%;
min-height: 500px;
background: #151210;
display: flex; align-items: center; justify-content: center;
}
.about-img-placeholder span {
font-family: var(--serif);
font-size: 0.75rem;
letter-spacing: 0.2em;
color: rgba(184,147,90,0.3);
text-transform: uppercase;
}
.about-content {
padding: 6rem 5rem;
display: flex;
flex-direction: column;
justify-content: center;
background: #141210;
}
.section-label {
font-size: 0.65rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 2.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.section-label::after {
content: '';
display: block;
width: 32px;
height: 0.5px;
background: var(--gold);
}
.about-quote {
font-family: var(--serif);
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
font-weight: 300;
font-style: italic;
line-height: 1.3;
color: var(--cream);
margin-bottom: 2.5rem;
}
.about-text {
font-size: 0.85rem;
line-height: 1.9;
color: rgba(245,240,232,0.5);
max-width: 420px;
letter-spacing: 0.02em;
}
.about-text + .about-text { margin-top: 1rem; }
.about-sig {
margin-top: 3rem;
font-family: var(--serif);
font-size: 1.3rem;
font-style: italic;
color: var(--gold-light);
opacity: 0.7;
}
/* ── GALERÍA ── */
.gallery-section {
padding: 7rem 3rem;
background: var(--ink);
}
.gallery-header {
text-align: center;
margin-bottom: 4rem;
}
.gallery-title {
font-family: var(--serif);
font-size: clamp(2.5rem, 4vw, 4rem);
font-weight: 300;
color: var(--cream);
margin-bottom: 1rem;
}
.gallery-subtitle {
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
}
/* Masonry-style grid */
.gallery-grid {
columns: 3;
column-gap: 1rem;
max-width: 1300px;
margin: 0 auto;
}
.gallery-item {
break-inside: avoid;
margin-bottom: 1rem;
overflow: hidden;
position: relative;
cursor: pointer;
}
.gallery-item img {
width: 100%;
display: block;
filter: contrast(1.05) saturate(0.8);
transition: transform 0.6s cubic-bezier(0.25,0,0,1), filter 0.4s;
}
.gallery-item:hover img {
transform: scale(1.03);
filter: contrast(1.1) saturate(0.9);
}
.gallery-placeholder {
background: #1c1814;
display: flex;
align-items: center;
justify-content: center;
}
.gallery-placeholder span {
font-family: var(--serif);
font-size: 0.7rem;
letter-spacing: 0.15em;
color: rgba(184,147,90,0.25);
text-transform: uppercase;
}
/* ── SERVICIOS ── */
.services {
padding: 7rem 3rem;
background: #0f0d0b;
text-align: center;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
max-width: 900px;
margin: 4rem auto 0;
}
.service-item {
padding: 3.5rem 2.5rem;
background: #141210;
transition: background 0.3s;
}
.service-item:hover { background: #1c1916; }
.service-num {
font-family: var(--serif);
font-size: 3rem;
font-weight: 300;
color: rgba(184,147,90,0.2);
line-height: 1;
margin-bottom: 1.5rem;
}
.service-name {
font-family: var(--serif);
font-size: 1.1rem;
font-weight: 300;
color: var(--cream);
margin-bottom: 1rem;
letter-spacing: 0.05em;
}
.service-desc {
font-size: 0.78rem;
line-height: 1.8;
color: rgba(245,240,232,0.4);
letter-spacing: 0.02em;
}
/* ── PROCESO ── */
.process {
padding: 7rem 5rem;
background: var(--ink);
max-width: 1100px;
margin: 0 auto;
}
.process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
margin-top: 4rem;
}
.process-step { position: relative; }
.process-step::after {
content: '';
position: absolute;
top: 0.6rem;
right: 0;
width: calc(100% - 2rem);
height: 0.5px;
background: rgba(184,147,90,0.2);
}
.process-step:last-child::after { display: none; }
.step-dot {
width: 10px; height: 10px;
border: 0.5px solid var(--gold);
border-radius: 50%;
margin-bottom: 1.5rem;
position: relative;
z-index: 1;
background: var(--ink);
}
.step-num {
font-size: 0.6rem;
letter-spacing: 0.3em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.step-name {
font-family: var(--serif);
font-size: 1rem;
color: var(--cream);
margin-bottom: 0.75rem;
font-weight: 300;
}
.step-desc {
font-size: 0.78rem;
color: rgba(245,240,232,0.4);
line-height: 1.7;
}
/* ── CONTACTO ── */
.contact {
min-height: 80vh;
display: grid;
grid-template-columns: 1fr 1fr;
background: #0a0908;
}
.contact-left {
padding: 7rem 5rem;
display: flex;
flex-direction: column;
justify-content: center;
border-right: 0.5px solid rgba(184,147,90,0.1);
}
.contact-title {
font-family: var(--serif);
font-size: clamp(2.5rem, 4vw, 4.5rem);
font-weight: 300;
line-height: 1.1;
color: var(--cream);
margin-bottom: 2rem;
}
.contact-title em { font-style: italic; color: var(--gold-light); }
.contact-note {
font-size: 0.82rem;
line-height: 1.8;
color: rgba(245,240,232,0.45);
max-width: 360px;
margin-bottom: 3rem;
}
.contact-details { display: flex; flex-direction: column; gap: 1rem; }
.contact-detail {
font-size: 0.75rem;
letter-spacing: 0.1em;
color: var(--muted);
display: flex;
align-items: center;
gap: 1rem;
}
.contact-detail a { color: var(--gold-light); text-decoration: none; transition: color 0.2s; }
.contact-detail a:hover { color: var(--cream); }
.contact-right {
padding: 7rem 5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.contact-form { display: flex; flex-direction: column; gap: 1.5rem; }
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-label {
font-size: 0.65rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(245,240,232,0.4);
}
.form-input, .form-textarea {
background: transparent;
border: none;
border-bottom: 0.5px solid rgba(245,240,232,0.15);
padding: 0.75rem 0;
color: var(--cream);
font-family: var(--sans);
font-size: 0.85rem;
font-weight: 300;
outline: none;
transition: border-color 0.25s;
width: 100%;
letter-spacing: 0.03em;
}
.form-input::placeholder, .form-textarea::placeholder {
color: rgba(245,240,232,0.2);
}
.form-input:focus, .form-textarea:focus {
border-bottom-color: var(--gold);
}
.form-textarea { resize: none; height: 100px; }
.form-submit {
margin-top: 1rem;
background: transparent;
border: 0.5px solid var(--gold);
color: var(--gold-light);
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.25em;
text-transform: uppercase;
padding: 1rem 2.5rem;
cursor: pointer;
transition: background 0.25s, color 0.25s;
align-self: flex-start;
}
.form-submit:hover {
background: var(--gold);
color: var(--ink);
}
/* ── FOOTER ── */
footer {
padding: 3rem 5rem;
background: #070605;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 0.5px solid rgba(184,147,90,0.1);
}
.footer-logo {
font-family: var(--serif);
font-size: 0.9rem;
font-weight: 300;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(245,240,232,0.3);
}
.footer-copy {
font-size: 0.7rem;
color: rgba(245,240,232,0.2);
letter-spacing: 0.05em;
}
.footer-social { display: flex; gap: 1.5rem; }
.footer-social a {
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(245,240,232,0.3);
text-decoration: none;
transition: color 0.25s;
}
.footer-social a:hover { color: var(--gold-light); }
/* ── ANIMATIONS ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.25,0,0,1), transform 0.8s cubic-bezier(0.25,0,0,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
nav { padding: 1.25rem 1.5rem; }
.nav-links { display: none; }
.hero { grid-template-columns: 1fr; height: auto; }
.hero-visual { height: 50vh; }
.hero-content { padding: 3rem 2rem 4rem; }
.hero-scroll { left: 2rem; }
.about { grid-template-columns: 1fr; }
.about-img-placeholder { min-height: 300px; }
.about-content { padding: 3rem 2rem; }
.gallery-grid { columns: 2; }
.services-grid { grid-template-columns: 1fr; gap: 2px; }
.process { padding: 4rem 2rem; }
.process-steps { grid-template-columns: 1fr 1fr; gap: 2rem; }
.contact { grid-template-columns: 1fr; }
.contact-left { padding: 4rem 2rem 2rem; }
.contact-right { padding: 2rem 2rem 4rem; }
footer { flex-direction: column; gap: 1rem; text-align: center; padding: 2rem; }
}
@media (max-width: 600px) {
.gallery-grid { columns: 1; }
.process-steps { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav id="main-nav">
<a href="#" class="nav-logo">ItsArielRodriguez</a>
<ul class="nav-links">
<li><a href="#galeria">Trabajo</a></li>
<li><a href="#sobre-mi">Sobre mí</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-visual">
<!-- REEMPLAZA con: <img src="TU-FOTO-HERO.jpg" class="hero-img" alt="Fotografía documental de bodas"> -->
<div class="hero-img-placeholder">
<span>Tu foto aquí</span>
</div>
</div>
<div class="hero-content">
<p class="hero-eyebrow">Fotografía documental de bodas · Santiago, Chile</p>
<h1 class="hero-title">El día<br>tal como<br><em>fue.</em></h1>
<p class="hero-desc">No poso momentos. Los encuentro. Cada boda es un documento único de lo que dos personas construyeron.</p>
<a href="#contacto" class="hero-cta">Reservar fecha →</a>
<div class="hero-scroll">Scroll</div>
</div>
</section>
<!-- ABOUT -->
<section class="about" id="sobre-mi">
<div class="about-img">
<!-- REEMPLAZA con: <img src="TU-RETRATO.jpg" alt="Ariel Rodríguez, fotógrafo"> -->
<div class="about-img-placeholder">
<span>Tu retrato aquí</span>
</div>
</div>
<div class="about-content reveal">
<p class="section-label">Sobre mí</p>
<blockquote class="about-quote">
"No soy el fotógrafo del escenario. Soy el fotógrafo del margen."
</blockquote>
<p class="about-text">
Soy Ariel, fotógrafo documental basado en Santiago. Trabajo con luz disponible, en silencio, sin interrumpir. Mi trabajo es desaparecer para que el día ocurra sin filtro.
</p>
<p class="about-text">
Me formé mirando a Fer Juaristi y Victor Lax. Creo que una boda bien fotografiada debería sentirse como encontrar cartas viejas: íntimas, honestas, capaces de devolverte exactamente cómo fue.
</p>
<p class="about-sig">— Ariel</p>
</div>
</section>
<!-- GALERÍA -->
<section class="gallery-section" id="galeria">
<div class="gallery-header reveal">
<h2 class="gallery-title">Trabajo reciente</h2>
<p class="gallery-subtitle">Bodas documentales · Chile</p>
</div>
<div class="gallery-grid">
<!--
INSTRUCCIONES: Reemplaza cada bloque .gallery-placeholder con una etiqueta <img>.
Ejemplo:
<div class="gallery-item">
<img src="wp-content/uploads/boda-1.jpg" alt="Boda en Santiago">
</div>
Sube fotos de distintas proporciones para un efecto masonry natural.
Idealmente 9-12 imágenes para este primer portfolio.
-->
<div class="gallery-item"><div class="gallery-placeholder" style="height:380px"><span>Foto 1</span></div></div>
<div class="gallery-item"><div class="gallery-placeholder" style="height:280px"><span>Foto 2</span></div></div>
<div class="gallery-item"><div class="gallery-placeholder" style="height:320px"><span>Foto 3</span></div></div>
<div class="gallery-item"><div class="gallery-placeholder" style="height:260px"><span>Foto 4</span></div></div>
<div class="gallery-item"><div class="gallery-placeholder" style="height:400px"><span>Foto 5</span></div></div>
<div class="gallery-item"><div class="gallery-placeholder" style="height:300px"><span>Foto 6</span></div></div>
<div class="gallery-item"><div class="gallery-placeholder" style="height:340px"><span>Foto 7</span></div></div>
<div class="gallery-item"><div class="gallery-placeholder" style="height:250px"><span>Foto 8</span></div></div>
<div class="gallery-item"><div class="gallery-placeholder" style="height:360px"><span>Foto 9</span></div></div>
</div>
</section>
<!-- SERVICIOS -->
<section class="services" id="servicios">
<p class="section-label" style="justify-content: center; gap: 1rem;">
<span style="display:block; width:32px; height:0.5px; background:var(--gold);"></span>
Servicios
<span style="display:block; width:32px; height:0.5px; background:var(--gold);"></span>
</p>
<h2 class="gallery-title reveal">Lo que ofrezco</h2>
<div class="services-grid">
<div class="service-item reveal">
<p class="service-num">01</p>
<h3 class="service-name">Cobertura completa</h3>
<p class="service-desc">Desde la preparación hasta la fiesta. Trabajo solo, sin asistente, para mantener la intimidad del día.</p>
</div>
<div class="service-item reveal">
<p class="service-num">02</p>
<h3 class="service-name">Preboda</h3>
<p class="service-desc">Una sesión antes de la boda. Para conocernos, para que la cámara deje de ser un objeto extraño.</p>
</div>
<div class="service-item reveal">
<p class="service-num">03</p>
<h3 class="service-name">Álbum impreso</h3>
<p class="service-desc">Impresión de calidad artística. Un objeto físico que dura más que cualquier pantalla.</p>
</div>
</div>
</section>
<!-- PROCESO -->
<section style="padding: 7rem 0; background: var(--ink);">
<div class="process">
<p class="section-label reveal">El proceso</p>
<h2 class="gallery-title reveal" style="margin-bottom: 0;">Cómo trabajamos juntos</h2>
<div class="process-steps">
<div class="process-step reveal">
<div class="step-dot"></div>
<p class="step-num">01</p>
<h4 class="step-name">Conversamos</h4>
<p class="step-desc">Me cuentas la boda. No el programa: lo que importa, lo que quieres recordar.</p>
</div>
<div class="process-step reveal">
<div class="step-dot"></div>
<p class="step-num">02</p>
<h4 class="step-name">Reservamos</h4>
<p class="step-desc">Fecha bloqueada con contrato y pie. Trabajo con pocas bodas por año para darte atención real.</p>
</div>
<div class="process-step reveal">
<div class="step-dot"></div>
<p class="step-num">03</p>
<h4 class="step-name">El día</h4>
<p class="step-desc">Estoy ahí desde antes que lleguen los primeros invitados. Sin flash intrusivo. Sin poses forzadas.</p>
</div>
<div class="process-step reveal">
<div class="step-dot"></div>
<p class="step-num">04</p>
<h4 class="step-name">La entrega</h4>
<p class="step-desc">Selección editada en 30 días. Galería privada online + archivos en alta resolución.</p>
</div>
</div>
</div>
</section>
<!-- CONTACTO -->
<section class="contact" id="contacto">
<div class="contact-left reveal">
<p class="section-label">Contacto</p>
<h2 class="contact-title">¿Hay<br>una boda<br><em>en camino?</em></h2>
<p class="contact-note">
Cuéntame la fecha y el lugar. Respondo en menos de 48 horas. Si la fecha está disponible, coordinamos una llamada corta para conocernos.
</p>
<div class="contact-details">
<span class="contact-detail">
📍 Santiago, Chile · disponible a regiones
</span>
<span class="contact-detail">
✉ <a href="mailto:hola@itsarielrodriguez.com">hola@itsarielrodriguez.com</a>
</span>
<span class="contact-detail">
📱 <a href="https://wa.me/56912345678">WhatsApp</a>
</span>
</div>
</div>
<div class="contact-right reveal">
<form class="contact-form"
action="<?php echo esc_url( admin_url('admin-post.php') ); ?>"
method="POST">
<?php wp_nonce_field('contacto_boda', 'contacto_nonce'); ?>
<input type="hidden" name="action" value="contacto_boda">
<div class="form-field">
<label class="form-label" for="nombre">Nombre</label>
<input class="form-input" type="text" id="nombre" name="nombre" placeholder="Nombre y apellido" required>
</div>
<div class="form-field">
<label class="form-label" for="email">Correo</label>
<input class="form-input" type="email" id="email" name="email" placeholder="tu@correo.com" required>
</div>
<div class="form-field">
<label class="form-label" for="fecha">Fecha de la boda</label>
<input class="form-input" type="text" id="fecha" name="fecha" placeholder="ej. 14 de marzo 2026">
</div>
<div class="form-field">
<label class="form-label" for="mensaje">Cuéntame algo</label>
<textarea class="form-textarea" id="mensaje" name="mensaje" placeholder="El lugar, cómo se conocieron, qué esperan..."></textarea>
</div>
<button type="submit" class="form-submit">Enviar mensaje</button>
</form>
</div>
</section>
<!-- FOOTER -->
<footer>
<span class="footer-logo">ItsArielRodriguez</span>
<span class="footer-copy">© <?php echo date('Y'); ?> Ariel Rodríguez · Santiago, Chile</span>
<div class="footer-social">
<a href="https://instagram.com/itsarielrodriguez" target="_blank">Instagram</a>
<a href="https://tiktok.com/@itsarielrodriguez" target="_blank">TikTok</a>
</div>
</footer>
<script>
/* Nav scroll */
const nav = document.getElementById('main-nav');
window.addEventListener('scroll', () => {
nav.classList.toggle('scrolled', window.scrollY > 60);
});
/* Reveal on scroll */
const reveals = document.querySelectorAll('.reveal');
const obs = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('visible');
obs.unobserve(e.target);
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
reveals.forEach(r => obs.observe(r));
/* Stagger gallery items */
document.querySelectorAll('.gallery-item').forEach((item, i) => {
item.style.animationDelay = `${i * 0.08}s`;
});
</script>
</body>
</html>
<?php wp_footer(); ?>