/*
  Upgrade Weddings v2 · couche d'animation.
  Chargée après css/styles.css. Ne touche à aucune dimension ni position :
  seulement opacity, clip-path, transform / translate / scale et couleurs.
  Tout ce qui cache un élément avant son entrée est préfixé par `.m`, la classe
  posée dans <head> quand l'utilisateur n'a pas demandé à réduire les animations.
*/

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-curtain: cubic-bezier(0.77, 0, 0.18, 1);
}

/* Un élément décalé avant son entrée (ex. la carte Upgrade qui glisse depuis la droite)
   ne doit jamais élargir la page sur mobile. `clip` ne casse pas le position: sticky. */
main { overflow-x: clip; }

/* ---------- Reveal : un peu plus d'amplitude que la v1 ---------- */
.m .reveal { transform: translateY(34px); transition-duration: 1.1s; }
.m .reveal.is-in { transform: none; }

/* ---------- Navbar : se cache en descendant, revient en remontant ---------- */
body > header { transition: translate 0.55s var(--ease-out-expo); }
body > header.is-hidden { translate: 0 -100%; }
body > header > div:first-child { position: relative; transition: box-shadow 0.4s ease; }
body > header.is-scrolled > div:first-child { box-shadow: 0 12px 30px -22px rgb(60 40 30 / 0.35); }
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--color-terra); transform-origin: left; transform: scaleX(0);
  pointer-events: none;
}
body > header nav ul a { position: relative; }
body > header nav ul a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1.5px;
  background: var(--color-terra); transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease-out-expo);
}
body > header nav ul a:hover::after,
body > header nav ul a.is-active::after { transform: scaleX(1); transform-origin: left; }
body > header nav ul a.is-active { color: var(--color-terra-ink); }

/* Menu mobile : les liens arrivent l'un après l'autre. */
.m [data-menu-panel] li { opacity: 0; translate: 0 -10px; transition: opacity 0.4s ease, translate 0.5s var(--ease-out-expo); }
.m [data-menu-panel][aria-hidden="false"] li { opacity: 1; translate: 0 0; }
[data-menu-panel][aria-hidden="false"] li:nth-child(2) { transition-delay: 50ms; }
[data-menu-panel][aria-hidden="false"] li:nth-child(3) { transition-delay: 100ms; }
[data-menu-panel][aria-hidden="false"] li:nth-child(4) { transition-delay: 150ms; }
[data-menu-panel][aria-hidden="false"] li:nth-child(5) { transition-delay: 200ms; }
[data-menu-panel][aria-hidden="false"] li:nth-child(6) { transition-delay: 250ms; }

/* ---------- Titres : les mots montent un par un, le mot manuscrit s'écrit ---------- */
.m main h1:not(.split) { opacity: 0; }
.split .sw {
  display: inline-block;
  transition: opacity 0.9s var(--ease-out-expo), transform 1.1s var(--ease-out-expo), filter 0.9s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.m .split:not(.is-split) .sw { opacity: 0; transform: translateY(0.5em) rotate(2deg); filter: blur(6px); }

.split .sw-script {
  clip-path: inset(-30% -12% -40% -12%);
  transition: clip-path 1.5s var(--ease-curtain);
  transition-delay: calc(var(--i, 0) * 55ms + 250ms);
}
.m .split:not(.is-split) .sw-script { clip-path: inset(-30% 104% -40% -12%); }

/* ---------- Rideaux sur les photos ---------- */
[data-curtain] { clip-path: inset(0 0 0 0 round var(--radius-image)); transition: clip-path 1.4s var(--ease-curtain); transition-delay: var(--cd, 0ms); }
.m [data-curtain]:not(.is-in) { clip-path: inset(100% 0 0 0 round var(--radius-image)); }
.m .reveal:not(.is-in) [data-curtain] { clip-path: inset(100% 0 0 0 round var(--radius-image)); }

/* ---------- Parallaxe au scroll (--sp va de 1 en bas de l'écran à -1 en haut) ---------- */
.m [data-parallax="img"] { scale: 1.14; translate: 0 calc(var(--sp, 0) * 5%); will-change: translate; }
.m [data-parallax="zoom"] { scale: calc(1.1 + var(--sp, 0) * 0.08); translate: 0 calc(var(--sp, 0) * 3%); will-change: scale, translate; }
/* Hero : piloté par --sy (0 en haut de page), donc identique à la v1 au repos. */
.m [data-parallax="hero"] { scale: calc(1 + var(--sy, 0) * 0.16); translate: 0 calc(var(--sy, 0) * 6%); will-change: scale, translate; }
.m [data-parallax="card"] { translate: 0 calc(var(--sy, 0) * -70px); }
@media (min-width: 768px) {
  .m [data-parallax="moment"] { translate: 0 calc(var(--sp, 0) * var(--depth, 20px)); }
}

/* ---------- Hero ---------- */
.m [data-float] { animation: card-in 1.3s var(--ease-out-expo) 0.75s both, float 7s ease-in-out 2.1s infinite; }
@keyframes card-in { from { opacity: 0; transform: translate(-28px, 18px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------- Moments ---------- */
#moments li .group { transition: clip-path 1.4s var(--ease-curtain); transition-delay: calc(var(--i, 0) * 130ms); clip-path: inset(0 0 0 0 round var(--radius-image)); }
.m #moments li:not(.is-in) .group { clip-path: inset(100% 0 0 0 round var(--radius-image)); }
.m #moments li:not(.is-in) [data-moment-img] { scale: 1.25; }
#moments li :is(h3, p) { transition: opacity 0.9s var(--ease-out-expo), translate 0.9s var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 130ms + 350ms); }
.m #moments li:not(.is-in) :is(h3, p) { opacity: 0; translate: 0 16px; }
[data-moment-dot]::after {
  content: ''; position: absolute; inset: -6px; border-radius: 999px;
  border: 1px solid var(--color-terra); opacity: 0; pointer-events: none;
}
.m [data-moment-dot].is-current::after { animation: ring 2.4s ease-out infinite; }
@keyframes ring { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }

/* ---------- Apparitions en cascade ---------- */
[data-stagger] > * { transition: opacity 0.8s var(--ease-out-expo), translate 0.9s var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
.m [data-stagger]:not(.is-in) > * { opacity: 0; translate: 0 16px; }
.m [data-stagger="x"]:not(.is-in) > * { translate: -22px 0; }

/* Traiteur + Upgrade : les deux cartes se rejoignent. */
[data-meet] > * { transition: opacity 0.9s var(--ease-out-expo), translate 1.1s var(--ease-out-expo); }
[data-meet] > :nth-child(2) span { transition: scale 0.9s var(--ease-out-expo) 0.45s, rotate 0.9s var(--ease-out-expo) 0.45s; }
.m [data-meet]:not(.is-in) > :first-child { opacity: 0; translate: -56px 0; }
.m [data-meet]:not(.is-in) > :last-child { opacity: 0; translate: 56px 0; }
.m [data-meet]:not(.is-in) > :nth-child(2) span { scale: 0; rotate: -180deg; }

/* ---------- Cartes : inclinaison 3D + halo qui suit la souris ---------- */
[data-tilt] { position: relative; transform-style: preserve-3d; }
[data-tilt]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(196 111 82 / 0.11), transparent 60%);
  opacity: 0; transition: opacity 0.4s ease;
}
[data-tilt]:hover::after { opacity: 1; }

/* Icônes des 4 atouts : petit rebond à l'arrivée. */
[data-usp] .ph { display: inline-block; }
.m [data-usp].is-in .ph { animation: icon-pop 0.9s var(--ease-out-expo) both; animation-delay: calc(var(--d, 0ms) + 450ms); }
@keyframes icon-pop { 0% { transform: scale(0.3) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.25) rotate(8deg); opacity: 1; } 100% { transform: none; } }
[data-usp]:hover .ph { animation: icon-wiggle 0.7s var(--ease-out-expo); }
@keyframes icon-wiggle { 30% { transform: rotate(-14deg) scale(1.15); } 60% { transform: rotate(8deg); } }

/* ---------- Boutons : reflet au survol (l'aimant est en JS) ---------- */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.28) 50%, transparent 70%);
  translate: -120% 0; transition: translate 0.9s var(--ease-out-expo);
}
.btn-primary:hover::after { translate: 120% 0; }
.badge-shine { position: relative; overflow: hidden; }
.badge-shine::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 0.7) 50%, transparent 65%);
  animation: shine 4.5s ease-in-out 1.5s infinite;
}
@keyframes shine { 0% { translate: -120% 0; } 30%, 100% { translate: 120% 0; } }

/* ---------- La carte : dérive lente de la photo + parallaxe souris ---------- */
[data-cocktail-photo] {
  animation: drift 16s ease-in-out infinite alternate;
  translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -14px);
}
@keyframes drift { from { transform: scale(1.06); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
[data-pointer] > .glass { translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 10px); transition: translate 0.8s var(--ease-out-expo); }
[data-cocktail] { transition: translate 0.5s var(--ease-out-expo); }
@media (hover: hover) { [data-cocktail]:hover { translate: 6px 0; } }

/* ---------- Simulateur ---------- */
.has-pill { position: relative; }
.has-pill [role="radio"] { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; }
.seg-pill {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; z-index: 0;
  border-radius: 999px; background: var(--color-terra-ink);
  box-shadow: 0 6px 16px -8px rgb(168 87 59 / 0.8);
  transition: translate 0.55s var(--ease-out-expo), width 0.55s var(--ease-out-expo);
}
[data-sim-panel] span.rounded-full:has(> .ph-check) { animation: pop 0.9s var(--ease-out-expo) both; }
[data-sim-panel] span.rounded-full:has(> .ph-check) .ph { display: inline-block; animation: pop 0.9s var(--ease-out-expo) 0.2s both; }
@keyframes pop { 0% { transform: scale(0); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---------- Technologie ---------- */
#technologie .glass .ph-play { display: inline-block; animation: beat 1.8s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
#technologie .card-ui .ph { display: inline-block; transition: transform 0.6s var(--ease-out-expo); }
#technologie .card-ui:hover .ph { transform: rotate(-12deg) scale(1.2); }

/* ---------- Le jour J : les numéros montent en différé ---------- */
[data-day-step] > p:first-child { transition: opacity 0.9s var(--ease-out-expo), translate 1s var(--ease-out-expo); transition-delay: calc(var(--d, 0ms) + 250ms); }
.m [data-day-step]:not(.is-in) > p:first-child { opacity: 0; translate: 0 0.5em; }
[data-day-step] { transition-property: opacity, transform, border-color; }
@media (hover: hover) { [data-day-step]:hover { border-color: rgb(196 111 82 / 0.45); } }

/* ---------- FAQ ---------- */
details.is-closing .faq-icon { transform: none; }
#faq summary { transition: color 0.3s ease; }
#faq summary:hover { color: var(--color-terra-ink); }

@media (prefers-reduced-motion: reduce) {
  [data-float], [data-cocktail-photo], .badge-shine::after, #technologie .glass .ph-play { animation: none !important; }
  body > header { transition: none; }
}