/* App FX: the HorizonX "NOLITH Freight Intelligence Hero" scoped to
   #app-fx. The template's own command bar is left out: the theme's header
   takes its place, and --sv-header (js/app-fx.js) makes room for it. */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

#app-fx {
  --graphite: #090c0d;
  --bone: #ece9df;
  --muted: color-mix(in srgb, var(--bone) 64%, transparent);
  --line: color-mix(in srgb, var(--bone) 18%, transparent);
  --cyan: #61e8ff;
  --amber: #ffb12b;
  --font: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Text sizes chosen in the settings (1 = as designed); phones have their own. */
  --nl-title: var(--sv-title-d, 1);
  --nl-text: var(--sv-text-d, 1);
  /* How much page the sequence takes to play (settings). */
  --nl-length: 520vh;

  position: relative;
  isolation: isolate;
  overflow-x: clip;
  color: var(--bone);
  background: var(--graphite);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  font-synthesis: none;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

/* Full bleed out of the theme's column; js/app-fx.js refines the numbers. */
#app-fx.app-fx--full { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
#app-fx.app-fx--theme-font { --font: inherit; }

/* Undo what themes usually put on plain elements; the block's own rules win. */
#app-fx *, #app-fx *::before, #app-fx *::after { box-sizing: border-box; }
#app-fx :is(div, section, article, nav, p, h1, h2, h3, a, button, span, i, img, canvas) {
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none; float: none;
  text-transform: none; text-shadow: none; text-decoration: none; letter-spacing: normal;
  font-family: inherit; color: inherit; line-height: inherit; min-height: 0; max-width: none;
}
#app-fx :is(h1, h2, h3, p)::before, #app-fx :is(h1, h2, h3, p)::after { content: none; }
#app-fx button, #app-fx a { font: inherit; }
#app-fx button:focus-visible, #app-fx a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

/* ---------- Sequence ---------- */
#app-fx .sequence-scroll { height: var(--nl-length); position: relative; }
#app-fx .sequence-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 620px;
  overflow: hidden; isolation: isolate; background: color-mix(in srgb, var(--graphite) 90%, var(--bone));
}
#app-fx .sequence-canvas, #app-fx .sequence-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
#app-fx .sequence-poster { transition: opacity .2s; }
#app-fx .sequence-poster.is-hidden { opacity: 0; }
/* Particles that glow on and off while the sequence has not started yet
   (and while the first frame is still loading), so the stage is never a
   black screen. They fade away as soon as the sequence moves. */
#app-fx .sequence-sparks {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none; opacity: 1; transition: opacity .7s ease;
}
#app-fx .sequence-sparks.is-off { opacity: 0; }
#app-fx.reduced-motion .sequence-sparks { display: none; }
#app-fx .sequence-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--graphite) 88%, transparent) 0%, color-mix(in srgb, var(--graphite) 48%, transparent) 31%, transparent 60%),
    linear-gradient(0deg, color-mix(in srgb, var(--graphite) 68%, transparent), transparent 38%);
}

/* Thin line of system text under the theme's header. */
#app-fx .sequence-topline {
  position: absolute; top: calc(28px + var(--sv-header, 0px)); left: 32px; right: 32px;
  display: flex; justify-content: space-between; padding-top: 0; border-top: 0;
  color: color-mix(in srgb, var(--bone) 72%, transparent);
  font: 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
#app-fx.app-fx--no-readout .frame-readout { visibility: hidden; }

/* ---------- Chapters ---------- */
#app-fx .chapter-copy {
  position: absolute; z-index: 2;
  left: clamp(28px, 6vw, 96px); bottom: clamp(104px, 13vh, 138px);
  width: min(720px, 53vw);
  opacity: 0; pointer-events: none;
  transition: opacity .22s cubic-bezier(.4, 0, 1, 1);
}
#app-fx .chapter-copy > * {
  opacity: 0; transform: translateY(20px); clip-path: inset(0 0 100% 0);
  transition: opacity .38s cubic-bezier(.2, .7, .2, 1), transform .68s cubic-bezier(.16, 1, .3, 1), clip-path .68s cubic-bezier(.16, 1, .3, 1);
  transition-delay: 0s;
}
#app-fx .chapter-copy.is-visible { opacity: 1; pointer-events: auto; transition: opacity .28s ease-out; }
#app-fx .chapter-copy.is-visible > * { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); }
#app-fx .chapter-copy.is-visible > .chapter-kicker { transition-delay: 0s; }
#app-fx .chapter-copy.is-visible > .chapter-title { transition-delay: .06s; }
#app-fx .chapter-copy.is-visible > .chapter-body { transition-delay: .14s; }
#app-fx .chapter-copy.is-entering-forward > * { transform: translateY(24px); }
#app-fx .chapter-copy.is-entering-backward > * { transform: translateY(-20px); }
#app-fx .chapter-copy.is-exiting-forward, #app-fx .chapter-copy.is-exiting-backward { opacity: 0; }
#app-fx .chapter-copy.is-exiting-forward > *, #app-fx .chapter-copy.is-exiting-backward > * {
  opacity: 0; clip-path: inset(0 0 0 0); transition-duration: .2s; transition-delay: 0s;
}
#app-fx .chapter-copy.is-exiting-forward > * { transform: translateY(-12px); }
#app-fx .chapter-copy.is-exiting-backward > * { transform: translateY(12px); }

#app-fx .chapter-kicker {
  margin: 0 0 22px; color: var(--cyan);
  font: 12px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
#app-fx .chapter-title {
  margin: 0; max-width: 720px;
  font-size: calc(clamp(48px, 5.1vw, 82px) * var(--nl-title)); line-height: .99; font-weight: 470; letter-spacing: -.042em;
  text-wrap: balance;
}
#app-fx .chapter-copy:not(:first-of-type) .chapter-title {
  max-width: 650px; font-size: calc(clamp(44px, 4.35vw, 70px) * var(--nl-title)); line-height: 1.01; letter-spacing: -.038em;
}
#app-fx .chapter-body {
  max-width: calc(490px * var(--nl-text)); margin: 30px 0 0;
  color: color-mix(in srgb, var(--bone) 78%, transparent);
  font-size: calc(17px * var(--nl-text)); line-height: 1.55; letter-spacing: -.012em;
}

/* ---------- Chapter rail ---------- */
#app-fx .chapter-rail { position: absolute; z-index: 3; right: 32px; top: 50%; transform: translateY(-42%); display: grid; width: 172px; }
#app-fx.app-fx--no-rail .chapter-rail { display: none; }
#app-fx .chapter-rail button {
  min-height: 48px; padding: 0; color: color-mix(in srgb, var(--bone) 42%, transparent);
  background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; text-align: left; cursor: pointer;
  font: 12px/1.15 var(--mono); letter-spacing: .035em; text-transform: uppercase;
  transition: color .25s, padding-left .25s, border-color .25s;
}
#app-fx .chapter-rail button span { display: inline-block; width: 35px; }
#app-fx .chapter-rail button[aria-current] { color: var(--bone); padding-left: 10px; border-color: var(--cyan); }
#app-fx .chapter-rail button[aria-current] span { color: var(--cyan); }

#app-fx .scroll-cue {
  position: absolute; right: 32px; bottom: 32px; display: flex; align-items: center; gap: 10px;
  color: var(--muted); font: 12px/1 var(--mono); text-transform: uppercase;
}
#app-fx .scroll-cue span { width: 36px; height: 1px; background: var(--cyan); transform-origin: left; animation: nl-pulse 1.8s ease-in-out infinite; }
@keyframes nl-pulse { 50% { transform: scaleX(.35); opacity: .45; } }

/* ---------- Reduced motion: one still frame and the chapters as cards ---------- */
#app-fx .accessible-chapters { display: none; }
#app-fx.reduced-motion .sequence-scroll { height: auto; }
#app-fx.reduced-motion .sequence-sticky { position: relative; height: auto; min-height: 76vh; min-height: 76svh; }
#app-fx.reduced-motion .sequence-canvas { display: none; }
#app-fx.reduced-motion .sequence-poster { display: block; opacity: 1; }
#app-fx.reduced-motion :is(.chapter-copy, .chapter-rail, .scroll-cue) { display: none; }
#app-fx.reduced-motion .accessible-chapters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); }
#app-fx.reduced-motion .accessible-chapters article { min-height: 230px; padding: 28px; background: var(--graphite); }
#app-fx.reduced-motion .accessible-chapters span { color: var(--cyan); font: 12px/1 var(--mono); }
#app-fx.reduced-motion .accessible-chapters h2, #app-fx.reduced-motion .accessible-chapters h3 { margin: 64px 0 12px; font-size: 24px; font-weight: 470; }
#app-fx.reduced-motion .accessible-chapters p { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  #app-fx { --nl-title: var(--sv-title-m, 1); --nl-text: var(--sv-text-m, 1); }
  #app-fx .sequence-scroll { height: calc(var(--nl-length) * .75); }
  #app-fx .sequence-sticky { min-height: 100vh; min-height: 100svh; }
  #app-fx .sequence-shade {
    background: linear-gradient(0deg, color-mix(in srgb, var(--graphite) 90%, transparent) 0%, color-mix(in srgb, var(--graphite) 35%, transparent) 48%, color-mix(in srgb, var(--graphite) 5%, transparent) 75%);
  }
  #app-fx .sequence-topline { top: calc(20px + var(--sv-header, 0px)); left: 18px; right: 18px; }
  #app-fx .sequence-topline span:first-child { display: none; }
  #app-fx .frame-readout { margin-left: auto; }
  #app-fx .chapter-copy { left: 18px; right: 18px; bottom: 96px; width: auto; }
  #app-fx .chapter-title, #app-fx .chapter-copy:not(:first-of-type) .chapter-title {
    font-size: calc(clamp(40px, 11vw, 54px) * var(--nl-title)); line-height: 1.01; letter-spacing: -.038em;
  }
  #app-fx .chapter-body { max-width: calc(390px * var(--nl-text)); margin-top: 22px; font-size: calc(16px * var(--nl-text)); line-height: 1.5; }
  #app-fx .chapter-rail { display: none; }
  #app-fx .scroll-cue { left: 18px; right: auto; bottom: 28px; }
  #app-fx.reduced-motion .accessible-chapters { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #app-fx *, #app-fx *::before, #app-fx *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
}