/*==================================================
  CLS & Stability Fixes — ElevatorPlus.app
  Fix #5 (partial): Layout stability improvements
  Skipped: Font Loading Optimization (already done)
==================================================*/

/* 1. PREVENT HORIZONTAL SCROLL ON BODY
   (html already has overflow-x:hidden in theme.css) */
body {
  overflow-x: hidden;
}

/* 2. ASPECT-RATIO CONTAINERS (for future use)
   These classes have zero effect until applied to HTML elements.
   Use them to wrap images to prevent CLS during load. */
.image-container {
  position: relative;
  width: 100%;
}

.image-container::before {
  content: '';
  display: block;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1:1 square */
.image-container-square::before {
  padding-bottom: 100%;
}

/* 16:9 video/wide */
.image-container-16-9::before {
  padding-bottom: 56.25%;
}

/* Client logo ratio (512:343) */
.image-container-logo::before {
  padding-bottom: 67%;
}

/* 3. ACCESSIBILITY — REDUCED MOTION
   Respects user OS preference; has no effect for users
   who have not enabled "Reduce Motion" in their settings. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 4. SAFE AREA INSET — NOTCHED DEVICES
   Only activates on iPhones with a notch/Dynamic Island.
   env(safe-area-inset-*) is 0px on all other devices,
   so this has zero effect on non-notched screens. */
@supports (padding: env(safe-area-inset-left)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}