/**
 * Mobile safety — prevent blank white screen on small phones when
 * splash or motion scripts are slow, blocked, or fail.
 */
@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    min-height: 100%;
    min-height: 100dvh;
  }

  body {
    padding-top: max(72px, calc(56px + env(safe-area-inset-top, 0px)));
  }

  .fixed-header {
    padding-top: env(safe-area-inset-top, 0);
  }

  /* Always show main content wrapper after paint (splash overrides temporarily) */
  #ns-main.na-page-content {
    min-height: 50vh;
    visibility: visible;
  }

  body.na-splash-resolved #ns-main.na-page-content,
  body.na-landing-ready #ns-main.na-page-content,
  body:not(.na-splash-on) #ns-main.na-page-content {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .hero-slider,
  #heroDealSlider {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: transparent !important;
  }

  #heroDealSlider .slides-container {
    aspect-ratio: 16 / 9;
    max-height: 48vh;
  }

  .na-splash-loader {
    width: 168px !important;
    height: 168px !important;
  }

  .na-splash-logo {
    width: 92px !important;
    height: 92px !important;
  }

  #naSplash {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    /* CSS-only fallback if JS fails on phone */
    animation: naSplashCssHide 0.01s 2.6s forwards;
  }

  body.na-splash-on {
    animation: naSplashBodyUnlock 0.01s 2.6s forwards;
  }

  @keyframes naSplashCssHide {
    to {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      display: none;
    }
  }

  @keyframes naSplashBodyUnlock {
    to {
      overflow: auto;
    }
  }
}

/* Hard fallback: force page visible if splash class stuck > 6s */
@keyframes naForceVisible {
  to {
    opacity: 1;
    transform: none;
    visibility: visible;
  }
}

body.na-splash-on .na-page-content,
body.na-splash-on #ns-main {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body.na-landing-ready .fade-up,
body.na-splash-resolved .fade-up,
body.na-landing-ready .ns-reveal,
body.na-splash-resolved .ns-reveal,
body.na-landing-ready [data-na-reveal],
body.na-splash-resolved [data-na-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  visibility: visible !important;
}

html.na-js #ns-main [data-na-reveal]:not(.na-in),
html.na-js #ns-main .fade-up:not(.visible):not(.is-visible) {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

html.na-js [data-na-reveal]:not(.na-in) {
  animation: naRevealSafety 0.4s ease 1.5s forwards;
}

@keyframes naRevealSafety {
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

html.na-js [data-na-reveal].na-in {
  animation: none !important;
}

/* Do not fade entire body while splash locks scroll */
html.na-js body.na-splash-on {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Hard kill-switch: splash + hidden landing (CSS-only, no JS required) */
html.na-force-show #naSplash {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.na-force-show body {
  overflow: auto !important;
}

html.na-force-show #ns-main,
html.na-force-show #ns-main .fade-up,
html.na-force-show #ns-main section,
html.na-force-show #ns-main [data-na-reveal],
html.na-force-show .fixed-header {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}