/* Fotografije su deo iste kompozicije: meke ivice, topla svetlost i miran pokret. */
.brands,.details-section{position:relative;isolation:isolate}
.brands{background:radial-gradient(ellipse 65% 28% at 12% 35%,#cbbca908,transparent 75%),var(--bg)}
.details-section{background:radial-gradient(ellipse 70% 42% at 50% 75%,#cbbca90b,transparent 80%),var(--bg)}
.brand-feature{position:relative;isolation:isolate}
.brand-image{background:transparent;isolation:isolate;outline-offset:5px}
.brand-image img{position:relative;z-index:0;filter:saturate(.94);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .8s ease}
.brand-image::before{content:'';position:absolute;inset:3% 2%;z-index:-1;background:radial-gradient(ellipse at 50% 60%,#cbbca90e,transparent 70%);pointer-events:none}
.brand-image::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,#1c1b1a10,transparent 25%,transparent 75%,#1c1b1a28);transition:opacity .7s}
.richard .brand-image img{filter:saturate(.98);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 91%,transparent)}
.lolo .brand-image img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 85%,transparent)}

.detail-photo{position:relative;padding:18px 18px 0;background:linear-gradient(180deg,#cbbca906,transparent);border-top:1px solid #cbbca91c}
.single-photo .detail-photo img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect;filter:saturate(.95);transition:filter .6s}
.detail-photo>span{padding:20px 0 0;position:relative}
.detail-photo>span:after{content:'';position:absolute;top:0;left:0;width:44px;height:1px;background:var(--accent);opacity:.45;transition:width .6s}
.hero-photo{overflow:hidden}
.hero-photo:after{z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--bg),#1c1b1aa8 14%,#1c1b1a18 45%,#1c1b1a05 70%),linear-gradient(180deg,#1c1b1a20,transparent 20%,transparent 70%,#1c1b1ab5)}
.hero-photo img{transform:translate3d(0,var(--hero-shift,0px),0) scale(1.025);will-change:transform}
.button{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 5px 22px #00000012;transition:background .35s,transform .35s,box-shadow .35s}
.button:before{content:'';position:absolute;inset:-100% -40%;pointer-events:none;z-index:-1;background:linear-gradient(115deg,transparent 35%,#ffffff70 49%,transparent 63%);transform:translateX(-85%);transition:transform .85s cubic-bezier(.2,.7,.2,1)}
.button>span,.text-link>span,.header-visit>span{transition:transform .35s}
.contact-block{transition:border-color .5s}
.service-list summary{transition:color .3s}
.motion .reveal{transition-duration:1s;transition-delay:var(--reveal-delay,0ms)}
.hero-copy>.eyebrow,.hero-copy>h1,.hero-copy>.hero-description,.hero-copy>.hero-actions,.hero-copy>.hero-location{animation:hero-enter 1s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>h1{animation-delay:.08s}.hero-copy>.hero-description{animation-delay:.16s}.hero-copy>.hero-actions{animation-delay:.24s}.hero-copy>.hero-location{animation-delay:.32s}
@keyframes hero-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){
  .brand-image:hover img{transform:translate3d(var(--image-x,0px),var(--image-y,0px),0) scale(1.018);filter:saturate(1)}
  .brand-image:hover::after{background:radial-gradient(ellipse 280px 230px at var(--light-x,50%) var(--light-y,50%),#fff5e90c,transparent 80%),linear-gradient(180deg,#1c1b1a08,transparent 75%,#1c1b1a18)}
  .detail-photo:hover>span:after{width:100px}
  .single-photo .detail-photo:hover img{filter:saturate(1)}
  .button:hover{box-shadow:0 10px 30px #00000026}
  .button:hover:before{transform:translateX(85%)}
  .button:hover>span,.text-link:hover>span,.header-visit:hover>span{transform:translate(2px,-2px)}
  .contact-block:hover{border-color:#cbbca955}
  .service-list summary:hover{color:var(--accent)}
}
@media(max-width:760px){
  .hero-photo:after{background:linear-gradient(180deg,var(--bg),#1c1b1a55 14%,transparent 34%),linear-gradient(90deg,var(--bg),#1c1b1a30 17%,transparent 40%),linear-gradient(0deg,var(--bg),transparent 30%)}
  .hero-photo img{transform:none;will-change:auto}
  .brand-image img,.richard .brand-image img,.lolo .brand-image img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 91%,transparent)}
  .detail-photo{padding:9px 0 0}
  .single-photo .detail-photo img{-webkit-mask-image:linear-gradient(180deg,transparent,#000 4%,#000 91%,transparent);mask-image:linear-gradient(180deg,transparent,#000 4%,#000 91%,transparent);-webkit-mask-composite:source-over;mask-composite:add}
}
@media(prefers-reduced-motion:reduce){
  .hero-photo img{transform:none;will-change:auto}
  .brand-image:hover img{transform:none}
  .button:hover{transform:none}
  .motion .reveal{transition-delay:0ms}
}
