/* Wadafoku — motion design de la page.
   Les animations sont dans une requête « no-preference » : avec « réduire les
   animations », la page reste statique. Les états de départ masqués sont sous
   .js (posée par motion.js) pour que la page reste lisible sans script. */

.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--wk-accent), var(--wk-accent-light), var(--wk-gold-light));
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 0 10px rgba(92, 200, 240, 0.6);
}

.motes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 780px;
  z-index: 0;
  pointer-events: none;
}

/* La maquette bascule à plat à mesure qu'on défile (variables posées par motion.js). */
.window {
  transform: perspective(1600px) rotateX(var(--tilt, 0deg)) scale(var(--sc, 1));
  transform-origin: 50% 0;
}

/* Reflet qui suit le pointeur sur les panneaux. */
.feature,
.download {
  --hex-bg:
    radial-gradient(420px circle at var(--mx, -600px) var(--my, -600px), rgba(92, 200, 240, 0.13), transparent 65%),
    radial-gradient(ellipse 120% 60% at 0% 0%, rgba(174, 227, 251, 0.07), transparent 60%),
    radial-gradient(ellipse 100% 60% at 100% 100%, rgba(111, 181, 255, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 90px),
    var(--wk-bg-surface);
}

@media (prefers-reduced-motion: no-preference) {
  /* --- Hero : entrée en séquence --- */
  @keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes logo-in {
    0% { opacity: 0; transform: scale(0.5) rotate(-14deg); }
    60% { opacity: 1; transform: scale(1.1) rotate(3deg); }
    100% { opacity: 1; transform: none; }
  }

  @keyframes float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
  }

  @keyframes glow {
    0%, 100% { filter: drop-shadow(0 0 22px rgba(92, 200, 240, 0.4)); }
    50% { filter: drop-shadow(0 0 40px rgba(92, 200, 240, 0.75)); }
  }

  @keyframes tracking-in {
    from { opacity: 0; letter-spacing: 0.42em; filter: blur(14px); }
    to { opacity: 1; filter: blur(0); }
  }

  @keyframes sheen {
    0%, 55% { background-position: 100% 0; }
    100% { background-position: -120% 0; }
  }

  @keyframes kenburns {
    from { transform: scale(1); }
    to { transform: scale(1.09) translateY(-1.5%); }
  }

  .hero::before {
    animation: kenburns 28s ease-in-out infinite alternate;
    transform-origin: 50% 30%;
  }

  .hero-logo {
    animation:
      logo-in 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) both,
      float 6s ease-in-out 1s infinite,
      glow 4s ease-in-out 1s infinite;
  }

  .hero h1 {
    white-space: nowrap;
    background-image: linear-gradient(100deg, #eaf6ff 0%, #5cc8f0 38%, #ffffff 50%, #5cc8f0 62%, #eaf6ff 100%);
    background-size: 220% 100%;
    background-position: 100% 0;
    animation:
      tracking-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s both,
      sheen 6s ease-in-out 1.6s infinite;
  }

  .hero .tagline { animation: rise 0.7s ease-out 0.9s both; }
  .hero .sub { animation: rise 0.7s ease-out 1.05s both; }
  .hero .cta { animation: rise 0.7s ease-out 1.2s both; }
  .hero .cta-note { animation: rise 0.7s ease-out 1.35s both; }

  @keyframes window-in {
    from { opacity: 0; translate: 0 40px; }
    to { opacity: 1; translate: 0 0; }
  }

  .window {
    animation: window-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.3s both;
  }

  /* --- Bouton principal : un reflet passe --- */
  @keyframes shine {
    0%, 60% { background-position: 160% 0, 0 0; }
    100% { background-position: -60% 0, 0 0; }
  }

  .btn-primary,
  .btn-primary:hover {
    --hex-bg:
      linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.26) 50%, transparent 62%),
      linear-gradient(rgba(92, 200, 240, var(--btn-a, 0.14)), rgba(92, 200, 240, var(--btn-a, 0.14)));
  }

  .btn-primary:hover {
    --btn-a: 0.26;
  }

  .btn-primary::before {
    background-size: 250% 100%, auto;
    background-repeat: no-repeat;
    animation: shine 4.5s ease-in-out infinite;
  }

  /* --- Maquette : le draft se joue en boucle (classe .play, délais --d) --- */
  @keyframes pick {
    0% { opacity: 0; transform: translateY(8px) scale(0.88); filter: brightness(2.4); }
    55% { opacity: 1; filter: brightness(1.7); }
    100% { opacity: 1; transform: none; filter: none; }
  }

  /* L'emplacement reste visible, vide ; c'est son contenu qui tombe. */
  .window.play .slot > *,
  .window.play .seq {
    animation: pick 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
    animation-delay: var(--d, 0s);
  }

  /* Route du hero : elle se trace une fois par boucle, les camps s'allument au passage. */
  @keyframes draw {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
  }

  @keyframes pop {
    0% { opacity: 0; scale: 0.4; }
    60% { opacity: 1; scale: 1.3; }
    100% { opacity: 1; scale: 1; }
  }

  .window .hcamp {
    animation: none;
  }

  .window.play .route {
    stroke-dasharray: 100;
    animation: draw 2s ease-in-out both;
    animation-delay: var(--d, 0s);
  }

  .window.play .hcamp {
    animation: pop 0.45s ease-out both;
    animation-delay: var(--d, 0s);
  }

  /* --- Apparitions en cascade (rang --i) --- */
  .js .features .feature:nth-child(2),
  .js .steps .step:nth-child(2) { transition-delay: 0.12s; }
  .js .features .feature:nth-child(4),
  .js .steps .step:nth-child(3) { transition-delay: 0.24s; }

  .js .rank-row,
  .js .tile {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
    transition: opacity 0.45s ease-out, transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    transition-delay: calc(var(--i, 0) * 0.09s + 0.25s);
  }

  .js .feature.in .rank-row,
  .js .feature.in .tile {
    opacity: 1;
    transform: none;
  }

  .js .rank-row .bar i {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(var(--i, 0) * 0.12s + 0.35s);
  }

  .js .feature.in .rank-row .bar i {
    transform: scaleX(1);
  }

  .js .bars i {
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(var(--i, 0) * 0.06s + 0.3s);
  }

  .js .feature.in .bars i {
    transform: scaleY(1);
  }

  /* Camps : ils s'allument au passage du tracé (même boucle de 5 s). */
  @keyframes camp-on {
    0% { scale: 0.6; opacity: 0.35; }
    7% { scale: 1.3; opacity: 1; }
    14%, 100% { scale: 1; opacity: 1; }
  }

  .camp {
    animation: camp-on 5s ease-in-out infinite backwards;
    animation-delay: calc(var(--i, 0) * 0.5s);
  }

  /* Étapes : le numéro se remplit. */
  @keyframes num-fill {
    to { color: rgba(174, 227, 251, 0.92); text-shadow: 0 0 22px rgba(92, 200, 240, 0.5); }
  }

  .step.in .num {
    animation: num-fill 0.6s ease-out forwards;
    animation-delay: calc(var(--i, 0) * 0.35s + 0.5s);
  }

  .download img {
    animation: float 6s ease-in-out infinite, glow 4s ease-in-out infinite;
  }
}