/* Motion is progressive enhancement. Without the script, every element stays visible. */
#code-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #fff);
  color: var(--ink, #111);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

#code-intro { z-index: 1001; }
.intro-barcode {
  display: flex;
  height: 120px;
  gap: 6px;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  transition: 1s cubic-bezier(.16, 1, .3, 1);
}
.intro-barcode.is-appeared { opacity: 1; transform: translateY(0); }
.intro-barcode.is-finished { opacity: 0; transition: .8s cubic-bezier(.16, 1, .3, 1); }
.intro-bar {
  display: block;
  flex-shrink: 0;
  height: 100%;
  background: currentColor;
}
.intro-scanner {
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  height: 2px;
  background: #f00;
  box-shadow: 0 0 15px #f00, 0 0 5px #f00;
  transform: translateY(-15px);
  opacity: 0;
  z-index: 2;
}
.intro-scanner.is-scanning { animation: motion-original-scan 1.4s ease-in-out forwards; }

.motion-enabled #code-intro.is-active {
  visibility: visible;
  opacity: 1;
}
.motion-enabled #code-intro.is-exiting {
  opacity: 0;
  transition: opacity .6s ease;
}

html.motion-enabled,
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
.motion-enabled .hero { overflow: clip; }
.motion-enabled .hero-wordmark {
  transform: translate3d(0, var(--hero-parallax, 0px), 0);
  will-change: transform;
  transform-origin: 50% 50%;
}
.motion-enabled .hero-code {
  transform: translate3d(var(--code-mx, 0px), var(--code-my, 0px), 0);
  will-change: transform;
}

/* Only elements registered with a live observer receive motion-pending. */
.motion-enabled .motion-reveal {
  transition: opacity .65s var(--motion-delay, 0ms) cubic-bezier(.2, .7, .2, 1),
    transform .65s var(--motion-delay, 0ms) cubic-bezier(.2, .7, .2, 1),
    clip-path .85s var(--motion-delay, 0ms) cubic-bezier(.16, 1, .3, 1),
    background .18s, border-color .18s;
}
.motion-enabled .motion-reveal.motion-pending {
  opacity: 0;
  transform: translate3d(0, 25px, 0);
}
.motion-enabled .motion-heading.motion-pending {
  opacity: 1;
  clip-path: none;
  transform: none;
}
.motion-enabled .motion-reveal.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  clip-path: inset(0);
}
/* Observe the full heading box; clip only its child so it can enter the observer. */
.motion-enabled .motion-heading.is-inview {
  opacity: 1;
  clip-path: none;
  transform: none;
}
.motion-heading-inner {
  display: block;
  clip-path: inset(0);
  transform: translate3d(0, 0, 0);
  transition: clip-path .85s var(--motion-delay, 0ms) cubic-bezier(.16, 1, .3, 1),
    transform .85s var(--motion-delay, 0ms) cubic-bezier(.16, 1, .3, 1);
}
.motion-enabled .motion-heading.motion-pending .motion-heading-inner {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 18px, 0);
}
.motion-enabled .client-card.motion-reveal {
  transition-duration: .5s, .5s, .5s, .18s, .18s;
}
.motion-enabled .client-card.motion-pending { transform: translate3d(0, 14px, 0); }
.stats-strip strong > .motion-stat-number {
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  vertical-align: baseline;
}

.motion-enabled .motion-magnetic {
  transform: translate3d(var(--magnet-x, 0px), var(--magnet-y, 0px), 0);
  transition: transform .2s cubic-bezier(.2, .7, .2, 1), background .18s, border-color .18s;
}
.motion-enabled .trust-art {
  transform: perspective(900px) rotateX(var(--trust-rx, 0deg)) rotateY(var(--trust-ry, 0deg));
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
  transform-origin: center;
}
.motion-enabled .trust-art .barcode-art { position: relative; overflow: hidden; }
.motion-enabled .trust-art .barcode-art::after {
  content: '';
  position: absolute;
  width: 36%;
  top: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, transparent, #f4f3ef50, transparent);
  transform: translate3d(-110%, 0, 0);
  opacity: 0;
}
.motion-enabled .trust-art.is-motion-visible .barcode-art::after {
  animation: motion-trust-scan 4s 1s ease-in-out infinite;
}
.motion-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent, #e84b38);
  z-index: 70;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.motion-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ink, #1b1b19);
  border-radius: 50%;
  z-index: 65;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s, border-color .2s;
  will-change: transform;
}
.motion-cursor.is-visible { opacity: .4; }
.motion-paused .barcode-art::after,
.motion-paused .intro-barcode,
.motion-paused .intro-scanner { animation-play-state: paused !important; }

@keyframes motion-original-scan {
  0% { transform: translateY(-15px); opacity: 0; }
  10% { opacity: 1; }
  90% { transform: translateY(135px); opacity: 1; }
  100% { transform: translateY(135px); opacity: 0; }
}
@keyframes motion-trust-scan {
  0%, 10% { opacity: 0; transform: translate3d(-110%, 0, 0); }
  25% { opacity: 1; }
  60% { opacity: 1; }
  76%, 100% { opacity: 0; transform: translate3d(390%, 0, 0); }
}
@keyframes motion-page-entry {
  from { opacity: .65; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  main#sadrzaj { animation: motion-page-entry .4s ease-out backwards; }
}

@media (hover: none), (pointer: coarse) {
  .motion-cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #code-intro,
  .motion-cursor,
  .motion-progress { display: none !important; }
  .motion-enabled .motion-reveal,
  .motion-enabled .hero-wordmark,
  .motion-enabled .hero-code,
  .motion-enabled .trust-art,
  .motion-enabled .motion-magnetic {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .motion-enabled .barcode-art::after { animation: none !important; }
  .motion-heading-inner {
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
  html.motion-enabled { scroll-behavior: auto !important; }
}