/* Accueil velvetshow.app — finitions de mouvement. Décoratif : sans ce fichier, la page reste complète. */
:root { --mo-ease: cubic-bezier(.22, 1, .36, 1); }

/* Barre de progression de lecture */
.mo-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  background: linear-gradient(90deg, var(--orange, #ff6b35), var(--gold, #f0bd57), var(--blue, #4d8fff));
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* Les deux produits du hero : entrée en cascade, léger flottement des icônes, halo au survol */
.hero__product { opacity: 0; transform: translateY(16px); animation: mo-rise .9s var(--mo-ease) forwards; }
.hero__products > a:nth-child(1) { animation-delay: .35s; }
.hero__products > a:nth-child(3) { animation-delay: .5s; }
.hero__duo { opacity: 0; animation: mo-fade 1s ease .8s forwards; }
@keyframes mo-rise { to { opacity: 1; transform: none; } }
@keyframes mo-fade { to { opacity: 1; } }
.hero__product__icon { animation: mo-float 6s ease-in-out infinite; }
.hero__products > a:nth-child(3) .hero__product__icon { animation-delay: -3s; }
@keyframes mo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.hero__product { transition: background .3s, transform .35s var(--mo-ease), box-shadow .35s; }
.hero__product:hover { box-shadow: 0 10px 40px rgba(240,189,87,.12); }
.hero__product--viz:hover { box-shadow: 0 10px 40px rgba(255,107,53,.16); }

/* Boutons : reflet au survol */
.btn { position: relative; overflow: hidden; }
.btn.primary::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  transition: transform .7s var(--mo-ease);
}
.btn.primary:hover { box-shadow: 0 8px 30px rgba(240,189,87,.28); }
.btn.primary:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.98); }

/* Menu : soulignement qui glisse */
header nav a:not(.cta) { position: relative; }
header nav a:not(.cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: var(--gold, #f0bd57); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .35s var(--mo-ease);
}
header nav a:not(.cta):hover::after { transform: scaleX(1); }

/* Titres de section : filet doré */
.sec-title::after {
  content: ""; display: block; height: 2px; width: 56px; margin: 12px auto 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold, #f0bd57), transparent);
  transform: scaleX(0); transition: transform .9s var(--mo-ease) .2s;
}
.reveal.on .sec-title::after, .sec-title.on::after, .sec-title.reveal.on::after { transform: scaleX(1); }

/* Cartes produits et tarifs */
.card:hover { box-shadow: 0 18px 44px rgba(0,0,0,.4); border-color: rgba(240,189,87,.28); }
.price:hover { transform: translateY(-4px); }
.price.best { animation: mo-price-glow 4.5s ease-in-out infinite; }
@keyframes mo-price-glow {
  0%, 100% { box-shadow: 0 0 0 1px var(--gold, #f0bd57), 0 0 30px rgba(240,189,87,.06); }
  50%      { box-shadow: 0 0 0 1px var(--gold, #f0bd57), 0 0 56px rgba(240,189,87,.20); }
}

@media (hover: none) { .card:hover, .price:hover, .hero__product:hover { transform: none; } }

/* Mouvement réduit : tout reste visible, rien ne bouge */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__product, .hero__duo { animation: none; opacity: 1; transform: none; }
  .hero__product__icon, .price.best { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .sec-title::after { transform: scaleX(1); transition: none; }
  .btn.primary::after { transition: none; }
  .mo-progress { display: none; }
}

/* Démo Visualizer qui tourne dans la vignette */
.card__shot--video { position: relative; background: #05060a; }
.card__shot--video video { width: 100%; display: block; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mo-live {
  position: absolute; left: 10px; top: 10px; padding: 4px 10px 4px 22px; border-radius: 999px;
  font: 600 10px/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(8,9,14,.62); backdrop-filter: blur(6px); pointer-events: none;
}
.mo-live::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: #ff4d3d; animation: mo-live 1.6s ease-in-out infinite;
}
@keyframes mo-live { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,77,61,.55); } 50% { opacity: .55; box-shadow: 0 0 0 6px rgba(255,77,61,0); } }

/* Cartes : lueur qui suit le pointeur */
.card { position: relative; overflow: hidden; }
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(240,189,87,.10), transparent 60%);
}
.card:hover::before { opacity: 1; }
#vis::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,107,53,.12), transparent 60%); }
.card > * { position: relative; }

/* Listes des cartes : les lignes arrivent l'une après l'autre */
.card ul li { opacity: 0; transform: translateX(-10px); transition: opacity .55s var(--mo-ease), transform .55s var(--mo-ease); }
.card.on ul li { opacity: 1; transform: none; }
.card.on ul li:nth-child(1) { transition-delay: .25s; } .card.on ul li:nth-child(2) { transition-delay: .32s; }
.card.on ul li:nth-child(3) { transition-delay: .39s; } .card.on ul li:nth-child(4) { transition-delay: .46s; }
.card.on ul li:nth-child(5) { transition-delay: .53s; } .card.on ul li:nth-child(6) { transition-delay: .60s; }
.card.on ul li:nth-child(n+7) { transition-delay: .67s; }

/* Icônes des cartes : petit rebond au survol */
.card__icon { transition: transform .5s var(--mo-ease); }
.card:hover .card__icon { transform: rotate(-6deg) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .mo-live::before { animation: none; }
  .card ul li { opacity: 1; transform: none; transition: none; }
  .card::before { display: none; }
}

/* Bandeau EzQuiel : attire l'œil sans gêner la lecture */
.ez-strip { position: relative; overflow: hidden; isolation: isolate; transition: transform .35s var(--mo-ease), box-shadow .35s, border-color .35s; }
/* Un reflet qui traverse le bandeau toutes les quelques secondes */
.ez-strip::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(34,211,238,.16) 45%, rgba(168,85,247,.16) 55%, transparent 100%);
  transform: translateX(-120%); animation: mo-ez-sweep 5.5s ease-in-out 1.2s infinite;
}
@keyframes mo-ez-sweep { 0% { transform: translateX(-120%); } 38%, 100% { transform: translateX(330%); } }
/* Bordure qui respire entre cyan et violet */
.ez-strip { animation: mo-ez-border 4.5s ease-in-out infinite; }
@keyframes mo-ez-border {
  0%, 100% { border-color: rgba(34,211,238,.45); box-shadow: 0 0 0 0 rgba(34,211,238,0), 0 0 28px rgba(34,211,238,.10); }
  50%      { border-color: rgba(168,85,247,.55); box-shadow: 0 0 0 0 rgba(168,85,247,0), 0 0 38px rgba(168,85,247,.20); }
}
/* L'icône bat doucement, avec un anneau qui s'étend */
.ez-strip img { position: relative; animation: mo-ez-icon 3.2s ease-in-out infinite; }
@keyframes mo-ez-icon {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,211,238,.45); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(34,211,238,0); }
}
/* La flèche pousse vers la droite */
.ez-strip-cta { display: inline-block; animation: mo-ez-nudge 2.4s ease-in-out infinite; }
@keyframes mo-ez-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.ez-strip:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(34,211,238,.16), 0 0 44px rgba(168,85,247,.18); }

@media (prefers-reduced-motion: reduce) {
  .ez-strip, .ez-strip img, .ez-strip-cta { animation: none; }
  .ez-strip::before { display: none; }
}