/* R181: közös réteg. Minden aloldal (főoldal, /barber/, később /ink/, /shop/ ...) ezt tölti be. */
/* Saját tárhelyű betűk: nincs külső betűkérés, nincs renderblokkoló stíluslap, nincs betűváltási villanás */
@font-face{font-family:"R181 Mark";font-weight:800;font-style:normal;font-display:block;src:url(../fonts/archivo-mark.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:200 800;font-style:normal;font-display:swap;src:url(../fonts/manrope-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-weight:200 800;font-style:normal;font-display:swap;src:url(../fonts/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* nincs cross-document view transition: a fedőkép-technika önmagában tökéletesen folytonos, a VT csak extra átúszást és villogást adott */
:root{
  --r-brown:#1d140f;
  --r-ink:#17110d;
  --r-cream:#f4efe6;
  --r-gold:#e6d3b0;
  --r-hair:rgba(244,239,230,.3);
  /* A "belső tér" árnyékolása: ez a főoldal átmenetében, a kilépő rétegben és a Buffalo hero-jában is pontosan ugyanaz. */
  --r-room-shade:linear-gradient(90deg,rgba(20,13,9,.76),rgba(20,13,9,.46) 55%,rgba(20,13,9,.6)),linear-gradient(180deg,rgba(20,13,9,.48),rgba(20,13,9,.2) 45%,#1d140f);
  /* Just One Ink: a szoba tárgyai a menü, ezért a kép világosabb marad. Ugyanez a főoldalon, a kilépő rétegben és az Ink hero-ban. */
  --ink-room-shade:linear-gradient(180deg,rgba(12,9,7,.62),rgba(12,9,7,.08) 30%,rgba(12,9,7,.08) 58%,rgba(12,9,7,.86));
  /* pplashes: meleg, világos szoba, a hero és az átvezetés ugyanazt az árnyékolást kapja */
  --pplashes-room-shade:linear-gradient(90deg,rgba(31,19,22,.62),rgba(31,19,22,.3) 46%,rgba(31,19,22,.04)),linear-gradient(180deg,rgba(31,19,22,.5),rgba(31,19,22,.08) 30%,rgba(31,19,22,.18) 55%,rgba(31,19,22,.84));
  --r-font:"Manrope","Helvetica Neue",Arial,sans-serif;
  --r-mark:"R181 Mark","Arial Black",Impact,sans-serif;
}
html{background:var(--r-brown)}

/* Érkezés egy szolgáltatásba (a szolgáltatás oldala a saját belső képét a html.arrive::before background-image-ével adja, mert az url() a deklaráló stíluslaphoz képest oldódik fel): az első festéstől a főoldal utolsó képkockájával azonos kép takarja a lapot (--r-room + közös árnyékolás),
   majd amint a valódi háttér dekódolva van, feloldódik, és csak ezután úsznak be a tartalmak (html.go). */
html.arrive::before{content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:1;animation:r181cover-safe 0s linear 3.5s forwards}
html.arrive.go::before{opacity:0;transition:opacity .75s cubic-bezier(.4,0,.2,1)}
@keyframes r181cover-safe{to{opacity:0;visibility:hidden}}

/* Kilépő réteg egy szolgáltatás-oldalról vissza az épületre (a r181.js építi fel) */
#r181out{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none}
#r181out .rb,#r181out .rv,#r181out .rm,#r181out .rs{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
#r181out .rm,#r181out .rv{object-fit:cover}
#r181out .rs{background:var(--r-room-shade)}
[data-r181-service=ink] #r181out .rs{background:var(--ink-room-shade)}
[data-r181-service=pplashes] #r181out .rs{background:var(--pplashes-room-shade)}
#r181out .rb{opacity:0;background:var(--r-brown);transition:opacity .16s ease-out}
#r181out .rv{opacity:0;transition:opacity .16s ease-out}
#r181out.on{visibility:visible;pointer-events:auto}
#r181out.on .rb{opacity:1}
#r181out.go .rv{opacity:1}
@media (max-aspect-ratio:1/1){
  #r181out .rv{object-position:50% 50%}
  #r181out.go .rv{object-position:72% 50%;transition:opacity .2s ease-out,object-position 1.2s ease-in-out}
  [data-r181-service=ink] #r181out.go .rv{object-position:29% 50%}
  [data-r181-service=pplashes] #r181out.go .rv{object-position:96% 50%}
}
@media (prefers-reduced-motion:reduce){html.arrive.go::before{transition-duration:.01s}::view-transition-group(root){animation-duration:.01s}html.leaving *{animation:none!important}}