/*
 * sophiaxt.com's motion on the Safe-Desk pages: the scroll rail, the code
 * field, enter-once reveals, the word-by-word hero, the accent sheen, blur-in
 * headings and pointer tilt. Every hidden state is scoped to html.sx-js, so
 * with scripts off the page is simply all there. Reduced motion turns every
 * move off and leaves the rail, which tracks position rather than moving.
 *
 * @author Thomas G. and Sophia, SOPHIA XT LLC (sophiaxt.com)
 */

/* Scroll rail: how far through the page the reader is. */
@keyframes sx-rail { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sx-scroll-rail { position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 60; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #00d4ff, #66ffe0); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .sx-scroll-rail { animation-name: sx-rail; animation-timing-function: linear; animation-fill-mode: both; animation-duration: auto; animation-timeline: scroll(root block); }
}

/* The code field, fixed behind everything and above the grid. */
.sx-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* Enter once: hidden until the observer marks it, then one animation that holds. */
.sx-js .sx-enter { opacity: 0; }
.sx-js .sx-enter[data-shown] { animation: sx-enter-up 560ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.sx-js .sx-enter[data-from="left"][data-shown] { animation-name: sx-enter-left; }
.sx-js .sx-enter[data-from="right"][data-shown] { animation-name: sx-enter-right; }
.sx-js .sx-enter[data-from="flat"][data-shown] { animation-name: sx-enter-flat; }
@keyframes sx-enter-up { from { opacity: 0; transform: perspective(900px) translate3d(0, 26px, 0) rotateX(6deg); } to { opacity: 1; transform: none; } }
@keyframes sx-enter-left { from { opacity: 0; transform: perspective(900px) translate3d(-38px, 0, 0) rotateY(-7deg); } to { opacity: 1; transform: none; } }
@keyframes sx-enter-right { from { opacity: 0; transform: perspective(900px) translate3d(38px, 0, 0) rotateY(7deg); } to { opacity: 1; transform: none; } }
@keyframes sx-enter-flat { from { opacity: 0; } to { opacity: 1; } }

/* Section headings arrive out of a blur, once. */
.sx-js .sx-blur-in { filter: blur(14px); opacity: 0; transform: translateY(14px); transition: filter 900ms cubic-bezier(0.22,1,0.36,1), opacity 700ms ease, transform 900ms cubic-bezier(0.22,1,0.36,1); }
.sx-js .sx-blur-in[data-shown] { filter: none; opacity: 1; transform: none; }

/* Hero words, each rising out of its own clipped box. */
.sx-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.sx-w-in { display: inline-block; transform: translateY(112%); transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1); }
.sx-words.is-on .sx-w-in { transform: none; }

/* The accent phrase: cyan to mint with a slow sheen crossing it. */
.sx-accent {
  background-image:
    linear-gradient(110deg, transparent 0%, transparent 40%, rgba(255,255,255,0.9) 50%, transparent 60%, transparent 100%),
    linear-gradient(120deg, #8fe9ff 0%, #66ffe0 45%, #00d4ff 100%);
  background-size: 220% 100%, 100% 100%; background-position: 200% 0, 0 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: sx-sheen 7s ease-in-out 1.8s infinite;
}
@keyframes sx-sheen { 0%, 62% { background-position: 200% 0, 0 0; } 100% { background-position: -120% 0, 0 0; } }

/* Pointer tilt: moves only while a fine pointer is on the card. */
.sx-tilt { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); transform-style: preserve-3d; }
.sx-tilt:hover { border-color: rgba(0,212,255,0.35); }

/* Scroll cue under the hero: a line that keeps pouring. */
.sx-scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 36px; font: 10.5px var(--mono, monospace); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.4); text-decoration: none; }
.sx-scroll-cue::after { content: ""; width: 1px; height: 44px; background: linear-gradient(180deg, rgba(0,212,255,0.8), transparent); transform-origin: top; animation: sx-pour 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
@keyframes sx-pour { 0% { transform: scaleY(0); opacity: 0; } 35% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

@media (hover: none) { .sx-tilt { transform: none !important; transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .sx-js .sx-enter, .sx-js .sx-blur-in { opacity: 1; filter: none; transform: none; }
  .sx-js .sx-enter[data-shown] { animation: none; }
  .sx-w-in { transform: none; transition: none; }
  .sx-accent, .sx-scroll-cue::after { animation: none; }
  .sx-tilt { transform: none !important; transition: none; }
  .sx-scroll-rail { opacity: 0.8; }
}