/* ============================================================
   contacto-anim.css — Animation layer for contacto.html
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes ct-rise {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:none; }
}
@keyframes ct-from-left {
  from { opacity:0; transform:translateX(-44px) translateY(10px); }
  to   { opacity:1; transform:none; }
}
@keyframes ct-from-right {
  from { opacity:0; transform:translateX(44px) translateY(10px); }
  to   { opacity:1; transform:none; }
}
@keyframes ct-pop {
  from { opacity:0; transform:scale(.88) translateY(18px); }
  to   { opacity:1; transform:none; }
}

/* ── Neutralize shared .reveal system ──────────────────────── */
/* Container .reveal becomes instantly visible; children animated individually */
.js-ct .reveal,
.js-ct .reveal.in {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ── CSS gate: hide animated elements until JS fires ─────────── */
/* Hero */
.js-ct .hero .marker     { opacity: 0; }
.js-ct .hero h1          { opacity: 0; }
.js-ct .hero .hero-sub   { opacity: 0; }

/* Form section */
.js-ct .ct-left .marker        { opacity: 0; }
.js-ct .ct-left h2             { opacity: 0; }
.js-ct .ct-left > p            { opacity: 0; }
.js-ct .ct-left li             { opacity: 0; }
.js-ct .ct-left .ct-info       { opacity: 0; }
.js-ct .ct-right               { opacity: 0; }

/* Methods */
.js-ct .method    { opacity: 0; }

/* Panels */
.js-ct .panel-schedule { opacity: 0; }
.js-ct .panel-ethics   { opacity: 0; }

/* Offices */
.js-ct .sec-head .marker { opacity: 0; }
.js-ct .sec-head h2      { opacity: 0; }
.js-ct .office-card      { opacity: 0; }
.js-ct .social-pill      { opacity: 0; }

/* ── Hero animations (on load) ──────────────────────────────── */
.js-ct .hero .marker.ct-in {
  animation: ct-from-left .55s cubic-bezier(.16,1,.3,1) both;
}
.js-ct .hero h1.ct-in {
  animation: ct-rise .7s cubic-bezier(.16,1,.3,1) both;
}
.js-ct .hero .hero-sub.ct-in {
  animation: ct-rise .65s cubic-bezier(.16,1,.3,1) both;
}

/* ── Form section ───────────────────────────────────────────── */
.js-ct .ct-left .marker.ct-in {
  animation: ct-from-left .5s cubic-bezier(.16,1,.3,1) both;
}
.js-ct .ct-left h2.ct-in {
  animation: ct-rise .65s cubic-bezier(.16,1,.3,1) both;
}
.js-ct .ct-left > p.ct-in {
  animation: ct-rise .6s cubic-bezier(.16,1,.3,1) both;
}
.js-ct .ct-left li.ct-in {
  animation: ct-pop .5s cubic-bezier(.16,1,.3,1) both;
}
.js-ct .ct-left .ct-info.ct-in {
  animation: ct-rise .6s cubic-bezier(.16,1,.3,1) both;
}
.js-ct .ct-right.ct-in {
  animation: ct-from-right .75s cubic-bezier(.16,1,.3,1) both;
}

/* ── Method cards ───────────────────────────────────────────── */
.js-ct .method.ct-in {
  animation: ct-pop .52s cubic-bezier(.16,1,.3,1) both;
}

/* ── Schedule + Ethics panels ───────────────────────────────── */
.js-ct .panel-schedule.ct-in {
  animation: ct-from-left .65s cubic-bezier(.16,1,.3,1) both;
}
.js-ct .panel-ethics.ct-in {
  animation: ct-from-right .65s cubic-bezier(.16,1,.3,1) both;
}

/* ── Offices head ───────────────────────────────────────────── */
.js-ct .sec-head .marker.ct-in {
  animation: ct-from-left .5s cubic-bezier(.16,1,.3,1) both;
}
.js-ct .sec-head h2.ct-in {
  animation: ct-rise .65s cubic-bezier(.16,1,.3,1) both;
}

/* ── Office cards ───────────────────────────────────────────── */
.js-ct .office-card.ct-in {
  animation: ct-pop .52s cubic-bezier(.16,1,.3,1) both;
}

/* ── Social pills ───────────────────────────────────────────── */
.js-ct .social-pill.ct-in {
  animation: ct-pop .45s cubic-bezier(.16,1,.3,1) both;
}

/* ── Instant-show on scroll-up (no animation) ───────────────── */
.js-ct .ct-snap,
.js-ct .ct-snap * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ── prefers-reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  .js-ct .hero .marker,
  .js-ct .hero h1,
  .js-ct .hero .hero-sub,
  .js-ct .ct-left .marker,
  .js-ct .ct-left h2,
  .js-ct .ct-left > p,
  .js-ct .ct-left li,
  .js-ct .ct-left .ct-info,
  .js-ct .ct-right,
  .js-ct .method,
  .js-ct .panel-schedule,
  .js-ct .panel-ethics,
  .js-ct .sec-head .marker,
  .js-ct .sec-head h2,
  .js-ct .office-card,
  .js-ct .social-pill {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}