/* ============================================================================
   rollcta.css — Lusion-style "Let's work together!" end-CTA interactions,
   rebuilt for the About page's #end section (owner: js/rollcta.js).

   A) #rc-title: per-character dual-copy letter roll (hover / focus / one-shot
      reveal tease). Chars are clipped by their WORD wrapper so lines break
      naturally between words.
   B) Underline + corner-tick "brackets" that scale in with the roll.
   C) .rc-pill: white rolling pill (self-playing CSS keyframe roll with the
      Lusion tick…pause rhythm — movement in the first 33%, then hold).

   PERF LAW: transforms + opacity + box-shadow only. No filter, no
   backdrop-filter. Perf gates: html[data-anim="off"] (tier>=2),
   html[data-perf="3"], prefers-reduced-motion → static single copies.
   Hidden tab: js adds #end.rc-paused → animation-play-state:paused.
   ========================================================================== */

/* ------------------------------------------------------------ shared sr-only
   (chars + pill roll are aria-hidden; the real text lives in .rc-sr) */
.rc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------- A: title letter-roll */
#end #rc-title{position:relative;display:inline-block;color:inherit}

.rc-split{display:inline}
/* clip on the WORD wrapper: rolled-out chars vanish at the word box edge,
   and wrapping stays per-word so lines never break mid-word */
.rc-word{display:inline-block;overflow:hidden;vertical-align:bottom}
.rc-cw{position:relative;display:inline-block}
.rc-c{display:inline-block;transform:translateY(0);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--ri,0) * 26ms)}          /* leave: reverse stagger */
.rc-c--b{color:var(--blue)}                            /* the <b>Atlas</b> chars */
.rc-c2{position:absolute;left:0;top:100%}              /* second copy, waiting below */
#rc-title.rc-on .rc-c{transform:translateY(-100%);
  transition-delay:calc(var(--i,0) * 26ms)}            /* enter: forward ripple */

/* --------------------------------------------- B: underline + corner brackets */
#rc-title .rc-deco,
#rc-title .rc-tick{position:absolute;background:currentColor;pointer-events:none}
#rc-title .rc-deco{left:0;right:0;bottom:-.12em;height:.07em;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s ease}
#rc-title .rc-tick{bottom:-.12em;width:.07em;height:.3em;
  transform:scaleY(0);transform-origin:bottom center;
  transition:transform .38s ease .08s}                 /* the bracket feel: +.08s */
#rc-title .rc-tick--l{left:0}
#rc-title .rc-tick--r{right:0}
#rc-title.rc-on .rc-deco{transform:scaleX(1)}
#rc-title.rc-on .rc-tick{transform:scaleY(1)}

/* plain-text fallback (no JS split: hard-load at tier>=2 / reduced / no JS):
   hover = simple color swap. Split rules kept separate — a browser that drops
   :focus-visible must not lose :hover with it. */
#end #rc-title:not(.rc-ready){transition:color .3s var(--ease)}
#end #rc-title:not(.rc-ready):hover{color:var(--blue)}
#end #rc-title:not(.rc-ready):focus-visible{color:var(--blue)}

/* ------------------------------------------------------- C: the rolling pill */
#rc-bottom{margin-top:auto;width:100%;display:flex;justify-content:center;
  padding:34px var(--pad) 40px}
.rc-pill{position:relative;display:inline-flex;align-items:center;max-width:100%;
  background:#fff;color:#111;border-radius:100px;overflow:hidden;
  padding:19px 34px;
  box-shadow:0 4px 14px rgba(4,8,30,.28),0 22px 54px rgba(4,8,30,.4);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.rc-pill:hover{transform:scale(1.04);
  box-shadow:0 8px 22px rgba(4,8,30,.34),0 30px 74px rgba(4,8,30,.55)}
.rc-pill:focus-visible{transform:scale(1.04);
  box-shadow:0 8px 22px rgba(4,8,30,.34),0 30px 74px rgba(4,8,30,.55)}
.rc-pill:active{transform:scale(.99)}
.rc-pill-in{display:inline-flex;align-items:center;gap:16px;
  font-family:var(--mono);font-size:clamp(12px,1.4vw,15px);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;line-height:1.5em}

/* the roll windows: label travels 1.5em, arrows 1em (Lusion's offset rhythm) */
.rc-p-win{display:block;overflow:hidden}
.rc-p-label{height:1.5em}
.rc-p-roll{display:block}
.rc-p-roll--t{margin-top:-1.5em;                       /* rest: shows copy 2 */
  animation:rcRoll 3s cubic-bezier(.1,0,.1,1) .2s infinite}
.rc-p-roll--t > span{display:block;height:1.5em;white-space:nowrap}
.rc-p-arrow{width:1em;height:1em}
.rc-p-roll--a{margin-top:-1em;
  animation:rcRollA 3s cubic-bezier(.1,0,.1,1) .3s infinite}
.rc-p-roll--a svg{display:block;width:1em;height:1em}

/* tick…pause: all movement inside the first 33%, then hold; both copies are
   identical so the loop restart is an invisible snap */
@keyframes rcRoll{0%{transform:translateY(0)}33%{transform:translateY(1.5em)}100%{transform:translateY(1.5em)}}
@keyframes rcRollA{0%{transform:translateY(0)}33%{transform:translateY(1em)}100%{transform:translateY(1em)}}

/* hidden tab (js/rollcta.js toggles this) */
#end.rc-paused .rc-p-roll--t,
#end.rc-paused .rc-p-roll--a{animation-play-state:paused}

/* ------------------------------------------------------------- perf gating
   data-anim=off is set at tier>=2; data-perf=3 = static. Kill the infinite
   roll (single copy shown), freeze the char roll, hover = instant color. */
html[data-anim="off"] .rc-p-roll--t,
html[data-anim="off"] .rc-p-roll--a,
html[data-perf="3"] .rc-p-roll--t,
html[data-perf="3"] .rc-p-roll--a{animation:none;margin-top:0}
html[data-anim="off"] .rc-p-roll--t > span + span,
html[data-anim="off"] .rc-p-roll--a svg + svg,
html[data-perf="3"] .rc-p-roll--t > span + span,
html[data-perf="3"] .rc-p-roll--a svg + svg{display:none}
html[data-anim="off"] .rc-c{transition:none;transform:none!important}
html[data-anim="off"] #rc-title .rc-deco,
html[data-anim="off"] #rc-title .rc-tick,
html[data-anim="off"] #end #rc-title,
html[data-anim="off"] .rc-pill{transition:none}
html[data-anim="off"] #rc-title.rc-on{color:var(--blue)}

@media (prefers-reduced-motion:reduce){
  .rc-p-roll--t,.rc-p-roll--a{animation:none;margin-top:0}
  .rc-p-roll--t > span + span,.rc-p-roll--a svg + svg{display:none}
  .rc-c{transition:none;transform:none!important}
  #rc-title .rc-deco,#rc-title .rc-tick,
  #end #rc-title:not(.rc-ready),.rc-pill{transition:none}
  .rc-pill:hover{transform:none}
  #rc-title.rc-on{color:var(--blue)}
}

/* ------------------------------------------------------------------ mobile */
@media (max-width:560px){
  .rc-pill{padding:15px 22px}
  .rc-pill-in{gap:11px;letter-spacing:.12em}
  #rc-bottom{padding:26px var(--pad) 30px}
}

/* about.html doesn't link tool.css, whose .tp-dl-row rule laid out the download
   buttons between the roll title and the pill — own that layout here so the
   section renders correctly on a direct /about load. */
#end .tp-dl-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* Lusion-style liquid glyph field (js/endfluid.js) — canvas behind everything
   in #end; every other child lifts above it. Fades in with the section. */
#end{position:relative;overflow:hidden}
#end .endfluid{position:absolute;inset:0;z-index:0;pointer-events:none}
#end > *:not(.endfluid){position:relative;z-index:1}

/* 3D hologram Atlas mark (js/holologo.js) between the roll title and the pill.
   The static <img> is the weak-tier / no-JS fallback; the module hides it when
   the canvas takes over. Ground glow is a plain radial gradient (no filters). */
#holo-logo{display:grid;place-items:center;min-height:240px;position:relative;margin:-6px 0 4px}
#holo-logo img{width:110px;height:110px;opacity:.85}
#holo-logo .holo-canvas{display:block;position:relative;z-index:1}
#holo-logo::after{content:"";position:absolute;left:50%;bottom:14px;width:220px;height:44px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(42,59,255,.22),transparent 70%)}