/* Minimal two-dimensional scrolling experiment.
   Vertical: native CSS scroll snapping. Horizontal: a blank second panel. */
html {
  scroll-snap-type: y mandatory;
  scroll-padding-top: calc(var(--overcloq-nav-height, 44px) - 3px);
}
.landing-screen,
.hero-product-view,
.oem-section,
.contact-section {
  scroll-snap-align: start;
  /* Encourage stopping at each section while preserving native scrolling;
     this is not a hard one-gesture-per-section limiter. */
  scroll-snap-stop: always;
}

/* Keep each existing section's styling/layout. Slide its original direct
   children left by one viewport; reveal a blank panel of equal height. */
.two-d-section {
  position: relative;
  overflow-x: clip;
}
.two-d-section > :not(.two-d-blank) {
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.two-d-blank {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  background: inherit;
  pointer-events: none;
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
}
.two-d-section.is-two-d-detail > :not(.two-d-blank) { transform: translateX(-100vw); }
.two-d-section.is-two-d-detail > .two-d-blank { transform: translateX(0); }

/* The floating controls replace, rather than coexist with, the up/down bar. */
.two-d-controls {
  position: fixed;
  inset: 0;
  z-index: 29;
  pointer-events: none;
}
.two-d-controls[hidden], .two-d-arrow[hidden] { display: none; }
.two-d-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #d3c9ba;
  border-radius: 50%;
  background: rgb(250 247 240 / 94%);
  color: #514c44;
  box-shadow: 0 8px 28px rgb(50 39 22 / 7%);
  cursor: pointer;
  pointer-events: auto;
}
.two-d-arrow--left { left: clamp(8px, 1.3vw, 22px); }
.two-d-arrow--right { right: clamp(8px, 1.3vw, 22px); }
.two-d-arrow svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.two-d-arrow:hover { background: #e8ded1; }
.two-d-arrow:focus-visible { outline: 2px solid #877565; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .two-d-section > :not(.two-d-blank), .two-d-blank { transition: none; }
}

/* The footer belongs to the Contact panel, not to a separate scroll stop.
   Let it occupy the bottom of Contact while the contact information stays
   centered in the remaining space. Small screens can grow naturally. */
.contact-section {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}
.contact-section > .contact-inner {
  margin-top: auto;
  margin-bottom: auto;
  padding-top: clamp(36px, 6vh, 80px);
  padding-bottom: clamp(28px, 5vh, 64px);
}
.contact-section > .site-footer {
  flex: 0 0 auto;
  width: 100%;
}