/* R181 főoldal: a homlokzatfotó a felület, az ajtók hotspotok. Közös tokenek: r181.css */
*{box-sizing:border-box}
html,body{height:100%}
html{scrollbar-gutter:stable}
:root{--gx:max(16px,env(safe-area-inset-left,0px));color-scheme:dark}
body{margin:0;background:var(--r-ink);color:var(--r-cream);font:400 16px/1.5 var(--r-font);-webkit-font-smoothing:antialiased}
a{color:inherit}

/* ---- színtér ---- */
.scene{position:fixed;inset:0;overflow:hidden;background:var(--r-ink)}
.stage{position:absolute;left:50%;top:50%;width:max(100vw,calc(100dvh * 1.7684));aspect-ratio:2688/1520;transform:translate(-50%,-50%)}
.plate,.walk,.room{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.walk{opacity:0;transition:opacity .25s linear;pointer-events:none}
.room{opacity:0;transition:opacity .6s ease-in-out;pointer-events:none}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 40%,rgba(6,5,4,.55) 100%);transition:opacity .5s}
.scrim{position:absolute;left:0;right:0;pointer-events:none;transition:opacity .5s}
.scrim.t{top:0;height:34%;background:linear-gradient(to bottom,rgba(6,5,4,.66),rgba(6,5,4,0))}
.scrim.b{bottom:0;height:30%;background:linear-gradient(to top,rgba(6,5,4,.78),rgba(6,5,4,0))}
/* a belső tér árnyékolása az utolsó képkockán: ugyanaz a háttér, mint a szolgáltatás oldalának hero-ja */
.shade{position:fixed;z-index:2;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease-in-out;background:var(--r-room-shade)}

/* ---- ajtók ---- */
.hot{position:absolute;display:block;padding:0;margin:0;border:0;background:transparent;color:inherit;text-decoration:none;cursor:pointer;font:inherit;transition:background .25s,box-shadow .25s}
.hot.pplashes{left:79%;top:50.5%;width:15%;height:23.6%}
.hot.buffalo{left:65.0%;top:50.5%;width:13.9%;height:23.6%}
.hot.ink{left:22.2%;top:50.5%;width:13.4%;height:23.6%}
.hot:hover,.hot:focus-visible{background:rgba(240,220,182,.07);box-shadow:inset 0 0 0 1px rgba(244,239,230,.6),0 0 60px 6px rgba(240,220,182,.22);outline:none}
.hot.buffalo::before,.hot.ink::before,.hot.pplashes::before{content:"";position:absolute;left:50%;top:50%;width:max(5px,.5vw);height:max(5px,.5vw);margin:-.25vw 0 0 -.25vw;border-radius:50%;background:#f0dcb6;box-shadow:0 0 2vw .8vw rgba(240,220,182,.55);animation:glow 4s ease-in-out infinite;pointer-events:none;transition:opacity .3s}
.hot.buffalo:hover::before,.hot.buffalo:focus-visible::before,.hot.ink:hover::before,.hot.ink:focus-visible::before,.hot.pplashes:hover::before,.hot.pplashes:focus-visible::before{opacity:0}
@keyframes glow{0%,100%{opacity:.55;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.tag{position:absolute;left:50%;bottom:calc(100% + 1.2vw);transform:translateX(-50%);white-space:nowrap;text-align:center;pointer-events:none;opacity:0;transition:opacity .35s}
.tag::after{content:"";position:absolute;left:50%;top:100%;height:.9vw;border-left:1px solid rgba(244,239,230,.4)}
.hot:hover .tag,.hot:focus-visible .tag{opacity:1}
.tag b{display:block;font:500 clamp(9px,.82vw,12px)/1 var(--r-font);letter-spacing:.3em;text-transform:uppercase}
.tag i{display:block;margin-top:.5vw;font:300 clamp(9px,.78vw,11px)/1.4 var(--r-font);font-style:normal;letter-spacing:.14em;color:rgba(244,239,230,.75)}
.buffalo .tag i,.ink .tag i,.pplashes .tag i{color:var(--r-gold)}

/* ---- feliratok ---- */
.brand{position:absolute;top:0;left:0;right:0;padding:clamp(14px,2.2vw,34px) var(--gx) 0;text-align:center;pointer-events:none;transition:opacity .5s}
.brand .num{margin:0;font:800 clamp(60px,7.4vw,124px)/.9 var(--r-mark);letter-spacing:.02em;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.brand .addr{margin:clamp(12px,1.4vw,22px) 0 0;font:500 clamp(9px,.8vw,12px)/1.7 var(--r-font);letter-spacing:.34em;text-transform:uppercase;color:rgba(244,239,230,.78)}
.services{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gx) clamp(18px,3.2vw,46px);transition:opacity .5s}
.services ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center}
.services li{display:flex;align-items:center}
.services li+li::before{content:"";display:inline-block;width:1px;height:1em;background:var(--r-hair);margin:0 clamp(16px,2.2vw,36px)}
.svc{display:block;text-decoration:none}
.svc b{display:block;font:500 clamp(9px,.82vw,12px)/1.2 var(--r-font);letter-spacing:.3em;text-transform:uppercase}
.svc span{display:none}
.svc.soon{opacity:.5}
a.svc.on b{color:var(--r-gold)}
a.svc.on b::after{content:"  \2192";letter-spacing:0}
a.svc.on:hover b,a.svc.on:focus-visible b{color:#fff}
a.svc.on:focus-visible{outline:1px solid var(--r-gold);outline-offset:6px}

.skip{position:absolute;right:var(--gx);bottom:clamp(18px,3vw,40px);z-index:6;opacity:0;pointer-events:none;padding:9px 16px;border:1px solid var(--r-hair);border-radius:999px;background:rgba(6,5,4,.5);color:var(--r-cream);font:500 14px/1 var(--r-font);cursor:pointer;transition:opacity .4s .5s}
.toast{position:absolute;left:50%;bottom:clamp(90px,14vh,150px);z-index:6;transform:translate(-50%,8px);max-width:min(90vw,26rem);padding:10px 16px;border-radius:3px;background:rgba(16,11,8,.7);border:1px solid var(--r-hair);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 14px/1.35 var(--r-font);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.veil{position:fixed;inset:0;z-index:9;background:var(--r-brown);opacity:0;pointer-events:none;transition:opacity .7s ease}

/* ---- állapotok ---- */
.scene.walking .brand,.scene.walking .services,.scene.walking .tag,.scene.walking .scrim,.scene.walking .stage::after,
html.from-service:not(.settle) .brand,html.from-service:not(.settle) .services,html.from-service:not(.settle) .scrim,html.from-service:not(.settle) .stage::after{opacity:0}
/* visszaérkezés: a kilépő videó utolsó képkockája takar az első festéstől, majd feloldódik a homlokzatfotóba, miközben a feliratok beúsznak */
@media (min-aspect-ratio:1/1){
  html.from-service::before{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;background:url(../img/homlokzat-vissza.jpg) center/cover no-repeat,url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gAQTGF2YzYwLjMxLjEwMgD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAkAEADASIAAhEBAxEB/8QAGwAAAQUBAQAAAAAAAAAAAAAAAgADBAUGAQf/xAAxEAACAQMCAwUFCQAAAAAAAAABAgMABBEFEiExQQYTFVFhBxYicdEUM0JScoGRkrH/xAAXAQADAQAAAAAAAAAAAAAAAAABAgMA/8QAGxEAAgIDAQAAAAAAAAAAAAAAAAECEQMhMRL/2gAMAwEAAhEDEQA/ANZrV1fWGnG80+1S5K8Wj3HJHmMVjPfzWQ+V0RR6bzWj7H6wl3bNBLOC6gBEbniqiSId65K/iP8AtRhk9rRZqiMe3mtEY8DjOfNzRJ291tQR4JFj9ZqTFtjcNsDY6GjndZnB7pUwOSinti6Ivv8Aa6cDwOI/NzRWHtM1COWQXWiOycgIieB/enti+Qo7eaBEINqhOCMms9mTOr7TZFbI0K5/uPpWt0+9n1HSlvprZ7ZpBkRFskD1rJWyK17CxRc714AetbTWtR8N0ySdVBkA+GMtjNQyZPDQ8VZ5Ho2pvpswnVgJOvr6VeospJd5iV4uFwOGeNFH2d06IAC1V8cQXYmguppbclY7J5hyOAQMfOlxx83YXekPqY9tuVBBl35wfKug5IqDLqM0MCN4co7rOMMfhzzp7TJJb+IymPu1BwvHOarF0tiuN8HonDmUZ+7k2c+lV/24rc3Ebsu2KNnGemBkVcG2Vd3dRBC7bmIzxNAtpCCxeBGLKVYnPEHnSt6HjGm7IttOz2CXIfLNHvBHQ1Uaxrs2qCOSS54INpx6da0cVnEFSBY1WIDaEGeVRbvsfpTg92skefyv9alljGbVjRUknRbHiedA6h0IblSpVQJmu0MjJdJaqdsW0MQOprRW0SQW6JGMKqgAUqVZ8AgyePzrmc8T5UqVAIUY+IU+xOD/ABSpUr6FcP/Z) center/cover no-repeat var(--r-brown);animation:r181cover-safe 0s linear 3.5s forwards}
  html.from-service.settle::before{opacity:0;transition:opacity .45s ease-out}
  html.from-service.settle .brand,html.from-service.settle .services{transition-duration:.4s}
}
.scene.walking .hot{pointer-events:none;background:transparent;box-shadow:none}
.scene.walking .hot::before{animation:none;opacity:0}
.scene.walking .skip{opacity:1;pointer-events:auto}
.scene.playing .walk{opacity:1}
.scene.reveal .room,.scene.reveal .shade{opacity:1}
.scene.reveal .skip{opacity:0;transition:opacity .2s}
.scene.veiled .veil{opacity:1}

/* ---- álló / négyzetes képernyő: kép felül, alatta a szolgáltatások listája ---- */
@media (max-aspect-ratio:1/1){
  body{height:auto}
  .scene{position:relative;inset:auto;min-height:100dvh;overflow:visible;display:flex;flex-direction:column;padding-bottom:28px}
  .stage{position:relative;left:auto;top:auto;transform:none;width:100%;order:2}
  .stage::after{background:radial-gradient(ellipse at 50% 55%,transparent 50%,rgba(6,5,4,.4) 100%)}
  .scrim,.tag{display:none}
  .brand{position:static;order:1;padding:26px var(--gx) 18px;text-align:left}
  .brand .num{font-size:clamp(64px,22vw,104px)}
  .brand .addr{font-size:10px;margin-top:12px}
  .services{position:static;order:3;padding:10px var(--gx) 0}
  .services ul{display:grid}
  .services li+li::before{display:none}
  .services li{border-top:1px solid rgba(244,239,230,.18)}
  .svc{width:100%;padding:17px 0}
  .svc b{font-size:12px}
  .skip{position:fixed;bottom:max(18px,env(safe-area-inset-bottom,0px))}
  .scene.walking .brand,.scene.walking .services{opacity:.15}
  .scene.walking .stage{position:fixed;left:0;top:0;transform:none;width:100%;height:100%;aspect-ratio:auto;z-index:1}
  .scene.walking .plate,.scene.walking .walk{object-position:72% 50%}
  .scene.playing .walk{object-position:50% 50%;transition:opacity .25s linear,object-position 2.7s ease-in-out}
}
@media (hover:none){.tag{display:none}}
@media (prefers-reduced-motion:reduce){
  .hot.buffalo::before,.hot.ink::before,.hot.pplashes::before{animation:none}
  .veil,.walk,.room,.shade,.tag,.brand,.services,.toast,html.from-service.settle::before{transition-duration:.01s}
}

/* ---- Just One Ink: saját videó, belső kép, árnyékolás, álló kép-kivágás és visszaérkező fedőkép (a Buffalo-értékek változatlanok) ---- */
.walk.ink,.room.ink{visibility:hidden}
.scene[data-svc=ink] .walk.ink,.scene[data-svc=ink] .room.ink{visibility:visible}
.scene[data-svc=ink] .walk:not(.ink),.scene[data-svc=ink] .room:not(.ink){visibility:hidden}
.scene[data-svc=ink] .shade{background:var(--ink-room-shade)}
@media (max-aspect-ratio:1/1){
  .scene[data-svc=ink].walking .plate,.scene[data-svc=ink].walking .walk{object-position:29% 50%}
  .scene[data-svc=ink].playing .walk{object-position:50% 50%}
}
@media (min-aspect-ratio:1/1){
  html.from-service.from-ink::before{background:url(../img/homlokzat-vissza-ink.jpg) center/cover no-repeat}
}

/* ---- pplashes: oldalsó bejárat (a jobb szélen), videó nélkül; belső kép, árnyékolás, visszaérkező fedőkép ---- */
.room.pplashes{visibility:hidden}
.scene[data-svc=pplashes] .room.pplashes{visibility:visible}
.scene[data-svc=pplashes] .walk,.scene[data-svc=pplashes] .room:not(.pplashes){visibility:hidden}
.scene[data-svc=pplashes] .shade{background:var(--pplashes-room-shade)}
/* a bejárat a kép szélén van, a feliratot befelé igazítjuk, és mindig látszik (nyíl az oldalsó ajtó felé) */
/* nincs kiemelt téglalap és pont: a homlokzaton nincs ajtó ehhez, csak a nyíl és a felirat jelzi az oldalsó bejárat irányát */
.hot.pplashes:hover,.hot.pplashes:focus-visible{background:none;box-shadow:none}
.hot.pplashes::before,.hot.pplashes .tag::after{display:none}
.hot.pplashes .tag{left:auto;right:0;top:50%;bottom:auto;transform:translateY(-50%);text-align:right;opacity:1;text-shadow:0 1px 14px rgba(6,5,4,.7)}
.hot.pplashes .tag i{transition:transform .3s}
.hot.pplashes:hover .tag i,.hot.pplashes:focus-visible .tag i{transform:translateX(.4vw)}
.scene.walking .hot.pplashes .tag{opacity:0}
.hot.pplashes .tag{padding:clamp(8px,.9vw,14px) clamp(10px,1.1vw,18px);background:rgba(14,10,8,.58);border:1px solid rgba(244,239,230,.28);text-shadow:none}
.hot.pplashes .tag b{font-size:clamp(10px,.9vw,13px)}
.hot.pplashes .tag i{font-size:clamp(10px,.86vw,12px);color:var(--r-cream)}
@media (min-aspect-ratio:1/1){
  html.from-service.from-pplashes::before{background:url(../img/homlokzat.jpg) center/cover no-repeat}
}