/* =====================================================================
   BLEDX — LE MOUVEMENT (2026-10-05)
   Le patron veut un site « très animé ». Thèse : l'encre frappe la page.
   Chaque mouvement vient du manga — l'impact, le tampon, la case qui se
   découpe, les lignes de vitesse, la page qu'on tourne — et dit quelque
   chose : arrivée, confirmation, changement d'état.

   Règles tenues :
   - tout est visible sans ce fichier ; une animation part toujours d'un
     état déjà rendu, et un navigateur qui ne suit pas affiche la page ;
   - rien ne bouge sous prefers-reduced-motion, sauf les changements d'état
     (couleurs), qui restent dans bledx-magazine.css ;
   - transform, opacity, clip-path : le compositeur, pas la mise en page ;
   - les boucles s'arrêtent hors de l'écran (bledx-mouvement.js).
   ===================================================================== */

:root {
  --bx-frappe: cubic-bezier(.16, 1, .3, 1);
  --bx-sortie-vite: cubic-bezier(.4, 0, 1, 1);
}

@media (prefers-reduced-motion: no-preference) {

  /* ------------------------------------------------ LA PAGE QU'ON TOURNE
     Entre deux pages, l'ancienne recule, la nouvelle entre par la droite
     sur un bord en biais. La pièce touchée dans une grille vole jusqu'à
     sa fiche (nom posé au clic par bledx-mouvement.js). */
  @view-transition { navigation: auto; }

  #header { view-transition-name: bx-entete; }
  .bx-vt-tee { view-transition-name: bx-tee; }
  .single-product .woocommerce-product-gallery .flexy-items > :first-child img { view-transition-name: bx-tee; }

  ::view-transition-old(root) { animation: bx-page-sort 280ms var(--bx-sortie-vite) both; }
  ::view-transition-new(root) { animation: bx-page-entre 560ms var(--bx-frappe) both; }
  ::view-transition-group(bx-tee) { animation-duration: 560ms; animation-timing-function: var(--bx-frappe); }
  ::view-transition-group(bx-entete) { animation-duration: 300ms; }

  @keyframes bx-page-sort { to { opacity: .2; transform: translateX(-6%) scale(.98); } }
  @keyframes bx-page-entre {
    from { clip-path: polygon(115% 0, 135% 0, 135% 100%, 100% 100%); }
    to   { clip-path: polygon(-20% 0, 135% 0, 135% 100%, -35% 100%); }
  }

  /* ------------------------------------------------ LA COUVERTURE
     La séquence d'arrivée, environ une seconde : le titre frappe, la
     couverture encaisse, l'art monte, le prix se tamponne. */
  .bx-couv-logo { animation: bx-frappe 760ms var(--bx-frappe) backwards; }
  .bx-couv-corps { animation: bx-secousse 320ms 420ms linear backwards; }
  .bx-couv-num { animation: bx-glisse 520ms 360ms var(--bx-frappe) backwards; }
  .bx-couv-prix { animation: bx-tampon 560ms 640ms var(--bx-frappe) backwards; }
  .bx-couv-art img {
    animation:
      bx-surgit 900ms 160ms var(--bx-frappe) backwards,
      bx-flotte 6s 1.3s ease-in-out infinite alternate;
  }
  .bx-couv .bx-focus {
    animation:
      bx-eclat 900ms var(--mx-sortie) backwards,
      bx-tourne 120s linear infinite;
  }
  .bx-couv-nom { animation: bx-rideau 900ms 380ms var(--bx-frappe) backwards; }
  .bx-couv-titre span { animation: bx-masque 720ms 280ms var(--bx-frappe) backwards; }
  .bx-couv-actions { animation: bx-leve 560ms 560ms var(--bx-frappe) backwards; }
  .bx-couv-lignes li { animation: bx-leve 520ms var(--bx-frappe) backwards; }
  .bx-couv-lignes li:nth-child(1) { animation-delay: 660ms; }
  .bx-couv-lignes li:nth-child(2) { animation-delay: 720ms; }
  .bx-couv-lignes li:nth-child(3) { animation-delay: 780ms; }
  .bx-couv-lignes li:nth-child(4) { animation-delay: 840ms; }
  .bx-hors-champ .bx-focus,
  .bx-hors-champ .bx-couv-art img { animation-play-state: paused; }

  @keyframes bx-frappe {
    0%   { opacity: 0; transform: scale(1.55) translateY(-8%); filter: blur(10px); text-shadow: 0 0 0 transparent; }
    55%  { opacity: 1; transform: scale(.97); filter: blur(0); text-shadow: 0 0 0 transparent; }
    100% { opacity: 1; transform: none; filter: none; }
  }
  @keyframes bx-secousse {
    0%, 100% { translate: 0 0; }
    20% { translate: -5px 3px; }
    40% { translate: 4px -3px; }
    60% { translate: -3px 2px; }
    80% { translate: 2px -1px; }
  }
  @keyframes bx-glisse { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes bx-tampon {
    0%   { opacity: 0; transform: scale(2.4) rotate(-20deg); }
    55%  { opacity: 1; transform: scale(.94) rotate(-2deg); }
    100% { opacity: 1; transform: rotate(-4deg); }
  }
  /* L'art reste visible dès la première image : un élément masqué retarde
     le « plus grand affichage » mesuré par le navigateur (LCP). */
  @keyframes bx-surgit {
    from { translate: 0 7%; scale: 1.08; }
    to   { translate: 0 0; scale: 1; }
  }
  @keyframes bx-flotte { from { translate: 0 0; } to { translate: 0 -10px; } }
  @keyframes bx-tourne { to { rotate: 360deg; } }
  @keyframes bx-rideau { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(-5% -5% -5% -5%); } }
  @keyframes bx-masque {
    from { clip-path: inset(0 0 100% 0); translate: 0 35%; }
    to   { clip-path: inset(-15% -5% -15% -5%); translate: 0 0; }
  }
  @keyframes bx-leve { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

  /* ------------------------------------------------ LE BANDEAU QUI DÉFILE */
  .bx-defile-piste { animation: bx-defile 34s linear infinite; }
  .bx-defile:hover .bx-defile-piste,
  .bx-defile.bx-hors-champ .bx-defile-piste { animation-play-state: paused; }
  @keyframes bx-defile { to { transform: translateX(-50%); } }

  /* ------------------------------------------------ LES CASES AU SURVOL
     Les lignes de vitesse (bledx-magazine.css) et la pièce qui avance. */
  .bledx-store ul.products li.product figure img { transition: scale 520ms var(--bx-frappe); }
  @media (hover: hover) and (pointer: fine) {
    .bledx-store ul.products li.product:hover figure img { scale: 1.05; }
  }

  /* Les boutons pleins : l'encre balaie le rouge de gauche à droite. */
  .bledx-store.single-product .single_add_to_cart_button,
  .bledx-store .wc-block-components-checkout-place-order-button,
  .bledx-store .wc-block-cart__submit-button,
  .bledx-store .bledx-ajout .bledx-ajout-commander {
    background-image: linear-gradient(var(--mx-encre), var(--mx-encre)) !important;
    background-repeat: no-repeat !important;
    background-size: 0% 100% !important;
    transition: background-size 340ms var(--bx-frappe), border-color 200ms ease-out, transform 140ms var(--mx-sortie) !important;
  }
  .bledx-store.single-product .single_add_to_cart_button:hover,
  .bledx-store .wc-block-components-checkout-place-order-button:hover,
  .bledx-store .wc-block-cart__submit-button:hover,
  .bledx-store .bledx-ajout .bledx-ajout-commander:hover {
    background-color: var(--mx-rouge) !important;
    background-size: 100% 100% !important;
    border-color: var(--mx-encre) !important;
  }

  /* Les tailles : la pastille choisie encaisse. */
  .bledx-store .bledx-pastilles .bledx-pastille-choix[aria-checked="true"] { animation: bx-pop 320ms var(--bx-frappe); }
  .bledx-store .bledx-pack li.bx-actif b { animation: bx-pop 380ms var(--bx-frappe); }
  @keyframes bx-pop { 0% { scale: 1.18; } 100% { scale: 1; } }

  /* ------------------------------------------------ LA FICHE QUI ARRIVE
     La colonne d'achat se pose, élément par élément ; le titre s'encre,
     le prix se tamponne. La photo ne bouge pas : elle arrive peut-être de
     la grille, en vol. */
  .single-product .entry-summary > * { animation: bx-leve 520ms var(--bx-frappe) backwards; }
  .single-product .entry-summary > :nth-child(2) { animation-delay: 60ms; }
  .single-product .entry-summary > :nth-child(3) { animation-delay: 120ms; }
  .single-product .entry-summary > :nth-child(4) { animation-delay: 180ms; }
  .single-product .entry-summary > :nth-child(5) { animation-delay: 240ms; }
  .single-product .entry-summary > :nth-child(6) { animation-delay: 300ms; }
  .single-product .entry-summary > :nth-child(n+7) { animation-delay: 340ms; }
  .single-product .entry-summary > .product_title { animation: bx-encre 700ms var(--bx-frappe) backwards; }
  .single-product .entry-summary > .price { animation: bx-tampon-prix 560ms 220ms var(--bx-frappe) backwards; transform-origin: left center; }
  .single-product .bledx-pack li { animation: bx-glisse 460ms var(--bx-frappe) backwards; }
  .single-product .bledx-pack li:nth-child(1) { animation-delay: 300ms; }
  .single-product .bledx-pack li:nth-child(2) { animation-delay: 360ms; }
  .single-product .bledx-pack li:nth-child(3) { animation-delay: 420ms; }
  @keyframes bx-encre {
    from { clip-path: inset(0 100% 0 0); translate: -3% 0; }
    to   { clip-path: inset(-20% -5% -20% -5%); translate: 0 0; }
  }
  @keyframes bx-tampon-prix {
    0%   { opacity: 0; scale: 1.9; rotate: -9deg; }
    60%  { opacity: 1; scale: .96; rotate: 0deg; }
    100% { opacity: 1; scale: 1; rotate: 0deg; }
  }

  /* ------------------------------------------------ L'IMPACT DE L'AJOUT
     Une case de manga qui éclate sur le bouton : « AJOUTÉ ! ». Posée et
     retirée par bledx-mouvement.js ; le panneau, lui, confirme pour de bon. */
  .bx-impact {
    position: fixed;
    z-index: 700;
    width: 230px;
    height: 230px;
    margin: -115px 0 0 -115px;
    display: grid;
    place-items: center;
    pointer-events: none;
    animation: bx-impact 1150ms var(--bx-frappe) both;
  }
  .bx-impact::before {
    content: "";
    position: absolute;
    inset: -45%;
    background:
      repeating-conic-gradient(from 3deg, var(--mx-encre) 0deg .9deg, transparent .9deg 7deg);
    -webkit-mask-image: radial-gradient(circle, transparent 0 34%, #000 40%, transparent 70%);
            mask-image: radial-gradient(circle, transparent 0 34%, #000 40%, transparent 70%);
    animation: bx-eclat-impact 1150ms var(--bx-frappe) both;
  }
  .bx-impact svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .bx-impact polygon { fill: var(--mx-rouge); stroke: var(--mx-encre); stroke-width: 5; stroke-linejoin: round; }
  .bx-impact b {
    position: relative;
    font-family: var(--mx-titre);
    font-weight: 400;
    font-size: 25px;
    line-height: 1;
    color: var(--mx-papier);
    rotate: -7deg;
    text-shadow: 3px 3px 0 var(--mx-encre);
  }
  @keyframes bx-impact {
    0%   { opacity: 0; scale: .2; rotate: -28deg; }
    16%  { opacity: 1; scale: 1.1; rotate: -3deg; }
    28%  { scale: 1; rotate: -5deg; }
    72%  { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 1.18; rotate: -5deg; }
  }
  @keyframes bx-eclat-impact { from { scale: .4; opacity: 0; } 25% { opacity: 1; } to { scale: 1.25; opacity: 0; } }

  /* ------------------------------------------------ PANIER ET COMMANDE
     Mode « tâche » : tout est rapide et court, rien ne fait attendre. */
  .woocommerce-cart .page-title,
  .woocommerce-checkout .page-title { animation: bx-encre 640ms var(--bx-frappe) backwards; }
  .wc-block-checkout__form > * { animation: bx-leve 440ms var(--bx-frappe) backwards; }
  .wc-block-checkout__form > :nth-child(2) { animation-delay: 60ms; }
  .wc-block-checkout__form > :nth-child(3) { animation-delay: 120ms; }
  .wc-block-checkout__form > :nth-child(4) { animation-delay: 180ms; }
  .wc-block-checkout__form > :nth-child(n+5) { animation-delay: 220ms; }
  .wc-block-checkout__sidebar,
  .wc-block-cart__sidebar { animation: bx-glisse-d 560ms 120ms var(--bx-frappe) backwards; }
  .wc-block-cart-items__row { animation: bx-leve 440ms var(--bx-frappe) backwards; }
  .wc-block-cart-items__row:nth-child(2) { animation-delay: 70ms; }
  .wc-block-cart-items__row:nth-child(n+3) { animation-delay: 140ms; }
  @keyframes bx-glisse-d { from { opacity: 0; translate: 28px 0; } to { opacity: 1; translate: 0 0; } }

  /* Le total change : il encaisse en rouge (bledx-mouvement.js). */
  .wc-block-components-totals-footer-item .wc-block-components-totals-item__value.bx-flash { animation: bx-flash 650ms var(--bx-frappe); transform-origin: right center; }
  @keyframes bx-flash { 0% { scale: 1.3; color: var(--mx-rouge); } 100% { scale: 1; } }

  /* La commande part : des rayures de vitesse défilent dans le bouton. */
  .bledx-store .wc-block-components-checkout-place-order-button:disabled,
  .bledx-store .wc-block-components-checkout-place-order-button.wc-block-components-button--loading {
    background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--mx-papier) 22%, transparent) 0 12px, transparent 12px 24px) !important;
    background-size: 34px 34px !important;
    background-repeat: repeat !important;
    animation: bx-rayures 520ms linear infinite;
  }
  @keyframes bx-rayures { to { background-position: 34px 0; } }
}

/* ------------------------------------------------ À L'ENTRÉE DANS L'ÉCRAN
   Remplace l'animation liée au défilement : elle laissait les cases à
   moitié découpées tant qu'on ne finissait pas de défiler. Ici chaque
   élément joue son entrée une fois, entière, quand il arrive à l'écran
   (bledx-mouvement.js pose .bx-attend puis .bx-vu). Ce qui est déjà
   visible au chargement n'est jamais caché. */
@media (prefers-reduced-motion: no-preference) {
  .bx-attend { opacity: 0; }

  /* Les cases : la planche tombe, la pièce se pose dedans. */
  li.product.bx-vu,
  .bx-rail a.bx-vu,
  .bx-ajout-carte.bx-vu { animation: bx-case-in 700ms var(--bx-frappe) backwards; animation-delay: calc(var(--bx-i, 0) * 70ms); }
  li.product.bx-vu figure img { animation: bx-piece-in 900ms var(--bx-frappe) backwards; animation-delay: calc(var(--bx-i, 0) * 70ms + 120ms); }
  @keyframes bx-case-in {
    from { opacity: 0; translate: 0 44px; scale: .94; clip-path: inset(0 0 22% 0); }
    to   { opacity: 1; translate: 0 0; scale: 1; clip-path: inset(0 0 0 0); }
  }
  @keyframes bx-piece-in { from { scale: 1.16; } to { scale: 1; } }

  /* Les titres s'encrent, le filet se tire, le numéro se tamponne. */
  .bx-chap-tete.bx-vu h2,
  .bx-sommaire-titre.bx-vu,
  .bledx-etapes-titre.bx-vu,
  .related > h2.bx-vu,
  .bledx-preuve-texte.bx-vu h2,
  .bx-edito-chemin h2.bx-vu,
  .bx-edito-series h2.bx-vu,
  .bx-edito-promesses h2.bx-vu,
  .bx-edito-fin h2.bx-vu,
  .bx-page-lecture .entry-content h2.bx-vu,
  .bx-ajouts h2.bx-vu { animation: bx-encre 760ms var(--bx-frappe) backwards; }
  .bx-chap-tete { position: relative; }
  .bx-chap-tete.bx-vu { border-bottom-color: transparent !important; }
  .bx-chap-tete.bx-vu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 6px;
    background: var(--mx-encre);
    transform-origin: left;
    animation: bx-filet 900ms 120ms var(--bx-frappe) both;
  }
  .bx-papier-nuit .bx-chap-tete.bx-vu::after,
  .bx-papier-piste .bx-chap-tete.bx-vu::after { background: var(--mx-papier); }
  .bx-chap-tete.bx-vu .bx-chap-num { animation: bx-tampon-num 560ms 260ms var(--bx-frappe) backwards; }
  .bx-chap-tete.bx-vu .bx-chap-compte { animation: bx-leve 500ms 360ms var(--bx-frappe) backwards; }
  @keyframes bx-filet { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes bx-tampon-num { from { opacity: 0; scale: 2.2; rotate: -14deg; } 60% { opacity: 1; scale: .94; rotate: 2deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }

  /* Les listes : ligne par ligne. */
  .bx-sommaire-liste li.bx-vu,
  .bx-edito-series li.bx-vu { animation: bx-glisse 520ms var(--bx-frappe) backwards; animation-delay: calc(var(--bx-i, 0) * 55ms); }

  /* Les cases à raconter : elles tombent, de travers puis droites. */
  .bx-yonkoma .bledx-etapes-liste li.bx-vu,
  .bx-edito-cases li.bx-vu,
  .bx-page-lecture .bx-niveaux > div.bx-vu,
  .bx-page-lecture .bx-preuves > div.bx-vu { animation: bx-tombe 680ms var(--bx-frappe) backwards; animation-delay: calc(var(--bx-i, 0) * 90ms); }
  @keyframes bx-tombe { from { opacity: 0; translate: 0 50px; rotate: -5deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }

  /* Les questions, la page couleur, le mot du pied. */
  .bx-page-lecture .bx-faq details.bx-vu { animation: bx-leve 480ms var(--bx-frappe) backwards; animation-delay: calc(var(--bx-i, 0) * 45ms); }
  .bledx-preuve .bledx-loupe.bx-vu,
  .bx-edito-promesses figure.bx-vu { animation: bx-case-in 900ms var(--bx-frappe) backwards; }
  .bledx-pied .bledx-pied-mot.bx-vu { animation: bx-masque 900ms var(--bx-frappe) backwards; }

  /* Les FAQ s'ouvrent en glissant (Chrome récent ; ailleurs, elles s'ouvrent net). */
  :root { interpolate-size: allow-keywords; }
  .bx-page-lecture .bx-faq details::details-content { height: 0; overflow: clip; transition: height 320ms var(--bx-frappe), content-visibility 320ms allow-discrete; }
  .bx-page-lecture .bx-faq details[open]::details-content { height: auto; }

  /* ------------------------------------------------ LA F1 : FEUX ÉTEINTS
     Cinq feux rouges s'allument un à un, puis tout s'éteint d'un coup :
     le départ. La phrase apparaît, la grille se lance. */
  .bx-f1-feux span i { animation: bx-feu 2100ms steps(1, end); animation-delay: calc(var(--i) * 340ms + 300ms); animation-duration: calc(2100ms - var(--i) * 340ms); }
  @keyframes bx-feu {
    0%, 99.9% { background: var(--mx-rouge); box-shadow: 0 0 18px 2px color-mix(in srgb, var(--mx-rouge) 70%, transparent); }
    100% { background: color-mix(in srgb, var(--mx-papier) 14%, var(--mx-nuit)); box-shadow: none; }
  }
  .bx-f1-depart { animation: bx-depart 600ms 2420ms var(--bx-frappe) backwards; }
  @keyframes bx-depart { from { opacity: 0; translate: -30px 0; } to { opacity: 1; translate: 0 0; } }
  .bx-f1-titre { animation: bx-titre-f1 900ms 150ms var(--bx-frappe) backwards; }
  @keyframes bx-titre-f1 { from { opacity: 0; translate: -12% 0; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: none; } }
  .bx-f1-vibreur, .bx-papier-piste::after { animation: bx-vibreur 1.2s linear infinite; }
  .bx-hors-champ .bx-f1-vibreur { animation-play-state: paused; }
  @keyframes bx-vibreur { to { background-position: 92px 0; } }
  /* Sur la grille F1, les cases arrivent de la gauche, comme des voitures. */
  .term-auto-f1 ul.products > li.product.bx-vu,
  .bx-papier-piste ul.products > li.product.bx-vu { animation-name: bx-voiture; }
  @keyframes bx-voiture {
    from { opacity: 0; translate: -70px 0; transform: skewX(-10deg); filter: blur(4px); }
    70%  { transform: skewX(2deg); filter: none; }
    to   { opacity: 1; translate: 0 0; transform: none; }
  }
}