/* Ouverture de Factu iA, une fois par visite (1,8 s) : sur le sous-main bleu nuit, la facture se pose,
   « Factu » s'imprime, le cachet descend et frappe la souche (l'encre bleue apparaît), il se relève,
   la facture commence à se détacher le long des pointillés et le voile s'efface sur l'appli.
   Seuls transform, opacity et clip-path s'animent. overflow: clip comme hidden, sans zone de défilement. */
.ouv { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; overflow: clip;
  background: #1d2340; display: grid; place-items: center;
  animation: ouv-sortie .45s cubic-bezier(.4, 0, .2, 1) 1.35s forwards; }
@keyframes ouv-sortie { to { opacity: 0; } }

.ouv-scene { position: relative; width: min(84vw, 540px); aspect-ratio: 560 / 240;
  animation: ouv-pose .34s cubic-bezier(.2, .7, .2, 1) both, ouv-choc .16s ease-out .70s, ouv-envol .45s cubic-bezier(.4, 0, .2, 1) 1.35s forwards; }
@keyframes ouv-pose { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ouv-choc { 0% { transform: none; } 35% { transform: translateY(2px) scale(.994); } 100% { transform: none; } }
@keyframes ouv-envol { to { transform: translateY(-10px) scale(1.02); } }

.ouv-ticket { position: relative; width: 100%; height: 100%; display: block; overflow: visible; }
/* Ombre de la feuille sur le feutre (statique, seule son opacité vient avec la scène) */
.ouv-ombre { position: absolute; left: 3%; right: 3%; top: 12%; bottom: -4%; border-radius: 12px; background: #000; opacity: .38; filter: blur(16px); }

/* « Factu » s'imprime de gauche à droite */
.ouv-factu { clip-path: inset(0 100% 0 0); animation: ouv-imprime .42s cubic-bezier(.5, 0, .2, 1) .18s forwards; }
@keyframes ouv-imprime { to { clip-path: inset(0 0 0 0); } }

/* L'encre de la souche apparaît au coup de cachet */
.ouv-encre { opacity: 0; animation: ouv-encre .06s linear .70s forwards; }
@keyframes ouv-encre { to { opacity: 1; } }

/* Le cachet, vu de dessus : corps de caoutchouc et poignée. Il descend, frappe, se relève. */
.ouv-cachet, .ouv-cachet-ombre { position: absolute; left: 66.4%; width: 35%; top: 0; height: 100%; }
.ouv-cachet { opacity: 0; transform-origin: 50% 50%; animation: ouv-cachet .62s cubic-bezier(.55, 0, .6, 1) .40s forwards; }
.ouv-cachet__corps { position: absolute; inset: 2% 3%; border-radius: 10px; background: #2c3566;
  box-shadow: inset 0 0 0 2px #3c4680, inset 0 -6px 0 #20284f, 0 2px 0 #151a35; }
.ouv-cachet__poignee { position: absolute; left: 50%; top: 50%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: #3c4680; box-shadow: inset 0 0 0 3px #4d5899, inset 6px -8px 0 #313a70, 0 4px 10px rgba(0, 0, 0, .35); }
@keyframes ouv-cachet {
  0% { opacity: 0; transform: translateY(-26%) scale(1.45); }
  22% { opacity: 1; }
  48% { opacity: 1; transform: translateY(0) scale(1); }
  56% { opacity: 1; transform: translateY(0) scale(.965); }
  66% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-20%) scale(1.3); }
}
.ouv-cachet-ombre { border-radius: 14px; background: #000; filter: blur(10px); opacity: 0;
  animation: ouv-cachet-ombre .62s cubic-bezier(.55, 0, .6, 1) .40s forwards; }
@keyframes ouv-cachet-ombre {
  0% { opacity: 0; transform: translate(14%, 18%) scale(1.5); }
  48% { opacity: .5; transform: translate(2%, 3%) scale(1.02); }
  66% { opacity: .5; transform: translate(2%, 3%) scale(1.02); }
  100% { opacity: 0; transform: translate(12%, 16%) scale(1.4); }
}

/* La facture commence à se détacher le long des pointillés (pivot sur l'encoche du haut) */
.ouv-facture { transform-box: view-box; transform-origin: 388px 20px; animation: ouv-dechire .4s cubic-bezier(.5, 0, .2, 1) 1.02s forwards; }
@keyframes ouv-dechire { to { transform: translate(-5px, 3px) rotate(-3.5deg); } }

@media (prefers-reduced-motion: reduce) { .ouv { display: none; } }