/* =========================================================
   Coiffeur Orhan · Hero motion "Cut & Reveal" · 2026-10-18
   Craft, not tech: a gold contour line reveals the salon,
   the serif headline rises once, the open status breathes
   three times and rests. transform / opacity / clip only.
   ========================================================= */
:root{
  --oh-cut:cubic-bezier(.65,0,.35,1);
  --oh-settle:cubic-bezier(.19,1,.22,1);
}

/* ---------- Photo: sharp source + contour reveal ---------- */
.hero-visual{background-image:none!important;isolation:isolate}
.hero-photo{
  position:absolute;
  inset:0;
  z-index:0;
  background:#0A0A0A url("./coiffeur-orhan-hero-1536.webp?v=2") 45% center/cover no-repeat;
  translate:var(--px,0px) var(--py,0px);
  scale:1.03;
  animation:ohPhotoIn 1.25s var(--oh-cut) .1s both,ohSettle 2.8s var(--oh-settle) .1s both;
}
/* Phones get their own portrait crop around the barber (2x real pixels) */
@media(max-width:680px){
  .hero-photo{
    background-image:url("./coiffeur-orhan-hero-mobile.webp?v=2");
    background-position:center 8%;
    /* Photo fills the upper part so the barber's head stays above the copy */
    bottom:auto;
    height:66%;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
  }
}
.hero-visual:after{z-index:1}
.hero-razor{
  position:absolute;
  z-index:3;
  inset:0;
  background:linear-gradient(90deg,transparent,#E9C46A 18%,#F6DFA0 50%,#E9C46A 82%,transparent) top/100% 1px no-repeat;
  pointer-events:none;
  opacity:0;
  animation:ohRazor 1.25s var(--oh-cut) .1s both;
}
.hero-visual-caption{animation:ohFromRight .8s var(--oh-settle) 1.15s both}

/* ---------- Copy (desktop: the copy is in the first view) ---------- */
.hero .hero-line{display:block;overflow:hidden;padding:.06em 0 .1em;margin:-.06em 0 -.1em}
.hero .hero-line>span{display:block;text-wrap:balance}

@media(min-width:981px){
  .hero h1{font-size:clamp(50px,5.1vw,96px);line-height:.9}
}
.hero-copy .kicker{position:relative;padding-bottom:12px;animation:ohFade .8s var(--oh-settle) .25s both}
.hero-copy .kicker::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:56px;height:1px;
  background:var(--gold);
  transform-origin:left;
  animation:ohDraw .9s var(--oh-cut) .35s both;
}
.hero .hero-line>span{animation:ohLineUp 1.05s var(--oh-settle) both}
.hero .hero-line:nth-child(1)>span{animation-delay:.32s}
.hero .hero-line:nth-child(2)>span{animation-delay:.44s}
.hero-lead{animation:ohRise .8s var(--oh-settle) .72s both}
.hero-copy .hero-actions{animation:ohRise .8s var(--oh-settle) .82s both}
.hero-copy .hero-facts,
.hero-copy .hero-status{animation:ohRise .8s var(--oh-settle) .92s both}
@media(max-width:680px){
  /* Copy sits on the photo: let the image lead, text follows quickly */
  .hero-copy .kicker{animation-delay:.35s}
  .hero .hero-line:nth-child(1)>span{animation-delay:.42s}
  .hero .hero-line:nth-child(2)>span{animation-delay:.52s}
  .hero-copy .hero-actions{animation-delay:.7s}
  .hero-copy .hero-facts,.hero-copy .hero-status{animation-delay:.8s}
}

/* ---------- Sections: one quiet entrance when scrolled into view ---------- */
[data-reveal].is-pending{opacity:0;transform:translate3d(0,22px,0)}
[data-reveal].is-in{
  opacity:1;
  transform:none;
  transition:opacity .7s ease-out,transform 1s var(--oh-settle);
}
.home-gallery-grid[data-reveal].is-pending img{scale:1.06}
.home-gallery-grid[data-reveal].is-in img{scale:1;transition:scale 1.4s var(--oh-settle)}
.h-places-grid>[data-reveal]:nth-child(2).is-in{transition-delay:.12s}

/* ---------- Hover: prices, gallery, places ---------- */
.h-services .home-price-grid article::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:#8A651B;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s var(--oh-settle);
}
.h-services .home-price-grid article strong{transition:transform .4s var(--oh-settle)}
@media(hover:hover) and (pointer:fine){
  .h-services .home-price-grid article:hover::after{transform:scaleX(1)}
  .h-services .home-price-grid article:hover strong{transform:translateX(-6px)}
  .home-gallery-grid img{transition:transform .9s var(--oh-settle)}
  .home-gallery-grid a:hover img{transform:scale(1.035)}
  .h-place .btn:hover{transform:translateY(-2px)}
}
.h-place .btn,.h-visit .btn{transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
.h-place .btn:active,.h-visit .btn:active{transform:translateY(0) scale(.975);transition-duration:90ms}

/* ---------- Open status: three calm breaths, then rest ---------- */
.status-dot{position:relative}
.hero-status.is-open .status-dot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#32C766;
  animation:ohBreath 1.8s ease-out .3s 3 both;
}

/* ---------- Buttons: quick and tactile ---------- */
.hero .btn,.contact-final .btn{
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .22s cubic-bezier(.2,.8,.2,1);
}
@media(hover:hover) and (pointer:fine){
  .hero .btn:hover,.contact-final .btn:hover{transform:translateY(-2px)}
}
.hero .btn:active,.contact-final .btn:active{transform:translateY(0) scale(.975);transition-duration:90ms}
.hero-phone{transition:color .18s ease,text-underline-offset .22s ease}
.hero-phone:hover{text-underline-offset:9px}

@keyframes ohPhotoIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ohSettle{from{scale:1.1}to{scale:1.03}}
@keyframes ohRazor{
  0%{opacity:1;transform:translateY(0)}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(100%)}
}
@keyframes ohFromRight{from{opacity:0;transform:translate3d(18px,0,0)}to{opacity:1;transform:none}}
@keyframes ohFade{from{opacity:0}to{opacity:1}}
@keyframes ohDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ohLineUp{from{transform:translateY(112%)}to{transform:none}}
@keyframes ohRise{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes ohBreath{
  0%{opacity:.55;transform:scale(1)}
  100%{opacity:0;transform:scale(2.6)}
}

@media(max-width:980px){
  .hero-photo,.hero-razor{animation-duration:.95s}
  .hero-visual-caption{animation-delay:.85s}
}

@media(prefers-reduced-motion:reduce){
  .hero-photo,.hero-razor,.hero-visual-caption,.hero-mark,.hero-copy .kicker,.hero-copy .kicker::after,
  .hero .hero-line>span,.hero-lead,.hero-copy .hero-actions,.hero-copy .hero-status,
  .hero-status.is-open .status-dot::after,.hero-copy .hero-facts{animation:none!important}
  [data-reveal].is-pending{opacity:1;transform:none}
  .home-gallery-grid[data-reveal].is-pending img{scale:1}
  .hero-razor{display:none}
  .hero-photo{scale:1;translate:none}
  .hero .btn,.contact-final .btn,.h-place .btn,.h-visit .btn{transition:none!important}
  .hero .btn:hover,.hero .btn:active,.contact-final .btn:hover,.contact-final .btn:active{transform:none!important}
}