/* ==========================================================================
   Averi — scroll-world site skin
   Bridges the Averi design tokens (brand/tokens/brand-tokens.css) onto the
   scroll engine's own theme variables, then adds the few things the engine
   doesn't own: the logo lockup in its topbar and the CTA pill.
   ========================================================================== */

@import url("../brand/tokens/brand-tokens.css");

/* ---- token bridge -------------------------------------------------------
   The engine reads --sw-*; everything below maps straight onto Averi values
   so there is exactly one source of truth for colour and type.             */
:root,
.sw-root {
  --sw-bg: var(--ink-1000);
  --sw-ink: var(--text-primary);
  --sw-ink-soft: var(--text-secondary);
  --sw-accent: var(--brand-accent);
  --sw-font-display: var(--font-display);
  --sw-font-body: var(--font-body);

  /* Porodica SAMO za tekst scena (v. .sw-copy__body).
     --font-body je Source Serif — tanki serifni potezi preko videa koji se
     menja su najgori mogući izbor za pasus, i to je glavni razlog što se belo
     "utapa" iako izmereni kontrast prolazi. Serif ostaje tamo gde radi: u
     naglašenoj reči naslova (--font-accent).
     Sistemski sans se bira namerno umesto Oswalda: Oswald je uski display i
     na pasusu od četiri rečenice se čita teško. Sistemski stek na iPhone-u
     daje SF Pro — crtan baš za čitanje preko slike — i ne košta ni jedan
     preuzet bajt ni jedan zahtev. */
  --font-copy: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

html {
  background: var(--ink-1000);
}

body {
  margin: 0;
  background: var(--ink-1000);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* ---- brand lockup in the engine's topbar --------------------------------
   The engine emits .sw-brand > .sw-brand__mark + .sw-brand__name.
   Turn the mark into the Averi sparkle and set the name in the display face
   so the pair reads as the real logo rather than plain text.               */
.sw-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text-primary);
}

/* Zvezdica je uklonjena — logotip je samo reč, verzalom. */
.sw-brand__mark { display: none; }

.sw-brand__name {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
}

/* ---- eyebrow, lifted from the brand guide so both pages agree ---------- */
.sw-copy__eyebrow,
.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--sw-accent, var(--brand-accent));
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
}
.sw-copy__eyebrow::before,
.eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ---- naslov: Oswald; naglašena reč u Source Serif kurzivu ---- */
.sw-copy__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
}
.sw-copy__title em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
}

/* ---- podnaslov (01 — Start · 120 €) ------------------------------------
   Ljubičasta na tamnom videu je bila preslaba da se pročita u prolazu. Boja
   se posvetljuje ka beloj i dobija sopstveni sjaj, a ispod nje ide gusta
   tamna senka koja je odvaja od pozadine — bez menjanja hijerarhije. */
.sw-copy__eyebrow {
  color: color-mix(in srgb, var(--brand-accent) 72%, #fff);
  font-size: calc(var(--fs-eyebrow) * 1.08);
  letter-spacing: 0.15em;
  /* Sopstveni sjaj ostaje — on nosi boju i hijerarhiju. Crne senke ispod njega
     svedene su na istu meru kao na ostatku bloka (SLOJ 4), jer podloga sada
     radi posao koji su ranije morale da rade one same. */
  text-shadow:
    0 0 20px color-mix(in srgb, var(--brand-accent) 60%, transparent),
    0 0 8px color-mix(in srgb, var(--brand-accent) 45%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.7),
    0 2px 10px rgba(0, 0, 0, 0.5);
}
.sw-copy__eyebrow::before {
  box-shadow: 0 0 10px currentColor;
}

/* ---- SLOJ 2: tipografija — pravi krivac --------------------------------
   Ranije je ovde stajala puna bela u Source Serifu sa četvorostrukom senkom.
   Senka je bila pokušaj da se popravi pogrešan izbor pisma: tanak serifni
   poteg preko teksture koja se menja nema šta da uhvati oko, pa nikakva
   količina senke ne pomaže — samo zamuti. Zato se menja samo pismo, a senka
   se svodi na dva sloja (v. SLOJ 4).

   Puna bela (#fdfdfd) ide na blago prigušenu (#F4F2F8): čisto belo preko
   video šuma "peva" — treperi po ivicama slova dok se kadar menja. */
.sw-copy__body {
  font-family: var(--font-copy);
  font-weight: 500;
  /* Motor escapuje HTML u copy poljima, pa se pasusi ne mogu poslati kao <p>.
     `pre-line` čini da prelomi reda iz teksta prorade, a višak razmaka i dalje
     kolabira — tako duži tekst diše umesto da bude jedan blok. */
  white-space: pre-line;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  line-height: 1.55;
  letter-spacing: 0.006em;
  color: #f4f2f8;
}

/* Naslov ostaje Oswald (već sans), ali dobija tamnu konturu.
   `paint-order: stroke fill` je ovde ključ: bez njega se obrub crta PREKO
   slova i pojede tanje poteze, pa naslov deluje zamazano. Zato ide iza
   provere — pregledač koji to ne ume ostaje na samoj senci, koja je i dalje
   ispravna, umesto da dobije nagrđen naslov. */
@supports (paint-order: stroke) {
  .sw-copy__title {
    -webkit-text-stroke: 3px rgba(6, 6, 12, 0.32);
    paint-order: stroke fill;
  }
}

/* čipovi ispod teksta — isto */
.sw-copy__tags li {
  text-shadow: 0 1px 10px var(--sw-bg);
}

/* ---- the pill CTA, same component as the brand guide ------------------- */
.sw-topcta,
.sw-copy__cta a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 8px 0 20px;
  border-radius: var(--radius-pill);
  background: var(--brand-accent);
  color: var(--ink-950);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.sw-topcta::after,
.sw-copy__cta a::after {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* arrow-up-right.svg ships as currentColor, which a background image can't
     inherit — so the same path is inlined here with the accent baked in */
  background: var(--ink-950)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A78BFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 16.5 16.5 7.5'/%3E%3Cpath d='M9.25 7.5h7.25v7.25'/%3E%3C/svg%3E")
    center / 15px no-repeat;
}
.sw-topcta:hover,
.sw-copy__cta a:hover {
  background: var(--brand-accent-hover);
  transform: translateY(-1px);
}

/* secondary CTA reads as a ghost pill */
.sw-copy__cta a + a {
  background: transparent;
  color: var(--text-primary);
  border: var(--border-hairline);
}
.sw-copy__cta a + a:hover {
  background: var(--ink-700);
  border-color: var(--ink-400);
}

/* ---- SLOJ 3: podloga ispod bloka, ne samo preliv ------------------------
   Zavesa preko cele strane je preliv u jednom pravcu i lokalno je slaba: tamo
   gde scena ima svetlu traku baš iza rečenice, preliv je već istanjen. Blok
   zato dobija sopstvenu mirnu podlogu koja ide sa njim.

   Radi se pseudo-elementom sa negativnim `inset`, a NE `padding`-om na
   .sw-copy: položaj bloka je mereno podešen (prva scena stoji tako da se
   pasus završi pre natpisa na kućici, v. niže), pa padding koji bi pomerio
   tekst pokvario bi to podešavanje. Ovako podloga naraste oko teksta, a tekst
   ostaje tačno gde je bio.

   Bez `backdrop-filter`: on se preračunava svaki kadar, a ovde se svaki kadar
   ionako crta nova slika — to bi vratilo seckanje koje smo upravo uklonili. */
.sw-copy::before {
  content: "";
  position: absolute;
  /* Levi odmak mora biti MANJI od odmaka bloka od ivice ekrana, inače akcentna
     linija ispadne izvan vidnog polja. Blok stoji na clamp(18px,5vw,64px): na
     telefonu je to ~21px, pa je raniji odmak od 24px gurao liniju na -2.5px i
     podloga je delovala kao da je nema. */
  inset: -22px -18px -24px -13px;
  z-index: -1;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(10, 10, 16, 0.42), rgba(10, 10, 16, 0.82));
  /* levi akcent rub — čita se kao dizajn, ne kao zakrpa */
  box-shadow: inset 2px 0 0 rgba(185, 160, 242, 0.55);
}

/* ---- SLOJ 4: senke — osiguranje, ne glavno rešenje ----------------------
   Postavlja se na blok, pa se nasleđuje na sva slova u njemu; pojedinačna
   pravila po elementu su uklonjena da se senke ne slažu jedna preko druge.
   Prva senka lepi slovo za podlogu, druga pravi mek oreol. Preko 12px zamućenja
   tekst počinje da deluje mutno umesto čitko, pa se tu staje. */
.sw-copy {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.7),
    0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ---- čitljivost teksta preko videa --------------------------------------
   Motor već crta zavesu (.sw-copylayer::before), ali je podešena za mirne
   scene. Naše scene imaju svetlosne trake tačno u pojasu gde stoji tekst —
   violet linija ume da preseče rečenicu. Pojačavamo zavesu, ne menjajući
   njen oblik.                                                              */
.sw-copylayer::before {
  background: linear-gradient(
    90deg,
    var(--sw-bg) 0%,
    color-mix(in srgb, var(--sw-bg) 92%, transparent) 38%,
    color-mix(in srgb, var(--sw-bg) 62%, transparent) 66%,
    transparent 100%
  );
}

@media (max-width: 860px) {
  /* Prva scena: blok se diže sa dna ka sredini, tako da NASLOV stoji iznad
     natpisa AUTODETAILING na kućici, a pasus ispod njega. Ostale scene ostaju
     prikačene za dno — tamo je kadar prazniji pri dnu. */
  /* Prva scena stoji više nego ostale, ali kao JEDNA celina — naslov i pasus
     se ne razdvajaju. Ranije je ovde stajao procep od 21vh da bi natpis na
     kućici pao između njih; blok se time raspadao na dva odvojena teksta, pa
     je procep uklonjen. Podizanjem celog bloka pasus se završi pre natpisa
     (izmereno na vrhu stranice, gde je ovaj tekst pun: natpis je na 43–49%). */
  .sw-copy[data-id="trazenje"] {
    top: 8vh;
    bottom: auto;
  }

  .sw-copylayer::before {
    background: linear-gradient(
      0deg,
      var(--sw-bg) 12%,
      color-mix(in srgb, var(--sw-bg) 88%, transparent) 42%,
      color-mix(in srgb, var(--sw-bg) 45%, transparent) 68%,
      transparent 100%
    );
  }
}

/* broj scene — isto sitan i preko medija */
.sw-copy__num {
  color: var(--text-muted);
  text-shadow: 0 1px 10px var(--sw-bg), 0 0 3px var(--sw-bg);
}

 /* Motor traži težinu 600 na ovim elementima. Ne učitavamo je — Source Serif
   600 je 89 KB za četiri sitna mesta. Prebacujemo ih na 700 koju već imamo. */
.sw-btn,
.sw-route__label {
  font-weight: var(--fw-bold);
}

/* ---- route rail + scroll hint pick up the accent automatically --------- */
.sw-hint {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sw-topcta,
  .sw-copy__cta a {
    transition: none;
  }
}

/* ---- podaci o firmi, u poslednjoj sceni ---------------------------------
   Sitno i tiho: ovo je pravna obaveza i potvrda ozbiljnosti, ne prodajni
   tekst. Ne sme da se takmiči sa brojem telefona iznad sebe. Istu senku
   nosi kao i ostatak teksta, jer stoji preko videa.                        */
.av-firma {
  margin-top: var(--space-5, 22px);
  padding-top: var(--space-4, 16px);
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-body);
  font-size: var(--fs-xs, 0.78rem);
  line-height: 1.45;
  color: var(--text-muted);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.8);
}
.av-firma__ime {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

/* ---- ekran za učitavanje -------------------------------------------------
   Drži ulaz dok se video ne skine. Bez njega posetilac skroluje kroz postere
   i zaključi da sajt ne radi — najgora moguća preporuka za agenciju koja
   prodaje izradu sajtova.                                                   */
/* Zaključavanje skrola NE dira visinu. Ranije je ovde stajalo height:100% na
   html i body — a motor u isto vreme pravi traku visoku devet ekrana. Mešanje
   te dve stvari na iOS-u ume da poremeti ceo kontekst skrolovanja, i to tako da
   se ne oporavi ni kad se zaključavanje skine. Prekrivač je ionako neproziran,
   pa je overflow dovoljan. */
html.av-ucitava {
  overflow: hidden;
}

.av-load {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6, 28px);
  background: var(--ink-1000);
  opacity: 1;
  transition: opacity var(--dur-slow, 600ms) var(--ease-out, ease);
}
.av-load.is-gotov {
  opacity: 0;
  pointer-events: none;
}

.av-load__mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}

.av-load__ime {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.4rem, 12vw, 4.2rem);
  letter-spacing: 0.14em;
  /* verzal sa razmakom vizuelno beži udesno — vraćamo ga u osu */
  text-indent: 0.14em;
  color: var(--text-primary);
  line-height: 1;
}

.av-load__slogan {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-sm, 0.95rem);
  color: var(--text-on-media, #d6d8de);
  letter-spacing: 0.01em;
}

.av-load__traka {
  margin-top: 34px;
  width: min(240px, 62vw);
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text-primary) 16%, transparent);
  overflow: hidden;
}
.av-load__traka i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms var(--ease-out, ease);
}

.av-load__broj {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: var(--fs-xs, 0.8rem);
  letter-spacing: var(--ls-eyebrow, 0.12em);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Dugme se pojavljuje tek posle 5 s — ranije bi zvalo na preskakanje pre nego
   što se uopšte vidi da nešto teče. */
.av-load__preskoci {
  position: absolute;
  bottom: max(28px, env(safe-area-inset-bottom, 0px));
  appearance: none;
  border: var(--border-hairline);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-xs, 0.8rem);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow, 600ms) var(--ease-out, ease);
}
.av-load.nudi-ulaz .av-load__preskoci {
  opacity: 1;
  pointer-events: auto;
}
.av-load__preskoci:hover {
  color: var(--text-primary);
  border-color: var(--ink-400);
}

@media (prefers-reduced-motion: reduce) {
  .av-load,
  .av-load__traka i,
  .av-load__preskoci {
    transition: none;
  }
}