:root {
  --od-bg: #F4F3E3;     /* beige */
  --od-speed: 1.1s;     /* rotation speed */
}

/* Fullscreen overlay while loading */
#od-preloader {
  position: fixed;
  inset: 0;
  background: var(--od-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity .4s ease;
}

/* Minimal ring wrapper */
.od-loader-wrap {
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
}

/* Rotating SVG ring */
.od-loader {
  width: 70%;
  height: 70%;
  animation: od-rotate linear var(--od-speed) infinite;
  transform-origin: 50% 50%;
}
@keyframes od-rotate { to { transform: rotate(360deg); } }

/* HiDPI: thinner stroke */
@media (min-resolution: 2dppx) {
  .od-arc { stroke-width: 1 !important; }
}

/* ✅ Scroll behavior control via classes only (no global locks) */
html, body {
  /* Ensure default pull-to-refresh and native gestures remain enabled */
  overscroll-behavior: auto !important;
  touch-action: auto !important;
}

/* While loading: prevent page scroll beneath overlay only via class */
html.loading, body.loading {
  overflow: hidden !important;
  height: 100%;
}

/* After loaded: restore natural scrolling */
html.loaded, body.loaded {
  overflow: auto !important;
  height: auto !important;
}