/**
 * MEF Parallax Scene — assets/css/parallax.css
 * Mobile-first, GSAP ScrollTrigger powered
 * Layers: BG (red) · Triangle (green) · Content · Trees (blue)
 */

/* ============================================================
   SCENE WRAPPER
   Full-viewport sticky container that houses all parallax layers
   ============================================================ */

.mef-header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent !important;
	mix-blend-mode: normal;
}

/* Push content below fixed header */
.mef-scene-wrapper {
	position: relative;
	/* Tall enough to allow scroll travel for parallax */
	height: 280svh;
	overflow: hidden; /* clip trees overflow */
}

/* ============================================================
   BASE LAYER RULES
   All layers are position:fixed so they stay in viewport
   GSAP will translate them on scroll
   ============================================================ */

.mef-layer {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 !important;
	width: 100%;
	will-change: transform;
	pointer-events: none;
}

/* ============================================================
   LAYER 0 — BACKGROUND (red)
   Full bleed, always covers viewport, slowest parallax.
   Oversized vertically so GSAP translation never reveals edges.
   ============================================================ */

.mef-bg {
	z-index: 1;
	/* Extend 15% beyond viewport top and bottom — parallax travel buffer */
	top: -15% !important;
	bottom: -15% !important;
	height: 130% !important;
}

.mef-bg figure,
.mef-bg .wp-block-image {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	position: relative !important;
}

.mef-bg-img,
.mef-bg img {
	/* Always cover the full container — no gaps on any viewport */
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center 38%;
	display: block;
	max-width: none !important;
}

/* ============================================================
   LAYER 1 — TRIANGLE (green)
   Centered, contained, medium parallax speed
   ============================================================ */

.mef-triangle {
	z-index: 2;
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 100svh;
	bottom: 0;
}

.mef-triangle img {
	width: auto;
	max-width: 85vw;
	max-height: 75svh;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto !important;
	/* Positioned slightly above center as per objective */
	margin-top: -5svh !important;
}

/* ============================================================
   LAYER 2 — CONTENT
   Sits between triangle and trees, pointer-events on
   ============================================================ */

.mef-content {
	z-index: 3;
	pointer-events: auto !important;
	height: 100svh;
	bottom: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding-bottom: 0;
}

.mef-content-inner {
	width: 100%;
	max-width: 400px;
	padding: 0 1.5rem;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

/* ============================================================
   EVENT CARD BLOCK (editor-editable content)
   Style matching the preview image: dark glass card
   ============================================================ */

.mef-event-card {
	background: rgba(10, 10, 10, 0.72);
/*	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2); */
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	padding: 2rem 2rem 1.5rem;
	width: 100%;
	max-width: 340px;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	box-shadow: 0 0 40px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.05);
}

.mef-event-date {
	font-size: clamp(2.4rem, 10vw, 3.5rem) !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em;
	color: #f5e9cc !important;
	margin: 0 !important;
	line-height: 1 !important;
	text-align: center;
}

.mef-event-place {
	font-size: clamp(0.75rem, 3.5vw, 0.95rem) !important;
	font-weight: 700 !important;
	letter-spacing: 0.15em;
	color: #c9a84c !important;
	text-transform: uppercase;
	margin: 0.5rem 0 0 !important;
	text-align: center;
}

.mef-event-time {
	font-size: clamp(0.7rem, 3vw, 0.85rem) !important;
	color: rgba(255,255,255,0.55) !important;
	margin: 0.2rem 0 1rem !important;
	text-align: center;
}

/* Tickets button — golden glow matching preview */
.mef-btn-entradas .wp-block-button__link,
.mef-btn-entradas a {
	background: linear-gradient(135deg, #b8932a 0%, #e8c35a 45%, #b8932a 100%) !important;
	color: #1a1200 !important;
	font-size: 0.8rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.18em;
	padding: 0.65rem 2.5rem !important;
	border-radius: 50px !important;
	border: none !important;
	box-shadow: 0 0 24px rgba(200, 160, 40, 0.55), 0 0 8px rgba(200,160,40,0.3) !important;
	text-decoration: none;
	transition: box-shadow 0.3s ease, transform 0.2s ease;
	pointer-events: auto;
}

.mef-btn-entradas .wp-block-button__link:hover,
.mef-btn-entradas a:hover {
	box-shadow: 0 0 36px rgba(200,160,40,0.8), 0 0 14px rgba(200,160,40,0.5) !important;
	transform: translateY(-1px);
}

/* ============================================================
   LAYER 3 — TREES (blue)
   Full-scene PNG: top-anchored, covers from top down.
   Oversized (140% tall, offset -20%) so GSAP travel never
   reveals an edge in either direction.
   Moves faster than BG for depth parallax effect.
   ============================================================ */

.mef-trees {
	z-index: 4;
	/* Extend 20% beyond viewport in both directions for travel room */
	top: -30% !important;
	bottom: -30% !important;
	height: 160% !important;
	transform-origin: top center;
}

.mef-trees figure,
.mef-trees .wp-block-image {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	position: relative !important;
	line-height: 0;
	font-size: 0;
}

.mef-trees img {
	position: absolute !important;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center top;
	/* Depth blur — foreground feels closer */
	filter: blur(1.5px);
}

/* ============================================================
   FADE TO BLACK OVERLAY
   Appears as scene approaches footer — fades entire scene out
   ============================================================ */

.mef-fade-overlay {
	position: fixed !important;
	inset: 0;
	z-index: 5;
	background: linear-gradient(to bottom,
		transparent 0%,
		transparent 55%,
		rgba(0,0,0,0.4) 75%,
		rgba(0,0,0,0.88) 90%,
		#000 100%
	);
	pointer-events: none;
	opacity: 0; /* GSAP controls this */
	will-change: opacity;
}

/* ============================================================
   FOOTER — always readable on black
   ============================================================ */

.mef-footer {
	position: relative;
	z-index: 10;
	background: #000 !important;
}

/* Spacer so footer is reachable after fixed scene */
.mef-scene-wrapper + footer,
.mef-scene-wrapper ~ .mef-footer {
	margin-top: 0;
}

/* ============================================================
   DESKTOP / LANDSCAPE overrides
   ============================================================ */

@media (orientation: landscape), (min-width: 1024px) {
	.mef-scene-wrapper {
		height: 220svh;
	}

	.mef-triangle img {
		max-width: 55vw;
		max-height: 82svh;
		margin-top: -3svh !important;
	}

	.mef-content {
		padding-bottom: 14svh;
	}

	.mef-event-card {
		max-width: 380px;
	}

	/* Trees: reduce oversize a little on landscape (less vertical travel needed) */
	.mef-trees {
		top: -22% !important;
		bottom: -22% !important;
		height: 144% !important;
	}

	/* Bg buffer sufficient for desktop too */
	.mef-bg {
		top: -10% !important;
		bottom: -10% !important;
		height: 120% !important;
	}
}

@media (min-width: 1440px) {
	.mef-triangle img {
		max-width: 46vw;
	}
}

/* ============================================================
   ADMIN BAR OFFSET
   ============================================================ */

.admin-bar .mef-header {
	top: var(--wp-admin--admin-bar--height, 32px) !important;
}

/* ============================================================
   UTILITY: Scene visible only when in front-page context
   ============================================================ */

body:not(.home) .mef-scene-wrapper,
body:not(.front-page) .mef-scene-wrapper {
	/* Still show on other pages if template is used, 
	   but could be restricted here */
}