/* ---- Circle-fill-expand button ---- */
.learn-more {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  margin-top: 2rem;
  font-size: inherit;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  /* Wider than the old 12rem: "Kontaktirajte nas" is a much longer label
     than "Saznaj vise" and the text sits in the space left of the circle. */
  width: 15.5rem;
  height: 3rem;
}

.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: #1a2a6e;
  border-radius: 1.625rem;
}

.learn-more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}

.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}

.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: '';
  top: -0.29rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}

.learn-more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #e8eaf0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}

.learn-more:hover .circle {
  width: 100%;
}

.learn-more:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}

.learn-more:hover .button-text {
  color: #fff;
}

/* ---- Services section: single sticky stage, 3 images stacked by
   z-index and wiped away top-to-bottom on scroll, 3 text blocks crawling
   up from below in sequence (same idea as the reference about-text). ---- */
/* ---- Overlaps the reference section by exactly one viewport ----
   reference-gallery.js sizes its pin-wrap to vh*(1 + IMAGES_SCALE +
   OUTRO_SCALE), and its circle-wipe finishes (expand === 1) at
   scrolled === height - vh — i.e. at that instant reference's pin-wrap
   BOTTOM sits exactly at the bottom of the viewport, so this section's
   pin-wrap top is a full viewport BELOW the fold. Left alone that means
   100vh of dead scroll after the wipe before this section arrives.
   usluge-stack.js pulls the section up by exactly window.innerHeight
   (inline margin-top, kept exact on resize) so its pin-wrap top hits 0
   precisely when the wipe completes: plain position:sticky then pins it
   from that exact moment, no overlay/hand-off trickery needed.
   z-index 61 puts it above the red circle-wipe (scene-orb--cover, 50)
   and above the reference section it overlaps. */
.usluge {
  position: relative;
  z-index: 61;
  /* Transparent on purpose — the scaled-up red circle-wipe (position:fixed,
     behind this section in z-index) is the permanent backdrop, visible
     through the padding frame around the image stack. */
  background: transparent;
  /* Hit-testing is geometric, not painted: a transparent box still swallows
     clicks. This section sits at z-index 61 and, because .kontakt is pulled up
     under it by a negative margin, its box covers the contact card for the
     whole outro. Without this the form is visible but unclickable. Only the
     text blocks opt back in below. */
  pointer-events: none;
}

.usluge__pin-wrap {
  position: relative;
  pointer-events: none;
}

/* ---- Fluid blob reveal ----
   Seven soft-edged circles that grow and merge until they cover the stage,
   used as a mask so the REAL content (image stack + text + button) is what
   gets revealed — no duplicate copy of anything.
   The radii are the --r1..--r7 custom properties, scrubbed by
   usluge-reveal.js off the circle-wipe's progress. All start at 0%, which
   collapses every gradient to fully transparent and hides the stage during
   the overlapped lead-in; --r1 passes 100% (farthest-corner) so the union
   ends up completely opaque. Because the radii follow scroll position
   directly, with no CSS transition, the whole thing plays in reverse when
   scrolling back up.
   Layered mask images union by default (mask-composite: add), so the blobs
   overlap into one organic shape. */
.usluge__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;

  /* Shared blob radius, scrubbed by usluge-reveal.js. 0 collapses every
     gradient to its last stop (transparent), hiding the stage during the
     overlapped lead-in. The gradient list itself is generated in JS —
     blob positions depend on the viewport aspect, so they are rebuilt on
     resize rather than hard-coded here. */
  --br: 0px;
  /* Single-blob fallback so the stage is masked (and at --br:0, hidden)
     even before JS replaces this with the full generated list, or if it
     never can. Without a mask here, a failure to build one would leave the
     section fully visible rather than hidden. */
  -webkit-mask-image: radial-gradient(circle var(--br) at 50% 50%, #000 88%, transparent 100%);
  mask-image: radial-gradient(circle var(--br) at 50% 50%, #000 88%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.usluge__stack {
  position: absolute;
  inset: 0;
}

.usluge__frame {
  position: absolute;
  inset: 3.25rem;
  border-radius: 0.75rem;
  overflow: hidden;
  /* The scroll-driven wipe: a horizontal line sweeps up, clipping this
     frame away from the bottom to reveal whatever sits behind it (the
     next frame down in z-index). Set as an inline custom property by
     usluge-stack.js each frame. */
  clip-path: inset(0 0 var(--wipe, 0%) 0);
}

.usluge__frame[data-index="0"] { z-index: 3; }
.usluge__frame[data-index="1"] { z-index: 2; }
.usluge__frame[data-index="2"] { z-index: 1; }

.usluge__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.usluge__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(8, 9, 15, 0.9) 0%,
    rgba(8, 9, 15, 0.6) 30%,
    rgba(8, 9, 15, 0.1) 55%,
    transparent 75%
  ),
  linear-gradient(
    to top,
    rgba(8, 9, 15, 0.75) 0%,
    rgba(8, 9, 15, 0.15) 35%,
    transparent 60%
  );
}

.usluge__text-wrap {
  position: absolute;
  z-index: 10;
  left: 7.75rem;
  top: 3.25rem;
  bottom: 3.25rem;
  width: 100%;
  max-width: 640px;
  overflow: hidden;
  pointer-events: none;
}

/* Re-enabled so the "Kontaktirajte nas" buttons are clickable while the
   services are on stage — but only until the outro starts (see below). */
.usluge__text-block {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 640px;
  box-sizing: border-box;
  padding: 0 4rem 4rem 0;
  pointer-events: auto;
  will-change: transform;
}

.usluge__title {
  margin: 0 0 1.25rem;
  max-width: 640px;
  font-family: "Archivo", "Arial Narrow Bold", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #fff;
  text-transform: none;
}

.usluge__text {
  margin: 0;
  max-width: 640px;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  .usluge__text-block {
    padding: 0 4rem 4rem 0;
  }

  .usluge__title {
    white-space: nowrap;
  }
}

/* ---------- Laptop ---------- */
@media (min-width: 1024px) {
  .usluge__text-block {
    padding: 0 4rem 4rem 0;
  }
}

/* ---------- Narrow screens ----------
   Placed last on purpose: it has to win over the min-width:768px block above
   in the 768-1023px overlap, and at equal specificity source order decides.

   Everything here exists because the base rules are desktop constants with no
   media query — a 7.75rem left offset on a full-width wrap, a 4rem right
   padding, a 3.25rem frame inset and a 100deg overlay all assume a wide
   landscape stage with the copy in a dark band down its left side. On a phone
   that pushed the text 124px right while still asking it to be a full viewport
   wide, so it ran off the screen by exactly that offset. */
@media (max-width: 1023px) {
  /* Near full-bleed stage: the 9:16 mobile photos want the height. */
  .usluge__frame {
    inset: 0.75rem;
    border-radius: 0.875rem;
  }

  /* Copy inset from the frame edge instead of offset from the viewport.
     top/bottom stay near the full height on purpose — the text blocks are
     translated +/-1vh by usluge-stack.js and clipped by this wrap, so a short
     wrap would make them pop in and out instead of crawling through. */
  .usluge__text-wrap {
    left: 1.75rem;
    right: 1.75rem;
    top: 1rem;
    bottom: 1rem;
    width: auto;
    max-width: none;
  }

  .usluge__text-block {
    padding: 0 0 2rem 0;
    max-width: none;
  }

  .usluge__title {
    /* The 768px block sets nowrap for the wide layout; these titles have to
       wrap down here or "Strojno i klasicno zbukanje" overflows. */
    white-space: normal;
    max-width: none;
    font-size: clamp(1.65rem, 7.5vw, 2.25rem);
    margin-bottom: 0.9rem;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
  }

  .usluge__text {
    max-width: none;
    font-size: 1rem;
    /* Lifted from 0.75 — this now sits on a photo rather than a near-black
       band, so it needs more separation from the background. */
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
  }

  /* The base overlay darkens the LEFT third for a side-by-side layout. Here
     the copy sits along the bottom, so the ramp has to run bottom-to-top; the
     second gradient keeps the logo and hamburger legible against the top of
     the photo. */
  .usluge__overlay {
    background:
      linear-gradient(
        to top,
        rgba(8, 9, 15, 0.94) 0%,
        rgba(8, 9, 15, 0.86) 25%,
        rgba(8, 9, 15, 0.62) 50%,
        rgba(8, 9, 15, 0.3) 72%,
        transparent 92%
      ),
      linear-gradient(
        to bottom,
        rgba(8, 9, 15, 0.55) 0%,
        rgba(8, 9, 15, 0.15) 14%,
        transparent 26%
      );
  }

  .learn-more {
    margin-top: 1.5rem;
  }
}


/* ---- Hand-off to the contact section ----
   From the moment the last card has wiped through, the blob mask starts
   shrinking and the contact form is revealed underneath. The third text block
   is still parked at its resting position at that point, so without this it
   keeps capturing clicks over the form. usluge-stack.js adds this class as
   soon as outro progress leaves 0. */
.usluge--outro .usluge__text-block {
  pointer-events: none;
}