/* Rakasec site motion and the mobile menu sheet. Linked from every page:
   index.html directly, and every page build_site.py generates (MOTION_HEAD).
   Opacity and transform only, and nothing moves for a visitor who asks for
   reduced motion. Rules for the homepage hero (.h2) match nothing elsewhere. */

/* ---- pre-hide: only while /js/motion.js is running (html.js-motion) ---- */
/* Keep these selectors in step with REVEAL and the hero list in motion.js. */
.js-motion .h2 .herotext .eyebrow:not(.m-in),
.js-motion .h2 h1:not(.m-in),
.js-motion .h2 .lede:not(.m-in),
.js-motion .h2 .ctas .btn:not(.m-in),
.js-motion .h2 .calm:not(.m-in),
.js-motion section .eyebrow:not(.m-in),
.js-motion section .sec-h:not(.m-in),
.js-motion .sec-head h2:not(.m-in),
.js-motion .sec-head p:not(.m-in),
.js-motion .sec-cta:not(.m-in),
.js-motion .why .r:not(.m-in),
.js-motion .who .r:not(.m-in),
.js-motion .who-by .card:not(.m-in),
.js-motion .dive:not(.m-in),
.js-motion .faqg:not(.m-in),
.js-motion .cta-box:not(.m-in){opacity:0}

/* The hero strands wait for the entrance, then draw (the draw itself is the
   existing calm-draw animation in index.html). */
.js-motion .calm .s{animation-play-state:paused}
.js-motion .calm.calm-go .s{animation-play-state:running}

/* ---- headline words: each word slides up inside its own mask ---- */
.wm{display:inline-block;overflow:hidden;vertical-align:top;
  padding:0 .04em .12em;margin:0 -.04em -.12em}
.wi{display:inline-block;will-change:transform}
.m-in .wi{will-change:auto}

/* ---- hero glow: a soft light behind the visual, fading in on load ---- */
.h2{isolation:isolate;overflow-x:clip}
.h2::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-10%;right:-8%;width:min(820px,90vw);height:min(620px,80vw);
  background:radial-gradient(closest-side,rgba(59,130,246,.20),rgba(34,211,238,.08) 55%,transparent 75%);
  filter:blur(8px)}
@media (max-width:1023px){.h2::before{top:auto;bottom:-6%;right:-20%;opacity:.8}}
.js-motion .h2::before{opacity:0;transform:scale(.92);transition:opacity 1.6s ease,transform 2.4s cubic-bezier(.2,.8,.2,1)}
.js-motion .h2.glow-on::before{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .h2.glow-on::before{animation:rk-glow 14s ease-in-out 2.5s infinite alternate}
}
@keyframes rk-glow{from{transform:none}to{transform:translate3d(-4%,3%,0) scale(1.06)}}

/* ---- hero visual: no box. The lines run off the edge of the screen and fade
   into the page on every other side, so no corner or edge is ever visible.
   (Layout only: applies with or without the motion script.) ---- */
.h2 .herotext{position:relative;z-index:1}
.h2 .calm{background:none;border-radius:0;overflow:visible;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%),linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 24%),linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-composite:intersect}
@media (min-width:1024px){
  /* the right half of the hero, from behind the text column to the screen edge */
  .h2 .calm{position:absolute;z-index:0;right:0;top:0;bottom:0;margin:auto 0;
    width:56vw;height:min(500px,88%)}
}
@media (max-width:1023px){
  /* full screen width under the text, fading out at both sides */
  .h2 .calm{width:auto;margin-inline:calc(50% - 50vw);height:clamp(150px,38vw,260px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
}

/* ---- primary button: a light sweeps across on hover (and once on load) ---- */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.30) 50%,transparent 70%);
  transform:translateX(-130%)}
@media (prefers-reduced-motion:no-preference){
  .btn-primary::after{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
  .btn-primary:hover::after{transform:translateX(130%)}
  .btn-primary.sheen-once::after{animation:rk-sheen 1.1s cubic-bezier(.2,.8,.2,1) .1s 1}
}
@keyframes rk-sheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}}

/* ---- cards: spotlight and border glow under the pointer ---- */
.spot{position:relative;isolation:isolate}
.spot::before,.spot::after{content:"";position:absolute;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .35s ease}
.spot::before{inset:0;z-index:-1;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(94,197,255,.14),transparent 60%)}
.spot::after{inset:-1px;padding:1px;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(94,197,255,.9),rgba(59,130,246,.35) 40%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.spot:hover::before,.spot:hover::after{opacity:1}

/* ---- scroll progress line, above the sticky nav ---- */
.rk-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#a78bfa,var(--accent) 45%,#22d3ee);
  box-shadow:0 0 12px rgba(34,211,238,.55)}
body.nav-open .rk-progress{opacity:0}

/* ---- nav: a firmer bar and a soft shadow once the page has scrolled ---- */
body > nav{transition:background-color .35s ease,box-shadow .35s ease,border-color .35s ease}
body > nav.rk-scrolled{background:#0b0f17ee;border-bottom-color:var(--line2);
  box-shadow:0 12px 32px -20px rgba(0,0,0,.9)}

/* ---- smooth scrolling (Lenis) ---- */
/* Lenis drives the scroll position itself; CSS smooth scrolling on top of it
   would animate every frame twice. */
html.lenis{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ---- focus: one clear, consistent ring for keyboard users ---- */
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:6px}
.btn:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:10px}
.dive:focus-visible{outline-offset:4px;border-color:var(--accent);border-radius:16px}
/* an anchor target focused by an in-page link does not need a ring */
section[tabindex="-1"]:focus,header[tabindex="-1"]:focus,div[tabindex="-1"]:focus{outline:none}

/* ---- hover and press feedback: restrained, pointer devices only ---- */
.btn{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease,filter .18s ease}
.why .r,.who .r,.who-by .card,.dive{transition:border-color .2s ease,box-shadow .25s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
footer a,.dive .go{transition:color .15s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:translateY(0) scale(.98);transition-duration:.08s}
  .why .r:hover,.who .r:hover,.who-by .card:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:0 16px 32px -22px rgba(0,0,0,.85)}
  .dive:hover{box-shadow:0 18px 40px -26px rgba(59,130,246,.6)}
  .dive:hover .go{transform:translateX(3px)}
}
@media (hover:hover){
  footer a:hover{color:var(--text)}
}
@media (prefers-reduced-motion:reduce){
  .btn,.why .r,.who .r,.who-by .card,.dive,.dive .go{transition:border-color .15s,background-color .15s,color .15s}
  .dive:hover{transform:none}
}

/* ---- FAQ: answers open and close smoothly ----
   Native <details> keeps its keyboard, screen-reader and one-open-at-a-time
   (name=) behaviour; this only animates the content box. Browsers without
   ::details-content support open instantly, as before. */
@media (prefers-reduced-motion:no-preference){
  .faq details{interpolate-size:allow-keywords}
  .faq details::details-content{
    block-size:0;overflow:clip;opacity:0;
    transition:block-size .3s cubic-bezier(.2,.8,.2,1),opacity .22s ease,content-visibility .3s allow-discrete}
  .faq details[open]::details-content{block-size:auto;opacity:1}
  .faq summary:after{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
}

/* ---- mobile menu: a full-screen glass sheet ----
   Restyle only. The open/close logic, focus trap, scroll lock and accordion
   are the shared script in index.html, unchanged; the sheet still finishes
   closing within the 260 ms the script waits before unmounting it. */
@media (max-width:1080px){
  /* the menu button: a soft glass tile with a two-line icon */
  .menu{position:relative;border-radius:14px;border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);transition:background-color .2s ease,border-color .2s ease,transform .15s ease}
  .menu svg{display:none}
  .menu::before,.menu::after{content:"";position:absolute;left:12px;height:2px;border-radius:2px;
    background:currentColor;transition:width .25s cubic-bezier(.22,1,.36,1)}
  .menu::before{top:17px;width:20px}
  .menu::after{top:25px;width:13px}
  .menu:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
  .menu:hover::after{width:20px}
  .menu:active{transform:scale(.94)}

  /* the sheet: whole screen, frosted, with a soft light in one corner */
  .navlinks{inset:0;left:0;width:100%;max-width:none;border:0;box-shadow:none;
    background:
      radial-gradient(520px 360px at 100% 0%,rgba(59,130,246,.20),transparent 65%),
      radial-gradient(420px 320px at 0% 100%,rgba(34,211,238,.10),transparent 65%),
      rgba(8,11,18,.90);
    -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
    opacity:0;transform:translateY(-12px);
    transition:opacity .22s ease,transform .26s cubic-bezier(.22,1,.36,1)}
  .navlinks.open{opacity:1;transform:none}
  .nav-backdrop{background:rgba(3,6,12,.4)}

  /* header: the logo, and a round close button */
  .navhead{background:transparent;border-bottom:0;padding:14px 20px 6px}
  .navx{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.05);font-size:22px;font-weight:300;
    transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .2s ease,border-color .2s ease}
  .navx:hover,.navx:focus-visible{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);transform:rotate(90deg)}
  .navx:active{transform:rotate(90deg) scale(.92)}

  /* body: large, confident links with hairline dividers */
  .navbody{padding:10px 22px 24px}
  .navgrp{border-bottom:1px solid rgba(255,255,255,.07)}
  .navtop,.navbody>a{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2;
    padding:18px 0;min-height:60px;color:var(--text)}
  .navbody>a{border-bottom:1px solid rgba(255,255,255,.07)}
  .navbody>a:last-of-type{border-bottom:0}
  /* every row ends in the same round icon: a chevron for groups, an arrow for links */
  .navtop .cv{width:32px;height:32px;padding:8px;box-sizing:border-box;border-radius:50%;
    border:1px solid rgba(255,255,255,.12);opacity:1;color:var(--muted);
    transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .2s ease,color .2s ease,border-color .2s ease}
  .navtop[aria-expanded="true"] .cv{transform:rotate(180deg);color:#fff;
    background:linear-gradient(135deg,#3b82f6,#22d3ee);border-color:transparent}
  .navbody>a{justify-content:space-between}
  .navbody>a::after{content:"\2192";display:grid;place-items:center;width:32px;height:32px;
    border-radius:50%;border:1px solid rgba(255,255,255,.12);font-size:15px;font-weight:400;
    color:var(--muted);transition:transform .25s cubic-bezier(.22,1,.36,1),color .2s ease,border-color .2s ease}
  .navbody>a:hover::after,.navbody>a:active::after{transform:translateX(3px);color:var(--text);border-color:rgba(255,255,255,.25)}
  .navtop:active,.navbody>a:active{opacity:.75}
  /* the desktop dropdown hover tint does not belong on a sheet row */
  .navtop:hover,.navtop[aria-expanded="true"]{background:none}

  /* an open group: a soft card of links, each with its one-line description */
  .navpanel{padding:4px;margin:0 0 16px;border:1px solid rgba(255,255,255,.08);border-radius:18px;
    background:rgba(255,255,255,.035)}
  .navpanel a{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;
    margin:0;padding:12px 14px;min-height:52px;border:0;border-left:0;border-radius:13px;
    color:var(--text);transition:background-color .18s ease}
  .navpanel a:hover,.navpanel a:focus-visible,.navpanel a:active{background:rgba(255,255,255,.06);border-left-color:transparent}
  .navpanel a b{font-size:16px;font-weight:600}
  .navpanel a span{display:block;font-size:13px;line-height:1.35;color:var(--muted)}

  /* footer: two pill buttons over a soft fade, always reachable */
  .navfoot{background:linear-gradient(180deg,transparent,rgba(8,11,18,.94) 32%);border-top:0;
    padding:26px 22px calc(18px + env(safe-area-inset-bottom))}
  .navfoot .btn{border-radius:999px;min-height:54px;font-size:16px;font-weight:600}
  .navfoot .btn-ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
}

/* motion: links settle in one after another, groups unfold */
@media (max-width:1080px) and (prefers-reduced-motion:no-preference){
  .navlinks.open .navhead,
  .navlinks.open .navbody>*,
  .navlinks.open .navfoot{animation:rk-navin .45s cubic-bezier(.22,1,.36,1) both}
  .navlinks.open .navbody>*:nth-child(1){animation-delay:.05s}
  .navlinks.open .navbody>*:nth-child(2){animation-delay:.09s}
  .navlinks.open .navbody>*:nth-child(3){animation-delay:.13s}
  .navlinks.open .navbody>*:nth-child(4){animation-delay:.17s}
  .navlinks.open .navbody>*:nth-child(n+5){animation-delay:.21s}
  .navlinks.open .navfoot{animation-delay:.2s}
  .navpanel:not([hidden]){animation:rk-unfold .3s cubic-bezier(.22,1,.36,1) both}
  .navpanel:not([hidden]) a{animation:rk-navin .35s cubic-bezier(.22,1,.36,1) both}
  .navpanel:not([hidden]) a:nth-child(2){animation-delay:.03s}
  .navpanel:not([hidden]) a:nth-child(3){animation-delay:.06s}
  .navpanel:not([hidden]) a:nth-child(4){animation-delay:.09s}
  .navpanel:not([hidden]) a:nth-child(n+5){animation-delay:.12s}
}
@media (max-width:1080px) and (prefers-reduced-motion:reduce){
  .navlinks{transform:none;transition:none}
  .menu::before,.menu::after,.navx,.navtop .cv,.navbody>a::after{transition:none}
}
@keyframes rk-navin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rk-unfold{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}