/* MAISON V2 — motion sloj. styles.css je preuzet iz V1 bez izmena; sve V2 promene su ovde. */

/* ---------- Lenis (desktop smooth scroll) ---------- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}

/* ---------- Pre intro-a: sakriveno samo dok motion nije spreman (rezervni tajmer u <head>) ---------- */
.motion:not(.motion-ready) [data-intro]{opacity:0}
main{overflow-x:clip}
section[tabindex="-1"]:focus{outline:none}

/* ---------- Header, napredak, navigacija ---------- */
.site-header{transition:background-color .5s,box-shadow .5s}
.scroll-progress{display:none;position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.motion.motion-ready .scroll-progress{display:block}
.site-header.is-scrolled{box-shadow:0 14px 30px -26px rgba(48,40,36,.4)}
@media (min-width:1024px){.site-header.is-scrolled{background:rgba(246,243,238,.86);-webkit-backdrop-filter:saturate(1.1) blur(10px);backdrop-filter:saturate(1.1) blur(10px)}}
.desktop-nav a{position:relative}
.desktop-nav a::after{content:'';position:absolute;left:0;right:0;bottom:13px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s cubic-bezier(.19,1,.22,1)}
.desktop-nav a.is-active::after,.desktop-nav a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
@media (hover:hover){.desktop-nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}}

/* ---------- Dugmad i linkovi: popuna odozdo, strelica se pomera ---------- */
.button{position:relative;isolation:isolate;overflow:hidden;transition:color .45s,border-color .45s}
.button::before{content:'';position:absolute;inset:-1px;z-index:-1;background:var(--accent);transform:scaleY(0);transform-origin:50% 100%;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.button-light::before{background:#ded1c4}
.button .icon,.text-link .icon,.treatment-link>.icon{transition:transform .55s cubic-bezier(.19,1,.22,1),background-color .4s,border-color .4s,color .4s}
@media (hover:hover){
  .button:hover{background:var(--ink);border-color:var(--accent);color:#fff}
  .button:hover::before{transform:scaleY(1)}
  .button-light:hover{background:var(--paper);border-color:#ded1c4;color:var(--ink)}
  .button:hover .icon{transform:translate(3px,-3px)}
  .button:hover .icon:has(use[href="#arrow"]){transform:translateX(4px)}
  .text-link:hover .icon{transform:translateX(4px)}
  .treatment-link:hover>.icon{transform:rotate(45deg)}
}

/* ---------- SplitText maske: prostor za kurzivne i duge glifove Cormoranta ---------- */
.split-line-mask,.split-word-mask{padding:.08em .06em .2em;margin:-.08em -.06em -.2em}

/* ---------- Hero ---------- */
.hero h1 .mask{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero h1 .mask-inner{display:block}
.hero-photo picture{display:block;transform-origin:50% 60%}
.hero-curtain{display:none}
.motion .hero-curtain{display:block;position:absolute;inset:-1px;z-index:1;background:var(--paper);transform-origin:50% 0;pointer-events:none}
.hero-photo img{transform-origin:50% 40%}

/* ---------- Naš pristup ---------- */
.approach .read-word{display:inline-block}

/* ---------- Maison detalj (prelaz sa fotografijom) ---------- */
.frame-section{position:relative;background:var(--paper)}
.frame-pin{position:relative;height:86vh;height:86svh;min-height:460px;overflow:hidden}
.frame-media{position:absolute;inset:0;margin:0 auto;max-width:1360px;overflow:hidden;background:var(--cream)}
.frame-media img{width:100%;height:100%;object-fit:cover;object-position:50% 33%;transform-origin:50% 35%}
.frame-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,27,22,0) 50%,rgba(33,27,22,.5));pointer-events:none}
.frame-caption{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(30px,7vh,84px);z-index:2;display:grid;justify-items:center;gap:14px;text-align:center;color:var(--paper)}
.frame-caption .eyebrow{color:#eadfd4}
.frame-line{font-family:var(--serif);font-weight:600;font-size:clamp(40px,6.6vw,108px);line-height:1;letter-spacing:-.035em}
.frame-line em{color:#e6d3c2}
@media (min-width:1024px){.frame-pin{height:100vh;min-height:620px}.frame-section.is-sticky{height:230vh}.frame-section.is-sticky .frame-pin{position:sticky;top:0}}

/* ---------- Tretmani ---------- */
.treatment-visual{display:none}
.treatment-thumb{grid-column:1/-1;margin:0 0 6px;overflow:hidden;aspect-ratio:16/10;background:var(--cream)}
.treatment-thumb img{width:100%;height:100%;object-fit:cover}
.treatment[data-treatment="lash"] .treatment-thumb img{object-position:50% 27%}
.treatment[data-treatment="brow"] .treatment-thumb img{object-position:58% 52%}
.treatment[data-treatment="combo"] .treatment-thumb img{object-position:50% 24%}
.treatment-index{transition:color .5s}
.motion .treatment{border-bottom-color:transparent}
.motion .treatment::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line);transform:scaleX(var(--line,1));transform-origin:0 50%;transition:background-color .6s}
.treatment.is-current::after{background:var(--accent)}
.treatment.is-current .treatment-index{color:var(--ink)}
@media (min-width:768px) and (max-width:1023px){.treatment-thumb{aspect-ratio:21/9}}
@media (min-width:1024px){
  .treatments-stage{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(48px,6vw,112px);align-items:start}
  .treatment-visual{display:block;position:sticky;top:calc(var(--header-height) + 4vh)}
  .treatment-visual-frame{position:relative;height:min(calc(100vh - var(--header-height) - 14vh),780px);min-height:420px;overflow:hidden;background:var(--cream);border-radius:999px 999px 0 0}
  .treatment-layer{position:absolute;inset:0;overflow:hidden}
  .treatment-layer:not(.is-active){clip-path:inset(100% 0 0 0)}
  .treatment-layer img{width:100%;height:100%;object-fit:cover}
  .treatment-layer[data-visual="lash"] img{object-position:50% 30%}
  .treatment-layer[data-visual="brow"] img{object-position:62% 50%}
  .treatment-layer[data-visual="combo"] img{object-position:50% 22%}
  .treatment-visual-meta{display:flex;justify-content:space-between;gap:16px;padding-top:14px;font-size:9px;letter-spacing:.12em;text-transform:uppercase}
  .treatment-counter{font-variant-numeric:tabular-nums;color:var(--accent)}
  .treatment-thumb{display:none}
  .treatments-stage .treatment{grid-template-columns:50px minmax(0,1fr) 60px;grid-template-rows:auto auto;align-content:center;min-height:min(56vh,520px);padding-block:44px;gap:20px 30px}
  .treatments-stage .treatment-index{grid-row:1;align-self:start;padding-top:14px}
  .treatments-stage .treatment-name{grid-column:2}
  .treatments-stage .treatment>p{grid-column:2;grid-row:2;max-width:430px}
  .treatments-stage .treatment-link{grid-column:3;grid-row:1/span 2}
  .treatments-stage .treatment-name h3{font-size:clamp(46px,4.6vw,72px)}
  .motion .treatments-stage .treatment>*{transition:opacity .7s cubic-bezier(.19,1,.22,1),transform .7s cubic-bezier(.19,1,.22,1)}
  .motion .treatments-stage .treatment:not(.is-active)>*:not(.treatment-thumb){opacity:.32}
  .motion .treatments-stage .treatment.is-active .treatment-name{transform:translateX(10px)}
  .treatment.is-active .treatment-index{color:var(--ink)}
  .motion .treatment.is-active::after{background:var(--accent)}
}

/* ---------- Cenovnik ---------- */
.motion .price-row,.motion .price-list-label{position:relative;border-bottom-color:transparent}
.motion .price-row::after,.motion .price-list-label::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#c9bfb2;transform:scaleX(var(--line,1));transform-origin:0 50%}

/* ---------- Galerija ---------- */
.gallery-grid{position:relative}
.tile-media{display:block;overflow:hidden;background:var(--cream)}
.tile-media img{transform-origin:50% 50%}
.gallery-cursor{display:none}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .motion .gallery-cursor{display:flex;position:absolute;left:0;top:0;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:rgba(48,40,36,.9);color:var(--paper);align-items:center;justify-content:center;font-size:9px;letter-spacing:.16em;text-transform:uppercase;pointer-events:none;z-index:3;opacity:0}
}
.lightbox figure{transform-origin:50% 50%}

/* ---------- Zašto Maison ---------- */
.why-section{position:relative;background:var(--paper)}
.why-pin{padding-block:clamp(76px,11vw,148px)}
.why-head{display:flex;align-items:center;gap:18px;margin-bottom:clamp(30px,6vw,64px)}
.why-head h2.eyebrow{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.16em;line-height:1.6}
.why-progress{display:none}
.why-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(28px,6vw,44px)}
.why-item{display:grid;grid-template-columns:26px minmax(0,1fr);gap:6px 12px;align-items:baseline}
.why-index{font-size:10px;color:var(--accent)}
.why-word{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(54px,16vw,190px);line-height:.96;letter-spacing:-.045em}
.why-item p{grid-column:2;font-size:14px;line-height:1.85;color:var(--muted);max-width:360px;margin-top:8px}
.motion .why-word{color:#9d8f82;transition:color .8s cubic-bezier(.19,1,.22,1)}
.motion .why-item.is-current .why-word{color:var(--ink)}
@media (min-width:1024px){
  .why-pin{min-height:100vh;display:flex;align-items:center;padding-block:calc(var(--header-height) + 24px) 48px}
  .why-inner{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,3fr);gap:clamp(40px,5vw,90px);align-items:center}
  .why-head{flex-direction:column;align-items:flex-start;gap:26px;margin:0;align-self:stretch;justify-content:center}
  .why-progress{display:block;position:relative;width:1px;height:140px;background:var(--line)}
  .why-progress span{position:absolute;inset:0;background:var(--ink);transform-origin:50% 0}
  .motion .why-progress span{transform:scaleY(0)}
  .why-list{gap:clamp(10px,2.4vh,26px)}
  .why-item{grid-template-columns:44px auto minmax(0,1fr);align-items:end;gap:28px}
  .why-index{align-self:start;padding-top:1.6em}
  .why-word{display:inline-block;font-size:clamp(80px,min(10.4vw,18vh),186px)}
  .why-item p{grid-column:3;margin:0 0 .9em;max-width:300px;font-size:14px}
  .why-section.is-pinned .why-word{color:var(--ink)}
  .why-section.is-pinned{height:340vh}
  .why-section.is-pinned .why-pin{position:sticky;top:0;height:100vh;min-height:0}
}

/* ---------- Pre tretmana ---------- */
.faq-list details[open]>p{animation:maison-faq .6s cubic-bezier(.19,1,.22,1)}
@keyframes maison-faq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Zakazivanje ---------- */
.booking-section .button{will-change:auto}

/* ---------- Podnožje ---------- */
.footer-mark{font-family:var(--serif);font-weight:600;font-size:clamp(58px,19.5vw,330px);line-height:.92;letter-spacing:.02em;text-align:center;margin:clamp(30px,5vw,64px) 0 0;overflow:hidden;padding-top:.04em;user-select:none;white-space:nowrap}
.footer-mark .char,.footer-mark>div{display:inline-block}