/* Movimiento del sitio: entrada de pagina, tarjetas que se elevan, estrellas que titilan y tepuyes con paralaje suave. */
html { scroll-behavior: smooth; }
body { animation: dc-entrada .6s ease-out both; }
@keyframes dc-entrada { from { opacity: 0; } to { opacity: 1; } }

/* barra de progreso de lectura */
#dc-progreso { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #FFCC00, #00247D 50%, #CF142B); z-index: 100; pointer-events: none; }

/* tarjetas, figuras y botones */
#app a[href][style*="display:block"], #app figure, #app section > div[style*="border-radius:6px"] {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease; }
#app a[href][style*="display:block"]:hover, #app figure:hover {
  transform: translateY(-5px); box-shadow: 0 14px 30px -14px rgba(7, 16, 51, .45); }
#app button { transition: transform .15s ease, filter .2s ease, background-color .2s ease; }
#app button:hover { filter: brightness(1.08); }
#app button:active { transform: scale(.97); }
#app nav a { position: relative; transition: color .2s ease; }
#app nav a:hover { color: #FFCC00 !important; }
#app img { transition: transform .4s ease; }
#app figure:hover img { transform: scale(1.01); }

/* portada: estrellas que titilan y tepuyes que respiran */
#inicio svg polygon { transform-box: fill-box; transform-origin: center; animation: dc-titila 3.2s ease-in-out infinite; }
#inicio svg g:nth-child(2n) polygon, #inicio svg polygon:nth-of-type(2n) { animation-delay: -1.1s; }
#inicio svg g:nth-child(3n) polygon, #inicio svg polygon:nth-of-type(3n) { animation-delay: -2.2s; }
@keyframes dc-titila { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }
#inicio > svg path:nth-child(1) { animation: dc-tepuy 9s ease-in-out infinite alternate; }
#inicio > svg path:nth-child(2) { animation: dc-tepuy 12s ease-in-out infinite alternate-reverse; }
@keyframes dc-tepuy { from { transform: translateY(0); } to { transform: translateY(8px); } }
#inicio h1 { animation: dc-sube .9s cubic-bezier(.2,.8,.2,1) both; }
#inicio h1 + p, #inicio p:first-child { animation: dc-sube .9s .12s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dc-sube { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* mapa 3D: los prismas se iluminan al pasar */
#app svg path[fill] { transition: filter .2s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  #dc-progreso { display: none; }
}