/* ══════════════════════════════════════════════════════════
   BEAUTY ALISA — paleta izvučena iz hero fotografije
   zid #F4F3F1 · bronza #69431D · espreso #1B1209 · lak #C11626
   ══════════════════════════════════════════════════════════ */
:root{
  --bone:#F4F3F1;
  --bone-2:#EAE6E0;
  --bronze:#69431D;
  --bronze-lo:#3A2510;
  --espresso:#1B1209;
  --lac:#C11626;
  --ink:#14100D;
  --ink-60:rgba(20,16,13,.6);
  --ink-35:rgba(20,16,13,.35);

  --f-hero:'Anton',Impact,sans-serif;
  --f-disp:'Instrument Serif',Georgia,serif;
  --f-body:'Archivo',system-ui,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(1.25rem,5vw,6rem);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bone); color:var(--ink);
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(1rem,.62vw + .85rem,1.15rem); line-height:1.6;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;height:100vh}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
.lac{color:var(--lac)}

/* zrno preko cele strane — spaja slike i pozadinu u istu materiju */
body::after{
  content:''; position:fixed; inset:-50%; z-index:9990; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══ LOADER ══ */
.loader{
  position:fixed; inset:0; z-index:9999; background:var(--bone);
  display:grid; place-content:center; gap:1.75rem; justify-items:center;
  transition:opacity .9s var(--ease), visibility .9s;
}
.loader.done{opacity:0;visibility:hidden}
.loader-mark{font-family:var(--f-disp);font-size:clamp(3rem,7vw,5.5rem);letter-spacing:.06em;line-height:1}
.loader-bar{width:min(38vw,260px);height:1px;background:var(--ink-35);overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:var(--lac)}
.loader-pct{font-size:.7rem;letter-spacing:.32em;color:var(--ink-60);font-variant-numeric:tabular-nums}
.loader-pct::after{content:'%'}

/* ══ NAV ══ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:9995;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.4rem var(--pad);
  opacity:0; transform:translateY(-100%); pointer-events:none;
  transition:opacity .8s var(--ease), transform .9s var(--ease);
  mix-blend-mode:difference; color:#fff;
}
.nav.on{opacity:1;transform:none;pointer-events:auto}
.nav-brand{font-family:var(--f-disp);font-size:1.32rem;letter-spacing:.02em}
.nav-links{display:flex;gap:clamp(1rem,2.4vw,2.4rem)}
.nav-links a{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;opacity:.75;transition:opacity .3s}
.nav-links a:hover{opacity:1}
.nav-cta{
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:999px;padding:.6rem 1.15rem;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.nav-cta:hover{background:#fff;color:#000}
@media(max-width:720px){.nav-links{display:none}}

/* ══ HERO ══ */
.hero{height:520vh;position:relative}
.hero-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bone);z-index:9991}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-veil{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(27,18,9,.35),var(--espresso) 85%);
}
.hero-type{
  position:absolute;left:0;right:0;bottom:clamp(2.5rem,8vh,6rem);
  padding-left:var(--pad);z-index:3;pointer-events:none;color:var(--ink);
  clip-path:inset(0 0 0 0);will-change:clip-path;
}
.hero-kicker{
  display:block;font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--ink-60);margin-bottom:.9rem;
  opacity:0;transform:translateY(1rem);
}
.hero-title{
  font-family:var(--f-hero);
  font-size:clamp(3.2rem,12.5vw,13rem);
  line-height:.84; letter-spacing:-.01em; text-transform:uppercase;
}
.hero-title span{display:block;overflow:hidden;will-change:transform}
.hero-title span > i{display:block;font-style:normal}
.hero-cue{
  position:absolute;right:var(--pad);bottom:clamp(2.5rem,8vh,6rem);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-60);
  opacity:0;
}
.hero-cue i{display:block;width:1px;height:56px;background:var(--ink-35);position:relative;overflow:hidden}
.hero-cue i::after{
  content:'';position:absolute;inset:0;background:var(--lac);
  transform:translateY(-100%);animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
.hero-scroll-arrow{display:none}
.hero-cue-mobile{display:none}
.hero-cue::after{content:'\2193';color:var(--lac);font-size:1rem;line-height:1}

/* ══ zajedničko ══ */
.page{position:relative;z-index:5;background:var(--bone)}

/* šav: espreso iz videa se preliva u bež stranu, granica se ne vidi */
.seam{height:58vh;background:linear-gradient(180deg,var(--espresso) 0%,var(--bronze-lo) 38%,var(--bone-2) 82%,var(--bone) 100%)}
.sec-head{display:flex;align-items:baseline;gap:1.4rem;padding:0 var(--pad);margin-bottom:clamp(2.5rem,6vw,5rem)}
.sec-num{font-size:.68rem;letter-spacing:.3em;color:var(--lac)}
.sec-title{font-family:var(--f-disp);font-size:clamp(2.4rem,7vw,6rem);line-height:1}
.sec-head.light .sec-title{color:var(--bone)}

/* ══ MANIFESTO ══ */
.manifesto{padding:clamp(6rem,18vh,14rem) var(--pad)}
.manifesto-line{
  margin:0;max-width:22ch;font-family:var(--f-disp);
  font-size:clamp(1.9rem,5.2vw,4.4rem);line-height:1.12;letter-spacing:-.01em;
}
.manifesto-line em{font-style:italic}

/* ══ USLUGE ══ */
.usluge{position:relative;padding:clamp(4rem,10vh,8rem) 0 clamp(6rem,14vh,10rem)}
.svc{border-top:1px solid rgba(20,16,13,.14)}
.svc-row{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;
  align-items:baseline;gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.4rem,3.4vw,2.6rem) var(--pad);
  border-bottom:1px solid rgba(20,16,13,.14);
  cursor:pointer;transition:color .5s var(--ease);
}
.svc-row::before{
  content:'';position:absolute;inset:0;background:var(--espresso);
  transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease);z-index:-1;
}
.svc-row.on{color:var(--bone)}
.svc-row.on::before{transform:scaleY(1);transform-origin:top}
.svc-idx{font-size:.68rem;letter-spacing:.24em;color:var(--lac)}
.svc-name{font-family:var(--f-disp);font-size:clamp(1.8rem,5.6vw,4.6rem);line-height:1;transition:transform .55s var(--ease)}
.svc-row.on .svc-name{transform:translateX(clamp(.5rem,1.6vw,1.6rem))}
.svc-note{margin:0;font-size:.8rem;letter-spacing:.06em;color:var(--ink-60);text-align:right;transition:color .5s}
.svc-row.on .svc-note{color:rgba(244,243,241,.6)}
.svc-float{
  position:fixed;top:0;left:0;width:clamp(180px,20vw,300px);aspect-ratio:3/4;
  pointer-events:none;z-index:20;opacity:0;
  transform:translate(-50%,-50%) scale(.9);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  /* rub se rastapa — nema vidljive granice slike */
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 58%,transparent 100%);
          mask-image:radial-gradient(closest-side at 50% 50%,#000 58%,transparent 100%);
}
.svc-float.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.svc-float img{width:100%;height:100%;object-fit:cover}
@media(hover:none){.svc-float{display:none}}

/* ══ DALIBORKA ══ */
.about{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);
  align-items:center;padding:clamp(5rem,12vh,10rem) var(--pad);
}
.about-img{margin:0}
.about-img img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  -webkit-mask-image:radial-gradient(115% 105% at 50% 45%,#000 55%,transparent 100%);
          mask-image:radial-gradient(115% 105% at 50% 45%,#000 55%,transparent 100%);
}
.about-title{font-family:var(--f-disp);font-size:clamp(2.6rem,7vw,5.5rem);line-height:1;margin:.6rem 0 1.6rem}
.about-copy p{max-width:44ch;color:var(--ink-60)}
.about-stats{display:flex;gap:clamp(1.5rem,4vw,3.5rem);margin-top:2.6rem}
.about-stats b{display:block;font-family:var(--f-disp);font-size:clamp(2rem,4.5vw,3.4rem);line-height:1;font-weight:400}
.about-stats span{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-35)}
@media(max-width:820px){.about{grid-template-columns:1fr}}

/* ══ RITUAL — tamna sekcija koja izranja iz bele bez šava ══ */
.ritual{
  position:relative;padding:clamp(6rem,16vh,12rem) 0;color:var(--bone);
  background:linear-gradient(180deg,var(--bronze-lo),var(--espresso) 60%);
}
.ritual::before,.ritual::after{
  content:'';position:absolute;left:0;right:0;height:clamp(80px,14vh,180px);pointer-events:none;
}
.ritual::before{top:0;transform:translateY(-100%);background:linear-gradient(180deg,transparent,var(--bronze-lo))}
.ritual::after{bottom:0;transform:translateY(100%);background:linear-gradient(0deg,transparent,var(--espresso))}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,4rem);padding:0 var(--pad)}
.steps li > span{font-family:var(--f-disp);font-size:2rem;color:var(--lac);display:block;margin-bottom:1rem}
.steps h3{font-family:var(--f-disp);font-size:clamp(1.4rem,2.6vw,2.2rem);margin-bottom:.7rem}
.steps p{margin:0;color:rgba(244,243,241,.55);font-size:.92rem;max-width:32ch}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:2.5rem}}

/* ══ GALERIJA ══ */
.gallery{padding:clamp(6rem,14vh,11rem) 0}
.grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(.8rem,2.2vw,2rem);padding:0 var(--pad);
}
.grid figure{margin:0;overflow:hidden}
.grid img{width:100%;height:100%;object-fit:cover}
.g1{grid-column:span 4;aspect-ratio:16/10}
.g2{grid-column:span 2;aspect-ratio:3/4}
.g3{grid-column:span 2;aspect-ratio:1}
.g4{grid-column:span 2;aspect-ratio:1}
.g5{grid-column:span 2;aspect-ratio:1}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}.g1{grid-column:span 2}}

/* ══ KONTAKT ══ */
.contact{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);
  padding:clamp(6rem,14vh,11rem) var(--pad);align-items:start;
}
.contact-title{font-family:var(--f-hero);font-size:clamp(3rem,10vw,8rem);line-height:.86;text-transform:uppercase}
.contact-body p{max-width:38ch;color:var(--ink-60)}
.btn{
  display:inline-block;margin:1.8rem 0 2.6rem;padding:.95rem 1.8rem;
  border:1px solid var(--ink);border-radius:999px;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.btn:hover{background:var(--lac);border-color:var(--lac);color:var(--bone)}
.contact-meta{display:grid;gap:1rem;border-top:1px solid rgba(20,16,13,.14);padding-top:1.6rem}
.contact-meta div{display:flex;justify-content:space-between;gap:1rem}
.contact-meta dt{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-35)}
.contact-meta dd{margin:0;font-size:.92rem}
@media(max-width:820px){.contact{grid-template-columns:1fr}}

/* ══ FOOTER ══ */
.foot{padding:clamp(3rem,8vh,6rem) var(--pad) 2rem;border-top:1px solid rgba(20,16,13,.14)}
.foot-mark{
  font-family:var(--f-hero);text-transform:uppercase;
  font-size:clamp(2.4rem,15.5vw,15rem);line-height:.8;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px rgba(20,16,13,.35);
}
.foot-row{display:flex;justify-content:space-between;margin-top:2rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-35)}

/* ══ reveal ══ */
.rv{opacity:0;transform:translateY(2.2rem)}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}