/* Scroll lighting: content rises in, cards light up after it, headings brighten with scroll. */
:root { --light-ease: cubic-bezier(.6, .6, 0, 1); --rise-ease: cubic-bezier(.16, 1, .3, 1); }

/* Reveal. `translate` composes with the existing transforms on tilted windows. */
.reveal-on [data-reveal] {
  transition: opacity .9s var(--light-ease), translate 1.1s var(--rise-ease), filter .9s var(--light-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-on [data-reveal]:not([data-lit]) { opacity: 0; translate: 0 18px; }
.reveal-on [data-reveal="text"]:not([data-lit]) { filter: blur(6px); }
.reveal-on [data-reveal="panel"]:not([data-lit]) { translate: 0 32px; }

/* Card lights: a soft glow from the top edge and a bright rim line, switched on just after the card lands. */
.entry-grid > *, .scope-panel { position: relative; isolation: isolate; }
.entry-grid > *::before, .scope-panel::before,
.entry-grid > *::after, .scope-panel::after {
  content: ""; position: absolute; pointer-events: none;
  transition: opacity 1.4s var(--light-ease), scale 1.4s var(--light-ease);
  transition-delay: calc(var(--reveal-delay, 0ms) + 280ms);
}
.entry-grid > *::before, .scope-panel::before {
  inset: 0; z-index: -1;
  background: radial-gradient(80% 60% at 50% 0%, #b9a0ff1f, #8a5cff0a 45%, transparent 75%);
}
.entry-grid > *::after, .scope-panel::after {
  inset: 0 12% auto; height: 1px;
  background: linear-gradient(90deg, transparent, #dcc8ffb0, transparent);
}
.reveal-on [data-reveal]:not([data-lit])::before { opacity: 0; }
.reveal-on [data-reveal]:not([data-lit])::after { opacity: 0; scale: .2 1; }

/* Headings light from dim to full as they travel up the viewport. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .visual-home main section:not(.system-hero, .workflow-stage) h2:not(.sr-only),
    .visual-home .copy-reuse-heading h3 {
      background: linear-gradient(100deg, currentColor 40%, #f3f0ff47 60%) 100% 0 / 260% 100% no-repeat;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: heading-light linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }
  }
}
@keyframes heading-light { to { background-position: 0 0; } }

/* Footer horizon: a dark planet edge with stacked atmosphere bands and light rising behind it. */
.visual-home .home-close::before { content: none; }
.visual-home .crafted-footer { isolation: isolate; padding-block-end: 300px; }
.close-horizon {
  position: absolute; inset: auto 0 0; z-index: -1; height: 520px; pointer-events: none;
  view-timeline: --horizon;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, #fff9, transparent), radial-gradient(1px 1px at 27% 48%, #fff7, transparent),
    radial-gradient(1px 1px at 36% 14%, #fff6, transparent), radial-gradient(1.5px 1.5px at 44% 38%, #fffa, transparent),
    radial-gradient(1px 1px at 58% 18%, #fff7, transparent), radial-gradient(1px 1px at 63% 44%, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 72% 28%, #fff9, transparent), radial-gradient(1px 1px at 81% 52%, #fff6, transparent);
}
.close-horizon::before, .close-horizon::after { content: ""; position: absolute; left: 50%; translate: -50% 0; }
.close-horizon::before {
  width: 78%; height: 420px; top: -50px; filter: blur(24px);
  background:
    radial-gradient(ellipse 30% 62% at 36% 100%, #7fa8ffcc, transparent),
    radial-gradient(ellipse 30% 62% at 64% 100%, #c48cffcc, transparent),
    radial-gradient(ellipse 48% 92% at 50% 100%, #f3ecff, #c3adffe0 26%, #8a6bff66 56%, transparent 82%);
}
.close-horizon::after {
  width: 160%; height: 1100px; top: 330px; border-radius: 50%;
  background: #12081b;
  box-shadow:
    0 -22px 0 #12081b5c, 0 -44px 0 #12081b5c, 0 -66px 0 #12081b5c, 0 -88px 0 #12081b5c,
    0 -92px 60px #b9a0ff70;
}
@media (max-width: 760px) {
  .visual-home .crafted-footer { padding-block-end: 200px; }
  .close-horizon { height: 380px; }
  .close-horizon::before { width: 120%; top: 20px; height: 240px; }
  .close-horizon::after { width: 260%; top: 240px; box-shadow: 0 -14px 0 #12081b5c, 0 -28px 0 #12081b5c, 0 -42px 0 #12081b5c, 0 -56px 0 #12081b5c, 0 -60px 40px #9a74ed55; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .close-horizon::before { animation: horizon-bloom linear both; animation-timeline: --horizon; animation-range: entry 0% entry 100%; }
    .close-horizon::after { animation: horizon-rise linear both; animation-timeline: --horizon; animation-range: entry 0% entry 100%; }
  }
}
@keyframes horizon-bloom { from { opacity: 0; scale: .7 .5; } }
@keyframes horizon-rise { from { translate: -50% 90px; } }