/* Kumo · mouvement. Une seule courbe (--ease-out), quatre durées, un décalage de 60 ms.
   On n'anime que transform et opacity (plus stroke-dashoffset pour les petits tracés au pinceau). */

/* ===================== Images clés ===================== */
@keyframes reveal {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes glide-in {
  from { transform: translateY(18px); }
  to { transform: none; }
}

@keyframes cloud-appear {
  from { opacity: 0; transform: translateY(28px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

@keyframes float {
  0%, 100% { transform: translateY(-8px); }
  50% { transform: translateY(8px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes mist {
  from { transform: translateX(-24px); }
  to { transform: translateX(24px); }
}

@keyframes waves {
  from { transform: translateX(0); }
  to { transform: translateX(-40px); }
}

@keyframes swell {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@keyframes arrow-slide {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(120%); opacity: 0; }
  46% { transform: translateX(-120%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes arrow-slide-back {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(-120%); opacity: 0; }
  46% { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes puff {
  0% { opacity: 0.95; transform: scale(0.4); }
  100% { opacity: 0; transform: translateY(-16px) scale(1.6); }
}

@keyframes sound-wave {
  0%, 100% { transform: scaleY(0.28); }
  50% { transform: scaleY(1); }
}

@keyframes line-wave {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

@keyframes spiral-in {
  from { opacity: 0; transform: scale(0.55) rotate(-50deg); }
  to { opacity: 1; transform: none; }
}

@keyframes intro-out {
  to { opacity: 0; visibility: hidden; }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(var(--rise)) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes modal-out {
  to { opacity: 0; transform: translateY(12px) scale(0.98); }
}

@keyframes petal-fall {
  from { opacity: 0; transform: translateY(-20px) rotate(-30deg); }
  to { opacity: 1; transform: none; }
}

@keyframes lost-drift {
  from { transform: translateX(-28vw); }
  to { transform: translateX(28vw); }
}

/* ===================== Apparitions au défilement ===================== */
/* Animation (et non transition) pour laisser la propriété transition libre aux survols */
.js [data-reveal]:not(.is-in) {
  opacity: 0;
}

.js [data-reveal].is-in {
  animation: reveal var(--dur-3) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

/* Trait de pinceau qui s'écrit sous les titres */
.brush-line path {
  stroke-dasharray: 1 1;
}

.js .brush-line path {
  stroke-dashoffset: 1;
}

.js .is-in .brush-line path {
  animation: draw var(--dur-4) var(--ease-out) forwards;
  animation-delay: calc(var(--dur-2) + var(--i, 0) * var(--stagger));
}

.js .is-in .brush-line path:last-child {
  animation-delay: calc(var(--dur-3) + var(--i, 0) * var(--stagger));
}

/* Pictogrammes des cartes et ensō des étapes : tracés à l'apparition */
.card__icon use,
.step__enso use,
.station__dot use,
.thanks__enso use {
  stroke-dasharray: 1 1;
}

.js [data-reveal]:not(.is-in) .card__icon use,
.js [data-reveal]:not(.is-in) .step__enso use {
  stroke-dashoffset: 1;
}

.js .is-in .card__icon use,
.js .is-in .step__enso use {
  animation: draw var(--dur-4) var(--ease-out) backwards;
  animation-delay: calc(var(--dur-2) + var(--i, 0) * var(--stagger));
}

/* ===================== Familles de boutons ===================== */
/* Pression (toutes familles) */
:is(.btn, .icon-btn, .lang-switch__btn, .menu__sound, .intro__skip, .choice span):active {
  transform: scale(0.96);
}

/* Focus clavier : anneau rose qui se resserre */
:is(.btn, .icon-btn, .lang-switch__btn, .menu__sound, .intro__skip, .brand, .nav__link, .menu__link, .site-footer__link, .legal-back, .station__btn)::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid var(--rose);
  border-radius: calc(var(--radius, 999px) + 5px);
  opacity: 0;
  transform: scale(1.12);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out);
  pointer-events: none;
}

:is(.btn, .icon-btn, .lang-switch__btn, .menu__sound, .intro__skip, .brand, .nav__link, .menu__link, .site-footer__link, .legal-back, .station__btn):focus-visible {
  outline: none;
}

:is(.btn, .icon-btn, .lang-switch__btn, .menu__sound, .intro__skip, .brand, .nav__link, .menu__link, .site-footer__link, .legal-back, .station__btn):focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

/* Bouton principal : trait de pinceau rose qui balaie le fond, flèche qui glisse */
@media (hover: hover) {
  .btn--primary:hover .btn__brush {
    transform: translateX(0);
  }

  .btn--primary:hover .btn__arrow {
    animation: arrow-slide var(--dur-3) var(--ease-out);
  }

  .btn--back:hover .btn__arrow {
    animation-name: arrow-slide-back;
  }

  .btn--primary:hover {
    --btn-fg: var(--noir);
  }
}

.btn--primary.is-touched .btn__brush,
.btn--primary:focus-visible .btn__brush {
  transform: translateX(0);
}

.btn--primary.is-touched,
.btn--primary:focus-visible {
  --btn-fg: var(--noir);
}

.btn--primary.is-touched .btn__arrow {
  animation: arrow-slide var(--dur-3) var(--ease-out);
}

.btn--back.is-touched .btn__arrow {
  animation-name: arrow-slide-back;
}

/* … et petit nuage qui se dissipe au clic */
.btn.is-puff .btn__puff {
  animation: puff var(--dur-3) var(--ease-out);
}

/* Bouton secondaire : le contour se dessine */
.btn--secondary .btn__outline rect {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur-3) var(--ease-out);
}

@media (hover: hover) {
  .btn--secondary:hover .btn__outline rect {
    stroke-dashoffset: 0;
  }
}

.btn--secondary.is-touched .btn__outline rect,
.btn--secondary:focus-visible .btn__outline rect {
  stroke-dashoffset: 0;
}

/* Liens : soulignement au pinceau */
@media (hover: hover) {
  :is(.nav__link, .site-footer__link, .legal-back):hover::before {
    transform: scaleX(1);
  }
}

:is(.nav__link, .site-footer__link, .legal-back):is(.is-touched, :focus-visible)::before {
  transform: scaleX(1);
}

/* Liens du menu mobile : glissement */
.menu__link span:last-child {
  display: inline-block;
  transition: transform var(--dur-3) var(--ease-out);
}

@media (hover: hover) {
  .menu__link:hover span:last-child {
    transform: translateX(10px);
  }
}

.menu__link.is-touched span:last-child {
  transform: translateX(10px);
}

/* Bouton son : ondes animées */
[data-sound-toggle][aria-pressed="true"] .sound-btn__bars i {
  animation: sound-wave var(--dur-4) var(--ease-loop) infinite;
  animation-delay: calc(var(--d) * -280ms);
}

@media (hover: hover) {
  [data-sound-toggle][aria-pressed="false"]:hover .sound-btn__bars i {
    animation: sound-wave var(--dur-3) var(--ease-out);
    animation-delay: calc(var(--d) * var(--stagger));
  }
}

[data-sound-toggle][aria-pressed="false"].is-touched .sound-btn__bars i {
  animation: sound-wave var(--dur-3) var(--ease-out);
  animation-delay: calc(var(--d) * var(--stagger));
}

/* Menu : les traits ondulent */
@media (hover: hover) {
  .menu-btn[aria-expanded="false"]:hover .menu-btn__lines i {
    animation: line-wave var(--dur-3) var(--ease-out);
  }

  .menu-btn[aria-expanded="false"]:hover .menu-btn__lines i:nth-child(2) {
    animation-delay: var(--stagger);
  }

  .menu-btn[aria-expanded="false"]:hover .menu-btn__lines i:nth-child(3) {
    animation-delay: calc(var(--stagger) * 2);
  }
}

/* Fermeture de la fiche : rotation */
.modal__close svg {
  transition: transform var(--dur-2) var(--ease-out);
}

@media (hover: hover) {
  .modal__close:hover svg {
    transform: rotate(90deg);
  }
}

.modal__close.is-touched svg,
.modal__close:focus-visible svg {
  transform: rotate(90deg);
}

/* Envoi du formulaire : nuage qui flotte, coche, tremblement */
.btn--submit .btn__label,
.btn--submit .btn__arrow {
  transition: opacity var(--dur-2) var(--ease-out);
}

.btn--submit .btn__cloud {
  transform: translateY(8px) scale(0.8);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.btn--submit .btn__check {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: opacity var(--dur-1) var(--ease-out), stroke-dashoffset var(--dur-3) var(--ease-out) var(--dur-1);
}

.btn--submit:is([data-state="sending"], [data-state="success"]) .btn__label,
.btn--submit:is([data-state="sending"], [data-state="success"]) .btn__arrow {
  opacity: 0;
}

.btn--submit[data-state="sending"] {
  pointer-events: none;
}

.btn--submit[data-state="sending"] .btn__cloud {
  opacity: 1;
  transform: none;
}

.btn--submit[data-state="sending"] .btn__cloud use {
  animation: float var(--dur-4) var(--ease-loop) infinite;
}

.btn--submit[data-state="success"] {
  --btn-fg: var(--noir);
}

.btn--submit[data-state="success"] .btn__brush {
  transform: translateX(0);
}

.btn--submit[data-state="success"] .btn__check {
  opacity: 1;
  stroke-dashoffset: 0;
}

.btn--submit[data-state="error"] {
  animation: shake var(--dur-3) var(--ease-out);
}

/* Choix (radios) : légère élévation au survol */
@media (hover: hover) {
  .choice:hover span {
    border-color: var(--noir);
  }
}

/* Cartes de services */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-6px);
  }

  .card:hover::before {
    opacity: 1;
  }

  .card:hover .card__icon use {
    animation: draw var(--dur-4) var(--ease-out);
  }
}

.card.is-touched {
  transform: translateY(-6px);
}

.card.is-touched::before {
  opacity: 1;
}

/* Frise : l'ensō se trace, la vignette s'élève */
@media (hover: hover) {
  .station__btn:hover .station__dot use {
    animation: draw var(--dur-4) var(--ease-out);
  }

  .station__btn:hover .station__thumb {
    transform: translateY(-6px);
  }

  .station__btn:hover .station__thumb img {
    transform: scale(1.04);
  }

  .station__btn:hover .station__cta svg {
    transform: translateX(6px);
  }
}

.station__btn:is(.is-touched, :focus-visible) .station__dot use {
  animation: draw var(--dur-4) var(--ease-out);
}

.station__btn.is-touched .station__thumb {
  transform: translateY(-6px);
}

.station__btn:active {
  transform: scale(0.98);
}

.station__btn {
  transition: transform var(--dur-1) var(--ease-out);
}

/* Maquettes : l'inclinaison 3D est pilotée par js/realisations.js */
.mock.is-tilting {
  transition: transform var(--dur-1) linear;
}

/* Fiche : ouverture et fermeture */
.modal[open] {
  animation: modal-in var(--dur-3) var(--ease-out);
}

.modal[open]::backdrop {
  animation: fade-in var(--dur-3) var(--ease-out);
}

.modal.is-closing {
  animation: modal-out var(--dur-2) var(--ease-out) forwards;
}

.modal.is-closing::backdrop {
  animation: fade-out var(--dur-2) var(--ease-out) forwards;
}

/* Menu mobile : apparition */
.menu:not([hidden]) {
  animation: fade-in var(--dur-2) var(--ease-out);
}

.menu:not([hidden]) .menu__list li {
  animation: reveal var(--dur-3) var(--ease-out) backwards;
}

.menu__list li:nth-child(2) { animation-delay: var(--stagger); }
.menu__list li:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.menu__list li:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }

/* ===================== Accueil ===================== */
.intro-on {
  --intro-delay: 1650ms;
}

.hero__enter {
  animation: reveal var(--dur-4) var(--ease-out) backwards;
  animation-delay: calc(var(--intro-delay) + var(--i, 0) * var(--stagger) * 2);
}

.hero__text > :nth-child(1) { --i: 0; }
.hero__text > :nth-child(3) { --i: 3; }
.hero__text > :nth-child(4) { --i: 5; }

/* Le titre reste visible dès le premier affichage (bon pour le LCP) : il glisse seulement */
.hero__title {
  animation: glide-in var(--dur-4) var(--ease-out) backwards;
  animation-delay: calc(var(--intro-delay) + var(--stagger));
}

.hero__cloud {
  animation: cloud-appear var(--dur-4) var(--ease-out) backwards;
  animation-delay: var(--intro-delay);
}

.hero__meaning {
  animation: fade-in var(--dur-4) var(--ease-out) backwards;
  animation-delay: calc(var(--intro-delay) + var(--dur-3));
}

.hero__mark-float {
  animation: float var(--loop-float) var(--ease-loop) infinite;
}

.hero__spiral {
  animation: pulse var(--loop-pulse) var(--ease-loop) infinite;
}

.hero__enso use {
  stroke-dasharray: 1 1;
  animation: draw calc(var(--dur-4) * 1.5) var(--ease-out) backwards;
  animation-delay: calc(var(--intro-delay) + var(--dur-2));
}

.sky-layer {
  animation: fade-in calc(var(--dur-4) * 1.5) var(--ease-out) backwards;
  animation-delay: calc(var(--intro-delay) + var(--dur-2));
}

.sky-layer--1 .sky-layer__track { animation: drift var(--loop-drift-1) linear infinite; }
.sky-layer--2 .sky-layer__track { animation: drift var(--loop-drift-2) linear infinite; }
.sky-layer--3 .sky-layer__track { animation: drift var(--loop-drift-3) linear infinite; }

.mist-band {
  animation: mist calc(var(--dur-4) * 18) var(--ease-loop) infinite alternate;
}

.mist-band--2,
.mist-band--5 {
  animation-direction: alternate-reverse;
  animation-duration: calc(var(--dur-4) * 24);
}

.mist-band--4 {
  animation-duration: calc(var(--dur-4) * 14);
}

/* Les boucles s'arrêtent hors écran (classe posée par IntersectionObserver) */
.is-offscreen :is(.sky-layer__track, .mist-band, .hero__mark-float, .hero__spiral, .seigaiha__track, .seigaiha, .lost__drift, .lost__cloud) {
  animation-play-state: paused;
}

/* Vagues seigaiha */
.seigaiha {
  animation: swell var(--loop-float) var(--ease-loop) infinite;
}

.seigaiha__track {
  animation: waves var(--loop-waves) linear infinite;
}

/* ===================== Intro ===================== */
.intro-on .intro {
  animation: intro-out var(--dur-2) var(--ease-out) forwards;
  animation-delay: 1650ms;
}

.intro__trace {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

.intro-on .intro__trace {
  animation: draw 1100ms var(--ease-out) forwards;
}

.intro-on .intro__fill {
  animation: fade-in var(--dur-3) var(--ease-out) 750ms forwards;
}

.intro-on .intro__spiral {
  animation: spiral-in var(--dur-3) var(--ease-out) 1000ms forwards;
}

.intro-on .intro.is-skipped {
  animation: intro-out var(--dur-1) var(--ease-out) forwards;
}

/* ===================== Remerciement ===================== */
.thanks:not([hidden]) .thanks__cloud {
  animation: cloud-appear var(--dur-4) var(--ease-out) backwards, float var(--loop-float) var(--ease-loop) var(--dur-4) infinite;
}

.thanks:not([hidden]) .thanks__enso use {
  animation: draw calc(var(--dur-4) * 1.5) var(--ease-out) backwards;
}

.thanks:not([hidden]) .thanks__petal {
  animation: petal-fall var(--dur-4) var(--ease-out) backwards;
}

.thanks__petal--2 { animation-delay: calc(var(--stagger) * 4) !important; }
.thanks__petal--3 { animation-delay: calc(var(--stagger) * 8) !important; }

.thanks:not([hidden]) > :not(.thanks__art) {
  animation: reveal var(--dur-3) var(--ease-out) backwards;
  animation-delay: var(--dur-2);
}

/* ===================== 404 ===================== */
.lost__drift {
  animation: lost-drift calc(var(--dur-4) * 12) var(--ease-loop) infinite alternate;
}

.lost__cloud {
  animation: float var(--loop-float) var(--ease-loop) infinite;
}

/* ===================== Mouvement réduit : simples fondus ===================== */
@media (prefers-reduced-motion: reduce) {
  .sky-layer__track,
  .mist-band,
  .hero__mark-float,
  .hero__spiral,
  .seigaiha,
  .seigaiha__track,
  .lost__drift,
  .lost__cloud,
  .thanks__cloud,
  .btn--submit[data-state="sending"] .btn__cloud use {
    animation: none !important;
  }

  .js [data-reveal].is-in,
  .hero__enter,
  .hero__cloud,
  .menu:not([hidden]) .menu__list li,
  .thanks:not([hidden]) > *,
  .thanks:not([hidden]) .thanks__petal {
    animation-name: fade-in;
    animation-duration: var(--dur-2);
  }

  .hero__title,
  .hero__enso use,
  .js .is-in .brush-line path,
  .js .is-in .card__icon use,
  .js .is-in .step__enso use {
    animation: none;
  }

  .js .brush-line path,
  .js [data-reveal]:not(.is-in) .card__icon use,
  .js [data-reveal]:not(.is-in) .step__enso use {
    stroke-dashoffset: 0;
  }

  .modal[open],
  .modal.is-closing {
    animation-name: fade-in;
  }

  .modal.is-closing {
    animation-name: fade-out;
  }

  .btn__brush {
    opacity: 0;
    transform: none;
    transition: opacity var(--dur-2) var(--ease-out);
  }

  .btn--primary:is(:hover, .is-touched, :focus-visible) .btn__brush,
  .btn--submit[data-state="success"] .btn__brush {
    opacity: 1;
  }

  .btn--primary:is(:hover, .is-touched) .btn__arrow,
  .btn.is-puff .btn__puff,
  .btn--submit[data-state="error"],
  .card:hover .card__icon use,
  .station__btn:is(:hover, .is-touched, :focus-visible) .station__dot use {
    animation: none;
  }

  .card:is(:hover, .is-touched),
  .station__btn:is(:hover, .is-touched) .station__thumb,
  .station__btn:hover .station__thumb img,
  .menu__link:is(:hover, .is-touched) span:last-child {
    transform: none;
  }

  [data-sound-toggle][aria-pressed="true"] .sound-btn__bars i {
    animation: none;
    transform: scaleY(0.7);
  }
}