/* ==========================================================================
   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);
}

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;
}

.sw-copy__body {
  font-family: var(--font-body);
  /* 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;
  line-height: var(--lh-body);
  color: var(--text-on-media);
  /* Source Serif ima tanji poteg od sansa; preko osvetljenog trotoara se gubi.
     Svetlija boja + gušća senka u boji pozadine, bez diranja hijerarhije —
     naslov je i dalje čisto beo, pasus za nijansu tamniji. */
  text-shadow: 0 1px 14px var(--sw-bg), 0 0 6px var(--sw-bg), 0 0 2px var(--sw-bg);
}

/* č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);
}

/* ---- č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) {
  .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;
  }
}