/* CTRL MEDIA — MOTION
   Contrato: coreografía global de transiciones gobernada por clases de estado desde JS. */

/* Base transitions suaves */
.cm-panel,
.cm-bg,
.cm-overlay {
  transition:
    opacity var(--cm-dur-3) var(--cm-ease),
    transform var(--cm-dur-3) var(--cm-ease);
}

/* Performance hints de render en estados activos. */
.cm-panel.is-active .cm-title,
.cm-panel.is-active .cm-subtitle,
.cm-panel.is-exiting .cm-title,
.cm-panel.is-exiting .cm-subtitle {
  will-change: transform, opacity;
}

.cm-panel.is-l2.is-active .cm-l2-frame,
.cm-panel.is-l2.is-active .cm-l2-corner,
.cm-panel.is-l2.is-exiting .cm-l2-frame,
.cm-panel.is-l2.is-exiting .cm-l2-corner {
  will-change: transform, opacity;
}

body.is-team-open .cm-team [data-anim],
body.is-team-open .cm-team .cm-profile-role,
body.is-team-open .cm-team .cm-profile-name,
body.is-team-open .cm-team .cm-profile-bio,
body.is-team-open .cm-team .cm-profile-photo,
body.is-team-open .cm-team .cm-profile-social {
  will-change: transform, opacity, filter;
}

body.is-portfolio-open .cm-portfolio-title,
body.is-portfolio-open .cm-portfolio-lead,
body.is-portfolio-open .cm-portfolio-reveal,
body.is-portfolio-open .cm-portfolio-btn,
body.is-portfolio-open .cm-portfolio-chevron,
body.is-portfolio-open .cm-portfolio-heading {
  will-change: transform, opacity, filter;
}

body.is-portfolio-scroll-unlocked .cm-portfolio-card {
  will-change: transform, opacity, filter;
}

.cm-nav,
.cm-cta-global {
  will-change: transform, opacity;
}

/* CRITICAL: `.is-active`, `.is-exiting` y `.has-been-active` son contrato del observer para evitar parpadeos. */
.cm-panel:not(.is-active):not(.has-been-active) .cm-title,
.cm-panel:not(.is-active):not(.has-been-active) .cm-subtitle {
  opacity: 0;
  transform: translate3d(0, 2.2vh, 0);
}

/* Keyframes de entrada. */
@keyframes cmTitleIn {
  0%   { opacity: 0; transform: translate3d(0, 2.2vh, 0); }
  70%  { opacity: 1; transform: translate3d(0, -0.6vh, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes cmSubIn {
  0%   { opacity: 0; transform: translate3d(0, 1.8vh, 0); }
  70%  { opacity: 1; transform: translate3d(0, -0.45vh, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Keyframes de salida. */
@keyframes cmTitleOut {
  0%   { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(0, 1.4vh, 0); }
}

@keyframes cmSubOut {
  0%   { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(0, 1.0vh, 0); }
}

/* Activación de entrada. */
.cm-panel.is-active .cm-title {
  animation: cmTitleIn 900ms var(--cm-ease) both;
}

.cm-panel.is-active .cm-subtitle {
  animation: cmSubIn 900ms var(--cm-ease) both;
  animation-delay: 280ms;
}

/* Activación de salida. */
.cm-panel.is-exiting .cm-title {
  animation: cmTitleOut 650ms var(--cm-ease) both;
}

.cm-panel.is-exiting .cm-subtitle {
  animation: cmSubOut 650ms var(--cm-ease) both;
  animation-delay: 120ms;
}

/* L2 — DOLOR (Marco + palabras)
   Regla Sandler:
   - Texto primero (claridad)
   - Marco y esquinas después (tensión)
*/

@keyframes cmL2FrameIn {
  0%   { opacity: 0; transform: translate3d(0, 6px, 0); }
  70%  { opacity: 1; transform: translate3d(0, -2px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes cmL2FrameOut {
  0%   { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(0, 6px, 0); }
}

/* Base: oculto antes del primer reveal */
.cm-panel.is-l2:not(.is-active):not(.has-been-active) .cm-l2-frame,
.cm-panel.is-l2:not(.is-active):not(.has-been-active) .cm-l2-corner {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
}

/* Entrada: delay posterior a subtítulo */
.cm-panel.is-l2.is-active .cm-l2-frame {
  animation: cmL2FrameIn 900ms var(--cm-ease) both;
  animation-delay: 520ms;
}

.cm-panel.is-l2.is-active .cm-l2-corner {
  animation: cmL2FrameIn 900ms var(--cm-ease) both;
  animation-delay: 620ms;
}

/* Salida: sincronizada con el texto */
.cm-panel.is-l2.is-exiting .cm-l2-frame {
  animation: cmL2FrameOut 650ms var(--cm-ease) both;
  animation-delay: 40ms;
}

.cm-panel.is-l2.is-exiting .cm-l2-corner {
  animation: cmL2FrameOut 650ms var(--cm-ease) both;
  animation-delay: 90ms;
}

/* CRITICAL: `body.is-l1-video-hiding` sincroniza el drift con la secuencia de video L1. */
@keyframes cmFieldDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1.02); }
  50%  { transform: translate3d(-1.0%, 0.7%, 0) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) scale(1.02); }
}

body.is-l1-video-hiding #l1 .cm-bg::after {
  animation: cmFieldDrift 18s linear infinite;
  will-change: transform;
}

/* Transición compartida de NAV y CTA. */
.cm-nav,
.cm-cta-global {
  transition:
    opacity var(--cm-dur-2) var(--cm-ease),
    transform var(--cm-dur-2) var(--cm-ease);
}

/* L5 — Team motion.
   CRITICAL: depende de `body.is-team-open` y etapas `team-stage-*` emitidas por JS. */

.cm-team-panel {
  transition:
    transform 520ms var(--cm-ease),
    opacity 420ms var(--cm-ease);
}

body.is-team-open .cm-team-panel {
  transform: translateX(0);
  opacity: 1;
  will-change: transform, opacity;
}

.cm-team-backdrop {
  transition: opacity 420ms var(--cm-ease);
  opacity: 0;
}

body.is-team-open .cm-team-backdrop {
  opacity: 1;
  will-change: opacity;
}

/* L5 abierto:
   - CTA se apaga (no compite)
   - NAV se mantiene visible (control de salida) */
body.is-team-open .cm-cta-global {
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  pointer-events: none;
}

/* CRITICAL: no alterar la semántica de `team-stage-1..4`; controla orden narrativo interno del overlay Team. */

/* Estado base: todo “en silencio” antes de stage */
.cm-team [data-anim="quote"],
.cm-team [data-anim="profiles"],
.cm-team [data-anim="footer"] {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  filter: blur(6px);
}

/* Perfiles: micro control por elemento */
.cm-team [data-anim="profile"] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  filter: blur(6px);
}

/* Dentro del perfil: desfases sutiles */
.cm-team .cm-profile-role,
.cm-team .cm-profile-name,
.cm-team .cm-profile-bio,
.cm-team .cm-profile-photo,
.cm-team .cm-profile-social {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  filter: blur(6px);
}

/* Transiciones base (Apple-like) */
.cm-team [data-anim],
.cm-team .cm-profile-role,
.cm-team .cm-profile-name,
.cm-team .cm-profile-bio,
.cm-team .cm-profile-photo,
.cm-team .cm-profile-social {
  transition:
    opacity 520ms var(--cm-ease),
    transform 520ms var(--cm-ease),
    filter 520ms var(--cm-ease);
}

/* Stage 1: Quote */
body.is-team-open.team-stage-1 .cm-team [data-anim="quote"] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* Stage 2: Profiles container aparece (suave) */
body.is-team-open.team-stage-2 .cm-team [data-anim="profiles"] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* Stage 2: Primer perfil entra */
body.is-team-open.team-stage-2 .cm-team [data-anim="profile"]:nth-of-type(1) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* Stage 3: Segundo perfil entra */
body.is-team-open.team-stage-3 .cm-team [data-anim="profile"]:nth-of-type(2) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* Stage 4: Footer/CTA */
body.is-team-open.team-stage-4 .cm-team [data-anim="footer"] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* Desfases internos: perfil 1 */
body.is-team-open.team-stage-2 .cm-team [data-anim="profile"]:nth-of-type(1) .cm-profile-role {
  opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0);
  transition-delay: 80ms;
}
body.is-team-open.team-stage-2 .cm-team [data-anim="profile"]:nth-of-type(1) .cm-profile-name {
  opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0);
  transition-delay: 160ms;
}
body.is-team-open.team-stage-2 .cm-team [data-anim="profile"]:nth-of-type(1) .cm-profile-bio {
  opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0);
  transition-delay: 240ms;
}
body.is-team-open.team-stage-2 .cm-team [data-anim="profile"]:nth-of-type(1) .cm-profile-photo {
  opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0);
  transition-delay: 120ms;
}
body.is-team-open.team-stage-2 .cm-team [data-anim="profile"]:nth-of-type(1) .cm-profile-social {
  opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0);
  transition-delay: 320ms;
}

/* Desfases internos: perfil 2 */
body.is-team-open.team-stage-3 .cm-team [data-anim="profile"]:nth-of-type(2) .cm-profile-role {
  opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0);
  transition-delay: 80ms;
}
body.is-team-open.team-stage-3 .cm-team [data-anim="profile"]:nth-of-type(2) .cm-profile-name {
  opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0);
  transition-delay: 160ms;
}
body.is-team-open.team-stage-3 .cm-team [data-anim="profile"]:nth-of-type(2) .cm-profile-bio {
  opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0);
  transition-delay: 240ms;
}
body.is-team-open.team-stage-3 .cm-team [data-anim="profile"]:nth-of-type(2) .cm-profile-photo {
  opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0);
  transition-delay: 120ms;
}
body.is-team-open.team-stage-3 .cm-team [data-anim="profile"]:nth-of-type(2) .cm-profile-social {
  opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0);
  transition-delay: 320ms;
}

/* Reduced motion: mostrar todo sin orquesta */
@media (prefers-reduced-motion: reduce) {
  .cm-team [data-anim],
  .cm-team .cm-profile-role,
  .cm-team .cm-profile-name,
  .cm-team .cm-profile-bio,
  .cm-team .cm-profile-photo,
  .cm-team .cm-profile-social {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Reduced motion global. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .cm-title,
  .cm-subtitle {
    opacity: 1 !important;
    transform: none !important;
  }

  /* L2: marco y palabras siempre visibles */
  .cm-panel.is-l2 .cm-l2-frame,
  .cm-panel.is-l2 .cm-l2-corner {
    opacity: 1 !important;
    transform: none !important;
  }

  .cm-team-backdrop {
    opacity: 1 !important;
  }

  .cm-team-panel {
    transform: none !important;
    opacity: 1 !important;
  }

  body.is-team-open .cm-cta-global {
    opacity: 0 !important;
    transform: none !important;
  }
}
/* PORTFOLIO — orquesta y reveal.
   CRITICAL: depende de `body.is-portfolio-open`, `body.is-portfolio-scroll-unlocked`, `.is-visible`, `.is-hidden` y `.is-active`. */
/* Elementos que nacen */
.cm-portfolio-title,
.cm-portfolio-lead,
.cm-portfolio-btn,
.cm-portfolio-chevron {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(6px);
}

/* Caso central EXISTE, no nace desde blur */
.cm-portfolio-anchor {
  opacity: 1;
  filter: none;
  transform: none;
}


.cm-portfolio-title.is-visible,
.cm-portfolio-lead.is-visible,
.cm-portfolio-anchor.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* CRITICAL: `.is-active` en CTA/chevron se activa desde `portfolio.js`. */
.cm-portfolio-btn.is-active,
.cm-portfolio-chevron.is-active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Reveal de respuesta (JS controla hidden) */
.cm-portfolio-reveal {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0px);
  transition:
    opacity .45s ease,
    filter .45s ease,
    transform .45s ease;
}



/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .cm-portfolio-title,
  .cm-portfolio-lead,
  .cm-portfolio-reveal,
  .cm-portfolio-anchor,
  .cm-portfolio-btn,
  .cm-portfolio-chevron {
    transition: none;
    filter: none;
    transform: none;
  }
}
/* CRITICAL: `.is-hidden` define la rama de ocultamiento del reveal controlada por JS. */
.cm-portfolio-reveal.is-hidden {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(6px);
  pointer-events: none;
}
/* Cards: base (antes de unlock) */
.cm-portfolio-card {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(8px);
  transition:
    opacity 520ms var(--cm-ease),
    filter 520ms var(--cm-ease),
    transform 520ms var(--cm-ease);
}

/* CRITICAL: `body.is-portfolio-scroll-unlocked` habilita la transición de cards (Parte 2). */
body.is-portfolio-scroll-unlocked .cm-portfolio-card {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Stagger suave */
body.is-portfolio-scroll-unlocked .cm-portfolio-card:nth-child(1) { transition-delay: 60ms; }
body.is-portfolio-scroll-unlocked .cm-portfolio-card:nth-child(2) { transition-delay: 120ms; }
body.is-portfolio-scroll-unlocked .cm-portfolio-card:nth-child(3) { transition-delay: 180ms; }
body.is-portfolio-scroll-unlocked .cm-portfolio-card:nth-child(4) { transition-delay: 240ms; }
body.is-portfolio-scroll-unlocked .cm-portfolio-card:nth-child(5) { transition-delay: 300ms; }
body.is-portfolio-scroll-unlocked .cm-portfolio-card:nth-child(6) { transition-delay: 360ms; }