/**
 * Arsam Section Scroll.
 *
 * Two independent layers, each switched on by an attribute that JS only sets
 * after a successful start:
 *
 *   [data-arsam-ss-full="on"]    sections fill a screen
 *   [data-arsam-ss-reveal="on"]  content appears as you scroll into it
 *
 * Because both are gated on those attributes, no JavaScript means no hidden
 * content: the page renders completely normally. Nothing here is hidden
 * permanently, and every selector is scoped to the Arsam section classes.
 */

/* ==================================================== section-by-section */

/* `min-height` rather than `height`: a section whose content is taller than
   the screen grows instead of being cropped or scrolled inside itself.
   `100svh` avoids the mobile-browser toolbar jump that 100vh causes. */
html[data-arsam-ss-full="on"] [data-arsam-ss-full="1"] {
  min-height: 100svh;
  display: grid;
  align-content: center;
  box-sizing: border-box;
}

/* Older engines without svh still get the intended rhythm. */
@supports not (height: 100svh) {
  html[data-arsam-ss-full="on"] [data-arsam-ss-full="1"] {
    min-height: 100vh;
  }
}

/* A section directly under the sticky header must not hide behind it. */
html[data-arsam-ss-full="on"] [data-arsam-ss-full="1"] {
  scroll-margin-top: var(--arsam-header-h, 82px);
}

/* Short screens and phones: forcing a full screen per section turns into a lot
   of empty space and a very long page, so the rhythm is desktop-only. */
@media (max-width: 900px), (max-height: 620px) {
  html[data-arsam-ss-full="on"] [data-arsam-ss-full="1"] {
    min-height: 0;
    display: block;
    align-content: normal;
  }
}

/* ======================================================= progressive reveal */

html[data-arsam-ss-reveal="on"] [data-arsam-ss="1"] {
  opacity: var(--arsam-ss-o, 1);
  transform: translate3d(0, var(--arsam-ss-y, 0px), 0);
  /* No CSS transition: JS scrub-lag (like GSAP scrub:0.5) owns the softness. */
  will-change: opacity, transform;
}

/* Keep text crisp while it moves. */
html[data-arsam-ss-reveal="on"] [data-arsam-ss="1"] {
  backface-visibility: hidden;
}

/* An element that never received a value from JS stays fully visible. */
html[data-arsam-ss-reveal="on"] [data-arsam-ss="1"]:not([style*="--arsam-ss-o"]) {
  opacity: 1;
  transform: none;
}

/* ============================================================ safety nets */

/* Reduced motion: no rhythm changes, no movement, everything simply visible.
   The `data-arsam-motion-preview` guard is the single exception — it is set
   only for an administrator using ?arsam-motion=preview, or when the owner has
   deliberately switched the site-wide override on in Settings. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-arsam-motion-preview]) [data-arsam-ss="1"] {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* Printing and Elementor's editor both want the plain document. */
@media print {
  [data-arsam-ss="1"] {
    opacity: 1 !important;
    transform: none !important;
  }

  [data-arsam-ss-full="1"] {
    min-height: 0 !important;
  }
}