/* ============================================
   06-ANIMATIONS.CSS — Loader + Hero entrada + Cards
   ============================================ */

/* ============ LOADER ============ */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg-deep);
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}

.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-mono);
}

.loader__percent {
  font-size: var(--fs-xs);
  color: var(--c-white);
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--sp-1);
}

.loader__bar {
  display: flex;
  gap: 6px;
}

.loader__bar span {
  display: block;
  width: 10px;
  height: 10px;
  background: var(--c-muted-deep);
  transition: background var(--dur-fast) var(--ease-out);
}

.loader__bar span.is-active {
  background: var(--c-blue-glow);
  box-shadow: 0 0 8px var(--c-blue);
}

.loader__status {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--c-muted);
  text-transform: uppercase;
  margin-top: var(--sp-2);
}

/* ============ HERO — entrada inicial al cargar ============ */
.hero__left,
.hero__right {
  opacity: 0;
  translate: 0 30px;
  transition:
    opacity var(--dur-epic) var(--ease-out),
    translate var(--dur-epic) var(--ease-out);
}

body.is-ready .hero__left {
  opacity: 1;
  translate: 0 0;
  transition-delay: 250ms;
}

body.is-ready .hero__right {
  opacity: 1;
  translate: 0 0;
  transition-delay: 500ms;
}

/* Portfolio cards: entran staggered */
.portfolio__card {
  opacity: 0;
  translate: 30px 0;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    translate var(--dur-slow) var(--ease-out);
}

body.is-ready .portfolio__card { opacity: 1; translate: 0 0; }
body.is-ready .portfolio__card:nth-child(1) { transition-delay: 700ms; }
body.is-ready .portfolio__card:nth-child(2) { transition-delay: 800ms; }
body.is-ready .portfolio__card:nth-child(3) { transition-delay: 900ms; }
body.is-ready .portfolio__card:nth-child(4) { transition-delay: 1000ms; }
body.is-ready .portfolio__card:nth-child(5) { transition-delay: 1100ms; }

/* ============ CARDS FADE+SLIDE (how, pricing) ============ */
.how__card,
.pricing__card {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

[data-section].is-revealed .how__card,
[data-section].is-revealed .pricing__card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-section].is-revealed .how__card:nth-child(1),
[data-section].is-revealed .pricing__card:nth-child(1) { transition-delay: 200ms; }

[data-section].is-revealed .how__card:nth-child(2),
[data-section].is-revealed .pricing__card:nth-child(2) { transition-delay: 320ms; }

[data-section].is-revealed .how__card:nth-child(3),
[data-section].is-revealed .pricing__card:nth-child(3) { transition-delay: 440ms; }

/* ============ HOVER MICRO-INTERACCIONES ============ */
@keyframes subtle-float-tremble {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25% { translate: -0.5px 1px; rotate: 0.3deg; }
  50% { translate: 1px -1px; rotate: -0.2deg; }
  75% { translate: -1px -0.5px; rotate: 0.2deg; }
}

h1, h2, h3, p, img, .text-flip, .btn {
  transition: scale var(--dur-base) var(--ease-out);
  will-change: scale, translate, rotate;
}

h1:hover, h2:hover, h3:hover, p:hover, img:hover, .text-flip:hover, .btn:hover {
  scale: 1.015;
  animation: subtle-float-tremble 3s infinite ease-in-out;
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}