/* ==========================================================================
   KAFANA KUM — opener.css
   Uvodna (intro) animacija: fullscreen slika + tanak loading bar,
   zatim otvaranje slike kao dvokrilnih vrata (3D rotateY).
   Utiče isključivo na intro sloj — ostatak sajta ostaje netaknut.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ZAKLJUČAVANJE SKROLA DOK JE INTRO AKTIVAN
   -------------------------------------------------------------------------- */
html.kum-intro-active,
html.kum-intro-active body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Bez vodoravnog skrola ni u jednom trenutku introa */
html.kum-intro-active {
  overflow-x: hidden;
}

/* Dok intro drži overflow: hidden, scrollbar nestaje i stranica bi se
   proširila za njegovu širinu — pa bi se na kraju introa sve vratilo nazad
   (mali CLS). Zato se ta širina nadoknađuje paddingom, koji js/opener.js
   izmeri i upiše u --kum-scrollbar-width. Na mobilnom i svuda gde je
   scrollbar plutajući izmerena vrednost je 0, pa pravilo nema efekta.
   scrollbar-gutter se namerno NE koristi jer bi rezervisana traka ostala
   kao vidljiv prazan pojas uz desnu ivicu fullscreen introa. */
html.kum-intro-active {
  padding-right: var(--kum-scrollbar-width, 0px);
}

/* --------------------------------------------------------------------------
   2. OSNOVNI SLOJ INTROA
   -------------------------------------------------------------------------- */
.kum-intro {
  /* inset: 0 na fixed elementu = tačno 100vw x 100vh vidljivog viewporta,
     uključujući ispravno ponašanje na mobilnom kada se URL traka skuplja
     (bez poznatog 100vh problema i bez horizontalnog prelivanja). */
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  background-color: #17130f; /* topla tamna podloga — sprečava beli blesak */
  /* 3D dubina za efekat vrata */
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

/* Čim krene otvaranje vrata, podloga introa postaje providna
   da bi se početna stranica videla iza i pored krila. */
.kum-intro.is-opening {
  background-color: transparent;
  transition: background-color 200ms linear;
}

.kum-intro[hidden],
.kum-intro.is-done {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. SLIKA — ZAJEDNIČKA PRAVILA ZA SVE SLOJEVE
   Svi slojevi koriste identično skaliranje (background-size / position),
   pa leva i desna polovina uvek čine jednu neprekinutu sliku.
   -------------------------------------------------------------------------- */
.kum-intro__img,
.kum-intro__fill {
  position: absolute;
  top: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  /* Prva deklaracija je siguran fallback za starije browsere; druga nudi
     AVIF → WebP → PNG, pa moderni browser sam bira najlakši format koji ume
     da prikaže. Vizuelno su sve tri verzije identične. */
  background-image: url("../images/opener/opener.png");
  background-image: image-set(
    url("../images/opener/opener.avif") type("image/avif"),
    url("../images/opener/opener.webp") type("image/webp"),
    url("../images/opener/opener.png") type("image/png")
  );
}

/* Vidljivi sloj sa vrlo blagim overlay-em (gradijent je isključivo vertikalan,
   pa je identičan na obe polovine i ne otkriva spoj). */
.kum-intro__img {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.10)),
    url("../images/opener/opener.png");
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.10)),
    image-set(
      url("../images/opener/opener.avif") type("image/avif"),
      url("../images/opener/opener.webp") type("image/webp"),
      url("../images/opener/opener.png") type("image/png")
    );
  background-size: cover, cover;
  background-position: center center, center center;
}

/* Zamućena ispuna — koristi se samo na uspravnim (portrait) ekranima,
   gde pejzažna slika ne može da pokrije ceo ekran bez sečenja teksta. */
.kum-intro__fill {
  display: none;
  filter: blur(26px) brightness(0.55) saturate(1.05);
  transform: scale(1.18);
}

/* --------------------------------------------------------------------------
   4. POZADINSKA KOPIJA (ANTI-SEAM)
   Ista slika, u punoj širini, stoji ispod vrata. Ako bi na nekom uređaju
   zbog zaokruživanja subpiksela nastala tanka linija između polovina,
   kroz nju se vidi identična slika — spoj je nevidljiv.
   -------------------------------------------------------------------------- */
.kum-intro__backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 550ms ease-out;
}

.kum-intro__backdrop .kum-intro__img,
.kum-intro__backdrop .kum-intro__fill {
  left: 0;
  width: 100%;
}

.kum-intro.is-visible .kum-intro__backdrop {
  opacity: 1;
}

/* Čim krene otvaranje, pozadinska kopija nestaje da bi se videla stranica. */
.kum-intro.is-opening .kum-intro__backdrop {
  opacity: 0;
  transition: opacity 120ms linear;
}

/* --------------------------------------------------------------------------
   5. DVOKRILNA VRATA
   -------------------------------------------------------------------------- */
.kum-intro__doors {
  position: absolute;
  inset: 0;
  display: flex;
  transform-style: preserve-3d;
}

.kum-intro__door {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  transition:
    opacity 550ms ease-out,
    transform 1500ms cubic-bezier(0.65, 0, 0.35, 1);
}

.kum-intro.is-visible .kum-intro__door {
  opacity: 1;
}

.kum-intro__door--left {
  transform-origin: left center;
}

.kum-intro__door--right {
  transform-origin: right center;
}

/* Unutar svakog krila slika je široka tačno kao ceo viewport (200% od 50%),
   pa je skaliranje identično na obe strane. Levo krilo prikazuje levu
   polovinu, desno krilo desnu — bez pomeranja i bez dupliranja. */
.kum-intro__door .kum-intro__img,
.kum-intro__door .kum-intro__fill {
  width: 200%;
}

.kum-intro__door--left .kum-intro__img,
.kum-intro__door--left .kum-intro__fill {
  left: 0;
}

.kum-intro__door--right .kum-intro__img,
.kum-intro__door--right .kum-intro__fill {
  right: 0;
}

/* Suptilna senka na unutrašnjim ivicama — pojavljuje se tek pri otvaranju,
   da bi dok su vrata zatvorena slika izgledala potpuno normalno. */
.kum-intro__door::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 450ms ease-out;
}

.kum-intro__door--left::after {
  box-shadow: inset -15px 0 25px rgba(0, 0, 0, 0.15);
}

.kum-intro__door--right::after {
  box-shadow: inset 15px 0 25px rgba(0, 0, 0, 0.15);
}

.kum-intro.is-opening .kum-intro__door::after {
  opacity: 1;
}

.kum-intro.is-opening .kum-intro__door--left {
  transform: rotateY(-100deg);
}

.kum-intro.is-opening .kum-intro__door--right {
  transform: rotateY(100deg);
}

/* --------------------------------------------------------------------------
   6. LOADING BAR — tanak, minimalistički, pri dnu ekrana
   -------------------------------------------------------------------------- */
.kum-intro__bar {
  position: absolute;
  left: 50%;
  bottom: calc(46px + env(safe-area-inset-bottom, 0px));
  width: 200px;
  height: 2px;
  margin-left: -100px; /* centriranje bez transform-a */
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  opacity: 0;
  transition: opacity 450ms ease-out;
}

.kum-intro.is-visible .kum-intro__bar {
  opacity: 1;
}

.kum-intro__bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Punjenje 0% -> 100%, ravnomerno (linearno) */
.kum-intro.is-loading .kum-intro__bar-fill {
  transform: scaleX(1);
  transition: transform 2500ms linear;
}

/* Kratak fade-out čim krene otvaranje vrata */
.kum-intro.is-opening .kum-intro__bar {
  opacity: 0;
  transition: opacity 260ms ease-out;
}

/* --------------------------------------------------------------------------
   7. BLAGO OTKRIVANJE POČETNE STRANICE IZA VRATA
   -------------------------------------------------------------------------- */
html.kum-intro-active #main-content {
  opacity: 0.88;
  transform: scale(1.015);
  transform-origin: 50% 20%;
}

html.kum-intro-active.kum-intro-opening #main-content {
  opacity: 1;
  transform: none;
  transition:
    opacity 1100ms ease-out,
    transform 1400ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* --------------------------------------------------------------------------
   8. USPRAVNI EKRANI (mobilni i tablet portrait)
   Pejzažna slika bi kod „cover“ isekla tekst sa table, zato se tabla
   prikazuje u punoj širini, a ostatak ekrana popunjava zamućena kopija
   iste slike. Obe polovine koriste identične vrednosti — spoj ostaje čist.
   -------------------------------------------------------------------------- */
@media (max-aspect-ratio: 5 / 4) {
  .kum-intro__fill {
    display: block;
  }

  .kum-intro__img {
    background-size: 150% auto, 150% auto;
    background-position: center center, center center;
  }
}

/* Vrlo uski telefoni — tabla malo veća, da tekst ostane čitak */
@media (max-aspect-ratio: 5 / 4) and (max-width: 420px) {
  .kum-intro__img {
    background-size: 156% auto, 156% auto;
  }
}

/* Loading bar na mobilnom: manji i bliže dnu */
@media (max-width: 600px) {
  .kum-intro__bar {
    width: 140px;
    margin-left: -70px;
    bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  }
}

/* Niski pejzažni ekrani (telefon u landscape položaju) */
@media (max-height: 460px) and (orientation: landscape) {
  .kum-intro__bar {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    width: 150px;
    margin-left: -75px;
  }
}

/* --------------------------------------------------------------------------
   9. PREFERS-REDUCED-MOTION — bez 3D vrata, samo mirno gašenje
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kum-intro {
    transition: opacity 500ms ease-out;
  }

  .kum-intro__door {
    transition: opacity 350ms ease-out;
    will-change: opacity;
  }

  .kum-intro.is-loading .kum-intro__bar-fill {
    transition: transform 900ms linear;
  }

  .kum-intro.is-opening {
    opacity: 0;
    background-color: #17130f;
  }

  .kum-intro.is-opening .kum-intro__door--left,
  .kum-intro.is-opening .kum-intro__door--right {
    transform: none;
  }

  .kum-intro.is-opening .kum-intro__door::after {
    opacity: 0;
  }

  .kum-intro.is-opening .kum-intro__backdrop {
    opacity: 1;
    transition: none;
  }

  html.kum-intro-active #main-content {
    opacity: 1;
    transform: none;
  }

  html.kum-intro-active.kum-intro-opening #main-content {
    transition: none;
  }
}