/* ══════════════════════════════════════════════════════════════
   animations.css — CristianRedCer
   ──────────────────────────────────────────────────────────────
   ÍNDICE
   1.  LOADER INICIAL (cortina + fade out)
   2.  HERO — entrada stagger cinematic
   3.  HERO — fondo gradiente animado
   4.  SCROLL REVEAL — fade + translateY
   5.  SCROLL REVEAL — variantes clip-path
   6.  SCROLL REVEAL — stagger automático
   7.  SECTION TITLE — subrayado que se dibuja
   8.  PARALLAX — variables CSS
   9.  HOVER — tarjetas project-card / card
  10.  HOVER — exp-item (slide lateral)
  11.  HOVER — skill-tag / project-tag
  12.  HOVER — cert-badge
  13.  HOVER — botones (glow + spring click)
  14.  HOVER — nav links (underline grow)
  15.  HOVER — project-link
  16.  HOVER — foto hero (glow pulsante)
  17.  NAV — compacto al hacer scroll
  18.  PROGRESS BAR
  19.  CUSTOM CURSOR
  20.  REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. LOADER INICIAL
   Cortina que cubre toda la pantalla y sale de izquierda
   a derecha antes de que aparezca nada. Sin parpadeos.
───────────────────────────────────────────────────────────────*/
#anim-loader {
  position: fixed;
  inset: 0;
  background: var(--bg, #0d0d0d);
  z-index: 9000;
  transform-origin: right;
  pointer-events: none;
  /* JS le añade .anim-loader-out para animar la salida */
  transition: transform 0.72s cubic-bezier(0.77, 0, 0.18, 1),
    opacity 0.15s ease 0.68s;
}

#anim-loader.anim-loader-out {
  transform: scaleX(0);
  opacity: 0;
}

/* ─────────────────────────────────────────────────────────────
   2. HERO — ENTRADA STAGGER CINEMATIC
   body recibe .hero-ready desde JS después de que el loader
   salga. Cada pieza tiene su propio delay.
───────────────────────────────────────────────────────────────*/
.hero-tag,
.hero-left h1,
.hero-desc,
.hero-btns,
.hero-photo-wrap {
  opacity: 0;
  transform: translateY(32px);
  will-change: opacity, transform;
}

body.hero-ready .hero-tag {
  animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}

body.hero-ready .hero-left h1 {
  animation: heroFadeUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.22s forwards;
}

body.hero-ready .hero-desc {
  animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards;
}

body.hero-ready .hero-btns {
  animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.58s forwards;
}

body.hero-ready .hero-photo-wrap {
  animation: heroFadeRight 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.18s forwards;
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFadeRight {
  from {
    opacity: 0;
    transform: translateX(44px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ─────────────────────────────────────────────────────────────
   3. HERO — FONDO GRADIENTE ANIMADO
   Dos blobs de color que se mueven lentamente detrás del hero.
   Solo opacity y transform → 0 layout cost.
───────────────────────────────────────────────────────────────*/
.hero-glow {
  position: absolute;
  top: -120px;
  left: -80px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(232, 255, 71, 0.055) 0%,
      transparent 62%);
  pointer-events: none;
  animation: blobDrift 14s ease-in-out infinite alternate;
  will-change: transform;
}

.hero-glow::after {
  content: "";
  position: absolute;
  top: 40%;
  right: -200px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(136, 170, 255, 0.04) 0%,
      transparent 65%);
  animation: blobDrift 18s ease-in-out infinite alternate-reverse;
}

@keyframes blobDrift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(30px, -20px) scale(1.04);
  }

  66% {
    transform: translate(-15px, 25px) scale(0.97);
  }

  100% {
    transform: translate(20px, -10px) scale(1.02);
  }
}

/* ─────────────────────────────────────────────────────────────
   4. SCROLL REVEAL — fade + translateY (base)
   Añade .reveal a cualquier elemento en HTML.
   JS (IntersectionObserver) añade .visible cuando entra.
───────────────────────────────────────────────────────────────*/
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--anim-delay, 0s);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes de dirección */
.reveal.from-left {
  transform: translateX(-28px);
}

.reveal.from-right {
  transform: translateX(28px);
}

.reveal.from-left.visible,
.reveal.from-right.visible {
  transform: none;
}

.reveal.scale-in {
  transform: translateY(16px) scale(0.97);
}

.reveal.scale-in.visible {
  transform: translateY(0) scale(1);
}

/* ─────────────────────────────────────────────────────────────
   5. SCROLL REVEAL — CLIP-PATH (máscaras tipo "wipe")
   Alternativa más cinematográfica. Añade .reveal-clip
   en lugar de .reveal para una aparición tipo "unveil".
───────────────────────────────────────────────────────────────*/
.reveal-clip {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition:
    opacity 0.01s linear,
    clip-path 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--anim-delay, 0s);
  will-change: clip-path;
}

.reveal-clip.visible {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
}

/* Variante: reveal lateral (de izquierda a derecha) */
.reveal-clip.wipe-right {
  clip-path: inset(0 100% 0 0);
}

.reveal-clip.wipe-right.visible {
  clip-path: inset(0 0% 0 0);
}

/* ─────────────────────────────────────────────────────────────
   6. STAGGER AUTOMÁTICO EN GRUPOS
   Para listas y grids: aplica delay incremental a los hijos
   con .reveal o .reveal-clip.
───────────────────────────────────────────────────────────────*/
.reveal:nth-child(1) {
  --anim-delay: 0s;
}

.reveal:nth-child(2) {
  --anim-delay: 0.08s;
}

.reveal:nth-child(3) {
  --anim-delay: 0.16s;
}

.reveal:nth-child(4) {
  --anim-delay: 0.24s;
}

.reveal:nth-child(5) {
  --anim-delay: 0.32s;
}

.reveal:nth-child(6) {
  --anim-delay: 0.40s;
}

.reveal:nth-child(7) {
  --anim-delay: 0.48s;
}

.reveal:nth-child(8) {
  --anim-delay: 0.56s;
}

.reveal:nth-child(9) {
  --anim-delay: 0.64s;
}

.reveal:nth-child(n+10) {
  --anim-delay: 0.70s;
}

/* Para grid de skills: override más rápido */
.skills-grid .reveal:nth-child(n) {
  --anim-delay: calc(var(--skill-i, 0) * 0.055s);
}

/* ─────────────────────────────────────────────────────────────
   7. SECTION TITLE — subrayado que se dibuja al entrar
───────────────────────────────────────────────────────────────*/
.section-title {
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent, #e8ff47);
  box-shadow: 0 0 10px rgba(232, 255, 71, 0.4);
  transition: width 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.section-title.title-line-drawn::after {
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   8. PARALLAX — variables CSS establecidas por JS
   Los elementos con .parallax usan --parallax-y que JS
   actualiza en el scroll. Transform puro → 60fps.
───────────────────────────────────────────────────────────────*/
.parallax {
  transform: translateY(var(--parallax-y, 0px));
  will-change: transform;
  transition: transform 0.05s linear;
  /* Muy sutil para suavidad */
}

.parallax-slow {
  --parallax-speed: 0.08;
}

.parallax-med {
  --parallax-speed: 0.14;
}

.parallax-fast {
  --parallax-speed: 0.22;
}

/* ─────────────────────────────────────────────────────────────
   9. HOVER — tarjetas (project-card / card)
   Elevación + borde accent + sombra profunda
───────────────────────────────────────────────────────────────*/
.project-card,
.card {
  transition:
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.32s ease,
    box-shadow 0.32s ease !important;
  position: relative;
  overflow: hidden;
}

/* Shimmer radial al hover (brillo desde el cursor) */
.project-card::after,
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(232, 255, 71, 0.055) 0%,
      transparent 55%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: inherit;
}

.project-card:hover::after,
.card:hover::after {
  opacity: 1;
}

.project-card:hover,
.card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(232, 255, 71, 0.38) !important;
  box-shadow:
    0 0 0 1px rgba(232, 255, 71, 0.08),
    0 14px 48px rgba(0, 0, 0, 0.6) !important;
}

/* Línea superior accent */
.project-card::before,
.card::before {
  background: var(--accent, #e8ff47) !important;
  box-shadow: 0 0 10px rgba(232, 255, 71, 0.55);
  height: 2px !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ─────────────────────────────────────────────────────────────
   10. HOVER — exp-item (slide + indent suave)
───────────────────────────────────────────────────────────────*/
.exp-item {
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.28s ease,
    background 0.28s ease !important;
}

.exp-item:hover {
  transform: translateX(8px) !important;
  border-color: rgba(232, 255, 71, 0.32) !important;
  background: rgba(232, 255, 71, 0.025) !important;
}

/* ─────────────────────────────────────────────────────────────
   11. HOVER — skill-tag / project-tag
───────────────────────────────────────────────────────────────*/
.skill-tag,
.project-tag {
  transition:
    color 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.skill-tag:hover,
.project-tag:hover {
  color: var(--accent, #e8ff47) !important;
  border-color: rgba(232, 255, 71, 0.5) !important;
  background: rgba(232, 255, 71, 0.07) !important;
  transform: translateY(-3px) !important;
}

/* ─────────────────────────────────────────────────────────────
   12. HOVER — cert-badge
───────────────────────────────────────────────────────────────*/
.cert-badge {
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease !important;
}

.cert-badge:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(232, 255, 71, 0.65) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(232, 255, 71, 0.14) !important;
}

/* ─────────────────────────────────────────────────────────────
   13. HOVER — botones (glow + spring click)
───────────────────────────────────────────────────────────────*/
.btn {
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
  position: relative;
  overflow: hidden;
}

/* Ripple de click */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: inherit;
  transform: scale(0);
  opacity: 1;
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}

.btn.btn-clicked::after {
  transform: scale(2.5);
  opacity: 0;
}

.btn:hover {
  transform: translateY(-3px) !important;
}

/* Spring en :active */
.btn:active {
  transform: translateY(0px) scale(0.97) !important;
  transition-duration: 0.08s !important;
}

.btn-primary:hover {
  box-shadow: 0 6px 24px rgba(232, 255, 71, 0.32) !important;
}

.btn-outline:hover {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
}

.btn-accent-outline:hover {
  box-shadow: 0 6px 22px rgba(232, 255, 71, 0.28) !important;
}

/* ─────────────────────────────────────────────────────────────
   14. HOVER — nav links (underline grow)
───────────────────────────────────────────────────────────────*/
.nav-links a {
  position: relative;
  transition: color 0.22s ease !important;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--accent, #e8ff47);
  box-shadow: 0 0 7px rgba(232, 255, 71, 0.55);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links a:hover::after,
.nav-links a.active-link::after {
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   15. HOVER — project-link
───────────────────────────────────────────────────────────────*/
.project-link {
  transition:
    color 0.22s ease,
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.project-link:hover {
  color: var(--accent, #e8ff47) !important;
  transform: translateX(4px) !important;
}

/* ─────────────────────────────────────────────────────────────
   16. HOVER — foto hero (glow pulsante + tilt via JS)
───────────────────────────────────────────────────────────────*/
.hero-photo-frame {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation: photoGlow 3.5s ease-in-out infinite alternate;
}

@keyframes photoGlow {
  from {
    box-shadow: 4px 4px 0 var(--accent, #e8ff47);
  }

  to {
    box-shadow: 7px 7px 0 var(--accent, #e8ff47),
      0 0 38px rgba(232, 255, 71, 0.1);
  }
}

/* ─────────────────────────────────────────────────────────────
   17. NAV — compacto al hacer scroll
───────────────────────────────────────────────────────────────*/
nav {
  transition:
    padding 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease !important;
}

nav.nav-compact {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  background: rgba(13, 13, 13, 0.97) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* ─────────────────────────────────────────────────────────────
   18. PROGRESS BAR
───────────────────────────────────────────────────────────────*/
#anim-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--accent, #e8ff47);
  box-shadow: 0 0 8px rgba(232, 255, 71, 0.5);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s linear;
  pointer-events: none;
  z-index: 9999;
}

/* ─────────────────────────────────────────────────────────────
   19. CUSTOM CURSOR (solo desktop con hover fino)
───────────────────────────────────────────────────────────────*/
#anim-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #e8ff47);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.15s, height 0.15s;
  will-change: transform;
}

#anim-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(232, 255, 71, 0.35);
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
  transition:
    width 0.3s ease,
    height 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
  will-change: transform;
}

body.cursor-on-interactive #anim-cursor-dot {
  width: 12px;
  height: 12px;
}

body.cursor-on-interactive #anim-cursor-ring {
  width: 46px;
  height: 46px;
  border-color: rgba(232, 255, 71, 0.65);
  background: rgba(232, 255, 71, 0.04);
}

/* ─────────────────────────────────────────────────────────────
   20. REDUCED MOTION — respeta prefers-reduced-motion
───────────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {

  /* Loader */
  #anim-loader {
    display: none !important;
  }

  /* Hero: mostrar inmediatamente */
  .hero-tag,
  .hero-left h1,
  .hero-desc,
  .hero-btns,
  .hero-photo-wrap {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Blob hero */
  .hero-glow {
    animation: none !important;
  }

  .hero-glow::after {
    animation: none !important;
  }

  /* Reveals */
  .reveal,
  .reveal-clip {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  /* Section title */
  .section-title::after {
    width: 100% !important;
    transition: none !important;
  }

  /* Foto */
  .hero-photo-frame {
    animation: none !important;
  }

  /* Parallax */
  .parallax {
    transform: none !important;
    will-change: auto !important;
  }

  /* Hovers: sin transform */
  .project-card:hover,
  .card:hover,
  .skill-tag:hover,
  .project-tag:hover,
  .exp-item:hover,
  .cert-badge:hover,
  .btn:hover,
  .btn:active,
  .project-link:hover {
    transform: none !important;
  }

  /* Cursor y progress bar */
  #anim-progress,
  #anim-cursor-dot,
  #anim-cursor-ring {
    display: none !important;
  }
}