/* Parallax styles (moved to /radio) */
.parallax-section { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.parallax-bg { position: absolute; top: -20%; left: -20%; width: 140%; height: 140%; background-size: cover; background-position: center; background-attachment: fixed; will-change: transform; }
.parallax-bg.no-parallax { background-attachment: scroll; transform: none !important; will-change: auto; }
.loading .parallax-bg.no-parallax { opacity: 1; }
.parallax-bg.has-video { background: none; }
.parallax-bg.has-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hero-section { height: 620px; margin-top: 72px; }
.hero-section .parallax-bg { background-size: contain; background-repeat: no-repeat; background-position: center; }
.content-overlay { position: relative; z-index: 2; text-align: center; color: #fff; padding: 24px; }
.logo-container { margin-bottom: 1rem; }
.hero-logo { max-width: 260px; width: 100%; height: auto; }

/* Loading and reduced motion states */
.loading .parallax-bg { opacity: 0; transition: opacity 0.5s ease; }
.loaded .parallax-bg { opacity: 1; }
.reduced-motion .parallax-bg { transform: none !important; background-attachment: scroll !important; }
.reduced-motion .parallax-section, .reduced-motion .content-section { opacity: 1 !important; transform: none !important; }

/* Ajustes específicos para mobile: reduzir altura e overflow do parallax */
@media (max-width: 640px) {
	.parallax-section { height: 50vh; min-height: 220px; }
	.hero-section { height: 320px; margin-top: 56px; }
	/* Diminuir área do background para reduzir distância visível do deslocamento */
	.parallax-bg { top: -10%; left: -10%; width: 120%; height: 120%; background-attachment: scroll; }
	/* Se for vídeo, focar no topo e garantir cobertura */
	.parallax-bg.has-video video { object-position: center top; }
}

/* Escala do fundo por resolução (viewport width) */
@media (min-width: 641px) and (max-width: 1024px) {
	.parallax-bg { top: -15%; left: -15%; width: 130%; height: 130%; }
}

@media (min-width: 1025px) and (max-width: 1440px) {
	.parallax-bg { top: -20%; left: -20%; width: 140%; height: 140%; }
}

@media (min-width: 1441px) and (max-width: 1920px) {
	.parallax-bg { top: -22%; left: -22%; width: 150%; height: 150%; }
}

@media (min-width: 1921px) {
	.parallax-bg { top: -25%; left: -25%; width: 160%; height: 160%; }
}