/* ============================================================
   Komponente: viewfinder, HUD, navigacija, gumbi, hero, ekspozicija
   ============================================================ */

/* ---------- 0. Zastor -----------------------------------------------------
   Blenda koja se otvara. Rupa u maski raste iz sredine dok se ne pojede
   cijeli zastor — isti mehanizam kojim se otvara i sve ostalo na stranici,
   samo u obliku otvora objektiva umjesto proreza.

   Postoji samo pod .js: bez skripte se nikad ne pojavi, pa promašena
   skripta ne može ostaviti stranicu zaklonjenu. Uz to ima i tvrdi rok
   u skripti — nakon njega se otvara bez obzira na to je li sve stiglo. */

.loader { display: none; }

.js .loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  /* U mirovanju je puna ploha, bez gradijenta. Gradijent s dva stopa na
     istoj nuli je degeneriran i Chrome ga prikaže kao otvorenu rupu —
     zato otvor postoji tek dok traje otvaranje. */
  background: var(--ink-900);
  --hole: 0%;
}
.js .loader.is-open {
  background: radial-gradient(circle at 50% 50%,
      transparent var(--hole), var(--ink-900) calc(var(--hole) + 7%));
}
.js .loader.is-done { display: none; }

.loader__inner {
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  transition: opacity 420ms var(--ease-out), transform 620ms var(--ease-shutter);
}
.loader.is-open .loader__inner { opacity: 0; transform: scale(1.06); }

.loader__logo {
  height: clamp(3rem, 7vw, 5rem);
  width: auto;
  animation: loader-in 640ms var(--ease-out) both;
}
@keyframes loader-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Traka pokazuje stvarne međaše — fontove i naslovnu fotografiju.
   Nema izmišljenog postotka. */
.loader__bar {
  width: clamp(7rem, 16vw, 11rem);
  height: 2px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.12);
  overflow: hidden;
}
.loader__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--flare);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .loader__logo { animation: none; }
  .loader__inner { transition: opacity 200ms ease; }
}

/* ---------- 1. Ekspozicija -------------------------------------------------
   Nosivi mehanizam cijele stranice. Sadržaj se ne pojavljuje iz ničega —
   otvara se kroz zatvarač, odozdo prema gore, kao razvijanje snimke.
   Nakon prijelaza JS skida clip-path (.is-settled) da ne reže focus ring,
   sjenu ni hover stanja. */

[data-expose] {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transform: translateY(12px);
  transition:
    clip-path var(--dur-expose) var(--ease-shutter),
    transform var(--dur-expose) var(--ease-shutter),
    opacity   420ms             var(--ease-out);
  transition-delay: var(--expose-delay, 0ms);
  will-change: clip-path, transform, opacity;
}
[data-expose].is-exposed { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }
[data-expose].is-settled { clip-path: none; will-change: auto; }

/* Bez skripte sadržaj mora biti vidljiv. */
.no-js [data-expose] { clip-path: none; opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-expose] {
    clip-path: none;
    transform: none;
    transition: opacity 260ms ease;
  }
}

/* ---------- 2. Viewfinder + HUD -------------------------------------------
   Tiho. 10px mono, niska prozirnost, bez pulsiranja — ništa se ne miče
   samo od sebe; timecode se mijenja isključivo dok korisnik skrola. */

.viewfinder {
  position: fixed;
  inset: 0;
  z-index: var(--z-hud);
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-out) 400ms;
}
.is-loaded .viewfinder { opacity: 1; }

.viewfinder__corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--line-strong);
}
.viewfinder__corner--tl { top: 14px;    left: 14px;  border-right: 0; border-bottom: 0; }
.viewfinder__corner--tr { top: 14px;    right: 14px; border-left: 0;  border-bottom: 0; }
.viewfinder__corner--bl { bottom: 14px; left: 14px;  border-right: 0; border-top: 0; }
.viewfinder__corner--br { bottom: 14px; right: 14px; border-left: 0;  border-top: 0; }

.hud {
  position: fixed;
  left: 18px;
  bottom: 16px;
  z-index: var(--z-hud);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0;
  transition: opacity 600ms var(--ease-out) 500ms;
  /* Tanka podloga: HUD prelazi i preko sekcija sa slikom i videom,
     gdje bi ga sama boja teksta izgubila. */
  padding: 0.3rem 0.6rem;
  border-radius: 7px;
  background: rgb(11 13 20 / 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.is-loaded .hud { opacity: 1; }

.hud__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--flare-2);
  flex: none;
}
.hud__tc { color: var(--text-2); font-variant-numeric: tabular-nums; }
.hud__sep { color: var(--line-strong); }
.hud__section { min-width: 7ch; }

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .viewfinder, .hud { display: none; }
}

/* ---------- 3. Navigacija --------------------------------------------------
   Prozirni sloj kroz koji sadržaj klizi, a ne neprozirna traka koja
   trajno pojede vrh ekrana. Materijalizira se tek kad ima što prekriti. */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  --nav-bg: 0;
  background: rgb(11 13 20 / calc(var(--nav-bg) * 0.72));
  backdrop-filter: blur(calc(var(--nav-bg) * 18px)) saturate(calc(100% + var(--nav-bg) * 60%));
  -webkit-backdrop-filter: blur(calc(var(--nav-bg) * 18px)) saturate(calc(100% + var(--nav-bg) * 60%));
  transition: background 300ms var(--ease-out), backdrop-filter 300ms var(--ease-out);
}
.nav.is-stuck { --nav-bg: 1; }

/* Rub materijala: svjetlo koje hvata gornju ivicu, a ne 1px border. */
.nav::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  opacity: var(--nav-bg);
  transition: opacity 300ms var(--ease-out);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  height: 4.5rem;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.6vw, 0.5rem);
  margin-inline: auto;
}
.nav__link {
  position: relative;
  padding: 0.5rem 0.75rem;
  font-size: var(--step--1);
  color: var(--text-2);
  border-radius: 8px;
  transition: color 180ms ease, transform var(--dur-press) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.75rem; right: 0.75rem; bottom: 0.3rem;
  height: 1px;
  background: var(--flare);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
.nav__link[aria-current="true"] { color: var(--text); }
.nav__link[aria-current="true"]::after { transform: scaleX(1); }
.nav__link:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--text); }
  .nav__link:hover::after { transform: scaleX(1); }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .lang { margin-left: auto; }
}

/* ---------- 4. Znak (logotip) ---------------------------------------------
   Isporučeni je logotip u punoj bravi 832×264; prikazuje se najviše na
   44 px visine, dakle uvijek s rezervom za zaslone visoke gustoće.
   Omjer je fiksan atributima width/height pa se raspored ne pomiče dok
   se slika učitava. */

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  transition: transform var(--dur-press) var(--ease-out), opacity 200ms ease;
}
.brand:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .brand:hover { opacity: 0.85; }
}
.brand__img {
  height: clamp(2.125rem, 2.8vw, 2.75rem);
  width: auto;
}

/* ---------- 5. Gumbi -------------------------------------------------------
   Svaki pritisak dobiva odgovor u 120ms. Bez toga sučelje ne sluša. */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.375rem;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 550;
  letter-spacing: -0.005em;
  white-space: nowrap;
  isolation: isolate;
  transition: transform var(--dur-press) var(--ease-out),
              border-color 200ms ease,
              color 200ms ease;
}
.btn:active { transform: scale(0.97); }

.btn--flare { color: #fff; background: var(--flare); }
.btn--flare::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, #ffb45c 0%, #ff5c7e 52%, #e246bd 100%);
  opacity: 0;
  z-index: -1;
  transition: opacity 220ms ease;
}
.btn--ghost {
  color: var(--text);
  border: 1px solid var(--line-mid);
  background: rgb(255 255 255 / 0.03);
}
.btn--sm { padding: 0.55rem 0.95rem; font-size: 0.8125rem; }

@media (hover: hover) and (pointer: fine) {
  .btn--flare:hover::after { opacity: 1; }
  .btn--ghost:hover { border-color: var(--line-strong); background: rgb(255 255 255 / 0.06); }
}

.btn__arrow { transition: transform 260ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__arrow { transform: translateX(3px); }
}

/* ---------- 6. Prekidač jezika --------------------------------------------
   Prijelaz boje riješen clip-pathom preko duplikata liste: nijedna
   kombinacija trajanja pojedinačnih color prijelaza ne daje čist rezultat. */

.lang {
  position: relative;
  display: flex;
  flex: none;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.03);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}
.lang__btn {
  position: relative;
  z-index: 1;
  padding: 0.3rem 0.6rem;
  min-height: 26px;
  border-radius: 999px;
  color: var(--text-3);
  transition: color 220ms ease, transform var(--dur-press) var(--ease-out);
}
.lang__btn:active { transform: scale(0.94); }
.lang__btn[aria-pressed="true"] { color: #fff; }
.lang__thumb {
  position: absolute;
  top: 3px; bottom: 3px;
  border-radius: 999px;
  background: var(--flare);
  transition: transform 320ms var(--ease-out), width 320ms var(--ease-out);
  z-index: 0;
}

/* ---------- 7. Izbornik na mobitelu ----------------------------------------
   Otvara se iz gumba koji ga je pozvao, ne iz sredine ekrana. */

.nav__burger {
  display: none;
  flex: none;
  width: 40px; height: 40px;
  flex-direction: column;      /* crtice idu jedna ispod druge */
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: transform var(--dur-press) var(--ease-out), border-color 200ms ease;
}
.nav__burger:active { transform: scale(0.94); }
.nav__burger span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--dur-menu) var(--ease-out), opacity 140ms ease;
}
.nav__burger span + span { margin-top: 4px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 860px) { .nav__burger { display: flex; } }

.menu {
  position: fixed;
  top: 4.75rem;
  right: var(--gutter);
  left: var(--gutter);
  z-index: var(--z-menu);
  padding: 0.5rem;
  border: 1px solid var(--line-mid);
  border-radius: var(--radius-lg);
  background: rgb(20 23 36 / 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.7);
  transform-origin: top right;      /* iz gumba, ne iz sredine */
  transform: scale(0.96) translateY(-6px);
  opacity: 0;
  filter: blur(3px);
  visibility: hidden;
  transition:
    transform  var(--dur-menu) var(--ease-out),
    opacity    var(--dur-menu) var(--ease-out),
    filter     var(--dur-menu) var(--ease-out),
    visibility 0s linear var(--dur-menu);
}
.menu.is-open {
  transform: none;
  opacity: 1;
  filter: blur(0);
  visibility: visible;
  transition-delay: 0s;
}
.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-radius: 12px;
  font-size: var(--step-0);
  transition: background 160ms ease, transform var(--dur-press) var(--ease-out);
}
.menu__link:active { transform: scale(0.98); }
/* Samo redni broj nosi mono stil — oznaka ostaje običan tekst. */
.menu__link span:last-child {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

/* ---------- 8. Hero --------------------------------------------------------
   Zatvarač se otvara jednom, pri učitavanju: prorez se širi iz sredine
   prema gore i dolje, kao fokalna ravnina. Rijetko se vidi — smije trajati. */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: 7rem;
  padding-bottom: clamp(3.5rem, 9vh, 6rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__frame {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* Zatvorena početna stanja postoje samo uz skriptu. Bez nje se nikad ne bi
   otvorila, pa bi naslovna fotografija ostala zarezana u usku traku. */
.js .hero__frame {
  clip-path: inset(46.5% 0 46.5% 0);
  transition: clip-path 1000ms var(--ease-shutter) 100ms;
}
.is-loaded .hero__frame { clip-path: inset(0 0 0 0); }

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.js .hero__media {
  transform: scale(1.06);
  transition: transform 1600ms var(--ease-shutter) 100ms;
}
.is-loaded .hero__media { transform: scale(1); }

/* Vinjeta je podloga za tekst, ne ukras. Tri sloja, svaki ima zadatak:
   lijevi stupac dobiva stalan tamni krevet za naslov, vrh štiti navigaciju
   dok je još prozirna, dno spaja kadar sa sljedećom sekcijom. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgb(11 13 20 / 0.88) 0%, rgb(11 13 20 / 0.55) 40%, rgb(11 13 20 / 0.1) 72%),
    linear-gradient(to bottom, rgb(11 13 20 / 0.78) 0%, transparent 18%),
    linear-gradient(to top, var(--ink-900) 0%, rgb(11 13 20 / 0.25) 40%, transparent 70%);
}

.hero__inner { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); width: 100%; }

/* Nad fotografijom sitni tekst treba više kontrasta i malo veću težinu —
   ista siva koja radi na plohi ovdje nestane. */
.hero .u-eyebrow { color: var(--text-2); font-weight: 500; }
.hero__meta { color: var(--text-2); }
.hero h1 { max-width: 15ch; }
.hero__lede { max-width: 44ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  /* Desno poravnato: naslov drži gornji lijevi kut, popis usluga donji
     desni — pogled ide dijagonalom umjesto da se sve gomila uz lijevi rub. */
  justify-content: flex-end;
  gap: 0.5rem 1.75rem;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(0.5rem, 2vw, 1rem);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hero__meta b { color: var(--text-2); font-weight: 500; }

@media (max-width: 48rem) {
  /* Popis se prelama u više redova — desno poravnat prelomljen tekst je
     teži za čitanje, pa se vraća uz lijevi rub. */
  .hero__meta { justify-content: flex-start; }

  /* Vodoravni gradijent ovdje ne pomaže: u okomitom kadru cijela širina
     je "lijevi stupac". Tekst se brani odozdo. */
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgb(11 13 20 / 0.72) 0%, transparent 22%),
      linear-gradient(to top, var(--ink-900) 12%, rgb(11 13 20 / 0.82) 42%,
                      rgb(11 13 20 / 0.35) 68%, transparent 88%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__frame { clip-path: none; transition: none; }
  .hero__media { transform: none; transition: none; }
}

/* ---------- 9. Dodirne mete -----------------------------------------------
   Prst nije pokazivač. Na dodiru sve mete idu na najmanje 44 px — vizualna
   veličina ostaje ista, raste samo područje koje hvata dodir.
   Blok stoji na kraju datoteke jer bi ga inače pregazila ranija pravila
   za istu komponentu. */
@media (max-width: 44rem) {
  .lang { padding: 3px; }
  /* Popis poveznica nosi margin-inline:auto i razmiče krajeve. Kad se on
     na uskom ekranu sakrije, prekidač i izbornik ostanu nagurani uz znak
     umjesto uz desni rub — auto margina to vraća. */
  .lang { margin-left: auto; }
  .lang__btn { min-height: 44px; padding-inline: 0.8rem; display: grid; place-items: center; }
  .brand { padding-block: 0.4rem; }
  .nav__burger { width: 44px; height: 44px; }
}