/* Showcase edition of visiomorlacca.hr's homepage for the 03 gallery monitor: the site's own
   stylesheet (site.css) plus this layer. The cut keeps the homepage's strongest beats (the hero, the
   services, the tours, the ethno archive) and ends on the archive: the contact section and the footer
   stay off, because the monitor shows our work, not the client's call to action. The
   choreography (showcase-scenes.js) goes past the site's own motion rules at the owner's request,
   2026-09-15; the live site is unchanged. */
:root { --sc-ease: cubic-bezier(.2, .7, .3, 1); --sc-ink-ease: cubic-bezier(.65, 0, .25, 1); }
/* The host positions the page every frame; the site's smooth scrolling would fight it. */
html { scroll-behavior: auto !important; scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
body { pointer-events: none; }
/* A backdrop blur re-samples the page under the monitor's transform on every frame. Without it the
   nav keeps its colour, a touch denser so nothing ghosts through. */
*, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.nav.scrolled { background-color: rgba(29, 26, 12, .96) !important; }
/* The monitor is asleep until the host wakes it: nothing runs while it is out of view. */
.is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }

/* The cut: parts of the kept sections that stay off the monitor, and the nav link to the journal the
   cut leaves out (it also gives the longer English labels room). */
.services-cta, .services-foot, .ture-lede, .ture-foot, .etno-intro-body, .etno-communities, .etno-cta,
.nav-link[data-sec="dnevnik"] { display: none !important; }

/* Scrubbed elements follow the scroll exactly; none of the site's own transitions may trail them. */
.service-row > *, .postcard, .tura-photo img, .etno-item img { transition: none !important; }
.sc-inline { display: inline-block; }
.section { padding: 112px 0; }
.section-head { margin-bottom: 64px; }

/* Opening: the hero keeps the site's own layout and holds while the services slide over it (its
   sticky top, set in showcase-scenes.js, lets it first scroll to its own bottom). */
.sc-open { position: relative; }
.sc-open > .hero { position: sticky; top: 0; z-index: 0; }
.sc-open > .marquee-band, .sc-open > .section { position: relative; z-index: 1; }
.hero-collage { will-change: transform; }
.hero-bg picture { display: block; height: 100%; will-change: transform; }

/* Opening sequence: the hero is set, line by line, the first time the monitor comes into view. */
.hero .eyebrow, .hero-line-1 > span:first-child, .hero-line-2, .hero-sub, .hero-ctas, .hero-meta {
  transition: opacity 1000ms var(--sc-ease), translate 1000ms var(--sc-ease);
}
.hero-photo { transition: opacity 1000ms var(--sc-ease), translate 1000ms var(--sc-ease); }
.hero .eyebrow { transition-delay: 0ms; }
.hero-line-1 > span:first-child { transition-delay: 120ms; }
.hero-line-2 { transition-delay: 260ms; }
.hero-sub { transition-delay: 420ms; }
.hero-ctas { transition-delay: 540ms; }
.hero-photo.hp-3 { transition-delay: 260ms; }
.hero-photo.hp-2 { transition-delay: 380ms; }
.hero-photo.hp-1 { transition-delay: 500ms; }
.hero-meta { transition-delay: 820ms; }
.is-arriving .hero .eyebrow, .is-arriving .hero-line-1 > span:first-child, .is-arriving .hero-line-2,
.is-arriving .hero-sub, .is-arriving .hero-ctas, .is-arriving .hero-meta { opacity: 0; translate: 0 24px; }
.is-arriving .hero-photo { opacity: 0; translate: 0 56px; }
/* The hero's script word is written once on arrival; every other accent is scrubbed. */
.sc-ink { clip-path: inset(-30% 106% -40% -6%); transition: clip-path 1300ms var(--sc-ink-ease); }
.sc-ink.is-inked { clip-path: inset(-30% -6% -40% -6%); }

/* Services: each row draws its own rule as it arrives. */
.service-row { padding: 36px 0; border-bottom-color: transparent; }
.service-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(236, 217, 168, .2); transform: scaleX(var(--sc-line, 1)); transform-origin: left center;
}

/* Tours: the head with its postcard (the title settles on the postcard's baseline, a diagonal instead
   of a hole under the title), then the four tours on a pinned track that runs sideways. */
#razglednica .section-head { margin-bottom: 24px; align-items: end; }
#razglednica .postcard { position: relative; top: auto; right: auto; width: 290px; margin: 22px 72px 0 auto; transform-origin: 50% 90%; }
/* The track runs the full width of the screen, not the content column. */
.ture-grid { display: block; border-top: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.sc-track-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; padding-top: 64px; }
.sc-track { position: relative; display: flex; align-items: flex-start; gap: 64px; width: max-content; padding: 0 var(--pad-x); will-change: transform; }
.sc-track .tura { flex: 0 0 520px; display: block; padding: 0; border: 0; }
.sc-track .tura:nth-child(even) { margin-top: 48px; }
.sc-track .tura-media { margin-bottom: 22px; }
.sc-track .tura-kicker { margin-bottom: 14px; }
.sc-track .tura-title { margin-bottom: 12px; }
.sc-track .tura-hook { font-size: 14px; max-width: 48ch; }
.sc-track .tura-cta { display: none; }
.sc-track .tura-photo img { will-change: transform; }
.sc-track-progress { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 20px; height: 1px; background: rgba(129, 107, 57, .22); }
.sc-track-progress::after {
  content: ""; position: absolute; inset: 0; background: var(--gold);
  transform: scaleX(var(--sc-track, 0)); transform-origin: left center;
}

/* Ethno: the head, the quote, and the archive opening in a wave. The page ends on the open archive,
   a short band of the section's ground under its last row. */
#etno { padding-bottom: 64px; }
#etno .section-head { margin-bottom: 40px; }
.etno-intro { margin-bottom: 40px; }
.etno-intro-lead { justify-self: start; }
.etno-grid { grid-auto-rows: 232px; }

@media (prefers-reduced-motion: reduce) {
  .is-arriving .hero .eyebrow, .is-arriving .hero-line-1 > span:first-child, .is-arriving .hero-line-2,
  .is-arriving .hero-sub, .is-arriving .hero-ctas, .is-arriving .hero-meta, .is-arriving .hero-photo { opacity: 1; translate: none; }
  .sc-ink { clip-path: none; }
  .sc-open > .hero { position: relative; }
  .sc-track-stage { position: static; height: auto; padding: 0 0 40px; }
  .sc-track { flex-wrap: wrap; row-gap: 56px; width: auto; }
  .sc-track-progress { display: none; }
}