/* ============================================================
   premium.css — Micro-interactions & animations premium
   Sain Bellissima
   RÈGLES DE PERF (respectées partout dans ce fichier) :
   - On n'anime QUE transform et opacity (compositor-only, 60 fps).
   - Aucune animation de width/height/top/left.
   - Les "ombres" et "lumières" sont pré-rendues sur un pseudo-élément
     et révélées via opacity (jamais un box-shadow animé en continu).
   - will-change est posé au survol/juste avant l'anim, puis retiré.
   - Tout est désactivé si l'utilisateur demande moins d'animations.
   ============================================================ */

/* ---------- 0. Accessibilité : prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.02ms !important;
    scroll-behavior:auto !important;
  }
  .hero-photo, .hero-ember, .marquee-track, .skeleton::after{ animation:none !important; }
}

/* ============================================================
   1. HERO — zoom lent et continu de la photo (scale 1 -> 1.04).
   (L'apparition du texte et la braise sont gérées ailleurs.)
   ============================================================ */
@keyframes heroZoom{ from{transform:scale(1)} to{transform:scale(1.08)} }
.hero-photo{
  animation:heroZoom 20s ease-in-out infinite alternate;
  will-change:transform;                 /* élément visible en continu : promotion justifiée */
  transform:translateZ(0);
  filter:saturate(1.05) contrast(1.03);
}

/* ============================================================
   2. BOUTONS : pop 3D léger au survol/clic (perspective + rotateX),
   100% CSS, transform only, pas de suivi de curseur (perf max).
   ============================================================ */
.btn, .nav-cta{ position:relative; transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease; }
@media (hover:hover){
  .btn:hover, .nav-cta:hover{ transform:perspective(600px) translateY(-3px) rotateX(8deg) scale(1.04); will-change:transform; }
}
.btn:active, .nav-cta:active{ transform:perspective(600px) rotateX(-4deg) scale(.95); transition-duration:.12s; }
/* Ombre douce pré-rendue, révélée en opacity (pas de box-shadow animé) */
.btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  box-shadow:0 16px 34px -14px rgba(40,10,8,.55);
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
@media (hover:hover){ .btn:hover::before{ opacity:1; } }

/* ============================================================
   3. CARTES PIZZAS : léger lift + zoom image au survol.
   (L'apparition fade+translateY est gérée par le reveal du site.)
   ============================================================ */
@media (hover:hover){
  .dish-thumb img{ transition:transform .6s cubic-bezier(.22,.7,.2,1); }
  .dish:hover .dish-thumb img{ transform:scale(1.05); }
}

/* ============================================================
   4. ICÔNES : rotation légère au survol (transform only).
   ============================================================ */
.ci .ic svg, .nav-cta .ico svg, .socials a svg{
  transition:transform .35s cubic-bezier(.22,.7,.2,1);
}
@media (hover:hover){
  .ci:hover .ic svg{ transform:rotate(-8deg) scale(1.08); }
  .socials a:hover svg{ transform:rotate(8deg); }
}

/* ============================================================
   5. AVIS CLIENTS : hover premium sur les cartes + composant
      CAROUSEL réutilisable (fade), piloté par premium.js.
   ============================================================ */
@media (hover:hover){
  .rev{ transition:transform .25s cubic-bezier(.22,.7,.2,1); }
  .rev:hover{ transform:translateY(-4px); will-change:transform; }
}
/* Carousel réutilisable : <div class="carousel" data-carousel> <div class="slide">..</div> ... </div> */
.carousel{ position:relative; }
.carousel .slide{
  position:absolute; inset:0; opacity:0; transform:scale(.99);
  transition:opacity .6s ease, transform .6s ease; pointer-events:none;
}
.carousel .slide.active{ position:relative; opacity:1; transform:none; pointer-events:auto; }

/* ============================================================
   6. PANIER / CONFIRMATION : pulse du bouton, toast qui glisse
      depuis le haut, mini-bounce du compteur.
   ============================================================ */
@keyframes pulse{ 0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)} }
.pulse{ animation:pulse .35s ease-out; }
@keyframes bounce{ 0%{transform:scale(1)} 30%{transform:scale(1.4)} 60%{transform:scale(.9)} 100%{transform:scale(1)} }
.bounce{ animation:bounce .45s cubic-bezier(.3,1.4,.5,1); display:inline-block; }
/* Toast (créé par premium.js) : translateY only */
.toast{
  position:fixed; top:16px; left:50%; z-index:500;
  transform:translate(-50%,-140%); opacity:0;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
  background:#234a2f; color:#f8f4e9; font-weight:600; font-size:.92rem;
  padding:12px 20px; border-radius:999px; box-shadow:0 18px 40px -18px rgba(0,0,0,.5);
  display:flex; align-items:center; gap:9px; max-width:90vw;
}
.toast.show{ transform:translate(-50%,0); opacity:1; }
.toast .dot{ width:8px; height:8px; border-radius:50%; background:#3ddc84; flex:none; }

/* ============================================================
   7. FORMULAIRE : glow discret au focus, label animé, check validé.
   Le "glow" au focus est une transition ponctuelle (pas une boucle).
   ============================================================ */
.order-form .fld{ position:relative; }
.order-form .fld input,
.order-form .fld select,
.order-form .fld textarea{ transition:border-color .2s ease, box-shadow .2s ease; }
.order-form .fld input:focus,
.order-form .fld select:focus,
.order-form .fld textarea:focus{
  box-shadow:0 0 0 3px rgba(198,154,91,.28);   /* glow doré discret, one-shot */
}
.order-form .fld label{ transition:transform .2s ease, color .2s ease; transform-origin:left center; }
.order-form .fld:focus-within label{ transform:translateY(-1px) scale(.96); color:var(--red); }
/* Check animé quand un champ requis devient valide (span injecté par premium.js) */
.fld-check{
  position:absolute; right:12px; bottom:12px; width:18px; height:18px;
  opacity:0; transform:scale(.4); transition:opacity .2s ease, transform .3s cubic-bezier(.3,1.5,.5,1);
  color:#2e9e5b; pointer-events:none;
}
.fld.valid .fld-check{ opacity:1; transform:scale(1); }

/* ============================================================
   8. SKELETON LOADER (images) : shimmer via transform d'un pseudo.
   La classe .skeleton est retirée par premium.js quand l'image charge.
   ============================================================ */
.skeleton{ position:relative; overflow:hidden; background:linear-gradient(135deg,#efe4cf,#e6d5b5); }
.skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  transform:translateX(-100%); animation:shimmer 1.25s ease-in-out infinite; will-change:transform;
}
@keyframes shimmer{ to{ transform:translateX(100%); } }
/* LQIP : l'image démarre floutée/agrandie (placeholder basse-def simulé)
   et se résout nette dès qu'elle est chargée (transform+opacity only). */
.skeleton img{ opacity:0; filter:blur(16px); transform:scale(1.06); transition:opacity .4s ease, filter .5s ease, transform .5s ease; }
.skeleton.loaded{ background:none; }
.skeleton.loaded::after{ display:none; }
.skeleton.loaded img{ opacity:1; filter:blur(0); transform:scale(1); }

/* ============================================================
   9. LIENS : soulignement qui s'étend de gauche à droite (scaleX).
   ============================================================ */
.navlinks a, .foot-col a, .link-underline{ position:relative; }
.navlinks a::after, .foot-col a::after, .link-underline::after{
  content:""; position:absolute; left:0; bottom:-3px; height:2px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left center;
  transition:transform .25s ease;
}
@media (hover:hover){
  .navlinks a:hover::after, .foot-col a:hover::after, .link-underline:hover::after{ transform:scaleX(1); }
}
/* Lien de la section active : soulignement doré maintenu + libellé emphase */
.navlinks a.active{ color:var(--green-900); }
.navlinks a.active::after{ transform:scaleX(1); background:var(--gold); }

/* ============================================================
   10. FOOTER : apparition progressive (piloté par le reveal du site
   via l'attribut data-reveal ajouté au footer).
   ============================================================ */

/* ============================================================
   11. PRIX MEDIUM / LARGE sur les cartes du menu
   ============================================================ */
.dish-head{ align-items:flex-start; gap:12px; }
.price{ white-space:nowrap; }
/* Deux tailles empilées, alignées à droite : petit badge doré M/L + prix rouge brique */
.price .two{ display:grid; gap:4px; justify-items:end; }
.price .two > span{ display:inline-flex; align-items:baseline; gap:6px;
  font-family:var(--serif); font-weight:800; color:var(--red); font-size:1.05rem; line-height:1; }
.price .two > span i{ font-family:var(--sans); font-style:normal; font-weight:700;
  font-size:.55rem; letter-spacing:.6px; color:#8a6a18; background:rgba(198,154,91,.16);
  border:1px solid rgba(198,154,91,.38); padding:2px 6px; border-radius:6px; line-height:1;
  transform:translateY(-1px); }

/* ============================================================
   12. Logo photo (en-tête / pied de page) + retour fidélité
   ============================================================ */
.brand img.mark{ border-radius:50%; object-fit:cover; background:#f8f4e9; }

/* Le tampon "récompense" tressaute quand il s'allume (feedback ponctuel, pas une boucle) */
@keyframes rewardPop{ 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1.05)} }
.stamp.reward.on{ animation:rewardPop .5s cubic-bezier(.3,1.5,.5,1); }

/* ============================================================
   13. Alternance gauche/droite : "La maison" (texte gauche / photo droite)
   et "Pizza Indienne" inversée (photo gauche / texte droite) sur desktop.
   ============================================================ */
@media (min-width:921px){
  #signature .sig-grid > .left{ order:2; }   /* texte -> à droite */
  #signature .sig-grid > .right{ order:1; }  /* photo -> à gauche */
}

/* ============================================================
   14. Étalonnage chaud léger des photos
   ============================================================ */
.dev-photo img, .about-photo img, .sig-photo img, .dish-thumb img{
  filter:saturate(1.05) contrast(1.03);
}