/* Brvnare & kućice iz snova – header + hero. Mobile-first:
   osnova < 768 px, zatim 768 / 901 / 1121 px. */

:root {
  --c-noc: #0E1311;
  --c-krem: #F1E9DC;
  --c-med-svijetli: #E2B57E;
  --c-med: #C8915A;
  --c-pijesak: #D6CCBB;
  --c-kamen: #B9AE9B;
  --c-tamni: #121815;
  --c-suma: #1E2A22;
  --c-staklo: rgba(14, 19, 17, .38);
  --c-linija: rgba(241, 233, 220, .18);

  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter Tight', system-ui, sans-serif;

  --gutter: 20px;
  --container-max: 1328px;

  /* Dijele ih slojevi 0 i 2, da se kuća uvijek poklopi s pozadinom. */
  --hero-pos: 46% 0%;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html.is-menu-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--c-noc);
  color: var(--c-krem);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

p, h1, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { display: block; }

a, button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Povratna informacija na dodir (hover je samo za uređaje koji ga imaju, na kraju fajla). */
a:not(.btn):active { color: var(--c-med-svijetli); }
.btn:active, .round-btn:active { opacity: .82; }


:focus-visible {
  outline: 2px solid var(--c-med-svijetli);
  outline-offset: 3px;
}

.icon-sprite { position: absolute; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

/* Površina za dodir od 44 px za linkove koji su vizuelno niži. */
.tap { position: relative; }
.tap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* ---------- Dugmad ---------- */

.btn {
  display: flex;
  align-items: center;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.btn--primary {
  justify-content: space-between;
  gap: 14px;
  height: 56px;
  padding: 0 6px 0 24px;
  background: var(--c-krem);
  color: var(--c-tamni);
}

.btn__circle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--c-med);
  color: var(--c-tamni);
}

.btn--ghost {
  justify-content: center;
  height: 54px;
  padding: 0 26px;
  border: 1px solid rgba(241, 233, 220, .4);
}

.btn--cta {
  display: none;
  height: 46px;
  padding: 0 22px;
  background: var(--c-med);
  color: var(--c-tamni);
  font-size: 14px;
  font-weight: 700;
}

.round-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid rgba(241, 233, 220, .3);
  border-radius: 50%;
  background: rgba(14, 19, 17, .4);
}

.round-btn--whatsapp { color: var(--c-med-svijetli); }

.round-btn--burger {
  border-color: transparent;
  background: var(--c-krem);
  color: var(--c-tamni);
}


/* ---------- Logo i header ---------- */

.logo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
}

.logo__name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.01em;
  font-variation-settings: 'opsz' 18;
  white-space: nowrap;
}

.logo__tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--c-med-svijetli);
}

.site-header {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px var(--gutter);
}

.site-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.main-nav,
.call { display: none; }

/* ---------- Otvoreni meni ---------- */

.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 18px var(--gutter) 28px;
  border: 0;
  background: var(--c-suma);
  color: var(--c-krem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Bez [open] <dialog> mora ostati display: none. */
.menu[open] {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.menu__nav {
  display: flex;
  flex-direction: column;
  margin-block: auto;
}

.menu__link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 6px;
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.menu__num {
  width: 24px;
  flex: none;
  font-size: 15px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c-med);
}

.menu__link[aria-current="page"] {
  font-style: italic;
  color: var(--c-med);
}

.menu__bottom {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.menu__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-pijesak);
}

/* ---------- Hero: slojevi ---------- */

.hero { isolation: isolate; }

.hero__stage {
  container-type: size;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  background: var(--c-noc);
}

/* Jedno pravilo za slojeve 0 i 2 – razlikuje ih samo z-index. */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos);
}
.hero__img--bg { z-index: 0; }
.hero__img--house { z-index: 2; pointer-events: none; }

/* Vrh krova je na 29.86% visine slike, a slika se skalira s visinom ekrana.
   Odbitak u em znači da krov na svakom telefonu zalazi isto malo u slova
   (oko .15em), umjesto da prekrije cijelo slovo. */
.hero__word {
  position: absolute;
  z-index: 1;
  top: calc(29.86% - .62em);
  left: 0;
  right: 0;
  font-family: var(--font-serif);
  font-size: min(96px, 24.7vw);
  font-weight: 300;
  line-height: .8;
  letter-spacing: -.045em;
  text-align: center;
  white-space: nowrap;
  color: var(--c-krem);
  opacity: .94;
  pointer-events: none;
}

.hero__shade {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 13, 11, .5) 0%, rgba(9, 13, 11, 0) 14%);
  pointer-events: none;
}

/* Na telefonu donji gradijent prati visinu teksta, a ne visinu ekrana: na 844 px
   je isti kao u prototipu, a na nižim ekranima tekst ne izlazi iz njega. */
.hero__content::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--shade-top, 150px)) calc(-1 * var(--gutter)) 0;
  background: linear-gradient(0deg, rgba(9, 13, 11, .96) 0%, rgba(9, 13, 11, .8) calc(100% - var(--shade-rise, 238px)), rgba(9, 13, 11, 0) 100%);
  pointer-events: none;
}

/* ---------- Hero: sadržaj ---------- */

.hero__content {
  position: relative;
  z-index: 4;
  padding-bottom: 28px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-med-svijetli);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  flex: none;
  background: currentColor;
}

/* Fraunces je širi od fonta na referentnoj slici: 9.2vw čuva dva reda kao na
   referenci (na 390 px je 36 px, od oko 413 px širine pun 38 px). */
.hero__title {
  font-family: var(--font-serif);
  font-size: min(38px, 9.2vw);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.hero__title em {
  display: block;
  font-style: italic;
  color: var(--c-med-svijetli);
}

.hero__lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--c-pijesak);
}
.hero__lead-more { display: none; }

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero__model,
.hero__notes { display: none; }

/* Prednosti: na užim ekranima lista ispod slike. */
.hero__strip { padding-block: 8px 24px; }
.slides { display: none; }

.benefit {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-block: 14px;
  border-bottom: 1px solid rgba(241, 233, 220, .14);
}
.benefit:last-child { border-bottom: 0; }

.benefit__num {
  width: 20px;
  flex: none;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-med-svijetli);
}
.benefit__title { font-size: 14px; font-weight: 600; }
.benefit__text { font-size: 13px; color: var(--c-kamen); }

/* Na 320 px opis prelazi u novi red, poravnat s naslovom. */
@media (max-width: 359.98px) {
  .benefit { flex-wrap: wrap; row-gap: 2px; }
  .benefit__text { flex-basis: 100%; padding-left: 34px; }
}

/* Najuži telefoni: oznaka iznad naslova mora stati u jedan red. */
@media (max-width: 359.98px) {
  .eyebrow { letter-spacing: .12em; }
}

/* Niže od 844 px oznaka iznad naslova pada na svijetlo nebo, pa je gradijent gušći. */
@media (max-width: 767.98px) and (orientation: portrait) and (max-height: 843.98px) {
  .hero__content {
    --shade-top: 90px;
    --shade-rise: 106px;
  }
}

/* Telefon s trakama preglednika: zbijeniji tekst, više kuće i dugmad u kadru. */
@media (max-width: 767.98px) and (orientation: portrait) and (max-height: 760px) {
  .hero__content { padding-bottom: 20px; }
  .hero__text { gap: 12px; }
  .hero__actions { gap: 10px; }

  .btn--primary {
    height: 52px;
    padding: 0 4px 0 24px;
  }
  .btn--ghost { height: 48px; }
}

/* Vrlo niski telefoni: dugmad su važnija od podnaslova. */
@media (max-width: 767.98px) and (orientation: portrait) and (max-height: 600px) {
  .hero__lead { display: none; }
}

/* Uski ekran položeno: uspravna slika bi pokazala samo nebo, pa ide desktop slika. */
@media (max-width: 767.98px) and (orientation: landscape) {
  :root { --hero-pos: 62% 40%; }

  .hero__word {
    top: 22%;
    padding-left: 4%;
  }
}

/* ---------- ≥ 768 px: desktop slike, dugmad u redu ---------- */

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --hero-pos: 62% 40%;
  }

  .site-header__bar {
    height: 92px;
    padding-block: 0;
  }

  .site-header__actions { gap: 22px; }

  .logo__name { font-size: 22px; }
  .logo__tag { font-size: 10px; }

  .btn--cta { display: flex; }
  .round-btn--whatsapp { display: none; }

  /* X dolazi tačno na mjesto hamburgera; dugme ne ide preko cijele širine. */
  .menu { padding-top: 24px; }
  .menu__bottom { align-items: flex-start; }

  .round-btn--burger {
    width: 46px;
    height: 46px;
    border-color: rgba(241, 233, 220, .3);
    background: var(--c-staklo);
    color: var(--c-krem);
  }

  .hero__stage {
    height: 100vh;
    min-height: 640px;
    max-height: 1000px;
  }

  .hero__content::before { display: none; }

  /* Vrh krova je na 29.8% visine slike (ista cover matematika kao .hero__notes),
     pa krov svuda zalazi isto malo u slova. Donja granica čuva razmak od navigacije. */
  .hero__word {
    --img-h: max(100cqh, 100cqw * 1360 / 2200);
    top: max(78px - .06em, (100cqh - var(--img-h)) * .4 + var(--img-h) * .298 - .54em);
    padding-left: 4%;
    font-size: clamp(150px, 18.5vw, 280px);
  }

  .hero__shade {
    background:
      linear-gradient(0deg, rgba(9, 13, 11, .92) 0%, rgba(9, 13, 11, .55) 26%, rgba(9, 13, 11, 0) 52%),
      linear-gradient(90deg, rgba(9, 13, 11, .7) 0%, rgba(9, 13, 11, 0) 48%),
      linear-gradient(180deg, rgba(9, 13, 11, .55) 0%, rgba(9, 13, 11, 0) 14%);
  }

  .hero__content { padding-bottom: 40px; }

  .hero__text {
    gap: 22px;
    max-width: 600px;
  }

  .eyebrow {
    gap: 12px;
    font-size: 12px;
  }
  .eyebrow::before { width: 32px; }

  .hero__title {
    font-size: clamp(38px, 3.9vw, 58px);
    line-height: 1.04;
  }

  .hero__lead {
    max-width: 500px;
    font-size: 17px;
    line-height: 1.65;
  }
  .hero__lead-more { display: inline; }

  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
  }

  .btn--primary {
    justify-content: flex-start;
    height: 58px;
    padding: 0 7px 0 26px;
  }

  .btn--ghost {
    height: 58px;
    background: rgba(14, 19, 17, .3);
  }
}

/* ---------- ≥ 901 px: traka prednosti u heroju, oznake na kući ---------- */

@media (min-width: 901px) {
  /* Slojevi se sada mjere prema .hero, da traka ostane preko slike. */
  .hero {
    position: relative;
    container-type: size;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 640px;
    max-height: 1000px;
    overflow: hidden;
  }

  .hero__stage {
    container-type: normal;
    position: static;
    flex: 1;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .hero__title em { display: inline; }

  .hero__content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 36px;
  }

  .hero__text {
    flex: 0 1 600px;
    min-width: 0;
  }

  .hero__model {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex: none;
    text-align: right;
  }

  .hero__model-kicker {
    font-family: var(--font-serif);
    font-size: 15px;
    font-style: italic;
    color: var(--c-pijesak);
  }

  .hero__model-name {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 300;
  }

  .hero__model-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-med-svijetli);
  }

  .hero__strip {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 32px;
    padding-block: 22px 40px;
    border-top: 1px solid var(--c-linija);
  }

  .benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    flex: 1;
  }

  .benefit {
    flex-wrap: wrap;
    row-gap: 2px;
    padding-block: 0;
    border-bottom: 0;
  }

  .slides {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .slides__bar {
    width: 14px;
    height: 2px;
    background: rgba(241, 233, 220, .35);
  }
  .slides__bar--active {
    width: 28px;
    background: var(--c-med-svijetli);
  }

  /* Oznake: okvir tačno preko slike (ista matematika kao object-fit: cover
     i object-position 62% 40%), pa tačke ostaju na balkonu i terasi. */
  .hero__notes {
    --img-w: max(100cqw, 100cqh * 2200 / 1360);
    --img-h: max(100cqh, 100cqw * 1360 / 2200);
    display: block;
    position: absolute;
    z-index: 4;
    left: calc((100cqw - var(--img-w)) * .62);
    top: calc((100cqh - var(--img-h)) * .4);
    width: var(--img-w);
    height: var(--img-h);
    pointer-events: none;
  }

  .note {
    position: absolute;
    width: 9px;
    height: 9px;
  }
  .note--balcony { left: 65.17%; top: 51%; }
  /* Natpis terase bi se na užim i nižim ekranima sudario s blokom modela
     ili izašao iz kadra, pa se prikazuje samo gdje stane (uslovi niže u fajlu). */
  .note--terrace { display: none; left: 81.58%; top: 58.6%; }

  .note__dot {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--c-med-svijetli);
    box-shadow: 0 0 0 5px rgba(226, 181, 126, .25);
  }

  .note__line {
    position: absolute;
    background: rgba(241, 233, 220, .7);
  }
  .note--balcony .note__line {
    left: 9px;
    top: 4px;
    width: calc(var(--img-w) * .0742);
    height: 1px;
  }
  .note--terrace .note__line {
    left: 4px;
    top: 12px;
    width: 1px;
    height: calc(var(--img-h) * .06);
  }

  .note__label {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--c-krem);
  }
  .note--balcony .note__label {
    left: calc(var(--img-w) * .0742 + 16px);
    top: -14px;
  }
  .note--terrace .note__label {
    left: -2px;
    top: calc(var(--img-h) * .06 + 18px);
  }

  .note__num {
    font-family: var(--font-serif);
    font-size: 13px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-med-svijetli);
  }
}

/* ---------- ≥ 1121 px: puni header ---------- */

@media (min-width: 1121px) {
  :root { --gutter: 56px; }

  .site-header__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 24px;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .logo { justify-self: start; }

  .main-nav {
    display: flex;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(241, 233, 220, .16);
    border-radius: 999px;
    background: var(--c-staklo);
    font-size: 14px;
    font-weight: 500;
  }

  .main-nav__link {
    padding: 10px 18px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .main-nav__link[aria-current="page"] {
    background: var(--c-krem);
    color: var(--c-tamni);
  }

  .call {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Ikonica 16 px u polju od 44 px; negativna margina čuva razmak od 10 px. */
  .call__whatsapp {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -4px;
    color: var(--c-med-svijetli);
  }

  .round-btn--burger { display: none; }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .benefit__text { flex-basis: 100%; }
}

/* Širi ekran znači veću sliku i niži natpis, pa potrebna visina raste sa širinom
   (oko .25 × širina + 445 px). Iznad 2100 px širine natpis je desno od bloka modela. */
@media (min-width: 1121px) and (min-height: 820px) and (max-aspect-ratio: 16/9),
       (min-width: 1121px) and (max-width: 1950px) and (min-height: 940px),
       (min-width: 1121px) and (min-height: 980px) {
  .note--terrace { display: block; }
}

/* ---------- Niski ekrani (npr. laptop 1366 × 768 s trakama preglednika):
   sabijen tekst i manja riječ, da se naslov ne preklopi s njom ---------- */

@media (min-width: 901px) and (max-height: 759.98px) {
  .hero__word { font-size: clamp(150px, min(18.5vw, 28vh), 280px); }

  .hero__content { padding-bottom: 24px; }
  .hero__text { gap: 16px; }
  .hero__title { font-size: 40px; }

  .hero__lead {
    font-size: 16px;
    line-height: 1.55;
  }

  .hero__strip { padding-block: 16px 24px; }
}

/* ---------- Položen telefon: naslov i dugmad moraju stati u prvi ekran ---------- */

@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 360px; }

  .hero__word {
    top: 10%;
    padding-left: 4%;
    font-size: min(18.5vw, 38vh);
  }

  .hero__content::before { display: block; }
  .hero__content {
    --shade-top: 90px;
    --shade-rise: 106px;
    padding-bottom: 16px;
  }

  .hero__text {
    gap: 10px;
    max-width: none;
  }

  .hero__title { font-size: 30px; }
  .hero__title em { display: inline; }
  .hero__lead { display: none; }

  .hero__actions {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding-top: 2px;
  }

  .btn--primary {
    justify-content: flex-start;
    height: 48px;
    padding: 0 3px 0 20px;
  }
  .btn__circle {
    width: 42px;
    height: 42px;
  }
  .btn--ghost { height: 48px; }

  .hero__model,
  .hero__notes { display: none; }

  .hero__strip { padding-block: 12px 16px; }

  .menu { padding-block: 14px 16px; }
  .menu[open] { gap: 12px; }
  .menu__bottom { gap: 10px; }
  .menu__link {
    padding-block: 2px;
    font-size: 28px;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .hero__stage { min-height: 360px; }
}

/* ---------- Hover samo na uređajima koji ga imaju (na dodiru ostaje "zalijepljen") ---------- */

@media (hover: hover) {
  a:hover { color: var(--c-med-svijetli); }
  .logo:hover { color: inherit; }

  .btn--primary:hover { background: #fff; color: var(--c-tamni); }
  .btn--ghost:hover { border-color: var(--c-med-svijetli); }
  .btn--cta:hover { background: var(--c-med-svijetli); color: var(--c-tamni); }

  .round-btn--whatsapp:hover { border-color: var(--c-med-svijetli); }
  .round-btn--burger:hover { background: #fff; }
  .round-btn--close:hover { border-color: var(--c-med-svijetli); color: var(--c-med-svijetli); }

  .hero__model-link:hover { color: var(--c-krem); }
}

@media (hover: hover) and (min-width: 768px) {
  .round-btn--burger:hover {
    border-color: var(--c-med-svijetli);
    background: var(--c-staklo);
  }
}

/* ---------- Animacije samo ako ih korisnik ne isključuje ---------- */

@media (prefers-reduced-motion: no-preference) {
  a, .round-btn {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
  }

  .btn__circle svg { transition: transform .2s ease; }

  @media (hover: hover) {
    .btn--primary:hover .btn__circle svg { transform: translate(2px, -2px); }
  }

  .menu[open] { animation: menu-in .22s ease-out; }

  @keyframes menu-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- Uvodna animacija: gradnja u heroju, zatim sadržaj ----------
   Gradnja: pejzaž 0–0,6 s, zidovi 0,15–1,68 s, krov 0,78–2,1 s, kamera cijelo vrijeme
   (BUILD_MS u main.js). Zatim .is-intro-reveal: gradnja se pretapa u prave slojeve,
   riječ izranja iza krova i redom se pojavljuje sadržaj (REVEAL_MS u main.js). */

.is-intro:not(.is-intro-reveal) { overflow: hidden; }

.is-intro:not(.is-intro-reveal) .site-header,
.is-intro:not(.is-intro-reveal) .hero__img,
.is-intro:not(.is-intro-reveal) .hero__word,
.is-intro:not(.is-intro-reveal) .hero__shade,
.is-intro:not(.is-intro-reveal) .hero__notes,
.is-intro:not(.is-intro-reveal) .hero__content,
.is-intro:not(.is-intro-reveal) .hero__strip { visibility: hidden; }

/* Okvir fotografije: ista cover matematika kao u heroju, pa se kuća poklopi sa slikom. */
.intro__world {
  --W: max(100cqw, 100cqh * var(--r));
  --H: max(100cqh, 100cqw / var(--r));
  position: absolute;
  z-index: 3;
  left: calc((100cqw - var(--W)) * var(--px));
  top: calc((100cqh - var(--H)) * var(--py));
  width: var(--W);
  height: var(--H);
  transform-origin: 65% 85%;
  pointer-events: none;
}

.intro__plate,
.intro__ground,
.intro__seat,
.intro__roof {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.intro__plate { object-fit: cover; }

.intro__ground,
.intro__seat,
.intro__roof { background-size: 100% 100%; }

.intro__plate,
.intro__ground,
.intro__seat,
.intro__roof { opacity: 0; }

.intro__band {
  position: absolute;
  left: 0;
  width: 100%;
  background-repeat: no-repeat;
  opacity: 0;
}

/* Isti pikseli kao krov, samo potamnjeni: oblik i prozirnost su uvijek isti. */
.intro__seat { filter: brightness(.14); }

.intro-skip { display: none; }

.is-intro .intro-skip {
  display: block;
  position: fixed;
  z-index: 10;
  right: 12px;
  bottom: 12px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-pijesak);
}

/* Gradnja */

.is-intro-building .intro__world { animation: intro-camera 2.1s cubic-bezier(.22, 1, .36, 1) both; }

.is-intro-building .intro__plate,
.is-intro-building .intro__ground { animation: intro-fade .6s ease-out both; }


.is-intro-building .intro__band {
  will-change: transform, opacity;
  animation: intro-log .55s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i) * 75ms + 150ms);
}

.is-intro-building .intro__roof {
  will-change: transform, opacity;
  animation: intro-roof .75s cubic-bezier(.22, 1, .36, 1) both;
}
.is-intro-building .intro__seat { animation: intro-seat .75s ease-out both; }

/* Nadstrešnica dolazi prije zabata, da gornji dio kuće ne lebdi iznad terase. */
.is-intro-building .intro__roof--0,
.is-intro-building .intro__seat--0 { animation-delay: .78s; }
.is-intro-building .intro__roof--1,
.is-intro-building .intro__seat--1 { animation-delay: .9s; }
.is-intro-building .intro__roof--2,
.is-intro-building .intro__seat--2 { animation-delay: 1.35s; }

/* Pojavljivanje sadržaja: svaki element ima samo početno stanje, a kraj je njegov pravi izgled. */

.is-intro-reveal .intro__world { animation: in-fade-out .6s ease-in-out both; }

.is-intro-reveal .hero__word { animation: in-word 1.1s cubic-bezier(.22, 1, .36, 1) .4s both; }
.is-intro-reveal .hero__shade,
.is-intro-reveal .hero__content::before { animation: in-fade .9s ease-out .3s both; }

.is-intro-reveal .site-header { animation: in-down .7s cubic-bezier(.22, 1, .36, 1) .7s both; }

.is-intro-reveal .hero__text > *,
.is-intro-reveal .hero__model,
.is-intro-reveal .hero__strip { animation: in-up .75s cubic-bezier(.22, 1, .36, 1) both; }

.is-intro-reveal .hero__text > :nth-child(1) { animation-delay: .75s; }
.is-intro-reveal .hero__text > :nth-child(2) { animation-delay: .83s; }
.is-intro-reveal .hero__text > :nth-child(3) { animation-delay: .91s; }
.is-intro-reveal .hero__text > :nth-child(4) { animation-delay: .99s; }
.is-intro-reveal .hero__model { animation-delay: 1.05s; }
.is-intro-reveal .hero__strip { animation-delay: 1.12s; }
.is-intro-reveal .note { animation: in-fade .6s ease-out 1.25s both; }
.is-intro-reveal .note--terrace { animation-delay: 1.35s; }

@keyframes intro-camera {
  from { transform: scale(1.04); }
  to { transform: none; }
}

@keyframes intro-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}


@keyframes intro-log {
  0% { opacity: 0; transform: translate(calc(var(--d) * clamp(18px, 3cqw, 40px)), -12px); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@keyframes intro-roof {
  0% { opacity: 0; transform: translateY(-40px); }
  25% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* Nestaje kad je krov legao, pa završni izgled ostaje tačno kao fotografija. */
@keyframes intro-seat {
  0% { opacity: 0; }
  30%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes in-fade-out {
  to { opacity: 0; }
}

@keyframes in-fade {
  from { opacity: 0; }
}

@keyframes in-word {
  from { opacity: 0; transform: translateY(.16em); }
}

@keyframes in-up {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes in-down {
  from { opacity: 0; transform: translateY(-8px); }
}