/**
 * css/wiclee-landing-motion.css — Animaciones de la landing (CSS puro, sin JS).
 *
 * - Entrada del H1 por líneas y barrido de luz en el hero (una sola vez).
 * - Barra de progreso de lectura y animaciones ligadas al scroll
 *   (animation-timeline: scroll()/view()) dentro de @supports: sin soporte,
 *   el contenido se muestra en su estado final (fallback).
 * - Apertura animada de las preguntas frecuentes (::details-content).
 * - Cinta de negocios: bucle continuo (dos grupos idénticos + translateX(-50%)),
 *   sin barra ni pausa.
 * - prefers-reduced-motion: se anula todo salvo la cinta, que se mueve siempre por
 *   decisión de producto.
 *
 * Lo carga templates/home/index.twig. Colores solo con tokens; sin hex.
 */

/* ---------- Cinta de negocios: bucle continuo, sin barra ni pausa ---------- */

.wiclee-landing__marquee {
  overflow: hidden;
  background: var(--wiclee-bg-card);
  border-bottom: 1px solid var(--wiclee-border);
}

.wiclee-landing__marquee-track {
  display: flex;
  width: max-content;
  animation: wiclee-landing-marquee 56s linear infinite;
  will-change: transform;
}

.wiclee-landing__marquee-group {
  display: flex;
  align-items: center;
  gap: 44px;
  padding: 26px 22px;
  font-style: italic;
  font-weight: 700;
  font-size: 24px;
  color: var(--wiclee-primary-900);
  white-space: nowrap;
}

.wiclee-landing__marquee-group i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wiclee-accent);
}

@keyframes wiclee-landing-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ---------- Hero: entrada del H1 y barrido de luz ---------- */

.wiclee-landing__h1-line > span {
  animation: wiclee-landing-rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.wiclee-landing__h1-line:nth-child(2) > span {
  animation-delay: 0.12s;
}

.wiclee-landing__h1-line:nth-child(3) > span {
  animation-delay: 0.24s;
}

@keyframes wiclee-landing-rise {
  from {
    transform: translateY(108%);
  }

  to {
    transform: translateY(0);
  }
}

.wiclee-landing__hero::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -35%;
  width: 26%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--wiclee-text-inverse) 11%, transparent), transparent);
  transform: skewX(-18deg);
  animation: wiclee-landing-sweep 2.4s 0.5s cubic-bezier(0.22, 0.7, 0.2, 1) 1 both;
  pointer-events: none;
}

@keyframes wiclee-landing-sweep {
  from {
    transform: translateX(0) skewX(-18deg);
  }

  to {
    transform: translateX(620%) skewX(-18deg);
  }
}

/* ---------- Ligadas al scroll (solo con soporte) ---------- */

@supports (animation-timeline: scroll()) {
  .wiclee-home::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 60;
    height: 3px;
    background: var(--wiclee-primary-700);
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: wiclee-landing-progress linear both;
    animation-timeline: scroll(root);
    pointer-events: none;
  }
}

@keyframes wiclee-landing-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@supports (animation-timeline: view()) {
  .wiclee-landing__step-dot {
    animation: wiclee-landing-dot-on linear both;
    animation-timeline: view();
    animation-range: entry 55% entry 100%;
  }

  .wiclee-landing__step-line i {
    transform: scaleY(0);
    animation: wiclee-landing-grow linear both;
    animation-timeline: view();
    animation-range: entry 50% cover 62%;
  }

  .wiclee-landing__step-text {
    animation: wiclee-landing-text-on linear both;
    animation-timeline: view();
    animation-range: entry 35% entry 90%;
  }

  .wiclee-landing__frame-img {
    animation: wiclee-landing-parallax linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }

  .wiclee-landing__check-path {
    stroke-dasharray: 1;
    animation: wiclee-landing-check linear both;
    animation-timeline: view();
    animation-range: entry 30% entry 100%;
  }
}

@keyframes wiclee-landing-dot-on {
  from {
    background: var(--wiclee-bg-card);
    color: var(--wiclee-primary-900);
  }

  to {
    background: var(--wiclee-primary-900);
    color: var(--wiclee-text-inverse);
  }
}

@keyframes wiclee-landing-grow {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes wiclee-landing-text-on {
  from {
    opacity: 0.38;
  }

  to {
    opacity: 1;
  }
}

@keyframes wiclee-landing-parallax {
  from {
    transform: translateY(-5%);
  }

  to {
    transform: translateY(5%);
  }
}

@keyframes wiclee-landing-check {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* ---------- Preguntas frecuentes: apertura suave (navegadores con ::details-content) ---------- */

.wiclee-landing__question {
  interpolate-size: allow-keywords;
}

.wiclee-landing__question::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.45s ease, content-visibility 0.45s allow-discrete;
}

.wiclee-landing__question[open]::details-content {
  block-size: auto;
}

/* ---------- Movimiento reducido: todo quieto salvo la cinta ---------- */

@media (prefers-reduced-motion: reduce) {
  .wiclee-landing__h1-line > span,
  .wiclee-landing__hero::after,
  .wiclee-landing__step-dot,
  .wiclee-landing__step-line i,
  .wiclee-landing__step-text,
  .wiclee-landing__frame-img,
  .wiclee-landing__check-path,
  .wiclee-home::before {
    animation: none;
  }

  .wiclee-landing__hero::after,
  .wiclee-home::before {
    display: none;
  }

  .wiclee-landing__step-line i {
    transform: none;
  }

  .wiclee-landing__step-dot {
    background: var(--wiclee-primary-900);
    color: var(--wiclee-text-inverse);
  }

  .wiclee-landing__question::details-content {
    transition: none;
  }

  .wiclee-landing__btn,
  .wiclee-landing__btn .wiclee-landing__icon,
  .wiclee-landing__channel,
  .wiclee-landing__channel .wiclee-landing__btn-arrow,
  .wiclee-landing__panel::before,
  .wiclee-landing__panel-img,
  .wiclee-landing__panel-go,
  .wiclee-landing__capability,
  .wiclee-landing__question-plus,
  .wiclee-landing__nav-link::after,
  .wiclee-landing__tab {
    transition: none;
  }

  /* La cinta sigue en marcha (decisión de producto), algo más lenta */
  .wiclee-landing__marquee-track {
    animation-duration: 90s;
  }
}