/* ============================================================
   Hero Slider — Franc Balanta
   - Slide de identidad: composición ORIGINAL intacta
     (franc-guitars a la derecha, fondo negro fullscreen, animación de entrada).
   - Obras: portada a pantalla completa en una capa de fondo detrás del contenido.
   Sin dependencias. Estética de la web (Syne + acento dorado).
   ============================================================ */

:root{
	--hero-gold:#c2922c;          /* dorado sobrio */
	--hero-gold-bright:#e0a930;   /* dorado de realce (hover) */
}

/* ---- Capa de fondo a pantalla completa (detrás del contenido del hero) ---- */
.hero-bg{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	overflow:hidden;
	z-index:-1;                   /* detrás del contenido del hero (portada/caption) */
	background:var(--tt-main-bg-color,#0a0a0a);
}
.hero-bg-slide{
	position:absolute;
	inset:0;
	opacity:0;
	visibility:hidden;
	transition:opacity 1.1s ease, visibility 1.1s ease;
	will-change:opacity;
}
.hero-bg-slide.is-active{
	opacity:1;
	visibility:visible;
}
.hero-bg-slide picture,
.hero-bg-slide img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:50% 45%;
}

/* Oscurecimiento direccional SOLO sobre las portadas (no sobre la identidad negra),
   para legibilidad del título a la izquierda y los controles abajo. */
#page-header.hero-on-song .hero-bg::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:
		linear-gradient(90deg, rgba(4,4,4,.72) 0%, rgba(4,4,4,.40) 38%, rgba(4,4,4,.14) 70%, rgba(4,4,4,.30) 100%),
		linear-gradient(180deg, rgba(4,4,4,.26) 0%, rgba(4,4,4,0) 32%, rgba(4,4,4,0) 58%, rgba(4,4,4,.50) 100%);
}

/* ---- Imagen de identidad (franc-guitars): se oculta cuando hay una obra activa ----
   El !important asegura que NO parpadee durante la animación de entrada GSAP
   cuando una obra es la primera (aleatoria) al cargar. */
.ph-image{
	transition:opacity 1s ease;
}
#page-header.hero-on-song .ph-image{
	opacity:0 !important;
	pointer-events:none;
}

/* ---- Captions sincronizados con cada slide ---- */
.hero-caps{
	position:relative;
	display:grid;                 /* misma celda → sin saltos de layout */
}
.hero-cap{
	grid-area:1 / 1;
	opacity:0;
	visibility:hidden;
	transform:translateY(14px);
	transition:opacity .8s ease, transform .8s ease, visibility .8s ease;
	pointer-events:none;
}
.hero-cap.is-active{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
	pointer-events:auto;
	transition-delay:.12s;
}

/* Título de obra */
.hero-cap-link{
	display:inline-block;
	text-decoration:none;
	color:#FFF;
}
.hero-cap-kicker{
	display:inline-block;
	margin-bottom:18px;
	font-family:'Syne',sans-serif;
	font-size:calc(13px + 0.25vw);
	font-weight:600;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:#e8e8e8;
	opacity:.85;
	transition:color .3s ease, opacity .3s ease;
}
.hero-cap-kicker .hero-cap-arrow{
	display:inline-block;
	margin-left:6px;
	transition:transform .3s ease;
}
.hero-cap-title{
	display:block;
	margin:0;
	font-family:'Syne',sans-serif;
	font-size:clamp(38px,6vw,112px);
	font-weight:600;
	line-height:1.12;
	color:#FFF;
	transition:color .3s ease;
}
/* Hover: título a dorado */
.hero-cap-link:hover .hero-cap-title{ color:var(--hero-gold); }
.hero-cap-link:hover .hero-cap-kicker{ color:var(--hero-gold); opacity:1; }
.hero-cap-link:hover .hero-cap-arrow{ transform:translateX(5px); }

/* ---- Flechas de navegación (bordes, finas y doradas) ---- */
.hero-arrow{
	position:absolute;
	top:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	width:54px;
	height:54px;
	padding:0;
	background:transparent;
	border:none;
	cursor:pointer;
	outline:none;
	z-index:12;
	transform:translateY(-50%);
	transition:transform .25s ease, opacity .25s ease;
	opacity:.9;
}
.hero-arrow::before{
	content:"";
	width:20px;
	height:20px;
	border-style:solid;
	border-color:var(--hero-gold);
	border-width:0 0 1.6px 1.6px;          /* chevron fino */
	transition:border-color .25s ease;
}
.hero-prev{ left:2.2%; }
.hero-prev::before{ transform:rotate(45deg); margin-left:6px; }     /* ‹ */
.hero-next{ right:2.2%; }
.hero-next::before{ transform:rotate(-135deg); margin-right:6px; }  /* › */

.hero-arrow:hover,
.hero-arrow:focus-visible{ opacity:1; }
.hero-arrow:hover::before,
.hero-arrow:focus-visible::before{ border-color:var(--hero-gold-bright); }
.hero-prev:hover{ transform:translateY(-50%) translateX(-3px); }
.hero-next:hover{ transform:translateY(-50%) translateX(3px); }

/* ---- Responsive ---- */
@media (max-width:1024px){
	.hero-arrow{ width:46px; height:46px; left:1.2%; right:1.2%; }
	.hero-prev{ right:auto; }
	.hero-next{ left:auto; }
	.hero-arrow::before{ width:16px; height:16px; }
}
@media (max-width:767px){
	.hero-bg-slide picture,
	.hero-bg-slide img{ object-position:50% 40%; }
	.hero-arrow{ top:auto; bottom:96px; transform:none; width:42px; height:42px; }
	.hero-arrow::before{ width:13px; height:13px; border-width:0 0 1.4px 1.4px; }
	.hero-prev:hover{ transform:translateX(-3px); }
	.hero-next:hover{ transform:translateX(3px); }
}

/* ---- Accesibilidad: sin animación si el usuario lo pide ---- */
@media (prefers-reduced-motion:reduce){
	.hero-bg-slide{ transition:opacity .4s ease, visibility .4s ease; }
	.hero-cap{ transition:opacity .3s ease, visibility .3s ease; transform:none; }
	.ph-image{ transition:opacity .3s ease; }
}