/* athena-motion — the house scroll-motion layer for DF5 sales pages.
 *
 * THE ONE RULE THIS FILE ENFORCES:
 * nothing is hidden unless <html> carries the class `am-js`. The script adds
 * that class itself. So if the script never loads, never parses, or is blocked,
 * every word of the page is visible and the page still sells. A sales page that
 * renders blank when a script fails is a page that sometimes shows a buyer
 * nothing.
 *
 * Only `opacity` and `transform` are ever animated. Both are composited by the
 * browser, so they do not force the page to re-lay-out on every frame and do not
 * shift the layout under a thumb already reaching for the button.
 */

:root {
  --am-duration: 620ms;
  --am-duration-fast: 380ms;
  --am-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --am-distance: 26px;
  --am-stagger: 90ms;
  --am-marquee-duration: 42s;
  --am-lift: -4px;
  --am-fade-size: 12%;
}

/* ── 1. REVEAL ON ENTRY ─────────────────────────────────────────────────── */

.am-js [data-am-reveal] {
  opacity: 0;
  transition:
    opacity var(--am-duration) var(--am-ease),
    transform var(--am-duration) var(--am-ease);
  transition-delay: var(--am-delay, 0ms);
  will-change: opacity, transform;
}

.am-js [data-am-reveal="up"],
.am-js [data-am-reveal=""] { transform: translate3d(0, var(--am-distance), 0); }
.am-js [data-am-reveal="down"]  { transform: translate3d(0, calc(var(--am-distance) * -1), 0); }
.am-js [data-am-reveal="left"]  { transform: translate3d(var(--am-distance), 0, 0); }
.am-js [data-am-reveal="right"] { transform: translate3d(calc(var(--am-distance) * -1), 0, 0); }
.am-js [data-am-reveal="fade"]  { transform: none; }
.am-js [data-am-reveal="scale"] { transform: scale(0.965); }

.am-js [data-am-reveal].am-in {
  opacity: 1;
  transform: none;
}

/* Once it has arrived, stop claiming a compositor layer forever. */
.am-js [data-am-reveal].am-done { will-change: auto; }

/* ── 2. PINNED PANELS ───────────────────────────────────────────────────── */
/* A heading or image holds still while the column beside it scrolls past.
 * Native sticky — no scroll listener, no jank, and it degrades to a normal
 * block in any browser that does not support it. */

[data-am-pin] {
  position: sticky;
  top: var(--am-pin-top, 96px);
  align-self: start;
}

/* ── 3. EDGE FADES ──────────────────────────────────────────────────────── */
/* Content dissolves at the edge of a scrolling strip rather than being cut. */

.am-fade-x {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--am-fade-size), #000 calc(100% - var(--am-fade-size)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--am-fade-size), #000 calc(100% - var(--am-fade-size)), transparent 100%);
}
.am-fade-y {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--am-fade-size), #000 calc(100% - var(--am-fade-size)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--am-fade-size), #000 calc(100% - var(--am-fade-size)), transparent 100%);
}

/* ── 4. MARQUEE ─────────────────────────────────────────────────────────── */
/* Logos or proof points drifting sideways forever. The script duplicates the
 * row once so the loop has no visible seam. */

[data-am-marquee] {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
[data-am-marquee] > .am-marquee-track {
  display: flex;
  flex: 0 0 auto;
  gap: inherit;
  align-items: center;
  min-width: 100%;
  animation: am-marquee var(--am-marquee-duration) linear infinite;
}
[data-am-marquee][data-am-direction="right"] > .am-marquee-track { animation-direction: reverse; }
[data-am-marquee]:hover > .am-marquee-track { animation-play-state: paused; }

@keyframes am-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ── 5. HOVER LIFT ──────────────────────────────────────────────────────── */
/* Only on devices with a real pointer. On a touch screen `:hover` sticks after
 * a tap and the card stays stuck up. */

@media (hover: hover) and (pointer: fine) {
  .am-lift {
    transition: transform var(--am-duration-fast) var(--am-ease);
  }
  .am-lift:hover { transform: translate3d(0, var(--am-lift), 0); }
}

/* ── 6. REDUCED MOTION — same content, same order, no movement ───────────── */
/* Not optional. Motion sickness is real and the reader is usually on a phone. */

@media (prefers-reduced-motion: reduce) {
  .am-js [data-am-reveal],
  .am-js [data-am-reveal].am-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  [data-am-marquee] > .am-marquee-track { animation: none !important; }
  .am-lift:hover { transform: none !important; }
  [data-am-pin] { position: static; }
}

/* ── 7. PRINT — a printed page has no scroll ────────────────────────────── */

@media print {
  .am-js [data-am-reveal] { opacity: 1 !important; transform: none !important; }
  [data-am-pin] { position: static; }
}