/* Betty — motion · v1.0.0 · approved (propietario, 30/10/2026)
   Contrato: el estado por defecto ES el estado final. Sin JS, sin soporte o con reduced-motion,
   todo se ve completo. betty-motion.js añade .betty-motion a <html> (en <head>) para habilitar el movimiento.
   Solo se animan opacity, transform, clip-path y stroke-dashoffset: sin layout shift. Nada en bucle. */

:root {
  --betty-ease-out: cubic-bezier(.2, .7, .2, 1);
  --betty-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --betty-ease-standard: cubic-bezier(.3, 0, .2, 1);
  --betty-dur-dot: 640ms;       --betty-delay-dot: 160ms;   /* logo-reveal 450–900 */
  --betty-dur-thread: 1000ms;                               /* thread-draw 600–1200 */
  --betty-dur-seal: 520ms;                                  /* seal-appear 350–650 */
  --betty-dur-underline: 380ms; --betty-delay-underline: 120ms; /* underline-accent 250–500 */
  --betty-dur-ui: 200ms;        --betty-dur-press: 120ms;   /* cta-interaction 160–300 */
  --betty-dur-preset: 240ms;    --betty-dur-swap: 180ms;    /* personality-change 180–300 */
}

/* 1 · logo-reveal — el wordmark nunca parte de opacidad 0; solo el punto aparece, una vez al montar */
.betty-logo .betty-dot { transform-box: fill-box; transform-origin: 50% 50%; }
.betty-motion .betty-logo[data-reveal] .betty-dot {
  animation: betty-dot-in var(--betty-dur-dot) var(--betty-ease-out) var(--betty-delay-dot) both;
}
@keyframes betty-dot-in {
  0%   { opacity: 0; transform: translateY(-38%) scale(.82); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* 2 · thread-draw — <path class="betty-thread" pathLength="1"> dentro de .betty-thread-draw */
.betty-thread-draw .betty-thread { stroke-dasharray: 1 1.02; stroke-dashoffset: 0; }
.betty-motion .betty-thread-draw .betty-thread { transition: stroke-dashoffset var(--betty-dur-thread) var(--betty-ease-in-out); }
.betty-motion .betty-thread-draw:not(.is-visible) .betty-thread { stroke-dashoffset: 1.02; }

/* 3 · seal-appear — impresión editorial: opacidad + escala mínima */
.betty-motion .betty-seal-appear { transition: opacity var(--betty-dur-seal) var(--betty-ease-out), transform var(--betty-dur-seal) var(--betty-ease-out); }
.betty-motion .betty-seal-appear:not(.is-visible) { opacity: 0; transform: scale(1.035) rotate(-3deg); }

/* 4 · underline-accent — una palabra elegida; nunca en párrafos completos */
.betty-accent { position: relative; display: inline-block; }
.betty-accent__line { position: absolute; left: -3%; bottom: -0.14em; width: 106%; height: .32em; pointer-events: none; }
.betty-motion .betty-accent .betty-accent__line { transition: clip-path var(--betty-dur-underline) var(--betty-ease-out) var(--betty-delay-underline); }
.betty-motion .betty-accent:not(.is-visible) .betty-accent__line { clip-path: inset(0 100% 0 0); }

/* 5 · cta-interaction — hover, focus y press; la función nunca depende del hover */
.betty-cta {
  display: inline-flex; align-items: center; gap: .55em; min-height: 48px; padding: 0 1.25em;
  border: 1px solid var(--betty-charcoal, #35362E); border-radius: 8px;
  background: var(--betty-charcoal, #35362E); color: var(--betty-ivory, #F9F5EC);
  font: 500 1rem/1 var(--betty-font-sans, sans-serif); text-decoration: none; cursor: pointer;
  transition: background-color var(--betty-dur-ui) var(--betty-ease-standard), border-color var(--betty-dur-ui) var(--betty-ease-standard),
              color var(--betty-dur-ui) var(--betty-ease-standard), transform var(--betty-dur-press) var(--betty-ease-standard);
}
.betty-cta:hover { background: var(--betty-charcoal-hover, #2A2B24); border-color: var(--betty-charcoal-hover, #2A2B24); }
.betty-cta:focus-visible { outline: 2px solid var(--betty-focus, #96442D); outline-offset: 3px; }
.betty-cta:active { transform: translateY(1px); }
.betty-cta--secondary { background: transparent; color: var(--betty-charcoal, #35362E); border-color: var(--betty-muted-text, #725F50); }
.betty-cta--secondary:hover { background: var(--betty-beige, #EADDCA); border-color: var(--betty-charcoal, #35362E); }
.betty-cta--accent { background: var(--betty-terracotta-ink, #96442D); border-color: var(--betty-terracotta-ink, #96442D); color: var(--betty-paper-white, #FFFDF9); }
.betty-cta--accent:hover { background: var(--betty-ink-hover, #7D3824); border-color: var(--betty-ink-hover, #7D3824); }
.betty-cta__arrow { display: inline-block; transition: transform var(--betty-dur-ui) var(--betty-ease-out); }
.betty-cta:hover .betty-cta__arrow, .betty-cta:focus-visible .betty-cta__arrow { transform: translateX(3px); }

/* 6 · personality-change — cambia el texto y el indicador; la identidad no cambia */
.betty-preset__indicator { transition: transform var(--betty-dur-preset) var(--betty-ease-out), width var(--betty-dur-preset) var(--betty-ease-out); }
.betty-preset__sample { transition: opacity var(--betty-dur-swap) var(--betty-ease-standard), transform var(--betty-dur-swap) var(--betty-ease-standard); }
.betty-preset__sample.is-swapping { opacity: 0; transform: translateY(3px); }

/* Red de seguridad: reduced motion = estado final, sin desplazamientos */
@media (prefers-reduced-motion: reduce) {
  .betty-motion .betty-logo[data-reveal] .betty-dot { animation: none; }
  .betty-motion .betty-thread-draw .betty-thread { stroke-dashoffset: 0 !important; transition: none; }
  .betty-motion .betty-seal-appear { opacity: 1 !important; transform: none !important; transition: none; }
  .betty-motion .betty-accent .betty-accent__line { clip-path: none !important; transition: none; }
  .betty-cta:active, .betty-cta:hover .betty-cta__arrow, .betty-cta:focus-visible .betty-cta__arrow { transform: none; }
  .betty-preset__indicator, .betty-preset__sample { transition-property: opacity; }
  .betty-preset__sample.is-swapping { transform: none; }
}