/* ==========================================================================
   Tenlyr premium layer: motion, depth, offer popup.
   Loaded after style.css. Transform/opacity only, honours reduced motion,
   hover effects only on fine pointers.
   ========================================================================== */

html{scroll-padding-top:88px}
::selection{background:var(--violet-100);color:var(--indigo-900)}
html{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}

/* ---------- cross-page transitions (Chromium; ignored elsewhere) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:tl-vt-out .22s ease both}
::view-transition-new(root){animation:tl-vt-in .38s var(--ease) both}
@keyframes tl-vt-out{to{opacity:0}}
@keyframes tl-vt-in{from{opacity:0;transform:translateY(8px)}}

/* ---------- scroll progress ---------- */
.tl-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:101;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--indigo-700),var(--violet-500),var(--violet-300));pointer-events:none}

/* ---------- refined scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(32px) scale(.985);filter:blur(5px);
  transition:opacity .9s var(--ease),transform 1s var(--ease-spring),filter .9s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}

/* ---------- hero headline: word-by-word mask reveal ---------- */
.tl-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.tl-w>span{display:inline-block;transform:translateY(112%);opacity:0;
  transition:transform .95s var(--ease-spring) var(--d,0ms),opacity .6s var(--ease) var(--d,0ms)}
.tl-split-in .tl-w>span{transform:none;opacity:1}

/* ---------- ambient hero light ---------- */
.inner-hero{overflow:clip}
.hero-v2>.wrap,.inner-hero>.wrap{position:relative;z-index:1}
.hero-v2::after,.inner-hero::after{content:'';position:absolute;inset:-25% -10% auto -10%;height:95%;pointer-events:none;z-index:0;
  background:
    radial-gradient(40% 50% at 18% 32%,rgba(84,75,184,.17),transparent 70%),
    radial-gradient(34% 44% at 82% 18%,rgba(128,121,222,.15),transparent 70%),
    radial-gradient(30% 40% at 56% 80%,rgba(59,52,136,.08),transparent 70%);
  filter:blur(36px);animation:tl-aurora 24s ease-in-out infinite alternate;will-change:transform}
@keyframes tl-aurora{to{transform:translate3d(3%,5%,0) scale(1.09) rotate(2deg)}}

/* ---------- buttons ---------- */
.btn{transform:translate(var(--tx,0px),var(--ty,0px));
  transition:transform .35s var(--ease-spring),background .25s,color .25s,border-color .25s,box-shadow .35s}
.btn:hover{transform:translate(var(--tx,0px),calc(var(--ty,0px) - 1px))}
.btn:active{transform:translate(var(--tx,0px),var(--ty,0px)) scale(.97);transition-duration:.12s}
.btn-primary,.btn-white{position:relative;overflow:hidden;isolation:isolate}
.btn-primary{background:linear-gradient(180deg,#1d1c29 0%,#0c0b14 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(12,11,20,.25)}
.btn-primary:hover{background:linear-gradient(180deg,#25233a 0%,#0f0e1b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 28px -10px rgba(84,75,184,.65),0 2px 6px rgba(12,11,20,.25)}
.btn-primary::after,.btn-white::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.26) 50%,transparent 65%);
  transform:translateX(-130%);transition:transform .9s var(--ease)}
.btn-primary:hover::after,.btn-white:hover::after{transform:translateX(130%)}
.btn-ghost:hover{border-color:var(--violet-500);color:var(--indigo-700);box-shadow:0 8px 24px -12px rgba(84,75,184,.45)}
:where(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--violet-500);outline-offset:3px;border-radius:6px}

/* ---------- card depth + cursor spotlight ---------- */
.problem-card,.rv-card,.rv-steps li,.featured-case-card,.secondary-case-card,.engagement-card,.state-card,
.more-card,.approach-card,.decision-card,.infra-deep-card,.build-cap-card{
  transition:opacity .9s var(--ease),filter .9s var(--ease),transform .55s var(--ease-spring),box-shadow .45s var(--ease),border-color .3s}
.tl-spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(128,121,222,.16),transparent 62%)}
@media (hover:hover) and (pointer:fine){
  .problem-card:hover,.rv-card:hover,.rv-steps li:hover,.featured-case-card:hover,.secondary-case-card:hover,
  .engagement-card:hover,.state-card:hover,.more-card:hover,.approach-card:hover,.decision-card:hover,
  .infra-deep-card:hover,.build-cap-card:hover{
    transform:translateY(-5px);border-color:var(--line-strong);
    box-shadow:0 22px 44px -22px rgba(33,29,87,.32),0 2px 6px rgba(33,29,87,.05)}
  .problem-card:hover>.tl-spot,.rv-card:hover>.tl-spot,.rv-steps li:hover>.tl-spot,.featured-case-card:hover>.tl-spot,
  .secondary-case-card:hover>.tl-spot,.engagement-card:hover>.tl-spot,.state-card:hover>.tl-spot,.more-card:hover>.tl-spot,
  .approach-card:hover>.tl-spot,.decision-card:hover>.tl-spot,.infra-deep-card:hover>.tl-spot,.build-cap-card:hover>.tl-spot{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .reveal,.tl-w>span,.tl-find,.tl-offer-body>*,.tl-offer-card{transition:none !important;animation:none !important;filter:none !important}
  .reveal,.tl-w>span,.tl-find,.tl-offer-body>*{opacity:1 !important;transform:none !important}
  .hero-v2::after,.inner-hero::after,.tl-offer-visual::after,.tl-offer-vlabel i{animation:none !important}
  .tl-progress{display:none}
}

/* ---------- AEO blocks: FAQ + facts ---------- */
.tl-eyebrow{font:500 .75rem/1 'IBM Plex Mono',monospace;letter-spacing:.08em;color:var(--violet-500);margin-bottom:12px}
.tl-h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15;margin:0 0 28px;max-width:760px;color:var(--ink)}
.tl-faq{max-width:820px;display:grid;gap:10px}
.tl-faq details{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel);transition:border-color .3s,box-shadow .4s var(--ease)}
.tl-faq details[open]{border-color:var(--line-strong);box-shadow:0 14px 30px -20px rgba(33,29,87,.3)}
.tl-faq summary{cursor:pointer;padding:18px 20px;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px}
.tl-faq summary::-webkit-details-marker{display:none}
.tl-faq summary::after{content:"+";font-family:'IBM Plex Mono',monospace;color:var(--violet-500)}
.tl-faq details[open] summary::after{content:"\2212"}
.tl-faq details p{margin:0;padding:0 20px 18px;color:var(--ink-soft);line-height:1.65}
.tl-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;max-width:980px;margin:0}
.tl-facts>div{border:1px solid var(--line);border-radius:var(--radius-md);padding:18px 20px;background:var(--panel)}
.tl-facts dt{font:500 .7rem/1 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.tl-facts dd{margin:0;color:var(--ink-body);line-height:1.55}