/* Document coordinates keep the mascot attached to its section while scrolling. */
.scroll-companion {
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  z-index: 9;
  pointer-events: none;
  contain: layout style;
  visibility: hidden;
}
.scroll-companion svg { display: block; width: 100%; height: 100%; overflow: visible; image-rendering: pixelated; }
.scroll-companion [data-costume] { display: none; }
.scroll-companion[data-scene="usluge"] [data-costume="usluge"],
.scroll-companion[data-scene="iskustvo"] [data-costume="iskustvo"],
.scroll-companion[data-scene="primjeri"] [data-costume="primjeri"],
.scroll-companion[data-scene="proces"] [data-costume="proces"],
.scroll-companion[data-scene="zasto"] [data-costume="zasto"] { display: inline; }
.scroll-companion:not(.is-travelling) [data-costume] { animation: companion-costume-in .4s steps(3, end) both; transform-origin: center bottom; }
.scroll-companion .pixel-check,
.scroll-companion .pixel-spark,
.scroll-companion .pixel-coin,
.scroll-companion .pixel-receipt { opacity: 0; }
.scroll-companion .pixel-seal { opacity: 0; }
/* The active section keeps its short pixel action running until the robot travels on. */
.scroll-companion.is-acting .pixel-avatar { animation: companion-nod 3.2s steps(2) infinite; }
.scroll-companion.is-acting .pixel-cursor { animation: companion-blink .5s steps(1) infinite; }
.scroll-companion.is-acting .pixel-typing-hand { animation: companion-type 2.4s steps(2) infinite; }
.scroll-companion.is-acting .pixel-coin { animation: companion-coin 2.4s steps(5) infinite; }
.scroll-companion.is-acting .pixel-bank-hand { animation: companion-count 2.4s steps(3) infinite; }
.scroll-companion.is-acting .pixel-receipt { animation: companion-receipt 3.2s steps(4) infinite; }
.scroll-companion.is-acting .pixel-module { animation: companion-module 2.4s steps(5) infinite; }
.scroll-companion.is-acting .pixel-building-hand { animation: companion-build 2.4s steps(4) infinite; }
.scroll-companion.is-acting .pixel-spark { animation: companion-spark 3.2s steps(1) infinite; }
.scroll-companion.is-acting .pixel-task { animation: companion-task 2.4s steps(6) infinite; }
.scroll-companion.is-acting .pixel-planning-hand { animation: companion-plan 2.4s steps(4) infinite; }
.scroll-companion.is-acting .pixel-check { animation: companion-done 3.2s steps(1) infinite; }
.scroll-companion.is-acting .pixel-stamp { animation: companion-stamp 2.4s steps(4) infinite; }
.scroll-companion.is-acting .pixel-seal { animation: companion-seal 3.2s steps(1) infinite; }
.scroll-companion.is-travelling [data-costume] { visibility: hidden; }
.companion-away { visibility: hidden !important; }
@keyframes companion-blink { 50% { opacity: 0; } }
@keyframes companion-costume-in { 0% { opacity: 0; transform: translateY(-3px) scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes companion-nod { 0%, 70%, 100% { transform: none; } 78% { transform: translateY(1px); } }
@keyframes companion-type { 0%, 20%, 40%, 60%, 80%, 100% { transform: none; } 10%, 30%, 50%, 70% { transform: translate(-3px, 2px); } }
@keyframes companion-coin { 0%, 10% { transform: translate(0, -3px); opacity: 0; } 20% { transform: translate(0, -3px); opacity: 1; } 65%, 80% { transform: translate(0, 6px); opacity: 1; } 100% { transform: translate(0, 6px); opacity: 0; } }
@keyframes companion-count { 0%, 100% { transform: none; } 30%, 60% { transform: translate(4px, -4px); } }
@keyframes companion-receipt { 0%, 65% { transform: translateY(6px); opacity: 0; } 85%, 100% { transform: none; opacity: 1; } }
@keyframes companion-module { 0%, 15%, 100% { transform: none; } 40%, 55% { transform: translate(-4px, -7px); } 75% { transform: translateY(-2px); } 85% { transform: none; } }
@keyframes companion-build { 0%, 15%, 100% { transform: none; } 40%, 55% { transform: translate(-2px, -6px); } 85% { transform: translate(2px, 1px); } }
@keyframes companion-spark { 0%, 70%, 82%, 100% { opacity: 0; } 74%, 90% { opacity: 1; } }
@keyframes companion-task { 0%, 15% { transform: none; } 45%, 60% { transform: translateX(8px); } 85%, 100% { transform: translateX(16px); } }
@keyframes companion-plan { 0%, 100% { transform: none; } 20% { transform: translate(-18px, 3px); } 45%, 60% { transform: translate(-10px, 3px); } 85% { transform: translate(-2px, 3px); } }
@keyframes companion-done { 0%, 80% { opacity: 0; } 85%, 100% { opacity: 1; } }
@keyframes companion-stamp { 0%, 20%, 100% { transform: none; } 48%, 64% { transform: translate(-9px, 9px); } 78% { transform: translate(-4px, 2px); } }
@keyframes companion-seal { 0%, 58% { opacity: 0; } 62%, 100% { opacity: 1; } }
.companion-slot { display: none; }
.companion-enabled .companion-slot {
  display: block;
  width: 72px;
  height: 72px;
  margin: 24px 0 0 -12px;
  pointer-events: none;
}
.experience-copy > p:not(.eyebrow) { max-width: 490px; margin-top: 26px; font-size: 17px; color: #4c421c; }
.companion-enabled .product-showcase { position: relative; margin-top: 72px; }
.companion-enabled .product-showcase .companion-slot {
  position: absolute;
  top: -72px;
  right: 12px;
  margin: 0;
}
.companion-enabled .process-heading h2 { margin-top: 24px; }
.companion-enabled .why > .container { position: relative; }
.companion-enabled .why-heading { padding-right: 92px; }
.companion-enabled .why > .container > .companion-slot { position: absolute; top: 8px; right: 24px; margin: 0; }
@media (min-width: 1000px) {
  .companion-enabled .section-head .companion-slot { grid-column: 1; grid-row: 3; }
  .companion-enabled .section-intro { grid-column: 2; grid-row: 3; }
  .companion-enabled .examples-head { margin-bottom: 88px; }
  .companion-enabled .product-showcase { margin-top: 0; }
  .companion-enabled .process-heading { row-gap: 16px; }
  .companion-enabled .process-heading .eyebrow { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .companion-enabled .process-heading .companion-slot { grid-column: 1; grid-row: 2; margin-top: 0; }
  .companion-enabled .process-heading h2 { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-companion { display: none; }
  .companion-enabled .companion-slot { display: none; }
  .companion-enabled .companion-away { visibility: visible !important; }
}
@media (max-width: 767px) {
  .scroll-companion { display: none; }
}
/* Preserve one-screen product chapters at each desktop height. The robot remains
   anchored above the terminal without adding a second row to the section. */
@media (min-width: 1000px) and (max-height: 900px) {
  .companion-enabled .examples-head { margin-bottom: 15px; }
}
@media (min-width: 1000px) and (min-height: 901px) and (max-height: 1099px) {
  .companion-enabled .examples-head { margin-bottom: 28px; }
}
@media (min-width: 1600px) and (min-height: 1100px) {
  .companion-enabled .examples-head { margin-bottom: 52px; }
}