/* ════════════════════════════════════════════════════
   animations.css — Allan Jara Portal
   Solo transform/opacity (sin reflow). Respeta
   prefers-reduced-motion.
════════════════════════════════════════════════════ */

/* ─── SCROLL REVEAL ─────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.4,0,.2,1),
              transform .6s cubic-bezier(.4,0,.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal[data-delay="1"] { transition-delay: .08s }
.reveal[data-delay="2"] { transition-delay: .16s }
.reveal[data-delay="3"] { transition-delay: .24s }
.reveal[data-delay="4"] { transition-delay: .32s }
.reveal[data-delay="5"] { transition-delay: .40s }
.reveal[data-delay="6"] { transition-delay: .48s }

/* ─── HERO ENTRY (carga de página) ─────────────── */
.hero-entry {
  animation: heroFadeUp .8s cubic-bezier(.4,0,.2,1) both;
}
.hero-entry-1 { animation-delay: .08s }
.hero-entry-2 { animation-delay: .22s }
.hero-entry-3 { animation-delay: .38s }
@keyframes heroFadeUp {
  from { opacity:0; transform:translateY(26px) }
  to   { opacity:1; transform:none }
}

/* ─── BARRA DE PROGRESO DE LECTURA ─────────────── */
#read-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--gold) 100%);
  z-index: 9999;
  pointer-events: none;
  transition: width .08s linear;
}

/* ─── HEADER DINÁMICO ───────────────────────────── */
#nav-primary {
  transition: transform .35s cubic-bezier(.4,0,.2,1),
              box-shadow .3s;
  will-change: transform;
}
#nav-primary.nav-scrolled {
  box-shadow: 0 4px 24px rgba(11,15,26,.55);
}
#nav-primary.nav-hidden {
  transform: translateY(-100%);
}
#masthead {
  transition: padding .35s cubic-bezier(.4,0,.2,1);
}
#masthead.compact {
  padding: .45rem 0;
}
#masthead.compact .site-logo {
  height: 38px;
  transition: height .35s cubic-bezier(.4,0,.2,1);
}
#masthead.compact .logo-sub {
  display: none;
}

/* ─── NAV — subrayado animado ───────────────────── */
.nav-cat {
  position: relative;
}
.nav-cat::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 3px;
  background: var(--gold);
  transition: width .25s cubic-bezier(.4,0,.2,1);
}
.nav-cat:hover::after {
  width: 100%;
}
.nav-cat.active::after {
  width: 100%;
  background: var(--blue2);
}

/* ─── NC CARD — hover con elevación y subrayado ─── */
.nc {
  transition: box-shadow .32s cubic-bezier(.4,0,.2,1),
              transform .32s cubic-bezier(.4,0,.2,1) !important;
  will-change: transform;
}
.nc:hover {
  box-shadow: 0 14px 44px rgba(11,15,26,.16) !important;
  transform: translateY(-4px) !important;
}
.nc-title {
  position: relative;
}
.nc-title::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width .38s cubic-bezier(.4,0,.2,1);
}
.nc:hover .nc-title::after {
  width: 100%;
}

/* ─── CARD BASE — hover mejorado ────────────────── */
.card {
  transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
}
.card:hover {
  transform: translateY(-3px);
}

/* ─── CAT PILLS — fill desde la izquierda ───────── */
.cat-pill {
  background-color: #fff !important;
  background-image: linear-gradient(to right, var(--ink) 50%, transparent 50%) !important;
  background-size: 200% 100% !important;
  background-position: right center !important;
  transition: background-position .28s cubic-bezier(.4,0,.2,1),
              color .22s,
              border-color .22s !important;
}
.cat-pill:hover,
.cat-pill.active {
  background-position: left center !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}

/* ─── TAGS — leve elevación ─────────────────────── */
.tag {
  transition: background .22s, color .22s, border-color .22s,
              transform .2s;
}
.tag:hover {
  transform: translateY(-2px);
}

/* ─── BOTONES — efecto shimmer ──────────────────── */
.btn-primary,
.btn-send,
.nl-btn {
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.btn-send::after,
.nl-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.22),
    transparent);
  transform: skewX(-18deg);
  transition: left .45s;
  pointer-events: none;
}
.btn-primary:hover::after,
.btn-send:hover::after,
.nl-btn:hover::after {
  left: 150%;
}
.btn-primary:active,
.btn-send:active,
.nl-btn:active,
.share-btn:active,
.btn-dashboard:active {
  transform: scale(.96) !important;
  transition: transform .1s !important;
}
.btn-dashboard {
  transition: background .2s, transform .15s !important;
}

/* ─── TICKER — pausa al hover ───────────────────── */
#ticker:hover .ticker-scroll {
  animation-play-state: paused;
}

/* ─── HERO OVERLAY — se intensifica al hover ────── */
.hero-clean-overlay {
  transition: background .45s;
}
.hero-clean-inner:hover .hero-clean-overlay {
  background: linear-gradient(to top,
    rgba(11,15,26,1) 0%,
    rgba(11,15,26,.52) 50%,
    rgba(11,15,26,.18) 100%);
}

/* ─── HERO CAT BADGE — pulso dorado ─────────────── */
@keyframes badgePulse {
  0%,100% { box-shadow:0 0 0 0 rgba(200,151,58,0) }
  50%      { box-shadow:0 0 0 7px rgba(200,151,58,.32) }
}
.hero-clean-cat {
  animation: badgePulse 3s ease-in-out infinite;
}

/* ─── BREAKING — entrada ────────────────────────── */
@keyframes breakingSlide {
  from { opacity:0; transform:translateY(-8px) }
  to   { opacity:1; transform:none }
}
#breaking.show {
  animation: breakingSlide .4s cubic-bezier(.4,0,.2,1) both;
}

/* ─── TRENDING ITEM HOVER ───────────────────────── */
.trending-item {
  transition: background .22s, padding-left .2s;
  border-radius: 3px;
}
.trending-item:hover {
  background: var(--surface);
  padding-left: .4rem;
}

/* ─── FOOTER SOCIAL ─────────────────────────────── */
.footer-soc-btn {
  transition: transform .22s, background .22s !important;
}
.footer-soc-btn:hover {
  transform: translateY(-4px) scale(1.05) !important;
}

/* ─── OPINION CARD ──────────────────────────────── */
.opinion-card {
  transition: transform .3s, background .3s !important;
}
.opinion-card:hover {
  transform: translateY(-3px) !important;
}

/* ─── SHARE BUTTONS (inline) ────────────────────── */
.share-btn {
  transition: transform .18s, opacity .18s;
}
.share-btn:hover {
  transform: translateY(-2px);
  opacity: .88;
}

/* ─── ARTICLE HERO ENTRADA ──────────────────────── */
@keyframes artHeroFade {
  from { opacity:0; transform:scale(1.025) }
  to   { opacity:1; transform:scale(1) }
}
.article-hero {
  animation: artHeroFade .9s cubic-bezier(.4,0,.2,1) both;
}

/* ─── IMAGEN SKELETON — shimmer mientras carga ──── */
.nc-img:not(.img-loaded),
.card-img:not(.img-loaded),
.stack-img:not(.img-loaded) {
  background: linear-gradient(90deg,
    #edf0f5 25%, #e0e4eb 50%, #edf0f5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}
/* Fade-in al cargar */
.nc-img, .card-img {
  transition: opacity .35s;
}
.nc-img:not(.img-loaded), .card-img:not(.img-loaded) {
  opacity: .75;
}
.nc-img.img-loaded, .card-img.img-loaded {
  opacity: 1;
}

/* ─── GALERÍA ───────────────────────────────────── */
.ag-item {
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.ag-item:hover {
  transform: scale(1.025);
}

/* ─── FLOATING SHARE (noticia.php) ─────────────── */
#share-float {
  position: fixed;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%) translateX(-80px);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  opacity: 0;
  transition: opacity .38s, transform .38s cubic-bezier(.4,0,.2,1);
  z-index: 200;
  pointer-events: none;
}
#share-float.visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}
.sfb {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: .6rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0,0,0,.22);
  transition: transform .22s, box-shadow .22s;
}
.sfb:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 20px rgba(0,0,0,.32);
}
.sfb:active { transform: scale(.96) }
.sfb-tw { background:#1da1f2 }
.sfb-fb { background:#1877f2 }
.sfb-wa { background:#25d366 }
.sfb-tg { background:#2ca5e0 }
.sfb-cp { background:var(--slate) }
.sfb-label {
  font-size: .48rem;
  display: block;
  margin-top: .05rem;
}

@media(max-width:1000px) {
  #share-float { display:none }
}

/* ─── TRANSITION SUAVE ENTRE PÁGINAS ────────────── */
body {
  animation: pageFadeIn .4s ease both;
}
@keyframes pageFadeIn {
  from { opacity:0 }
  to   { opacity:1 }
}

/* ─── PREFERS-REDUCED-MOTION ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .reveal[data-delay] { transition-delay: 0s !important }

  .hero-entry,
  .hero-entry-1,
  .hero-entry-2,
  .hero-entry-3 {
    animation: none !important;
    opacity: 1;
  }
  #nav-primary, #masthead {
    transition: none !important;
  }
  .cat-pill {
    background-image: none !important;
    background-position: unset !important;
    transition: background .2s, color .2s, border-color .2s !important;
  }
  .cat-pill:hover, .cat-pill.active {
    background-color: var(--ink) !important;
  }
  .nc, .card { transition: box-shadow .2s !important }
  .nc:hover { transform: none !important }
  .nc-title::after, .nav-cat::after { display:none }
  .hero-clean-cat { animation:none !important }
  #breaking.show { animation:none !important }
  .article-hero { animation:none !important }
  body { animation:none }
  .btn-primary::after, .btn-send::after, .nl-btn::after { display:none }
  .nc-img:not(.img-loaded),
  .card-img:not(.img-loaded),
  .stack-img:not(.img-loaded) { animation:none !important }
  .nc-img, .card-img { transition:none !important; opacity:1 !important }
  #share-float { transition:none !important }
  #read-progress { transition:none }
  .trending-item { transition:none !important }
  .footer-soc-btn { transition:background .2s !important }
  .footer-soc-btn:hover { transform:none !important }
  .sfb { transition:none !important }
  .opinion-card { transition:background .2s !important }
  .opinion-card:hover { transform:none !important }
}