/* ============================================================================
 *  Guía de Lunas — pulido v2: transiciones de color suaves + acabado premium.
 *  Hace que los cambios de las simulaciones (lunas.js) se animen con elegancia.
 * ========================================================================== */

/* Transiciones suaves en los elementos que lunas.js modifica vía JS */
#monoFar, #monoMid, #monoNear,
#progFar, #progMid, #progNear { transition: filter .55s cubic-bezier(.2,.7,.2,1); }
#fotoInner { transition: background .9s ease, box-shadow .9s ease, filter .9s ease, border-color .9s ease; }
#polG1, #polG2, #polG3 { transition: opacity .55s ease; }
#hiStdCurve, #hiHixCurve { transition: width .5s cubic-bezier(.2,.7,.2,1), left .5s cubic-bezier(.2,.7,.2,1), height .5s ease; }
#hiStdThick, #hiHixThick, #monoReadout, #hiReadout { transition: color .4s ease; }

/* Barras de stats: llenado animado */
#view-lunas .st-fill, #view-lunas .lt-stat-fill { transition: width 1.3s cubic-bezier(.2,.7,.2,1) !important; }

/* Glow sutil en el lente fotocromático al oscurecer (sorpresa elegante) */
#fotoInner.dark { box-shadow: 0 0 60px rgba(60,80,160,.45), inset 0 0 40px rgba(0,0,0,.5); }
#fotoInner.light { box-shadow: 0 0 50px rgba(255,255,255,.25); }

/* Pills de navegación de lunas: estado activo más legible */
#view-lunas .lnav-btn { transition: color .3s ease, border-color .3s ease, background .3s ease; }
#view-lunas .lnav-btn.active { color: var(--accent, #c5a47e); }

/* Acabado: cursor de interacción en los simuladores */
#progLens, #bbDemo, #monoSlider, #hiSlider, #polRotate { cursor: pointer; }

/* Brillo de entrada para los círculos/lentes de demo (acento premium) */
@keyframes lunaGlow { 0%,100% { box-shadow: 0 0 40px rgba(197,164,126,.12); } 50% { box-shadow: 0 0 70px rgba(197,164,126,.22); } }

@media (prefers-reduced-motion: reduce) {
  #monoFar,#monoMid,#monoNear,#progFar,#progMid,#progNear,
  #fotoInner,#polG1,#polG2,#polG3,#hiStdCurve,#hiHixCurve { transition: none !important; }
}