/* =========================================================
   ANDES · scene.css
   Paisaje del logo: montañas facetadas, trayectoria dorada,
   estrella, cohete y estrellas. (Ver js/components/scene.js)
   ========================================================= */

.scene { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.scene svg { width: 100%; height: 100%; display: block; }

/* Montañas */
.range .snow  { fill: var(--snow); }
.range .shade { fill: var(--snow-shade); }
.range.far .snow  { fill: #9fb2cc; }
.range.far .shade { fill: #6f86a6; }
.range.far { opacity: .16; }
.range.faint { opacity: .06; }
.ink { fill: var(--ink); }

/* Cielo */
.star-dot { fill: #fff; opacity: .55; }
.star-dot.tw { animation: twinkle 3.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }

/* Trayectorias doradas: se dibujan al cargar */
.arc { fill: none; stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawArc 2.6s cubic-bezier(.6, .1, .3, 1) .3s forwards; }
.arc-main { stroke-width: 7; }
.arc-thin { stroke-width: 2.5; opacity: .9; animation-delay: .1s; animation-duration: 3s; }
@keyframes drawArc { to { stroke-dashoffset: 0; } }

/* Estrella */
.gold-star polygon { fill: var(--gold); }
.gold-star .star-glow { fill: var(--gold); opacity: .25; filter: blur(6px); }
.gold-star { transform-box: fill-box; transform-origin: center; opacity: 0; animation: starIn .6s ease 2.6s forwards, starPulse 3s ease-in-out 3.2s infinite; }
@keyframes starIn { from { opacity: 0; transform: scale(.2) rotate(-45deg); } to { opacity: 1; transform: none; } }
@keyframes starPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15) rotate(8deg); } }

/* Cohete */
.rocket-float { animation: floatUp 4.5s ease-in-out infinite; }
@keyframes floatUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.flame { fill: url(#flameGrad); transform-box: fill-box; transform-origin: top center; animation: flicker .12s ease-in-out infinite alternate; }
.flame-core { fill: #fff6c8; opacity: .9; }
@keyframes flicker { from { transform: scaleY(.85) scaleX(.95); } to { transform: scaleY(1.1) scaleX(1.05); } }

/* ===== Carrusel principal con paisaje ===== */
.hero-carousel .scene-back { z-index: 0; }
.hero-carousel .carousel-track { position: relative; z-index: 1; }
.hero-carousel .scene-front { z-index: 2; }
.hero-carousel .carousel-controls { z-index: 4; }
.hero-carousel .slide { background: transparent; }
.hero-carousel .slide-caption { z-index: 3; }
.hero-carousel .media-empty { background: none; }
.hero-carousel .slide.is-empty::after { background: linear-gradient(90deg, rgba(0,0,0,.55), transparent 60%); }
.hero-carousel .slide-brand::after { display: none; }

/* ===== Encabezados de página, CTA y footer ===== */
.page-hero.brand-zone, .cta-band.brand-zone { position: relative; overflow: hidden; }
.page-hero .scene, .cta-band .scene { z-index: 0; }
.page-hero > .container, .cta-band > .container { position: relative; z-index: 1; }
.site-footer .scene { z-index: 0; top: auto; height: 220px; }
.site-footer > .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .arc { stroke-dashoffset: 0; }
  .gold-star { opacity: 1; }
}

/* En pantallas angostas el cohete y la estrella del carrusel se ocultan
   para no tapar el texto */
@media (max-width: 760px) {
  .hero-carousel .scene-front .gold-star,
  .hero-carousel .scene-front [transform*="rotate"] { display: none; }
}

/* Indicadores del carrusel legibles sobre la nieve */
.hero-carousel .carousel-dots,
.hero-carousel .carousel-counter { background: rgba(0, 0, 0, .78); border-radius: 6px; }
.hero-carousel .carousel-dots { padding: 12px; }
.hero-carousel .carousel-counter { padding: 4px 10px; }

/* Móvil: el paisaje frontal ocupa solo la franja inferior */
@media (max-width: 760px) {
  .hero-carousel .scene-front { top: auto; height: 400px; }
  .hero-carousel .slide-caption { bottom: 120px; }
}