/* ==========================================================================
   Dušan Barbershop — 1:1 recreation of the reference barbershop layout system.
   Vanilla HTML/CSS/JS. Colours, spacing, grid, typography and interactions
   reproduce the original; branding/content/media/languages are Dušan's.
   ========================================================================== */

:root {
  --bg: #1c1c1c;
  --red: #eb1d1d;
  --white: #fff;
  --grey: #8d8d8d;
  --line: hsla(0, 0%, 100%, 0.12);
  --pad: 32px;           /* horizontal frame padding (responsive) */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background-color: var(--bg);
  font-family: 'Gotham Pro', Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* hide scrollbar (site is a full-screen one-pager) */
body.no-scroll { overflow: hidden; }
body { -ms-overflow-style: none; scrollbar-width: none; }
body::-webkit-scrollbar { display: none; }

img { max-width: 100%; vertical-align: middle; display: inline-block; border: 0; }
a { text-decoration: none; color: inherit; }
h1 { margin: 0; }

/* ==========================================================================
   Custom cursor
   ========================================================================== */
.cursor-wrapper {
  position: fixed; left: 0; top: 0; z-index: 100;
  display: flex; justify-content: center; align-items: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot {
  width: 7px; height: 7px; border-radius: 200px; background-color: var(--white);
}
.cursor-circle {
  position: absolute; width: 100px; height: 100px;
  border: 1px solid var(--line); border-radius: 200px;
  transition: width .3s ease, height .3s ease, background-color .3s ease, opacity .3s ease;
}
.cursor-wrapper.hover .cursor-circle { width: 60px; height: 60px; background-color: hsla(0,0%,100%,0.05); }

/* ==========================================================================
   Frame guide lines (4 vertical + bottom gradient lines)
   ========================================================================== */
.line-normal-parents {
  position: absolute; left: var(--pad); top: 0; right: var(--pad); bottom: 0;
  z-index: 2; display: flex; height: 100vh;
  justify-content: space-between; align-items: flex-start; pointer-events: none;
}
.line-normal { width: 1px; height: 100vh; background-color: var(--line); }

.line-lite-parents {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 0;
  z-index: 2; display: flex; height: 125px;
  justify-content: space-between; pointer-events: none;
}
.line-lite {
  width: 1px;
  background-image: linear-gradient(180deg, hsla(0,0%,100%,0), hsla(0,0%,100%,0.5));
}

/* ==========================================================================
   Header / navbar
   ========================================================================== */
.navbar-panel-parents {
  position: fixed; left: 0; top: 0; right: 0; z-index: 60;
  display: flex; flex-direction: row; justify-content: center; align-items: flex-start;
  padding: 39px var(--pad) 20px;
  background-color: transparent;
}

.burger-button-parents {
  position: relative; z-index: 55; margin-right: auto; padding: 0; cursor: none;
  background: transparent; border: 0;
}
.burger-button {
  display: grid; align-items: center; align-content: center;
  grid-column-gap: 33px; grid-template-columns: 26px auto;
}
.burger-parents {
  display: grid; grid-row-gap: 10px; grid-template-columns: 1fr;
}
.line-burger-menu {
  width: 26px; height: 2px; background-color: var(--red);
  transition: transform .35s ease, opacity .25s ease;
}
.text-nav-burger {
  margin-top: 1px; color: var(--white);
  font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: 5px;
  text-transform: uppercase;
}

/* burger -> X when menu open */
.menu-open .line-burger-menu:nth-child(1) { transform: translateY(12px) rotate(45deg); }
.menu-open .line-burger-menu:nth-child(2) { opacity: 0; }
.menu-open .line-burger-menu:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }

.logo-header {
  position: absolute; left: 50%; top: 39px; transform: translateX(-50%);
  margin-top: -3px; z-index: 55; cursor: none;
}
.image-logo { height: 80px; width: auto; display: block; }

.contacts-header {
  position: relative; z-index: 60;
  margin-right: -4px; margin-left: auto; padding-top: 5px;
  display: grid; justify-items: end; grid-row-gap: 9px; grid-template-columns: 1fr;
}

/* shared uppercase label text */
.main-text {
  font-family: 'Gotham Pro', Arial, sans-serif;
  color: var(--grey); line-height: 18px; font-weight: 700; letter-spacing: 5px;
  text-transform: uppercase; text-decoration: none; cursor: none;
}
.main-text.white { color: var(--white); }

/* underline hover for text links */
.link-hover-ix { position: relative; }
.link-hover-ix::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0;
  background-color: currentColor; transition: width .3s ease;
}
.link-hover-ix:hover::after { width: 100%; }

/* ==========================================================================
   Hero
   ========================================================================== */
.home-1 { position: relative; }
.video-bg {
  position: relative; display: flex; width: 100%; height: 100vh;
  padding-right: var(--pad); padding-left: var(--pad);
  flex-direction: column; justify-content: center; align-items: center;
  overflow: hidden;
}
.video-bg > video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; height: 100%; object-fit: cover; z-index: -100;
  background-size: cover; background-position: 50% 50%;
}
.video-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* faithful bottom-weighted darkening; slightly reinforced so white text
     stays legible over brighter frames of the hero video */
  background-image: linear-gradient(180deg, rgba(28,28,28,0.38) 0%, rgba(28,28,28,0.28) 38%, #1c1c1c 97%);
}

/* giant looping outlined brand word behind hero */
.loop-text-header {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: flex; overflow: hidden; width: 100%;
  justify-content: flex-start; align-items: center; z-index: 0; pointer-events: none;
}
.text-loop-track { display: flex; white-space: nowrap; animation: loopText 22s linear infinite; }
.text-loop-animation {
  margin-top: -22px; padding-right: 60px;
  font-family: 'Gotham Pro', sans-serif; font-weight: 700;
  font-size: 363px; line-height: 427px; letter-spacing: 60px; text-transform: uppercase;
  color: #fff; opacity: .12;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 1px #ffffff;
}
@keyframes loopText { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.center-header-div {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 5; display: grid; width: 90%;
  justify-content: center; justify-items: center; grid-row-gap: 26px;
  grid-template-columns: 1fr; text-align: center;
}
/* soft scrim behind the headline only — keeps the rest of the video vibrant
   while guaranteeing the white text stays legible over bright frames */
.center-header-div::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 150%; height: 190%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(28,28,28,.6) 0%, rgba(28,28,28,.34) 46%, rgba(28,28,28,0) 72%);
}
.logo-lettets {
  font-family: 'Gotham Pro', sans-serif; color: var(--white);
  font-size: 16px; font-weight: 700; letter-spacing: 12px; text-transform: uppercase;
  padding-left: 12px;
  text-shadow: 0 0 26px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.5);
}
.hero-h1 {
  margin-left: 10px;
  font-family: 'Gotham Pro', sans-serif; color: var(--white);
  font-size: 49px; line-height: 69px; font-weight: 700; letter-spacing: 14px;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(0,0,0,.5), 0 3px 14px rgba(0,0,0,.45);
}
.h1-span { color: var(--red); }

/* booking button (red underline; white line fills on hover) */
.button-booking {
  position: absolute; left: 50%; bottom: 33px; transform: translateX(-50%);
  z-index: 5; display: flex; flex-direction: column; align-items: center;
  text-decoration: none; cursor: none;
}
.button-booking .main-text { position: relative; z-index: 2; }
.line-button-booking {
  position: relative; width: 100%; height: 2px; margin-top: 10px; background-color: var(--red);
}
.line-button-booking.white {
  position: absolute; left: 0; bottom: 0; width: 0; margin-top: 0;
  background-color: var(--white); transition: width .35s ease;
}
.button-booking:hover .line-button-booking.white { width: 100%; }
.button-booking.mobile { display: none; }

/* The hero CTA carries both .button-booking (which centres it with
   translateX(-50%)) and .reveal-up (whose translateY animation would otherwise
   overwrite that transform and knock the CTA off the logo's centre axis).
   Combine both transforms so the CTA stays centred on the same axis as the logo
   in every language, before and after the reveal. Scoped away from the mobile
   CTA, which is relative/left-aligned and must not be translateX-centred. */
.button-booking.reveal-up:not(.mobile) { transform: translate(-50%, 40px); }
.is-in .button-booking.reveal-up:not(.mobile) { transform: translate(-50%, 0); }

/* bottom bar: language switcher + social */
.header-down-parents {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 0;
  z-index: 4; display: flex; width: auto;
  justify-content: space-between; align-items: flex-end; padding-bottom: 45px;
}
.left-down-header-div, .right-down-header-div {
  display: grid; grid-row-gap: 14px; grid-template-columns: 1fr;
}
.left-down-header-div { justify-items: start; }
.right-down-header-div { justify-items: end; margin-right: -4px; }

/* language switcher */
.lang-switch a { cursor: none; }
.lang-switch a.active { color: var(--white); }

/* ==========================================================================
   Slide-out menu panel
   ========================================================================== */
.list-menu-parents {
  position: fixed; inset: 0; z-index: 50;
  display: flex; width: 100vw; height: 100vh;
  padding-right: var(--pad); padding-left: var(--pad);
  flex-direction: column; justify-content: center; align-items: center;
  background-color: var(--bg);
  /* hidden state — panel fades and its children animate out first, then it hides
     (matches the original: children close over ~1s, panel display:none after). */
  opacity: 0; visibility: hidden;
  transition: opacity 300ms ease 700ms, visibility 0s linear 1000ms;
}
.menu-open .list-menu-parents {
  opacity: 1; visibility: visible;
  transition: opacity 400ms ease 0s, visibility 0s;
}

/* section reveal backgrounds (fade in on link hover) */
.bg-link-menu {
  position: absolute; inset: 0; background-position: 50% 50%;
  background-size: cover; background-repeat: no-repeat;
  opacity: 0; transition: opacity .5s ease; z-index: 0;
}
.bg-link-menu.active { opacity: .5; }
.list-menu-parents::before {          /* dark scrim over the revealed bg */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-color: rgba(28,28,28,.45); pointer-events: none;
}

.links-menu-list {
  position: relative; z-index: 5; display: grid;
  justify-content: center; justify-items: center; grid-row-gap: 26px; text-align: center;
}
.link-menu-list {
  font-family: 'Gotham Pro', sans-serif; color: var(--white);
  font-size: 30px; line-height: 50px; font-weight: 700; letter-spacing: 6px;
  text-align: center; text-transform: uppercase; text-decoration: none; cursor: none;
  /* staggered fade-up (opacity + translateY), colour kept instant for hover */
  opacity: 0; transform: translateY(20px);
  transition-property: opacity, transform, color;
  transition-duration: 1000ms, 1500ms, 300ms;
  transition-timing-function: ease, ease, ease;
  transition-delay: 0ms, 0ms, 0ms;
}
/* only the individual link being hovered turns red */
.link-menu-list:hover { color: var(--red); }

/* OPEN: links appear one after another — original stagger 0/300/600/900/900/900 */
.menu-open .link-menu-list { opacity: 1; transform: translateY(0); }
.menu-open .links-menu-list a:nth-child(2) { transition-delay: 300ms, 300ms, 0ms; }
.menu-open .links-menu-list a:nth-child(3) { transition-delay: 600ms, 600ms, 0ms; }
.menu-open .links-menu-list a:nth-child(4),
.menu-open .links-menu-list a:nth-child(5),
.menu-open .links-menu-list a:nth-child(6) { transition-delay: 900ms, 900ms, 0ms; }

.menu-down {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 0;
  z-index: 5; display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 45px;
}
.button-booking.menu {
  position: absolute; left: 50%; bottom: 45px; transform: translate(-50%, 40px);
  z-index: 6; display: flex;
  opacity: 0;
  transition: opacity 1000ms ease, transform 1500ms ease;
}

/* the lower part of the popup (booking / language / social) fades up after the
   links — original delays ~1200ms (booking) and ~1500ms (language + social). */
.menu-down .left-down-header-div,
.menu-down .right-down-header-div {
  opacity: 0; transform: translateY(40px);
  transition: opacity 1000ms ease, transform 1500ms ease;
}
.menu-open .button-booking.menu { opacity: 1; transform: translate(-50%, 0); transition-delay: 1200ms; }
.menu-open .menu-down .left-down-header-div { opacity: 1; transform: translateY(0); transition-delay: 1500ms; }
.menu-open .menu-down .right-down-header-div { opacity: 1; transform: translateY(0); transition-delay: 1500ms; }

/* Serbian only, phones (<767px): give the popup CTA enough width so
   "Zakaži termin" stays on one line. Scoped to the Serbian <html lang="sr">
   so desktop and the EN/RU CTAs are unaffected. Height/typography/alignment
   are untouched — only min-width is set. */
@media screen and (max-width: 767px) {
  html[lang="sr"] .button-booking.menu { min-width: 184px; }
}

/* ==========================================================================
   Preloader
   ========================================================================== */
.loading-parents {
  position: fixed; inset: 0; z-index: 101;
  display: flex; justify-content: center; align-items: center;
  padding-bottom: 25px; background-color: var(--bg);
  opacity: 1; transition: opacity .6s ease;
}
/* once the content has faded down, the whole loader fades out to reveal the site */
.loading-parents.gone { opacity: 0; pointer-events: none; }
.loading-parents.hidden { display: none; }

/* solid backdrop, kept behind the logo so it never covers it */
.shirma-load {
  position: absolute; inset: 0; z-index: 0; background-color: var(--bg);
}

/* Fade Up (entrance) / Fade Down (exit) — matches the original preloader IX2:
   content starts translated 40px down and transparent; adding .in fades it UP;
   removing .in lets it fall back DOWN, then .gone fades the whole loader out. */
.preloader-owl,
.image-logo-letters-loading,
.preloader-bar,
.preloader-percent {
  opacity: 0; transform: translateY(40px);
  transition: opacity 1000ms ease, transform 1500ms ease;
}
.loading-parents.in .preloader-owl { opacity: 1; transform: translateY(0); }
.loading-parents.in .image-logo-letters-loading { opacity: 1; transform: translateY(0); transition-delay: 150ms; }
.loading-parents.in .preloader-bar { opacity: 1; transform: translateY(0); transition-delay: 250ms; }
.loading-parents.in .preloader-percent { opacity: 1; transform: translateY(0); transition-delay: 300ms; }

/* logo + wordmark + progress as one centred, aligned column */
.preloader-logo {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.preloader-owl { height: 200px; width: auto; display: block; }

.image-logo-letters-loading {
  margin-top: 26px;
  color: var(--white);
  font-family: 'Gotham Pro', sans-serif; font-weight: 700;
  font-size: 15px; letter-spacing: 8px; text-transform: uppercase; white-space: nowrap;
  text-align: center;
  /* offset the trailing letter-spacing so the glyphs sit dead-centre under the logo */
  padding-left: 8px;
}

/* progress track + fill (width driven by the 0→100% counter in main.js) */
.preloader-bar {
  position: relative; width: 220px; height: 2px; margin-top: 30px;
  background-color: hsla(0,0%,100%,0.15); overflow: hidden;
}
.preloader-bar span {
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background-color: var(--white);
}
.preloader-percent {
  margin-top: 14px;
  color: var(--white);
  font-family: 'Gotham Pro', sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: 4px;
  padding-left: 4px; /* offset trailing letter-spacing to centre */
}

/* Preloader .line-normal animation — exact match to the original Franklin IX2:
   the vertical lines grow in height from 0 to 100vh, anchored at the top,
   easing `ease`, over 2000ms; the ._2-3 middle lines take 2500ms (staggered). */
@keyframes lineNormalGrow { from { height: 0; } to { height: 100vh; } }
.loading-parents .line-normal { animation: lineNormalGrow 2000ms ease both; }
.loading-parents .line-normal._2-3 { animation: lineNormalGrow 2500ms ease both; }

/* Hero .line-normal draw-in — matches original IX2 (height 0→100vh on reveal,
   easing ease, 2000ms; the ._2-3 middle lines 2500ms). The lines are anchored
   at the top of the frame and grow downward when the hero is revealed. */
.video-bg .line-normal { height: 0; }
body.is-in .video-bg .line-normal { height: 100vh; transition: height 2000ms ease; }
body.is-in .video-bg .line-normal._2-3 { transition-duration: 2500ms; }

/* Popup .line-normal — same draw-in as the hero, tied to the menu open/close.
   Open: grow 0→100vh (2000ms / 2500ms). Close: shrink back (600ms / 1250ms). */
.list-menu-parents .line-normal { height: 0; transition: height 600ms ease; }
.list-menu-parents .line-normal._2-3 { transition: height 1250ms ease; }
.menu-open .list-menu-parents .line-normal { height: 100vh; transition: height 2000ms ease; }
.menu-open .list-menu-parents .line-normal._2-3 { height: 100vh; transition: height 2500ms ease; }

/* ==========================================================================
   Entrance animation for hero elements (after preloader)
   ========================================================================== */
.reveal-up { opacity: 0; transform: translateY(40px); }
.is-in .reveal-up { opacity: 1; transform: translateY(0); transition: opacity .8s ease, transform .8s ease; }
.is-in .reveal-up.d1 { transition-delay: .05s; }
.is-in .reveal-up.d2 { transition-delay: .15s; }
.is-in .reveal-up.d3 { transition-delay: .25s; }
.is-in .reveal-up.d4 { transition-delay: .35s; }
.is-in .reveal-up.d5 { transition-delay: .45s; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (min-width: 1280px) {
  :root { --pad: 42px; }
  .navbar-panel-parents { padding-top: 49px; }
  .logo-header { top: 49px; }
  .header-down-parents, .menu-down { padding-bottom: 53px; }
  .button-booking { bottom: 41px; }
  .button-booking.menu { bottom: 53px; }
  .left-down-header-div { grid-column-gap: 53px; grid-template-columns: 1fr 1fr 1fr; }
  .right-down-header-div { grid-column-gap: 53px; grid-template-columns: 1fr 1fr; }
  .logo-lettets { font-size: 20px; letter-spacing: 16px; }
  .hero-h1 { margin-left: 15px; font-size: 52px; line-height: 72px; letter-spacing: 17px; }
  .text-loop-animation { margin-top: -25px; font-size: 398px; line-height: 512px; letter-spacing: 69px; }
  .preloader-logo img { height: 240px; }
}
@media screen and (min-width: 1440px) {
  .hero-h1 { margin-left: 23px; font-size: 59px; line-height: 81px; letter-spacing: 20px; }
  .logo-lettets { font-size: 22px; letter-spacing: 18px; }
  .text-loop-animation { font-size: 434px; line-height: 558px; letter-spacing: 75px; }
  .link-menu-list { font-size: 34px; line-height: 54px; letter-spacing: 7px; }
}
@media screen and (min-width: 1920px) {
  :root { --pad: 72px; }
  .navbar-panel-parents { padding-top: 56px; }
  .logo-header { top: 56px; }
  .main-text { font-size: 16px; line-height: 20px; letter-spacing: 7px; }
  .text-nav-burger { font-size: 16px; line-height: 20px; letter-spacing: 7px; }
  .header-down-parents, .menu-down { padding-bottom: 65px; }
  .left-down-header-div, .right-down-header-div { grid-column-gap: 63px; }
  .hero-h1 { margin-left: 26px; font-size: 70px; line-height: 96px; letter-spacing: 24px; }
  .logo-lettets { font-size: 26px; letter-spacing: 22px; }
  .button-booking { bottom: 53px; }
  .button-booking.menu { bottom: 65px; }
  .text-loop-animation { margin-top: -36px; font-size: 502px; line-height: 645px; letter-spacing: 87px; }
  .links-menu-list { grid-row-gap: 29px; }
  .link-menu-list { font-size: 40px; line-height: 60px; letter-spacing: 10px; }
  .preloader-logo img { height: 280px; }
}

/* tablet & down: disable custom cursor, thin the grid to 2 lines */
@media screen and (max-width: 991px) {
  :root { --pad: 30px; }
  body { cursor: default; }
  .cursor-wrapper { display: none; }
  .burger-button-parents, .logo-header, .main-text, .button-booking,
  .link-menu-list, .lang-switch a { cursor: default; }
  .line-normal._2-3, .line-lite._2-3 { display: none; }
  .bg-link-menu { display: none; }
  .hero-h1 { font-size: 39px; line-height: 54px; letter-spacing: 11px; }
  .text-loop-animation { font-size: 293px; line-height: 377px; letter-spacing: 51px; }
}

/* phone: logo left, burger right, single-column bottom bar, mobile CTA in hero */
@media screen and (max-width: 767px) {
  .navbar-panel-parents { justify-content: flex-start; padding-top: 20px; align-items: center; }
  .logo-header { position: relative; left: 0; top: auto; transform: none; margin-top: 0; order: -1; }
  .image-logo { height: 60px; }
  .burger-button-parents { margin-right: 0; margin-left: auto; }
  .burger-button { flex-direction: row-reverse; display: flex; align-items: center; grid-column-gap: 0; column-gap: 0; }
  .burger-parents { margin-left: 24px; }
  .contacts-header { display: none; }
  .header-down-parents { flex-direction: row-reverse; }
  .left-down-header-div { justify-items: end; grid-row-gap: 18px; }
  .right-down-header-div { justify-items: start; grid-row-gap: 14px; }
  .video-bg { height: 100vh; }
  .center-header-div {
    left: 30px; transform: translateY(-50%); width: 90%;
    justify-content: start; justify-items: start; text-align: left;
  .logo-lettets {padding-left: 0px;}
  }
  .hero-h1 { margin-left: 0; font-size: 34px; line-height: 47px; }
  .button-booking { display: none; }
  .button-booking.mobile { position: relative; left: auto; bottom: auto; transform: none; display: flex; margin-top: 31px; align-items: flex-start; }
  .button-booking.mobile .line-button-booking { max-width: 178px; }
  .text-loop-animation { font-size: 368px; line-height: 473px; letter-spacing: 63px; }
  /* On phones the menu-panel lang/social are hidden (they stay in the hero
     bottom bar); only the centred booking button remains. */
  .menu-down .left-down-header-div,
  .menu-down .right-down-header-div { display: none; }
  .button-booking.menu { bottom: 45px; }
}

@media screen and (max-width: 479px) {
  :root { --pad: 20px; }
  .hero-h1 { font-size: 24px; line-height: 36px; letter-spacing: 6px; }
  .logo-lettets { font-size: 13px; letter-spacing: 8px; }
  .center-header-div { left: 20px; }
  .link-menu-list { font-size: 24px; line-height: 40px; }
  .links-menu-list { grid-row-gap: 22px; }
  .preloader-logo img { height: 150px; }
  .left-down-header-div { grid-row-gap: 19px; }
}