/* Publication fixes, kept separate from the supplied design. */
html { scroll-behavior: smooth; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 18px; background: #acf532; color: #121212; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
#zabava-directions-v2 :focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
#zabava-directions-v2 .section { scroll-margin-top: 24px; }

/* Content remains readable without JS, with reduced motion, and on phones. */
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio * {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
  will-change: auto !important;
}
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .section {
  min-height: 0 !important;
  padding: 68px 22px !important;
}
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .section .inner {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .game-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  height: auto !important;
  gap: 18px !important;
}
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .game-card {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  height: auto !important;
  gap: 18px !important;
}
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .step { margin: 0 !important; }
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .step-route { display: none !important; }
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .intro-line { display: inline !important; }
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .intro-line + .intro-line::before { content: " "; }
@media (max-width: 900px) {
  #zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .game-grid,
  #zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .steps {
    grid-template-columns: 1fr !important;
  }
  #zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .section { padding: 56px 18px !important; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .section-head {
  position: relative !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) !important;
  gap: 28px !important;
}
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio :is(.card, .quote, .game-card, .step) {
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  min-width: 0 !important;
}
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .feature {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .intro-block .section-head > p {
  display: block !important;
}
@media (max-width: 900px) {
  #zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio :is(.section-head, .grid-4, .feature) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .section-head > div {
    min-width: 0 !important;
  }
  #zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .feature .media {
    min-width: 0 !important;
    width: 100% !important;
  }
  #zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio h2 {
    font-size: clamp(26px, 7vw, 42px) !important;
    line-height: 1.08 !important;
    overflow-wrap: break-word;
  }
}
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .shape-belt { overflow: hidden !important; }
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .hero-shapes-art {
  transform: translateX(-50%) !important;
}
#zabava-directions-v2#zabava-directions-v2:not(.motion-enabled) .studio .game-card {
  display: block !important;
  height: auto !important;
}

/* Scroll triggers the fade; the fade then completes even if scrolling stops. */
#zabava-directions-v2#zabava-directions-v2.motion-enabled .studio #releases .game-card {
  opacity: var(--release-opacity, 0) !important;
  transition: opacity 420ms cubic-bezier(0.22, 0.72, 0.16, 1), background-color 220ms ease-out !important;
  transition-delay: 0ms !important;
  transform-origin: center top !important;
}
#zabava-directions-v2#zabava-directions-v2.motion-enabled .studio #releases .game-card:first-child {
  opacity: var(--release-opacity, 1) !important;
}
#zabava-directions-v2#zabava-directions-v2.motion-enabled .studio #releases .game-card:not(.is-entered) {
  pointer-events: none;
}
/* These sections reveal by viewport threshold, then animate independently. */
#zabava-directions-v2#zabava-directions-v2.motion-enabled .studio .trigger-section .section-head,
#zabava-directions-v2#zabava-directions-v2.motion-enabled .studio .trigger-section h2,
#zabava-directions-v2#zabava-directions-v2.motion-enabled .studio .trigger-section .intro-line {
  opacity: 1 !important;
  transform: none !important;
}
#zabava-directions-v2#zabava-directions-v2.motion-enabled .studio .trigger-reveal {
  opacity: 0 !important;
  transform: translate3d(0, 28px, 0) !important;
  transition: opacity 480ms ease-out, transform 560ms cubic-bezier(0.22, 0.72, 0.16, 1) !important;
  transition-delay: 0ms !important;
}
#zabava-directions-v2#zabava-directions-v2.motion-enabled .studio .trigger-reveal.trigger-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: var(--trigger-delay, 0ms) !important;
}
#zabava-directions-v2#zabava-directions-v2 .faq-answer { display: flow-root; }
#zabava-directions-v2#zabava-directions-v2 .faq-item summary[aria-expanded="false"]::after { content: "+"; }
#zabava-directions-v2#zabava-directions-v2 .faq-item summary[aria-expanded="true"]::after { content: "-"; }
#zabava-directions-v2#zabava-directions-v2.motion-enabled .studio #faq .inner {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

/* Opaque rear layers: a coral tint replaces stack transparency. */
#zabava-directions-v2#zabava-directions-v2.motion-enabled .studio #releases .game-card {
  background-color: var(--release-background, var(--cloud)) !important;
}
#zabava-directions-v2#zabava-directions-v2.motion-enabled .studio #releases .game-grid {
  height: calc(clamp(260px, 32vh, 318px) + 72px) !important;
}
/* CTA buttons are temporarily hidden, including their empty paragraph wrappers. */
#zabava-directions-v2#zabava-directions-v2 .cta,
#zabava-directions-v2#zabava-directions-v2 p:has(> .cta) {
  display: none !important;
}
@media (min-width: 901px) {
  #zabava-directions-v2#zabava-directions-v2 .nav {
    grid-template-columns: auto 1fr;
  }
}