/* =============================================================
   CMAS INGENIEROS — animations.css
   Keyframes, reveal system, transitions
   ============================================================= */

/* =============================================================
   1. KEYFRAMES
   ============================================================= */
@keyframes meshDrift {
  0%, 100% { transform: scale(1) rotate(0deg) translate(0, 0); }
  33%       { transform: scale(1.08) rotate(3deg) translate(-1%, 1%); }
  66%       { transform: scale(1.04) rotate(-2deg) translate(1%, -1%); }
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,150,64,0); }
  50%       { box-shadow: 0 0 0 6px rgba(0,150,64,0.3); }
}

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

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0,150,64,0.2); }
  50%       { box-shadow: 0 0 40px rgba(0,150,64,0.4); }
}

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

/* =============================================================
   2. SCROLL REVEAL SYSTEM
   ============================================================= */

/* Default: hidden state */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}

/* Visible state (added by IntersectionObserver in animations.js) */
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid items */
.services-grid .service-card:nth-child(3n+2)[data-reveal] { transition-delay: 0.08s; }
.services-grid .service-card:nth-child(3n+3)[data-reveal] { transition-delay: 0.16s; }

.promise-pillars .promise-pillar:nth-child(2)[data-reveal] { transition-delay: 0.1s; }
.promise-pillars .promise-pillar:nth-child(3)[data-reveal] { transition-delay: 0.2s; }

.projects-grid .project-item:nth-child(2)[data-reveal] { transition-delay: 0.06s; }
.projects-grid .project-item:nth-child(3)[data-reveal] { transition-delay: 0.12s; }
.projects-grid .project-item:nth-child(4)[data-reveal] { transition-delay: 0.08s; }
.projects-grid .project-item:nth-child(5)[data-reveal] { transition-delay: 0.14s; }
.projects-grid .project-item:nth-child(6)[data-reveal] { transition-delay: 0.2s; }

/* DEFENSIVE: elements with both .reveal and data-split must never be invisible */
.reveal[data-split] {
  opacity: 1;
  transform: none;
}

/* =============================================================
   3. HERO ENTRANCE — managed by GSAP in app.js
   ============================================================= */

/* DEFENSIVE: if GSAP never fires, hero elements with data-hero-el stay visible */
[data-hero-el] { opacity: 1; transform: none; }

/* DEFENSIVE: hero lines are visible by default; GSAP sets initial hidden state via JS */
.hero-line { opacity: 1; transform: none; }

/* =============================================================
   4. HOVER EFFECTS
   ============================================================= */

/* Service card image zoom on hover */
.service-card:hover .service-slide.active {
  transform: scale(1.04);
}
.service-slide {
  transition:
    opacity 0.8s var(--ease-soft),
    transform 0.6s var(--ease-out);
}

/* Project item overlay reveal */
.project-item .project-overlay {
  transition: opacity 0.35s var(--ease-out);
}

/* Button shine sweep */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.15) 50%,
    transparent 80%
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.btn { position: relative; overflow: hidden; }
.btn-primary:hover::after { opacity: 1; }

/* =============================================================
   5. LOADING / TRANSITION
   ============================================================= */

/* Page transition (View Transitions API) */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: 0.4s cubic-bezier(0.16,1,0.3,1) both fadeSlideOut;
}
::view-transition-new(root) {
  animation: 0.4s cubic-bezier(0.16,1,0.3,1) both fadeSlideIn;
}

@keyframes fadeSlideOut {
  to { opacity: 0; transform: translateY(-8px); }
}

/* =============================================================
   6. REDUCED MOTION — only gate truly intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  /* Intrusive: kill parallax/drift animations */
  .hero-mesh { animation: none; }
  .marquee-inner { animation-duration: 60s; } /* slower, not stopped */
  .hero-badge-dot { animation: none; }
  @view-transition { navigation: none; }

  /* DO NOT disable: hover effects, card reveals, count-up — these are functional */
}