/* RFID Smart Cabinet — containers, section rhythm, scroll reveal */

.container {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container--standard {
  max-width: var(--container-standard);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding: var(--section-space) 0;
}

.section--alt {
  background-color: var(--color-bg-secondary);
}

/* Clear the sticky nav (static below 1024px without JS): focused controls
 * stop 16px below it; section jumps give that 16px back and land flush. */
html {
  scroll-padding-top: calc(var(--nav-height) + var(--space-4));
}

section[id] {
  scroll-margin-top: calc(1px - var(--space-4));
}

@media (max-width: 1023px) {
  html:not(.js) {
    scroll-padding-top: 0;
  }

  html:not(.js) section[id] {
    scroll-margin-top: 0;
  }
}

@media (min-width: 640px) {
  .container {
    padding: 0 var(--space-5);
  }
}

/* Scroll reveal: hides nothing until scroll-animations.js sets html.reveal-ready */
html.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

html.reveal-ready .reveal--visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.reveal-ready .reveal {
    opacity: 1;
    transform: none;
  }
}