/* ============================================================
   COCO Thai&Spa — iOS-style motion layer
   spring easings, blur-in reveals, parallax, magnetic buttons,
   frosted header, page-transition veil. Respects reduced-motion.
   ============================================================ */

:root{
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-ios:cubic-bezier(.25,.1,.25,1);
}

/* ---------- Frosted sticky header (iOS "large title" feel) ---------- */
.site-header{
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  background:rgba(248,245,242,.72);
  border-bottom:1px solid rgba(20,20,20,.06);
  transition:background .45s var(--ease-ios),box-shadow .45s var(--ease-ios),padding .45s var(--ease-ios);
}
.site-header.scrolled{
  background:rgba(248,245,242,.88);
  box-shadow:0 6px 26px rgba(20,20,20,.09);
}
.site-header .brand img{transition:transform .5s var(--spring)}
.site-header .brand:hover img{transform:scale(1.05)}
.main-nav>a{position:relative;padding:8px 2px}
.main-nav>a::after{
  content:'';position:absolute;left:50%;bottom:2px;width:0;height:2px;
  background:var(--tan);border-radius:2px;transform:translateX(-50%);
  transition:width .4s var(--spring);
}
.main-nav>a:hover::after,.main-nav>a.current-menu-item::after{width:100%}
/* фикс: .main-nav a:hover (0,2,1) перебивал .salon-btn:hover (0,1,1) → серый текст на зелёном */
.main-nav a.salon-btn:hover,.main-nav a.salon-btn:focus-visible{color:#fff}
.main-nav a.salon-btn::after{display:none}

/* ---------- Buttons: press feedback + spring ---------- */
.btn{
  position:relative;overflow:hidden;
  transition:transform .45s var(--spring),background .3s var(--ease-ios),color .3s var(--ease-ios),box-shadow .45s var(--ease-ios);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,20,20,.16)}
.btn:active{transform:translateY(1px) scale(.975);transition-duration:.12s}
.btn::before{
  content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;
  background:rgba(255,255,255,.28);transform:translate(-50%,-50%);
  transition:width .6s var(--ease-out),height .6s var(--ease-out),opacity .6s;
  opacity:0;pointer-events:none;
}
.btn:hover::before{width:340px;height:340px;opacity:1}
.btn:focus-visible{outline:3px solid var(--tan);outline-offset:3px}

/* ---------- Reveal: blur-in + spring rise, per-item stagger ---------- */
.reveal{
  opacity:0;filter:blur(10px);transform:translate3d(0,34px,0) scale(.985);
  transition:opacity .9s var(--ease-out),transform 1s var(--spring),filter .9s var(--ease-out);
  will-change:opacity,transform,filter;
}
.reveal.in{opacity:1;filter:blur(0);transform:none}
.reveal:nth-child(2){transition-delay:.10s}
.reveal:nth-child(3){transition-delay:.20s}
.reveal:nth-child(4){transition-delay:.30s}
.reveal:nth-child(5){transition-delay:.40s}
.reveal:nth-child(6){transition-delay:.50s}

/* ---------- Hero: cinematic entrance + depth ---------- */
@keyframes heroRise{from{opacity:0;filter:blur(14px);transform:translate3d(0,44px,0)}to{opacity:1;filter:blur(0);transform:none}}
.hero-content>*{animation:heroRise 1.05s var(--ease-out) both}
.hero-content>*:nth-child(1){animation-delay:.18s}
.hero-content>*:nth-child(2){animation-delay:.34s}
.hero-content>*:nth-child(3){animation-delay:.52s}
.hero-content>*:nth-child(4){animation-delay:.70s}
.hero h1{letter-spacing:-.02em}
.hero-bg{
  animation:kenburns 22s ease-in-out infinite alternate;
  transform-origin:52% 42%;
  will-change:transform;
}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.hero-scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:30px;height:48px;border:2px solid rgba(255,255,255,.55);border-radius:16px;
  display:flex;justify-content:center;padding-top:8px;z-index:3;
  opacity:0;animation:heroRise .8s var(--ease-out) 1.1s both;
}
.hero-scroll span{
  width:4px;height:10px;border-radius:3px;background:#fff;
  animation:scrollDot 1.9s var(--ease-ios) infinite;
}
@keyframes scrollDot{0%{opacity:0;transform:translateY(-4px)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
.hero-scroll:hover{border-color:#fff}

/* ---------- Cards: lift, sheen, spring ---------- */
.salon-card,.service-card,.promo-card,.post-card,.contact-card,.price-card,.adv-card{
  transition:transform .6s cubic-bezier(.4,0,.2,1),box-shadow .6s cubic-bezier(.4,0,.2,1);
}
.salon-card:hover,.service-card:hover,.promo-card:hover,.post-card:hover,.contact-card:hover,.price-card:hover,.adv-card:hover{
  transform:translateY(-8px);box-shadow:0 22px 54px rgba(20,20,20,.14);
}
.salon-media,.service-media,.post-media,.price-media{overflow:hidden}
/* фикс: .service-media/.price-media — пустые <a>, inline-элемент не имел высоты → фото не рисовались */
.salon-media,.service-media,.post-media,.price-media{display:block}
/* плавный зум без пружинного «выпрыгивания»: ease-out, без overshoot */
.salon-media,.service-media,.post-media,.price-media{transition:background-size 1.5s cubic-bezier(.4,0,.2,1)}
.salon-card:hover .salon-media,.service-card:hover .service-media,.post-card:hover .post-media,.price-card:hover .price-media{background-size:105%}
.salon-media img,.service-media img,.post-media img{transition:transform 1.5s cubic-bezier(.4,0,.2,1)}
.salon-card:hover .salon-media img,.service-card:hover .service-media img,.post-card:hover .post-media img{transform:scale(1.04)}
.adv-card .ico-photo{
  background-size:cover;background-position:center;
  transition:transform 1.2s cubic-bezier(.4,0,.2,1),box-shadow .6s var(--ease-out);
}
.adv-card:hover .ico-photo{transform:scale(1.06);box-shadow:0 12px 30px rgba(20,20,20,.16)}
.card-link,.read-more{transition:gap .4s var(--spring),color .3s}
.read-more:hover{gap:12px;letter-spacing:.01em}

/* ---------- Gallery: mosaic pop-in (плавно, без пружинного отскока) ---------- */
.gallery-item{transition:transform .55s var(--ease-ios),box-shadow .55s var(--ease-ios)}
.gallery-item:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(20,20,20,.18)}
.gallery-item img{transition:transform 1.5s cubic-bezier(.4,0,.2,1)}
.gallery-item:hover img{transform:scale(1.04)}

/* ---------- Яндекс.Карты: blur-фильтр reveal-анимации ломает рендер тайлов в iframe ---------- */
.map-card.reveal{opacity:0;filter:none;transform:none;will-change:opacity;transition:opacity .8s var(--ease-ios)}
.map-card.reveal.in{opacity:1}
.map-card iframe{filter:none;will-change:auto;transform:none;background:var(--cream-2)}

/* ---------- Lightbox: iOS zoom ---------- */
.lightbox-overlay{opacity:0;pointer-events:none;transition:opacity .4s var(--ease-ios);backdrop-filter:blur(6px)}
.lightbox-overlay.active{opacity:1;pointer-events:auto}
.lightbox-overlay img{animation:lbZoom .55s var(--spring) both}
@keyframes lbZoom{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

/* ---------- Section headings: line-mask reveal ---------- */
.section-head .section-title,.section-head .uptitle,.section-head .section-sub{
  opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .8s var(--ease-out),transform .9s var(--spring);
}
.section-head.in .uptitle{opacity:1;transform:none;transition-delay:.05s}
.section-head.in .section-title{opacity:1;transform:none;transition-delay:.16s}
.section-head.in .section-sub{opacity:1;transform:none;transition-delay:.28s}

/* ---------- Promo badge: count-up pop ---------- */
@keyframes badgePop{0%{opacity:0;transform:scale(.6)}60%{transform:scale(1.12)}100%{opacity:1;transform:none}}
.promo-card.in .pnum{animation:badgePop .8s var(--spring) .25s both}

/* ---------- CTA band: gradient sweep ---------- */
.cta-band{position:relative;overflow:hidden}
.cta-band::after{
  content:'';position:absolute;top:-60%;left:-30%;width:45%;height:220%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.10),transparent);
  transform:rotate(8deg);animation:sweep 7s var(--ease-ios) infinite;
}
@keyframes sweep{0%{left:-40%}55%{left:120%}100%{left:120%}}

/* ---------- Smooth in-page anchors ---------- */
html{scroll-behavior:smooth}
.hero,.section,.cta-band{scroll-margin-top:84px}

/* ---------- Page-load veil (app-like first paint) ---------- */
body{animation:pageIn .7s var(--ease-out) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

/* ---------- Reduced motion: everything calm ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal,.section-head .section-title,.section-head .uptitle,.section-head .section-sub{opacity:1;transform:none;filter:none}
  .hero-content>*,.hero-bg,.hero-scroll,.promo-card.in .pnum,.cta-band::after,body{animation:none}
  .btn:hover,.salon-card:hover,.service-card:hover,.promo-card:hover,.post-card:hover,.contact-card:hover,.price-card:hover,.adv-card:hover,.gallery-item:hover{transform:none}
  html{scroll-behavior:auto}
}