/* ============================================================
   TINTA — la marca hecha movimiento
   1) Una copa de tinta se llena gota a gota (hero) y rebosa.
   2) La tinta que rebosa baja por la página siguiendo el scroll (js/tinta.js).
   3) Al llegar al formulario, este se llena de tinta según lo rellenas.

   Todo es decorativo (aria-hidden). Sin JavaScript la copa se anima igual
   y el resto simplemente no aparece. Con "reducir movimiento" se muestra
   el estado final, sin animaciones.
   ============================================================ */

:root {
  --ink-1: #b3212f;   /* rojo tinta (igual que --accent) */
  --ink-2: #8f1826;
  --ink-3: #c22b3a;   /* lo más claro: superficie / brillos */
}

body { position: relative; }

/* ---------- 1) HERO: copa de tinta ---------- */

.hero-ink {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 420px;
}

/* resplandor rojo suave detrás de la copa */
.hero-ink::before {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  left: 50%; top: 50%;
  transform: translate(-50%, -46%);
  background: radial-gradient(circle, rgba(179, 33, 47, 0.16), transparent 62%);
  pointer-events: none;
}

.ink-cup {
  position: relative;
  width: min(100%, 340px);
  height: auto;
  overflow: visible;
}

.ink-cup .ink-line { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ink-cup .ink-line.thin { stroke-opacity: 0.45; stroke-width: 4; }
.ink-cup .ink-glass { fill: rgba(234, 229, 223, 0.05); }
.ink-cup .ink-shine { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 4; stroke-linecap: round; }
.ink-cup .ink-shadow { fill: rgba(0, 0, 0, 0.5); }
.ink-cup .ink-dropper .ink-line { stroke-width: 4.5; }

/* --- nivel de tinta: sube a saltos, uno por cada gota que cae ---
   translateY(190px) = vacía · translateY(0) = hasta el borde.
   Los tiempos coinciden con el aterrizaje de cada gota (0.59, 1.09, 1.59… s). */
.ink-rise { animation: inkRise 3.6s ease-out both; }

@keyframes inkRise {
  0%, 16.4%  { transform: translateY(190px); }
  24.7%, 30.3% { transform: translateY(152px); }
  38.6%, 44.2% { transform: translateY(117.8px); }
  52.5%, 58%   { transform: translateY(85.5px); }
  66.4%, 71.9% { transform: translateY(53.2px); }
  80.3%, 85.8% { transform: translateY(22.8px); }
  94.2%, 100%  { transform: translateY(0); }
}

/* superficie con oleaje continuo (el dibujo repite cada 100 unidades) */
.ink-wave { animation: inkWave 2.6s linear infinite; }
@keyframes inkWave { to { transform: translateX(-100px); } }

/* --- gotas que caen del cuentagotas --- */
.ink-drop { opacity: 0; animation: inkDrop 0.34s cubic-bezier(0.55, 0, 0.9, 0.6) forwards; animation-delay: var(--d); }
.ink-drop path { fill: var(--ink-3); }

@keyframes inkDrop {
  0%   { opacity: 0; transform: translate(150px, 46px) scale(0.4); }
  14%  { opacity: 1; transform: translate(150px, 50px) scale(1); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translate(150px, calc(46px + var(--fall))) scale(1); }
}

/* --- rebose: cúpula sobre el borde, hilo por la pared y charquito --- */
.ink-dome {
  fill: var(--ink-3);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: inkDome 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) 3.3s both;
}
@keyframes inkDome { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.ink-stream {
  fill: none;
  stroke: var(--ink-1);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 0;
  animation: inkStream 1.2s cubic-bezier(0.45, 0, 0.8, 0.7) 3.8s both;
}
@keyframes inkStream { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }

.ink-puddle {
  fill: var(--ink-1);
  transform-box: fill-box;
  transform-origin: 30% 50%;
  animation: inkPuddle 0.9s ease-out 4.85s both;
}
@keyframes inkPuddle { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- 2) RASTRO que baja por la página (lo dibuja js/tinta.js) ---------- */

.ink-trail {
  position: absolute;
  left: 0; top: 0;
  z-index: 20;
  pointer-events: none;
  overflow: visible;
}

.ink-trail .t-main  { fill: none; stroke: var(--ink-1); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ink-trail .t-gloss { fill: none; stroke: rgba(255, 255, 255, 0.26); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ink-trail .t-head  { fill: var(--ink-3); }
.ink-trail .t-head-gloss { fill: rgba(255, 255, 255, 0.35); }

/* gotas que cuelgan del hilo; aparecen cuando la tinta pasa por su altura */
.ink-trail .t-bead {
  transform-box: fill-box;
  transform-origin: 50% 0;
  transform: scale(0);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ink-trail .t-bead.on { transform: scale(1); }
.ink-trail .t-bead path.stub { fill: none; stroke: var(--ink-1); stroke-width: 4; stroke-linecap: round; }
.ink-trail .t-bead path.blob { fill: var(--ink-1); }

/* ---------- 3) FORMULARIO que se tiñe de tinta ---------- */

.ink-form {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 30px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: border-color 0.6s ease;
}

.ink-form.is-touched { border-color: rgba(179, 33, 47, 0.55); }

/* la tinta: sube desde abajo; --ink va de 0 a 1 (lo pone js/tinta.js) */
.ink-pool {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--ink, 0) * 100%);
  z-index: -1;
  background: linear-gradient(180deg, var(--ink-1), var(--ink-2) 70%, #6f0f1a);
  transition: height 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.ink-pool::before {            /* superficie ondulada */
  content: '';
  position: absolute;
  left: 0; top: -13px;
  width: calc(100% + 100px);
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='14' viewBox='0 0 100 14'><path d='M0 14 V7 Q25 -1 50 7 T100 7 V14 Z' fill='%23b3212f'/></svg>") repeat-x;
  animation: poolWave 4.5s linear infinite;
}
@keyframes poolWave { to { transform: translateX(-100px); } }

/* mientras no hay nada de tinta, sin superficie asomando */
.ink-form:not(.has-ink) .ink-pool { visibility: hidden; }

/* hilo que entra por arriba cuando la tinta llega al formulario */
.ink-inflow {
  position: absolute;
  top: 0; right: var(--inflow-right, 56px);
  width: 6px; height: 0;
  margin-right: -3px;
  border-radius: 0 0 3px 3px;
  background: var(--ink-1);
  z-index: -1;
  opacity: 0;
}
.ink-form.has-ink .ink-inflow { animation: inkInflow 1.3s ease-in both; }
@keyframes inkInflow {
  0%   { height: 0; opacity: 1; }
  70%  { height: 100%; opacity: 1; }
  100% { height: 100%; opacity: 0; }
}

/* sobre la tinta hay que poder leer: campos oscuros y textos claros */
.ink-form .form-group label { color: var(--text); }
.ink-form .form-group input,
.ink-form .form-group textarea {
  background: rgba(17, 16, 17, 0.62);
  border-color: rgba(255, 255, 255, 0.1);
}
.ink-form .form-group input:focus,
.ink-form .form-group textarea:focus { border-color: #e8606c; }
.ink-form .form-note { color: var(--text); opacity: 0.75; }

/* completo: el botón "brilla" para invitar a enviar */
.ink-form.is-full .btn-primary { animation: inkReady 2.2s ease-in-out infinite; }
@keyframes inkReady {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 241, 238, 0.0); }
  50%      { box-shadow: 0 0 0 7px rgba(244, 241, 238, 0.18); }
}

/* ---------- Adaptación a pantallas pequeñas ---------- */

@media (max-width: 860px) {
  .hero-ink { order: -1; min-height: 300px; margin-bottom: 8px; }
  .ink-cup { width: min(72%, 250px); }
  .hero-ink::before { width: 300px; height: 300px; }
}

@media (max-width: 480px) {
  .ink-trail .t-main { stroke-width: 4.5; }
  .ink-form { padding: 22px 18px; border-radius: 18px; }
  .hero-ink { min-height: 270px; }
  .ink-cup { width: min(66%, 220px); }
}

/* ---------- Reducir movimiento: estado final, sin animaciones ---------- */

@media (prefers-reduced-motion: reduce) {
  .ink-rise, .ink-wave, .ink-drop, .ink-dome, .ink-stream, .ink-puddle,
  .ink-pool::before, .ink-form.has-ink .ink-inflow, .ink-form.is-full .btn-primary { animation: none !important; }
  .ink-pool, .ink-trail .t-bead { transition: none !important; }
  .ink-inflow { display: none; }
}