/* ============================================================
   MANIVANTA motion layer "Ink & Chrome" (public/ry-motion.css)
   Loads after rayshe.css; driven by public/ry-motion.js.

   Switches (all set by ry-motion.js on <html>, never in base CSS):
     html.ry-mo        scroll reveal is armed (modes "reveal" + "full")
     html.ry-mo-full   hover sheen, footer link square, page leave
     html.ry-mo-instant every transition/animation off (revealAll hook)
   The only rules that act without JS are the static marker underline
   under heading <em> (a look, not a motion) and the page-enter fade,
   which is a self-finishing CSS animation gated by
   body[data-ry-motion="full"] + prefers-reduced-motion:no-preference.

   No JS / reduced motion / theme editor / data-ry-motion="off":
   nothing is hidden, nothing moves.
   Only transform / opacity / clip-path / background-size animate.
   ============================================================ */

/* ---------- 0. marker underline under heading <em> (static look) ---------- */
.ry-h1 em,
.ry-h2 em,
.ry-display em,
.ry-section-title em {
  font-style: normal;
  padding-bottom: 0.08em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.2c17-3.4 36-5 57-4.7 21 .3 40 2.9 62 2.5 25-.4 47-3.7 75-3' fill='none' stroke='%23B75432' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M14 11.6c38-2.2 86-2.4 170-5.4' fill='none' stroke='%23B75432' stroke-width='1.4' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* drawn left to right once it is in view (class added by JS) */
html.ry-mo .ry-mo-em:not(.is-drawn) { background-size: 0% 0.3em; }
html.ry-mo .ry-mo-em.is-drawn {
  transition: background-size 0.7s var(--ry-ease) var(--ry-mo-ed, 0ms);
}

/* ---------- 1. headings: masked lines rise ---------- */
/* before the split (fonts still loading) the whole heading waits */
html.ry-mo .ry-mo-h:not(.is-in) { opacity: 0.01; }
html.ry-mo .ry-mo-h.is-in { opacity: 1; transition: opacity 0.8s var(--ry-ease) var(--ry-mo-d, 0ms); }
html.ry-mo .ry-mo-h[data-ry-split] { opacity: 1; transition: none; }
.ry-mo__ln {
  display: block;
  overflow: hidden;
  /* room for descenders + marker line inside the mask, net zero in layout */
  padding: 0.08em 0 0.18em;
  margin: -0.08em 0 -0.18em;
}
.ry-mo__lni { display: block; }
html.ry-mo .ry-mo-h:not(.is-in) .ry-mo__lni { transform: translateY(105%); }
html.ry-mo .ry-mo-h.is-in .ry-mo__lni {
  transform: none;
  transition: transform 0.9s var(--ry-ease);
  transition-delay: calc(var(--ry-mo-d, 0ms) + var(--i, 0) * 80ms);
}
html.ry-mo .ry-mo-h.is-in:not(.is-done) .ry-mo__lni { will-change: transform; }
.ry-mo-h.is-done .ry-mo__ln { overflow: visible; }

/* ---------- 2. images: wipe up + settle from 1.08 ---------- */
html.ry-mo .ry-mo-img { clip-path: inset(100% 0 0 0); }
html.ry-mo .ry-mo-img img,
html.ry-mo .ry-mo-img video,
html.ry-mo .ry-mo-img > svg { transform: scale(1.08); }
html.ry-mo .ry-mo-img.is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--ry-ease) var(--ry-mo-d, 0ms);
  will-change: clip-path;
}
html.ry-mo .ry-mo-img.is-in img,
html.ry-mo .ry-mo-img.is-in video,
html.ry-mo .ry-mo-img.is-in > svg {
  transform: none;
  transition: transform 1.1s var(--ry-ease) var(--ry-mo-d, 0ms);
  will-change: transform;
}

/* ---------- 3. cards / list items / paragraphs: up 20px + fade ----------
   Reuses the legacy .ry-reveal / .is-in pair from rayshe.css. The
   transition lives on the "in" state only, so arming an element that
   is off screen never animates it out. */
html.ry-mo .ry-reveal {
  opacity: 0.01;
  transform: translateY(20px);
  transition: none;
}
html.ry-mo .ry-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ry-ease) var(--ry-mo-d, 0ms), transform 0.8s var(--ry-ease) var(--ry-mo-d, 0ms);
  will-change: opacity, transform;
}

/* ---------- 4. chrome sheen across buttons (full, fine pointers) ----------
   .button::after is the native outline ring, so the sheen is ::before.
   Instead of overflow:hidden (it would cut the ring drawn 1–2px outside
   the box) the button clips itself 3px out while hovered. */
@media (hover: hover) and (pointer: fine) {
  html.ry-mo-full .ry-satc__btn { position: relative; }
  html.ry-mo-full :is(.ry-btn, .button:not(.button--link):not(.button--text):not(.button--icon), .ry-satc__btn)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(var(--ry-ink-rgb), 0.18) 50%, transparent 70%);
    opacity: 0;
    transform: translateX(-120%);
  }
  /* bone (primary) buttons: an ink-white glint would vanish, use the chrome band */
  html.ry-mo-full :is(.ry-btn--primary, .button:not(.button--secondary):not(.button--link):not(.button--text):not(.button--icon), .ry-satc__btn)::before {
    background: var(--ry-chrome);
    -webkit-mask-image: linear-gradient(115deg, transparent 30%, currentColor 50%, transparent 70%);
    mask-image: linear-gradient(115deg, transparent 30%, currentColor 50%, transparent 70%);
  }
  html.ry-mo-full :is(.ry-btn, .button:not(.button--link):not(.button--text):not(.button--icon), .ry-satc__btn):hover {
    clip-path: inset(-3px);
  }
  html.ry-mo-full :is(.ry-btn, .button:not(.button--link):not(.button--text):not(.button--icon), .ry-satc__btn):hover::before {
    opacity: 1;
    transform: translateX(120%);
    transition: transform 0.9s var(--ry-ease);
  }
  html.ry-mo-full :is(.ry-btn--primary, .button:not(.button--secondary):not(.button--link):not(.button--text):not(.button--icon), .ry-satc__btn):hover::before {
    opacity: 0.6;
  }
  html.ry-mo-full :is(.ry-btn, .button, .ry-satc__btn):is([disabled], .disabled, .loading, .is-off, [aria-disabled="true"])::before {
    display: none;
  }

  /* ---------- 5. footer links: a 6px signal square slides in ---------- */
  html.ry-mo-full .ry-footer a.ry-footer__link { position: relative; }
  html.ry-mo-full .ry-footer a.ry-footer__link::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    background: var(--ry-signal);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.5s var(--ry-ease), transform 0.5s var(--ry-ease);
    pointer-events: none;
  }
  html.ry-mo-full .ry-footer a.ry-footer__link:hover::before {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 6. page enter / leave ---------- */
@keyframes ry-mo-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  /* self-finishing: visible after .5s even if no JS ever runs */
  body[data-ry-motion="full"]:not(.a9-design-mode) {
    animation: ry-mo-enter 0.5s var(--ry-ease) backwards;
  }
}
html.ry-mo-entered body,
html.ry-mo-leave body { animation: none; }
html.ry-mo-full.ry-mo-leave body {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ry-ease);
}
html.ry-mo-full.ry-mo-leave .ry-mo-lift {
  transform: translateY(-12px);
  transition: transform 0.35s var(--ry-ease);
}

/* ---------- 7. first-visit brand intro (appended to <html>, not <body>) ---------- */
.ry-mo-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #171719; /* brand intro curtain stays ink, whatever the page scheme */
  transform: none;
}
.ry-mo-intro__in {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 0 16px;
}
.ry-mo-intro__word {
  font-family: var(--ry-font-serif);
  font-weight: 800;
  font-size: clamp(40px, 12vw, 148px);
  line-height: 0.92;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #F4F0E8;
  opacity: 0;
  transform: translateY(0.18em);
}
.ry-mo-intro__line {
  display: block;
  height: 2px;
  background: var(--ry-chrome-on-dark, var(--ry-chrome));
  transform: scaleX(0);
  transform-origin: left center;
}
.ry-mo-intro.is-play .ry-mo-intro__word {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ry-ease), transform 0.7s var(--ry-ease);
}
.ry-mo-intro.is-play .ry-mo-intro__line {
  transform: none;
  transition: transform 0.8s var(--ry-ease) 0.1s;
}
.ry-mo-intro.is-lift {
  transform: translateY(-100%);
  transition: transform 0.4s var(--ry-ease);
}

/* ---------- 8. test hook: jump everything to its end state ---------- */
html.ry-mo-instant,
html.ry-mo-instant *,
html.ry-mo-instant *::before,
html.ry-mo-instant *::after {
  transition: none !important;
  animation: none !important;
}

/* ---------- 9. safety nets ---------- */
@media (prefers-reduced-motion: reduce) {
  html.ry-mo .ry-reveal,
  html.ry-mo .ry-mo-h,
  html.ry-mo .ry-mo-h .ry-mo__lni,
  html.ry-mo .ry-mo-img,
  html.ry-mo .ry-mo-img img,
  html.ry-mo .ry-mo-img video,
  html.ry-mo .ry-mo-img > svg,
  html.ry-mo-leave body,
  html.ry-mo-leave .ry-mo-lift {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  html.ry-mo .ry-mo-em { background-size: 100% 0.3em !important; transition: none !important; }
  .ry-mo-intro { display: none !important; }
}
body.a9-design-mode .ry-reveal,
body.a9-design-mode .ry-mo-h,
body.a9-design-mode .ry-mo-h .ry-mo__lni,
body.a9-design-mode .ry-mo-img,
body.a9-design-mode .ry-mo-img img {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}