/* Beauty by Leila v12.1 — Quiet Luxury Micro Interactions */
:root{
  --mi-fast:180ms;
  --mi-base:300ms;
  --mi-slow:560ms;
  --mi-ease:cubic-bezier(.22,.61,.36,1);
  --mi-ease-out:cubic-bezier(.16,1,.3,1);
  --mi-accent:#9b7652;
}

/* Page entrance / exit */
html{scroll-behavior:smooth}
body.mi-enabled{transition:opacity var(--mi-fast) ease,filter var(--mi-fast) ease}
body.mi-page-leaving{opacity:.72;filter:blur(1px);transform:translateY(2px)}

/* Navigation: subtle moving/active underline */
.navlinks a,.drawer-link,.drawer-cta{position:relative}
.navlinks a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:-7px;height:1px;
  background:currentColor;opacity:.7;transition:left var(--mi-base) var(--mi-ease),right var(--mi-base) var(--mi-ease),opacity var(--mi-base) ease
}
.navlinks a[aria-current="page"]::after{left:12%;right:12%;opacity:1}
@media (hover:hover) and (pointer:fine){
  .navlinks a:hover::after{left:12%;right:12%;opacity:1}
}

/* Button/tap feedback */
.cta,.btn-primary,.btn-secondary,.bookbtn,.booking-primary,.booking-secondary,.booking-danger,.booking-slot,.lang,.hamburger,.icon-btn,.mobile-booking-bar a{
  transition:transform var(--mi-fast) var(--mi-ease),box-shadow var(--mi-base) var(--mi-ease),background-color var(--mi-fast) ease,border-color var(--mi-fast) ease,opacity var(--mi-fast) ease;
  transform-origin:center;
}
.cta:active,.btn-primary:active,.btn-secondary:active,.bookbtn:active,.booking-primary:active,.booking-secondary:active,.booking-danger:active,.booking-slot:active,.lang:active,.hamburger:active,.icon-btn:active,.mobile-booking-bar a:active{transform:scale(.975)}
@media (hover:hover) and (pointer:fine){
  .cta:hover,.bookbtn:hover,.btn-primary:hover,.btn-secondary:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(35,25,20,.18)}
  .icon-btn:hover{transform:translateY(-3px) scale(1.05)}
}

/* Cards & media */
.signature-card,.result-card,.artist-card,.card,.service-gallery__item,.faq__item,.booking-card{
  will-change:transform,opacity;
}
.signature-card img,.result-card img,.service-gallery__img,.card img,.artist-card__photo img{
  transition:transform var(--mi-slow) var(--mi-ease-out),filter var(--mi-slow) ease;
}
@media (hover:hover) and (pointer:fine){
  .signature-card:hover img,.result-card:hover img,.card:hover img,.service-gallery__item:hover .service-gallery__img,.artist-card:hover .artist-card__photo img{transform:scale(1.04)}
  .signature-card:hover,.result-card:hover,.service-gallery__item:hover,.artist-card:hover{transform:translateY(-6px);box-shadow:0 18px 42px rgba(35,25,20,.12)}
}

/* Scroll reveal — JS only adds the hidden state when IntersectionObserver exists */
.mi-reveal{
  opacity:0;transform:translateY(24px) scale(.992);
  transition:opacity var(--mi-slow) var(--mi-ease-out),transform var(--mi-slow) var(--mi-ease-out);
  transition-delay:var(--mi-delay,0ms);
}
.mi-reveal.mi-visible{opacity:1;transform:none}

/* Hero entrance sequence */
.mi-hero-item{opacity:0;transform:translateY(20px) scale(.985);filter:blur(2px)}
body.mi-hero-ready .mi-hero-item{
  opacity:1;transform:none;filter:none;
  transition:opacity 720ms var(--mi-ease-out),transform 720ms var(--mi-ease-out),filter 620ms ease;
  transition-delay:var(--mi-hero-delay,0ms)
}
.hero-artist__photo.mi-hero-item{transform:translateY(12px) scale(.955);filter:blur(3px)}
body.mi-hero-ready .hero-artist__photo.mi-hero-item{transform:none}

/* Form focus & validation */
.booking-field{position:relative}
.booking-field input,.booking-field select,.booking-field textarea,
input,select,textarea{transition:border-color var(--mi-fast) ease,box-shadow var(--mi-base) ease,background-color var(--mi-fast) ease}
.mi-invalid{border-color:#a9434a!important;box-shadow:0 0 0 3px rgba(169,67,74,.10)!important;background:#fffafa!important}
.mi-valid-pulse{animation:miValidPulse 420ms var(--mi-ease-out)}
@keyframes miValidPulse{0%{box-shadow:0 0 0 0 rgba(37,107,76,.22)}100%{box-shadow:0 0 0 7px rgba(37,107,76,0)}}

/* Booking flow */
.booking-meta{transition:opacity var(--mi-base) ease,transform var(--mi-base) var(--mi-ease-out)}
.booking-meta.mi-pop{animation:miMetaIn 300ms var(--mi-ease-out)}
@keyframes miMetaIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.booking-slots.mi-switching{opacity:.38;transform:translateY(3px)}
.booking-slots{transition:opacity var(--mi-fast) ease,transform var(--mi-fast) ease}
.booking-slot{
  opacity:0;transform:translateY(10px) scale(.96);
  animation:miSlotIn 420ms var(--mi-ease-out) forwards;
  animation-delay:var(--mi-slot-delay,0ms)
}
@keyframes miSlotIn{to{opacity:1;transform:none}}
.booking-slot.selected{transform:translateY(-2px) scale(1.035);box-shadow:0 12px 24px rgba(43,37,33,.20)}
.booking-slot.selected::before{content:"✓";display:inline-block;margin-right:6px;font-size:.86em;animation:miCheckIn 220ms var(--mi-ease-out)}
@keyframes miCheckIn{from{opacity:0;transform:scale(.5) rotate(-12deg)}to{opacity:1;transform:none}}
.booking-status{transition:opacity var(--mi-fast) ease,transform var(--mi-fast) var(--mi-ease-out)}
.booking-status.mi-status-in{animation:miStatusIn 280ms var(--mi-ease-out)}
@keyframes miStatusIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.booking-status.ok::before{content:"✓";display:inline-block;margin-right:7px;font-weight:900}
.booking-primary.mi-loading{position:relative;padding-right:42px}
.booking-primary.mi-loading::after{
  content:"";position:absolute;right:16px;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:miSpin .75s linear infinite
}
@keyframes miSpin{to{transform:rotate(360deg)}}

/* Admin tab transitions */
.booking-panel.active{animation:miPanelIn 420ms var(--mi-ease-out)}
@keyframes miPanelIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.booking-admin-tabs button.active{box-shadow:0 7px 18px rgba(43,37,33,.14)}
.booking-table tbody tr{transition:background-color var(--mi-fast) ease}
@media (hover:hover) and (pointer:fine){.booking-table tbody tr:hover{background:#fcfaf8}}

/* Lightweight success toast */
.mi-toast-stack{position:fixed;z-index:90;right:18px;bottom:18px;display:grid;gap:10px;pointer-events:none;max-width:min(360px,calc(100vw - 36px))}
.mi-toast{display:flex;align-items:flex-start;gap:9px;background:#251f1b;color:#fff;border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:12px 14px;box-shadow:0 16px 36px rgba(31,23,19,.18);font-size:.9rem;line-height:1.35;opacity:0;transform:translateY(9px) scale(.98);animation:miToastIn 280ms var(--mi-ease-out) forwards}
.mi-toast::before{content:"✓";font-weight:900;color:#e5c79e}
.mi-toast.mi-bad::before{content:"!";color:#ffd2d4}
.mi-toast.mi-out{animation:miToastOut 220ms ease forwards}
@keyframes miToastIn{to{opacity:1;transform:none}}
@keyframes miToastOut{to{opacity:0;transform:translateY(7px) scale(.985)}}

/* Drawer feels intentional rather than abrupt */
.drawer{transition:transform var(--mi-base) var(--mi-ease-out),opacity var(--mi-base) ease}
.backdrop{transition:opacity var(--mi-base) ease}

/* Never sacrifice accessibility for motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  body.mi-enabled,body.mi-page-leaving,.mi-reveal,.mi-hero-item,.booking-slot,.booking-panel.active,.booking-status,.booking-meta,.drawer,.backdrop,
  .cta,.btn-primary,.btn-secondary,.bookbtn,.booking-primary,.booking-secondary,.booking-danger,.lang,.hamburger,.icon-btn,.mobile-booking-bar a{transition:none!important;animation:none!important;transform:none!important}
  .mi-reveal,.mi-hero-item,.booking-slot{opacity:1!important}
  .mi-toast{animation:none!important;opacity:1!important;transform:none!important}
  .booking-primary.mi-loading::after{animation:none!important}
}

@media(max-width:640px){
  .mi-toast-stack{right:12px;left:12px;bottom:82px;max-width:none}
  .mi-toast{width:100%}
}


/* v12.2 — visible premium motion layer */
.signature-card,.result-card,.artist-card,.service-gallery__item{
  transition:
    transform 360ms var(--mi-ease-out),
    box-shadow 360ms var(--mi-ease-out),
    border-color 240ms ease;
  transform-origin:center;
}
.btn-primary,.btn-secondary,.cta,.bookbtn{
  position:relative;
  overflow:hidden;
}
.btn-primary::after,.btn-secondary::after,.cta::after,.bookbtn::after{
  content:"";
  position:absolute;
  inset:-2px auto -2px -42%;
  width:34%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);
  opacity:0;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover::after,.btn-secondary:hover::after,.cta:hover::after,.bookbtn:hover::after{
    animation:miSheen 700ms var(--mi-ease-out);
  }
}
@keyframes miSheen{
  0%{left:-42%;opacity:0}
  18%{opacity:.85}
  100%{left:120%;opacity:0}
}

.hero-center,.hero-artist{
  position:relative;
}
.hero-center::after{
  content:"";
  display:block;
  width:0;
  height:1px;
  margin:20px auto 0;
  background:linear-gradient(90deg,transparent,var(--mi-accent),transparent);
  opacity:.78;
}
body.mi-hero-ready .hero-center::after{
  width:min(180px,42vw);
  transition:width 900ms var(--mi-ease-out) 260ms;
}

.mi-section-active{
  animation:miSectionBreath 700ms var(--mi-ease-out);
}
@keyframes miSectionBreath{
  from{opacity:.55;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* Make gallery/result-card interaction obvious on desktop without becoming playful. */
@media (hover:hover) and (pointer:fine){
  .result-card:hover,.signature-card:hover{
    border-color:rgba(155,118,82,.34);
  }
}

/* Touch feedback is noticeable on mobile too. */
@media (hover:none){
  .signature-card:active,.result-card:active,.service-gallery__item:active{
    transform:scale(.985);
  }
}


/* v12.3 — WhatsApp + Call appointment mode */
.manual-booking-panel{
  margin-top:18px;padding:18px 20px;border:1px solid rgba(112,91,76,.18);
  border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(247,243,239,.92));
}
.manual-booking-note{margin:0 0 12px;line-height:1.55;opacity:.82}
.manual-booking-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.manual-btn{
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;
  border-radius:999px;text-decoration:none;font-weight:700;
  transition:transform 220ms var(--mi-ease-out),box-shadow 220ms var(--mi-ease-out),opacity 180ms ease;
}
.manual-btn--whatsapp{background:#244f3b;color:#fff;box-shadow:0 8px 22px rgba(36,79,59,.16)}
.manual-btn--call{border:1px solid rgba(70,56,47,.28);background:rgba(255,255,255,.78);color:inherit}
.manual-booking-landing{max-width:820px;margin:0 auto;padding:34px 0 56px}
.manual-booking-landing__card{
  margin-top:24px;padding:28px;border:1px solid rgba(112,91,76,.18);
  border-radius:24px;background:rgba(255,255,255,.86)
}
.manual-booking-phone{margin-top:16px;font-size:.96rem;opacity:.72}
@media (hover:hover) and (pointer:fine){
  .manual-btn:hover{transform:translateY(-2px)}
  .manual-btn--whatsapp:hover{box-shadow:0 12px 28px rgba(36,79,59,.24)}
  .manual-btn--call:hover{box-shadow:0 10px 24px rgba(50,40,34,.10)}
}
@media(max-width:620px){
  .manual-booking-actions{display:grid;grid-template-columns:1fr}
  .manual-btn{width:100%}
}
@media (prefers-reduced-motion: reduce){.manual-btn{transition:none!important}}

.review-card{
  transition:transform 320ms var(--mi-ease-out),box-shadow 320ms var(--mi-ease-out),border-color 220ms ease;
}
@media (hover:hover) and (pointer:fine){
  .review-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 36px rgba(43,31,24,.09);
    border-color:rgba(155,118,82,.30);
  }
}
@media (prefers-reduced-motion: reduce){
  .review-card{transition:none!important}
  .review-card:hover{transform:none!important}
}