/* ==========================================================================
   CRI — futuristic homepage layer
   Loaded after cri-fx.css. Homepage-weighted, but the primitives are reusable.

   Design logic: the futurism is anchored in CRI's own brand promise —
   "Expand Your Horizon" — rather than generic sci-fi. The signature element
   is a perspective grid receding to a glowing horizon line. That reads as
   advanced engineering, not as a game menu.
   ========================================================================== */

/* --- scroll progress beam ----------------------------------------------- */
.progress-beam{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:120;height:2px;
  width:0%;background:linear-gradient(90deg,var(--navy-700),var(--blue-500),var(--blue-300));
  box-shadow:0 0 12px rgb(61 133 223/.7);transition:width .1s linear;pointer-events:none}

/* --- perspective horizon floor ------------------------------------------ */
/* A grid plane laid flat in 3D, scrolling toward the viewer, fading into a
   glowing horizon. Pure CSS: no canvas cost. */
.horizon-stage{position:absolute;inset-block-end:0;inset-inline:0;block-size:46%;
  z-index:1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,#000 8%,transparent 92%);
  mask-image:linear-gradient(to top,#000 8%,transparent 92%)}
.horizon-stage::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:1px;
  background:linear-gradient(90deg,transparent,var(--blue-500) 28%,#A9CBF3 50%,var(--blue-500) 72%,transparent);
  box-shadow:0 0 26px 3px rgb(61 133 223/.5);z-index:2}
.horizon-grid{position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgb(105 160 230/.26) 1px,transparent 1px),
    linear-gradient(to bottom,rgb(105 160 230/.2) 1px,transparent 1px);
  background-size:7% 14%;
  transform:perspective(340px) rotateX(74deg);
  transform-origin:top center;
  animation:floorRun 9s linear infinite}
@keyframes floorRun{from{background-position:0 0}to{background-position:0 14%}}

/* --- kinetic headline ---------------------------------------------------- */
.kinetic{display:block;overflow:hidden}
.kinetic > span{display:inline-block;transform:translateY(105%);
  animation:riseIn .95s var(--ease) forwards}
.kinetic:nth-of-type(1) > span{animation-delay:.12s}
.kinetic:nth-of-type(2) > span{animation-delay:.26s}
@keyframes riseIn{to{transform:translateY(0)}}

/* Cyan sweep that crosses the headline once on load. */
.sheen{position:relative}
.sheen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgb(127 217 249/.45) 50%,transparent 60%);
  background-size:280% 100%;animation:sheenRun 2.6s var(--ease) .9s 1 forwards}
@keyframes sheenRun{from{background-position:180% 0}to{background-position:-80% 0}}

/* --- capability ticker --------------------------------------------------- */
.ticker{display:flex;align-items:center;gap:.6rem;font-family:var(--sans);font-size:.9375rem;
  color:var(--on-dark-muted);margin-block-start:1.1rem;min-block-size:1.6rem}
.ticker .caret-blink{display:inline-block;inline-size:2px;block-size:1.05em;
  background:var(--cyan-500);vertical-align:-2px;animation:blink 1.05s step-end infinite}
@keyframes blink{50%{opacity:0}}
.ticker b{color:#fff;font-weight:600}

/* --- HUD credibility panels ---------------------------------------------- */
.hud{position:relative;padding:1.9rem 1.25rem;text-align:center;background:var(--navy-900);
  transition:background .35s var(--ease)}
.hud:hover{background:#052145}
/* Corner brackets — instrument-panel language, drawn with borders not images. */
.hud::before,.hud::after{content:"";position:absolute;inline-size:14px;block-size:14px;
  opacity:.55;transition:opacity .35s var(--ease),inline-size .35s var(--ease)}
.hud::before{inset-block-start:10px;inset-inline-start:10px;
  border-block-start:1px solid var(--cyan-500);border-inline-start:1px solid var(--cyan-500)}
.hud::after{inset-block-end:10px;inset-inline-end:10px;
  border-block-end:1px solid var(--cyan-500);border-inline-end:1px solid var(--cyan-500)}
.hud:hover::before,.hud:hover::after{opacity:1;inline-size:22px}
.hud .ico{filter:drop-shadow(0 0 8px rgb(61 133 223/.45))}

/* --- bento capability grid ----------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.bento > *{grid-column:span 2}
.bento > .bento-wide{grid-column:span 4}
.bento > .bento-tall{grid-column:span 2;grid-row:span 2}
.bento .card{block-size:100%;display:flex;flex-direction:column}
.bento .card .ico{margin-block-end:auto}
.bento .card h3{margin-block-start:1rem}

/* Featured bento tile: dark, with its own micro-grid backdrop. */
.bento-feature{position:relative;overflow:hidden;border-radius:var(--radius);
  padding:1.9rem;color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(150deg,#020D1A 0%,#042659 55%,#0B4C8C 100%);
  border:1px solid rgb(105 160 230/.3)}
.bento-feature::before{content:"";position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgb(105 160 230/.1) 1px,transparent 1px),
    linear-gradient(90deg,rgb(105 160 230/.1) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle at 80% 20%,#000,transparent 72%);
  mask-image:radial-gradient(circle at 80% 20%,#000,transparent 72%)}
.bento-feature > *{position:relative;z-index:1}
.bento-feature h3{font-size:1.5rem;color:#fff;margin-block:.9rem .55rem}
.bento-feature p{color:#CFE4F8;font-size:.9375rem}
.bento-feature .ico{stroke:var(--cyan-500);inline-size:40px;block-size:40px}

/* --- 3D tilt ------------------------------------------------------------- */
/* --rx/--ry are written by cri-fx.js on pointer move. */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transform-style:preserve-3d;transition:transform .16s ease-out}
.tilt:hover{transition:transform .06s ease-out}

/* --- magnetic buttons ----------------------------------------------------- */
.magnetic{transition:transform .25s var(--ease)}

/* --- beam divider --------------------------------------------------------- */
.beam{position:relative;block-size:1px;border:0;overflow:visible;
  background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
.beam::after{content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;
  inline-size:22%;block-size:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--cyan-500),var(--blue-500),transparent);
  filter:blur(1px);animation:beamRun 7s var(--ease) infinite}
@keyframes beamRun{0%{inset-inline-start:-24%}55%,100%{inset-inline-start:102%}}

/* --- section label chip --------------------------------------------------- */
.chip-label{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem;
  border-radius:999px;font-family:var(--display);font-size:.6875rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  background:rgb(18 104 213/.07);border:1px solid rgb(18 104 213/.22);color:var(--blue-500)}
.chip-label::before{content:"";inline-size:5px;block-size:5px;border-radius:50%;
  background:currentColor;box-shadow:0 0 8px currentColor}
.on-dark .chip-label{background:rgb(61 133 223/.1);border-color:rgb(61 133 223/.3);
  color:var(--cyan-500)}

/* --- process rail --------------------------------------------------------- */
/* Energy pulse travelling the connector line between process steps. */
.proc{position:relative}
.proc-rail{position:absolute;inset-block-start:26px;inset-inline:8%;block-size:1px;
  background:linear-gradient(90deg,var(--cyan-500),var(--blue-500) 40%,var(--line));overflow:visible}
.proc-rail::after{content:"";position:absolute;inset-block-start:-1.5px;
  inline-size:64px;block-size:4px;border-radius:4px;filter:blur(2px);
  background:linear-gradient(90deg,transparent,#A9CBF3,transparent);
  animation:railRun 5.5s linear infinite}
@keyframes railRun{0%{inset-inline-start:-8%}100%{inset-inline-start:104%}}

/* --- glow on stat numbers -------------------------------------------------- */
.stat{text-shadow:0 0 28px rgb(61 133 223/.3)}

/* --- responsive ------------------------------------------------------------ */
@media(max-width:1100px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .bento > .bento-wide{grid-column:span 4}
  .bento > .bento-tall{grid-row:span 1}
  .horizon-stage{block-size:34%}
}
@media(max-width:700px){
  .bento{grid-template-columns:1fr}
  .bento > *,.bento > .bento-wide,.bento > .bento-tall{grid-column:span 1;grid-row:span 1}
  .horizon-stage{display:none}
  .ticker{font-size:.875rem}
}

/* --- motion opt-out --------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .horizon-grid,.beam::after,.proc-rail::after,.ticker .caret-blink{animation:none!important}
  .sheen::after{display:none}
  .kinetic > span{transform:none!important;animation:none!important}
  .tilt{transform:none!important}
  .progress-beam{display:none}
}

/* --- ecosystem enhancements ------------------------------------------- */
.eco .packets circle{filter:drop-shadow(0 0 6px rgb(127 217 249/.9))}
.eco .scan{transform-origin:260px 210px;animation:scanSpin 12s linear infinite}
@keyframes scanSpin{to{transform:rotate(-360deg)}}
.eco .core{filter:drop-shadow(0 0 22px rgb(61 133 223/.55))}
@media(prefers-reduced-motion:reduce){
  .eco .scan{animation:none}
  .eco .packets{display:none}
}