/* =========================================================
   TrueOpen · motion layer
   Every screen gets ambient depth and an entrance, not just the hero.
   All of it collapses under prefers-reduced-motion (bottom of file).
   Purely presentational: no copy, no layout ownership.
   ========================================================= */

:root {
  --m-ease:     cubic-bezier(.22, 1, .36, 1);
  --m-ease-out: cubic-bezier(.16, 1, .30, 1);
}

/* ---------------------------------------------------------
   1 · Ambient aurora behind every section
   Injected by motion.js as .sec-aura > i × 3.
   --------------------------------------------------------- */
.sec-aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;      /* blobs bleed inside this box, never past the section */
  pointer-events: none;
  contain: paint;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.is-in > .sec-aura,
.sec.is-in .sec-aura { opacity: 1; }

.sec-aura > i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(76px);
  will-change: transform;
  opacity: .5;
}
.sec-aura > i:nth-child(1) {
  width: 46vw; height: 46vw; top: -16%; left: -10%;
  background: radial-gradient(circle, rgba(var(--aura-1, 34,202,214), .40), transparent 68%);
  animation: m-drift-a 30s ease-in-out infinite;
}
.sec-aura > i:nth-child(2) {
  width: 38vw; height: 38vw; bottom: -22%; right: -8%;
  background: radial-gradient(circle, rgba(var(--aura-2, 138,117,255), .34), transparent 68%);
  animation: m-drift-b 38s ease-in-out infinite;
}
.sec-aura > i:nth-child(3) {
  width: 26vw; height: 26vw; top: 34%; right: 26%;
  background: radial-gradient(circle, rgba(var(--aura-3, 79,206,124), .22), transparent 70%);
  animation: m-drift-c 34s ease-in-out infinite reverse;
}

@keyframes m-drift-a { 0%,100% { transform: translate3d(0,0,0) scale(1); }    50% { transform: translate3d(7%,9%,0)  scale(1.16); } }
@keyframes m-drift-b { 0%,100% { transform: translate3d(0,0,0) scale(1.08); } 50% { transform: translate3d(-9%,-7%,0) scale(.9); } }
@keyframes m-drift-c { 0%,100% { transform: translate3d(0,0,0) scale(1); }    50% { transform: translate3d(-11%,6%,0) scale(1.2); } }

/* A section's own content must sit above its aurora. */
.sec > .wrap,
.careers-overview > *,
.detail-section > * { position: relative; z-index: 1; }

/* A documentation page stacks many sections; keep its ambience light so the
   whole column stays cheap to paint and the text stays the loudest thing. */
.detail-section .sec-aura > i { opacity: .3; filter: blur(64px); }
.detail-section .sec-aura > i:nth-child(3) { display: none; }

/* Aurora is heavy to paint; phones get a cheaper, calmer version. */
@media (max-width: 760px) {
  .sec-aura > i { filter: blur(52px); opacity: .34; animation-duration: 46s; }
  .sec-aura > i:nth-child(3) { display: none; }
}

/* ---------------------------------------------------------
   2 · Section sweep — a light bar crosses the section once,
   as it enters. This is the "something happened here" cue.
   --------------------------------------------------------- */
.sec-sweep {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.sec-sweep > i {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 42%;
  transform: translateX(-140%) skewX(-14deg);
  background: linear-gradient(90deg,
              transparent,
              rgba(var(--aura-1, 34,202,214), .11) 45%,
              rgba(255,255,255,.05) 55%,
              transparent);
}
.is-in > .sec-sweep > i { animation: m-sweep 1.5s var(--m-ease-out) .12s 1 both; }
@keyframes m-sweep { to { transform: translateX(320%) skewX(-14deg); } }

/* ---------------------------------------------------------
   3 · Reveal 2.0 — bigger travel, a touch of scale and blur,
   and a direction that follows the layout.
   --------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 38px, 0) scale(.972);
  filter: blur(7px);
  transition:
    opacity   .85s var(--m-ease-out) var(--m-delay, 0ms),
    transform .95s var(--m-ease-out) var(--m-delay, 0ms),
    filter    .75s ease              var(--m-delay, 0ms);
  will-change: opacity, transform, filter;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Directional entrances only where there is room for them. */
@media (min-width: 900px) {
  [data-reveal="left"]  { transform: translate3d(-52px, 14px, 0) scale(.978); }
  [data-reveal="right"] { transform: translate3d( 52px, 14px, 0) scale(.978); }
  [data-reveal="up"]    { transform: translate3d(0, 62px, 0) scale(.965); }
}

/* Staggered children: motion.js sets --i on each child. */
[data-stagger] > * { --m-delay: calc(var(--i, 0) * 90ms); }

/* ---------------------------------------------------------
   4 · Headings: kicker slides in, rule draws, title gets a sheen
   --------------------------------------------------------- */
.kicker { position: relative; }

.sec h2, .detail-section > h2, .home-heading h2 { position: relative; }

.sec > .wrap h2::after,
.detail-section > h2::after,
.careers-overview h2::after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  margin-top: .7rem;
  border-radius: 2px;
  background: linear-gradient(90deg,
              rgb(var(--aura-1, 34,202,214)),
              rgb(var(--aura-2, 138,117,255)) 55%,
              transparent);
  transition: width 1.1s var(--m-ease-out) .25s;
}
.is-in .sec > .wrap h2::after,
.sec.is-in > .wrap h2::after,
.detail-section.is-in > h2::after,
.careers-overview.is-in h2::after { width: min(220px, 42%); }

/* One-shot sheen across the section title as it lands. */
.m-sheen {
  background-image: linear-gradient(100deg,
      currentColor 0%, currentColor 38%,
      rgba(255,255,255,.96) 50%,
      currentColor 62%, currentColor 100%);
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
}
.is-in > .m-sheen,
.is-in .m-sheen { animation: m-sheen 1.5s var(--m-ease-out) .3s 1 both; }
@keyframes m-sheen { from { background-position: 130% 0; } to { background-position: -60% 0; } }

/* ---------------------------------------------------------
   5 · Cards: spotlight that tracks the pointer, plus lift
   --------------------------------------------------------- */
.bento-cell, .vcard, .paper-card, .stage-card, .role-card, .entry-card,
.evidence-entry, .paper-preview > article, .roadmap-next-items > *,
.da-publish-list > li, .hsteps > li {
  position: relative;
  isolation: isolate;
  transition:
    transform   .45s var(--m-ease),
    border-color .45s ease,
    box-shadow  .45s ease;
}

.m-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  background: radial-gradient(
      260px circle at var(--mx, 50%) var(--my, 50%),
      rgba(var(--aura-1, 34,202,214), .16),
      transparent 68%);
}
.m-spot:hover::before { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .bento-cell:hover, .vcard:hover, .paper-card:hover, .stage-card:hover,
  .role-card:hover, .entry-card:hover, .evidence-entry:hover,
  .paper-preview > article:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--aura-1, 34,202,214), .46);
    box-shadow: 0 28px 60px -34px rgba(0,0,0,.96),
                0 0 0 1px rgba(var(--aura-1, 34,202,214), .14);
  }
}

/* ---------------------------------------------------------
   6 · Cursor glow — one soft light that follows the pointer
   --------------------------------------------------------- */
.cursor-glow {
  position: fixed;
  z-index: 0;
  top: 0; left: 0;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(circle,
              rgba(34,202,214,.13), rgba(138,117,255,.07) 42%, transparent 68%);
  transition: opacity .5s ease;
  will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }

/* ---------------------------------------------------------
   7 · The five-step task rail draws itself and tracks reading
   --------------------------------------------------------- */
.hsteps { position: relative; }

.hsteps > li .hmark {
  transition: transform .5s var(--m-ease), box-shadow .5s ease,
              border-color .5s ease, color .5s ease;
}
.hsteps > li.is-active .hmark {
  transform: scale(1.14);
  box-shadow: 0 0 0 6px rgba(var(--crgb, 34,202,214), .12),
              0 0 22px rgba(var(--crgb, 34,202,214), .40);
}
.hsteps > li.is-active { --m-lit: 1; }
.hsteps > li.is-active h3 { color: #fff; }
.hsteps > li.is-active .chain {
  border-color: rgba(var(--crgb, 34,202,214), .38);
  color: rgb(var(--crgb, 34,202,214));
}

/* The connecting rail fills as the steps light up. */
.hsteps > li .hrail::before {
  transform-origin: top;
  transform: scaleY(var(--m-rail, 0));
  transition: transform .9s var(--m-ease-out);
}
.hsteps > li.is-active ~ li .hrail::before,
.hsteps > li.is-active .hrail::before { --m-rail: 1; }
.hsteps > li:first-child .hrail::before { --m-rail: 1; }

/* Desktop card rail: the accent bar on top wipes in. */
@media (min-width: 900px) {
  .template-home #mechanism .hsteps > li {
    border-top-color: transparent;
    background-image: linear-gradient(90deg,
        var(--step-accent, #22cad6), var(--step-accent, #22cad6));
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: 0 0;
    transition: background-size 1s var(--m-ease-out) var(--m-delay, 0ms),
                transform .45s var(--m-ease), box-shadow .45s ease;
  }
  .template-home #mechanism .hsteps.is-in > li,
  .template-home #mechanism .hsteps > li.is-in { background-size: 100% 2px; }
}

/* ---------------------------------------------------------
   8 · Scanline over the evidence / code panels
   --------------------------------------------------------- */
.m-scan { position: relative; overflow: hidden; }
.m-scan > .m-scanline {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent,
              rgba(var(--aura-1, 34,202,214), .085), transparent);
  animation: m-scan 5.2s linear infinite;
}
@keyframes m-scan { 0% { transform: translateY(-110px); } 100% { transform: translateY(460px); } }

/* ---------------------------------------------------------
   9 · Buttons and links
   --------------------------------------------------------- */
.button, .entry-primary, .entry-secondary {
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--m-ease), box-shadow .3s ease,
              border-color .3s ease, background-color .3s ease;
}
.button::after, .entry-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  transition: transform .85s var(--m-ease-out);
}
.button:hover::after, .entry-primary:hover::after { transform: translateX(130%) skewX(-18deg); }

.detail-link, .tlink {
  transition: color .3s ease, letter-spacing .3s ease;
}
.detail-link:hover, .tlink:hover { color: rgb(var(--aura-1, 34,202,214)); }

/* Table rows respond to the pointer. */
.table-scroll tbody tr { transition: background-color .3s ease; }
.table-scroll tbody tr:hover { background: rgba(var(--aura-1, 34,202,214), .07); }

/* ---------------------------------------------------------
   10 · Reading progress
   --------------------------------------------------------- */
.read-progress {
  position: fixed; z-index: 70; top: 0; left: 0;
  height: 3px; width: 100%;
  background: transparent; pointer-events: none;
}
.read-progress > i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #22cad6, #4fce7c, #ffb738, #8a75ff);
  box-shadow: 0 0 14px rgba(34,202,214,.7);
  transition: transform .12s linear;
}

/* On-page nav marks the section being read. */
[data-toc-link].is-active,
.detail-nav a.is-active,
.page-nav a.is-active,
.main-nav a.is-active {
  color: rgb(var(--aura-1, 34,202,214));
  border-color: rgba(var(--aura-1, 34,202,214), .5);
}

/* ---------------------------------------------------------
   11 · Everything off when the visitor asks for less motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .sec-aura { opacity: 1; }
  .sec-aura > i,
  .m-scan > .m-scanline,
  .sec-sweep > i { animation: none !important; }
  .m-sheen { animation: none !important; background-image: none; }
  .sec > .wrap h2::after,
  .detail-section > h2::after { width: min(220px, 42%); transition: none; }
  .hsteps > li .hrail::before { transform: none; }
  .cursor-glow { display: none; }
  .button::after, .entry-primary::after { display: none; }
  .bento-cell:hover, .vcard:hover, .paper-card:hover,
  .stage-card:hover, .role-card:hover, .entry-card:hover { transform: none; }
  .read-progress > i { transition: none; }
}

/* Release temporary compositing hints after content is visible. */
[data-reveal].is-in { will-change: auto; }
/* Keep the same entrance movement and fade without a full-surface blur pass
   while the animated hero is still in the viewport. */
.template-home #capabilities [data-reveal] {
  filter: none;
  transition: opacity .85s var(--m-ease-out) var(--m-delay, 0ms),
              transform .95s var(--m-ease-out) var(--m-delay, 0ms);
  will-change: auto;
}
/* Off-screen entrance translations must not create a horizontal scrollbar. */
.template-home main { overflow-x: clip; }