/* animations.css — keyframes, scroll-reveal, transiciones, hovers, expansiones */

/* ===== KEYFRAMES ===== */

@keyframes scrollHint {
  0%, 100% { transform: scaleY(1);   opacity: 0.55; transform-origin: top; }
  60%       { transform: scaleY(0.4); opacity: 0.18; transform-origin: top; }
}

@keyframes hintPulse {
  0%, 100% { opacity: 1;    box-shadow: 0 0 0   0   rgba(201, 168, 76, 0); }
  50%       { opacity: 0.72; box-shadow: 0 0 16px 2px rgba(201, 168, 76, 0.22); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== TRANSICIONES DIRECCIONALES DE MOTO ===== */
@keyframes moto-exit-left {
  from { opacity: 1; transform: translateX(0)    scale(1);    }
  to   { opacity: 0; transform: translateX(-9%)  scale(0.95); }
}

@keyframes moto-exit-right {
  from { opacity: 1; transform: translateX(0)   scale(1);    }
  to   { opacity: 0; transform: translateX(9%)  scale(0.95); }
}

@keyframes moto-enter-from-right {
  from { opacity: 0; transform: translateX(9%)  scale(0.95); }
  to   { opacity: 1; transform: translateX(0)   scale(1);    }
}

@keyframes moto-enter-from-left {
  from { opacity: 0; transform: translateX(-9%) scale(0.95); }
  to   { opacity: 1; transform: translateX(0)   scale(1);    }
}

@keyframes identity-out {
  from { opacity: 1; transform: translateY(0);   }
  to   { opacity: 0; transform: translateY(-9px); }
}

@keyframes identity-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shimmerSweep {
  0%   { background-position: -220% 0; }
  100% { background-position: 220% 0; }
}

@keyframes subtleFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-5px); }
}

/* ===== NAV — aparición inicial ===== */
.nav {
  animation: fadeIn 700ms var(--ease-out) 80ms both;
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity   var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
}

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

/* Retrasos escalonados para hijos directos en el hero */
.hero__eyebrow.revealed  { transition-delay: 180ms; }
.hero__title.revealed    { transition-delay: 340ms; }
.hero__subtitle.revealed { transition-delay: 500ms; }
.hero__actions.revealed  { transition-delay: 640ms; }

/* Hint pulse del visor */
.viewer__hint {
  animation: hintPulse 3.2s ease-in-out infinite;
}

/* ===== SHIMMER en model-btn hover ===== */
.model-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 168, 76, 0.07) 50%,
    transparent 100%
  );
  background-size: 220% 100%;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
}

.model-btn:hover::after {
  opacity: 1;
  animation: shimmerSweep 1.4s linear infinite;
}

/* ===== VIEWER — transiciones de imagen ===== */
.viewer__img.exit-left  { animation: moto-exit-left       230ms var(--ease-out) both; }
.viewer__img.exit-right { animation: moto-exit-right      230ms var(--ease-out) both; }
.viewer__img.enter-right { animation: moto-enter-from-right 380ms var(--ease-out) both; }
.viewer__img.enter-left  { animation: moto-enter-from-left  380ms var(--ease-out) both; }

/* Transición inicial (primer modelo) */
.viewer__img.entering { animation: fadeInUp var(--t-slow) var(--ease-out) both; }

/* Identity: animaciones de texto al cambiar modelo */
.viewer__identity.identity-out { animation: identity-out 200ms var(--ease-out) both; }
.viewer__identity.identity-in  { animation: identity-in  360ms var(--ease-out) 60ms both; }

/* ===== SPEC MODAL — spec rows emergen con stagger ===== */
.spec-row {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity   var(--t-med) var(--ease-out),
    transform var(--t-med) var(--ease-out);
}

.spec-modal.open .spec-row               { opacity: 1; transform: translateY(0); }
.spec-modal.open .spec-row:nth-child(1)  { transition-delay: 200ms; }
.spec-modal.open .spec-row:nth-child(2)  { transition-delay: 240ms; }
.spec-modal.open .spec-row:nth-child(3)  { transition-delay: 280ms; }
.spec-modal.open .spec-row:nth-child(4)  { transition-delay: 320ms; }
.spec-modal.open .spec-row:nth-child(5)  { transition-delay: 360ms; }
.spec-modal.open .spec-row:nth-child(6)  { transition-delay: 400ms; }
.spec-modal.open .spec-row:nth-child(7)  { transition-delay: 440ms; }
.spec-modal.open .spec-row:nth-child(8)  { transition-delay: 480ms; }
.spec-modal.open .spec-row:nth-child(9)  { transition-delay: 520ms; }
.spec-modal.open .spec-row:nth-child(10) { transition-delay: 560ms; }
.spec-modal.open .spec-row:nth-child(11) { transition-delay: 600ms; }

/* ===== LIFESTYLE CELLS — stagger al hacer scroll ===== */
.lifestyle-cell {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity      var(--t-slow) var(--ease-out),
    transform    var(--t-slow) var(--ease-out),
    border-color var(--t-med)  var(--ease-out),
    scale        var(--t-med)  var(--ease-out);
}

.lifestyle-cell.revealed {
  opacity: 1;
  transform: translateY(0);
}

.lifestyle-cell:nth-child(1) { transition-delay: 0ms; }
.lifestyle-cell:nth-child(2) { transition-delay: 80ms; }
.lifestyle-cell:nth-child(3) { transition-delay: 160ms; }
.lifestyle-cell:nth-child(4) { transition-delay: 60ms; }
.lifestyle-cell:nth-child(5) { transition-delay: 140ms; }

/* ===== TECH VISUAL — flotación sutil ===== */
.tech-visual-card {
  animation: subtleFloat 6s ease-in-out infinite;
}

/* ===== FOCUS RING GLOBAL ===== */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Optimización de rendimiento para elementos animados */
.viewer__img,
.viewer__identity,
.spec-modal__panel,
.model-btn,
.btn {
  will-change: transform, opacity;
}

.reveal {
  will-change: opacity, transform;
}

.reveal.revealed {
  will-change: auto;
}