/* ================================================================
   CreaVinci — el Códice (estilos)
   Acompaña a landing_codice.js. Ver ahí el porqué del efecto.
================================================================= */

/* Cada letra arranca EN ESPEJO y volteada hacia atrás en profundidad, como si
   estuviera escrita del otro lado de la hoja. Al resolverse gira a su posición.
   scaleX(-1) es el espejo; rotateY añade la profundidad para que se lea como
   una hoja dándose vuelta y no como un simple flip plano. */
.cv-codice { perspective: 900px; }

/* La palabra es una caja que NO se parte. Sin esto el navegador corta la línea
   entre dos letras cualesquiera y en celular los títulos salían quebrados a
   mitad de palabra. */
.cv-codice .cv-palabra {
  display: inline-block;
  white-space: nowrap;
}

.cv-codice .cv-letra {
  display: inline-block;
  transform: scaleX(-1) rotateY(28deg);
  opacity: .28;
  color: rgba(224, 163, 42, .55);
  /* La misma curva que usa el resto de la pieza: entra rápido y asienta lento. */
  transition: transform .62s cubic-bezier(.22, .9, .28, 1),
              opacity   .62s cubic-bezier(.22, .9, .28, 1),
              color     .62s ease;
  will-change: transform, opacity;
}

.cv-codice.cv-resuelto .cv-letra {
  transform: none;
  opacity: 1;
  color: inherit;
}

/* --- Las piezas que no se tocan por dentro ---------------------------------
   Lo que escribe otro script y lo que se pinta con un degradado recortado al
   texto. NO se les cambia el color ni el display: un `inline-block` dentro de
   un `background-clip: text` rompe el recorte y el texto queda invisible —
   fue lo que hizo desaparecer la "IA" del titulo. Solo se anima la entrada. */
.cv-codice .cv-pieza {
  opacity: .28;
  transition: opacity .62s cubic-bezier(.22, .9, .28, 1);
}
.cv-codice.cv-resuelto .cv-pieza { opacity: 1; }

/* El arco de compás bajo el título. */
.cv-arco {
  display: block;
  width: min(240px, 60%);
  height: 20px;
  margin: 10px auto 0;
  overflow: visible;
}
.cv-arco path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  transition: stroke-dashoffset 1.1s cubic-bezier(.22, .9, .28, 1) .18s;
}
.cv-arco.cv-resuelto path { stroke-dashoffset: 0; }

/* Los títulos de sección van centrados en esta landing, así que el arco
   centrado calza. Si alguna sección los alinea a la izquierda, el arco la
   sigue. */
#services .sec-header[style*="left"] ~ .cv-arco,
.sec-header[data-align="left"] .cv-arco { margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .cv-codice .cv-letra { transform: none; opacity: 1; color: inherit; transition: none; }
  .cv-arco path { stroke-dashoffset: 0; transition: none; }
}