/* Site par Orz · Dylan · NoemaWorks · https://noemaworks.net
   motion.css : etats initiaux des animations, marquee, mouvement reduit.

   DEUX CLASSES, DEUX ROLES (ne pas les confondre) :
   - `html.od-anim` est TRANSITOIRE. main.js la pose au demarrage puis la retire
     des que ses tweens sont batis (filet anti-opacite-zero). Elle ne porte donc
     que des ETATS INITIAUX, jamais une mise en page.
   - `html.is-preloaded` est PERSISTANTE. preloader-dragon.js la pose une fois
     le prechargeur retire. C'est elle qui porte les MISES EN PAGE qui supposent
     un JavaScript vivant (la pile superposee des cinq coins).
   Sans JavaScript, aucune des deux n'existe : rien n'est jamais cache et tout
   le contenu reste lisible.

   REGLE DE PROPRIETE (un seul proprietaire par propriete animee) :
   - GSAP est proprietaire de `transform`, `opacity` et `clip-path` sur tout
     noeud portant `data-reveal`, `data-split`, `data-parallax` ou `data-count`.
     Le CSS n'y pose que l'etat de depart, jamais de transition ni d'animation.
   - Le CSS est proprietaire du marquee, des etats :hover / :active, de la
     barre de navigation et du filet des boutons. */

/* ------------------------------------------------- etats initiaux (GSAP) */

.od-anim [data-reveal="up"] {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
}

.od-anim [data-reveal="up-sm"] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}

/* clip-path wipe du bas vers le haut */
.od-anim [data-reveal="wipe-up"] {
  clip-path: inset(100% 0 0 0);
}

/* clip-path wipe de la droite vers la gauche */
.od-anim [data-reveal="wipe-x"] {
  clip-path: inset(0 0 0 100%);
}

/* clip-path wipe par tuile (galerie) */
.od-anim [data-reveal="tile"] {
  clip-path: inset(0 0 100% 0);
}

.od-anim [data-split] { opacity: 0; }

/* le premier panneau des cinq coins reste visible, les autres arrivent du bas */
.od-anim .coin { transform: translate3d(0, 100%, 0); }
.od-anim .coin:first-child { transform: none; }

/* le deck d'avis : la premiere carte devant, les suivantes en retrait */
.avis-card { z-index: 1; }
.avis-card:nth-child(1) { z-index: 6; }
.avis-card:nth-child(2) { z-index: 5; transform: translate3d(0, 10px, 0) scale(.985); }
.avis-card:nth-child(3) { z-index: 4; transform: translate3d(0, 20px, 0) scale(.97); }
.avis-card:nth-child(4) { z-index: 3; transform: translate3d(0, 30px, 0) scale(.955); }
.avis-card:nth-child(5) { z-index: 2; transform: translate3d(0, 40px, 0) scale(.94); }
.avis-card:nth-child(6) { z-index: 1; transform: translate3d(0, 50px, 0) scale(.925); }

/* la photo du hero est parallaxee par GSAP : elle deborde deja de 6 % */
[data-parallax] { will-change: transform; }

/* ------------------------------------------------------------- marquee */

/* Le marquee est pilote par le CSS (hors thread principal). Le groupe est
   duplique dans le HTML, on translate donc d'exactement 50 % : la boucle est
   invisible. Le lot INTEGRATION ne doit pas le reprendre en GSAP. */
@keyframes od-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.marquee__track {
  animation: od-marquee 40s linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

/* ---------------------------------------------------------- prechargeur */

/* Filet de securite : si `main.js` ne pose jamais `.od-anim` (script casse,
   erreur reseau), le prechargeur se retire tout seul au bout de 1,2 s.
   Quand le JS vit, la classe est posee avant le premier frame et cette
   animation ne se declenche jamais : aucun conflit avec GSAP. */
@keyframes od-preloader-safety {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

html:not(.od-anim) #preloader {
  animation: od-preloader-safety 320ms linear 1200ms forwards;
}

/* ------------------------------------------------------ mouvement reduit */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* rien ne demarre cache */
  .od-anim [data-reveal],
  .od-anim [data-split],
  .od-anim .coin {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .is-preloaded .coin,
  .od-anim .coin {
    position: relative;
    inset: auto;
    height: 72vh;
  }

  .is-preloaded .coins,
  .od-anim .coins { height: auto; overflow: visible; }

  .avis-card:nth-child(n) { transform: none; }

  .marquee__track { animation: none; }

  html:not(.od-anim) #preloader { animation: none; opacity: 0; visibility: hidden; }

  .reel:nth-child(odd) .reel__frame,
  .reel:nth-child(even) .reel__frame { transform: none; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ====================================================== 9. LE CURSEUR */

/* Un point plein qui colle au pointeur et un anneau qui le rattrape. Le
   curseur du systeme ne disparait que sur une vraie souris : au doigt et au
   clavier, rien ne change. Aucun halo : l'anneau est un filet de 1 px. */
.od-curseur,
.od-curseur__anneau {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-curseur);
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}

/* Le pointeur est la marque du restaurant. Elle garde sa couleur d'origine et
   ne porte ni ombre ni halo : seule sa taille dit qu'elle est le curseur. */
.od-curseur {
  width: 26px;
  height: 21px;
  margin: -10px 0 0 -13px;
  transform-origin: 30% 50%;
}

.od-curseur img {
  display: block;
  width: 100%;
  height: 100%;
}

.od-curseur__anneau {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgb(242 179 58 / .55);
  transition: opacity 220ms var(--ease-out),
              width 220ms var(--ease-out),
              height 220ms var(--ease-out),
              margin 220ms var(--ease-out),
              background-color 220ms var(--ease-out),
              border-color 220ms var(--ease-out);
}

/* sur le papier de riz, l'encre lit mieux que l'or */
.od-curseur--clair .od-curseur__anneau { border-color: rgb(180 35 15 / .45); }

.od-curseur--vu .od-curseur,
.od-curseur--vu .od-curseur__anneau { opacity: 1; }

/* au-dessus d'une commande, l'anneau s'ouvre et la marque grandit un peu */
.od-curseur--prise .od-curseur {
  width: 32px;
  height: 26px;
  margin: -13px 0 0 -16px;
  transition: width 220ms var(--ease-out), height 220ms var(--ease-out), margin 220ms var(--ease-out);
}

.od-curseur--prise .od-curseur__anneau {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  background: rgb(242 179 58 / .10);
}

.od-curseur--clair.od-curseur--prise .od-curseur__anneau { background: rgb(180 35 15 / .08); }

/* pendant un glissement de la bande, l'anneau se resserre */
.od-curseur--tire .od-curseur__anneau {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
}

@media (hover: hover) and (pointer: fine) {
  html.od-curseur-actif,
  html.od-curseur-actif a,
  html.od-curseur-actif button,
  html.od-curseur-actif .stations__viewport { cursor: none; }
}

@media (prefers-reduced-motion: reduce) {
  .od-curseur,
  .od-curseur__anneau { transition: opacity 220ms linear; }
}

/* ------------------------------------------- survols un peu plus soignes */

/* Les familles de la carte se remplissent par la gauche, la couleur du texte
   bascule en meme temps. */
.menu-nav__list label,
.menu-nav__list a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.menu-nav__list label::before,
.menu-nav__list a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lantern);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .menu-nav__list label:hover::before,
  .menu-nav__list a:hover::before { transform: scaleX(1); }

  .menu-nav__list label:hover,
  .menu-nav__list a:hover { color: var(--ink); border-color: var(--lantern); }
}

/* Les liens de la barre de navigation : un filet qui se trace sous le mot. */
.nav__links a {
  position: relative;
  padding-bottom: 2px;
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 300ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover::after,
  .nav__links a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
}

/* Les tuiles de la galerie : la photo se rapproche doucement dans son cadre. */
.gallery__item { overflow: hidden; }

.gallery__item img { transition: transform 900ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .gallery__item:hover img { transform: scale(1.05); }
}