/* UnboxedAI inner pages: the home page's motion and glass, layered over the generated markup.
   Owner: design lead. Reads the page classes only; reduced motion and no-JS keep the static page. */
/* No cross-document @view-transition: with the hero intro it scored CLS 0.27 in Lighthouse (2026-10-21). */
body { overflow-x:clip; }

/* ---------- hero: ambient light, title and stage (CSS only, so nothing waits for JS; no opacity on the LCP) ---------- */
.hero { position:relative; isolation:isolate; }
.fx-aurora { position:absolute; z-index:-1; left:50%; top:-180px; width:100vw; height:calc(100% + 180px); transform:translateX(-50%); overflow:hidden; pointer-events:none; }
.fx-aurora i { position:absolute; border-radius:50%; opacity:.5; }   /* dark system v1: eased multi-stop falloff instead of filter:blur (no banding, no GPU blur) */
.fx-aurora i:nth-child(1) { width:56vw; height:56vw; left:0; top:-6%; background:radial-gradient(closest-side,rgba(92,110,255,.62),rgba(92,110,255,.44) 20%,rgba(88,104,250,.26) 40%,rgba(84,98,240,.11) 60%,rgba(80,92,230,.03) 80%,transparent); }
.fx-aurora i:nth-child(2) { width:58vw; height:58vw; right:-4vw; top:8%; background:radial-gradient(closest-side,rgba(130,80,255,.5),rgba(130,80,255,.34) 20%,rgba(124,76,250,.2) 40%,rgba(118,72,240,.08) 60%,rgba(110,68,230,.02) 80%,transparent); }
.fx-aurora i:nth-child(3) { width:30vw; height:30vw; left:40vw; top:46%; background:radial-gradient(closest-side,rgba(236,20,90,.36),rgba(236,20,90,.22) 25%,rgba(236,20,90,.1) 50%,rgba(236,20,90,.025) 76%,transparent); }
.fx-aurora::before { content:""; position:absolute; inset:0; background-image:var(--stars-1),var(--stars-2),var(--stars-3); background-size:240px 200px,360px 320px,520px 420px; opacity:calc(.5 * var(--ub-stars-on,1)); -webkit-mask:radial-gradient(110% 70% at 50% 0%,#000 30%,#0000 75%); mask:radial-gradient(110% 70% at 50% 0%,#000 30%,#0000 75%); }
.fx-aurora::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 55%,var(--void) 100%); }
.fx-aurora i { opacity:.5; }
:root[data-theme="light"] .fx-aurora i { opacity:.26; }

@media (prefers-reduced-motion:no-preference) {
  .fx-aurora i:nth-child(1) { animation:fx-drift-a 18s ease-in-out infinite alternate; }
  .fx-aurora i:nth-child(2) { animation:fx-drift-b 22s ease-in-out infinite alternate; }
  .fx-aurora i:nth-child(3) { animation:fx-drift-c 16s ease-in-out infinite alternate; }
  .hero .eyebrow, .hero .tlink.product-industry { animation:fx-rise .9s var(--ease) .05s both; }
  .hero h1 { animation:fx-title 1.25s var(--ease) both; }
  .hero .lede { animation:fx-rise 1.1s var(--ease) .14s both; }
  .hero .hero-actions, .hero .hero-link, .hero .product-meta { animation:fx-rise 1.1s var(--ease) .24s both; }
  .hero figure { animation:fx-stage-in 1.6s var(--ease) .1s both; }
  .hero figure img, .screen-gallery figure:first-child img { --t:1; }
}
@keyframes fx-drift-a { to { transform:translate(9vw,6vh) scale(1.15); } }
@keyframes fx-drift-b { to { transform:translate(-8vw,-4vh) scale(.9); } }
@keyframes fx-drift-c { to { transform:translate(-6vw,-8vh) scale(1.2); } }
@keyframes fx-title { from { transform:translateY(34px); filter:blur(12px); } }   /* no letter-spacing: it reflows the title (CLS) */
@keyframes fx-rise { from { transform:translateY(22px); filter:blur(6px); } }
@keyframes fx-stage-in { from { transform:perspective(1800px) translateY(90px) rotateX(16deg) scale(.94); } }

/* the stage: rounded glass rim and a soft coloured light under the image; the tilt flattens as you scroll (--t from JS) */
.hero figure, .screen-gallery figure { position:relative; perspective:1800px; }
.hero figure img, .screen-gallery figure img {
  transform-origin:50% 100%;
  transform:rotateX(calc(var(--t,0) * 9deg)) scale(calc(1 - var(--t,0) * .045));
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 40px 90px -40px rgba(20,20,60,.45), 0 0 0 1px var(--line);
  will-change:transform;
}
.hero figure::before, .screen-gallery figure::before {
  content:""; position:absolute; z-index:-1; left:12%; right:12%; top:18%; bottom:2%; border-radius:50%;
  background:radial-gradient(closest-side,rgba(92,110,255,.34),rgba(130,80,255,.2) 55%,transparent);
  filter:blur(60px); opacity:calc(.55 + var(--glow,0) * .45); pointer-events:none;
}
.hero figure img.screen, .screen-gallery figure img { background:transparent; }

/* ---------- scroll progress ---------- */
.fx-bar { position:fixed; z-index:70; left:0; right:0; top:0; height:2px; transform-origin:0 50%; transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,#3e4ca8,#b12a90 55%,#ec145a); pointer-events:none; }

/* ---------- reveals (JS adds .fx to <html>; replaces the CSS view() reveal so they never double up) ---------- */
html.fx .rv { animation:none !important; }
html.fx .fx-r { opacity:0; translate:0 46px; scale:.985; transition:opacity .9s var(--ease) calc(var(--i,0) * 70ms), translate 1.2s var(--ease) calc(var(--i,0) * 70ms), scale 1.2s var(--ease) calc(var(--i,0) * 70ms); }
html.fx .fx-r.fx-on { opacity:1; translate:0 0; scale:1; }

/* headings: words rise out of a mask */
.fx-w { display:inline-block; overflow:clip; overflow-clip-margin:.12em; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em; }
.fx-w > span { display:inline-block; transform:translateY(108%); transition:transform 1.05s var(--ease) calc(var(--i,0) * 52ms); }
.fx-split.fx-on .fx-w > span { transform:none; }
html.fx .fx-split { opacity:1; translate:none; scale:none; }

/* images: the window opens while the picture settles (the img stays a direct child, so page rules still match) */
html.fx .fx-clip { clip-path:inset(10% 8% 10% 8% round 34px); scale:1.12; transition:clip-path 1.5s var(--ease), scale 1.9s var(--ease); }
html.fx .fx-on .fx-clip { clip-path:inset(0% 0% 0% 0% round 0px); scale:1; }
html.fx figure.fx-r { opacity:1; translate:none; scale:none; overflow:clip; }   /* the scaled img must not widen a phone layout */
html.fx figure.fx-r figcaption { opacity:0; translate:0 14px; transition:opacity .8s var(--ease) .35s, translate .9s var(--ease) .35s; }
html.fx figure.fx-r.fx-on figcaption { opacity:1; translate:0 0; }

/* ---------- glass cards with a pointer light and a small tilt ---------- */
.make-card, .product-card { position:relative; isolation:isolate; overflow:hidden; transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.make-card { background:color-mix(in srgb,var(--hull-2) 78%,transparent); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); }
.make-card::before, .product-card::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:0; transition:opacity .5s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(108,125,255,.18),rgba(130,80,255,.08) 45%,transparent 70%); }
.product-card::before { z-index:1; }
.make-card::after, .product-card::after { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(var(--a,135deg),rgba(255,255,255,.55),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); }
.make-card::after { background:linear-gradient(var(--a,135deg),rgba(255,255,255,.55),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.22)); }
:root[data-theme="light"] .make-card::after { background:linear-gradient(var(--a,135deg),rgba(255,255,255,.95),rgba(255,255,255,0) 40%,rgba(0,0,0,0) 62%,rgba(0,0,0,.06)); }
.fx-hot::before { opacity:1; }
.fx-hot { transition:transform .15s linear, box-shadow .6s var(--ease); box-shadow:0 30px 60px -30px rgba(20,20,60,.4); }
.product-card .product-card-image img { transition:scale 1.2s var(--ease); }
.product-card.fx-hot .product-card-image img { scale:1.04; }

/* ---------- night sections: drifting light, drawn ticks ---------- */
.night { position:relative; isolation:isolate; overflow:clip; }
.night::before { content:""; position:absolute; z-index:-1; inset:-10% -10%; pointer-events:none;
  background:radial-gradient(900px 520px at calc(18% + var(--sx,0) * 30%) 30%,rgba(62,76,168,.32),transparent 62%),
             radial-gradient(760px 460px at calc(88% - var(--sx,0) * 26%) 92%,rgba(130,80,255,.24),transparent 62%); }
.checklist svg path { stroke-dasharray:22; stroke-dashoffset:0; }
html.fx .checklist li.fx-r svg path { stroke-dashoffset:22; transition:stroke-dashoffset .9s var(--ease) calc(var(--i,0) * 70ms + .35s); }
html.fx .checklist li.fx-r.fx-on svg path { stroke-dashoffset:0; }
.process-grid li { transition:border-color .8s var(--ease); }
html.fx .process-grid li.fx-r::after { content:""; position:absolute; left:0; top:-2px; height:2px; width:100%; background:linear-gradient(90deg,#3e4ca8,#ec145a);
  transform-origin:0 50%; transform:scaleX(0); transition:transform 1.3s var(--ease) calc(var(--i,0) * 160ms + .2s); }
html.fx .process-grid li.fx-r.fx-on::after { transform:scaleX(1); }

/* CTA: a slow light across the headline */
@media (prefers-reduced-motion:no-preference) {
  .cta h2 { background:linear-gradient(100deg,#f5f5f7 0%,#f5f5f7 38%,#ffb3cb 50%,#f5f5f7 62%,#f5f5f7 100%); background-size:260% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent; animation:fx-sheen 7s var(--ease) infinite; }
}
@keyframes fx-sheen { 0% { background-position:100% 0; } 55%,100% { background-position:0 0; } }
.btn { transition:transform .5s var(--ease), background-color .3s, translate .6s var(--ease); translate:var(--bx,0) var(--by,0); }
/* cards: the reveal and the tilt use separate properties, so both transitions are kept */
html.fx .make-card.fx-r, html.fx .product-card.fx-r { transition:opacity .9s var(--ease) calc(var(--i,0) * 70ms), translate 1.2s var(--ease) calc(var(--i,0) * 70ms), scale 1.2s var(--ease) calc(var(--i,0) * 70ms), transform .6s var(--ease), box-shadow .6s var(--ease); }
html.fx .make-card.fx-r.fx-hot, html.fx .product-card.fx-r.fx-hot { transition:opacity .9s var(--ease), translate 1.2s var(--ease), scale 1.2s var(--ease), transform .15s linear, box-shadow .6s var(--ease); }

/* products: the gallery stage and feature dots */
.screen-gallery figure + figure img { --t:0; }
html.fx .product-feature-list li.fx-r { translate:-18px 0; }
html.fx .product-feature-list li.fx-r.fx-on { translate:0 0; }

/* ---------- Qaus 3D scene (case study only; injected by qaus-3d.js) ---------- */
.fx-tt { position:relative; background:#050507; color:#f5f5f7; height:340vh; }
.fx-tt .fx-pin { position:sticky; top:0; height:100svh; min-height:560px; overflow:hidden; }
.fx-tt-stage { position:absolute; inset:0; }
.fx-tt-stage canvas, .fx-tt-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fx-tt-stage canvas { opacity:0; transition:opacity .8s var(--ease); }
.fx-tt-stage.live canvas { opacity:1; }
.fx-tt-stage.live img { opacity:0; transition:opacity .6s .3s; }
.fx-tt-stage::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(5,5,7,.8) 0%,rgba(5,5,7,.35) 34%,rgba(5,5,7,0) 56%); }
.fx-tt-copy { position:absolute; left:0; right:0; top:calc(env(safe-area-inset-top,0px) + 150px); pointer-events:none; z-index:1; }
.fx-tt-copy .eyebrow { color:#a1a1a8; }
.fx-tt-copy h2 { margin-top:14px; font-size:clamp(40px,5.6vw,88px); letter-spacing:-.05em; line-height:.95; color:#f5f5f7; }
.fx-tt-caps { position:relative; margin-top:18px; min-height:3.2em; max-width:500px; }
.fx-tt-cap { position:absolute; left:0; top:0; margin:0; font:600 clamp(18px,1.6vw,22px)/1.4 var(--font-display); letter-spacing:-.015em; color:#e8e8ee; transition:opacity .6s var(--ease),transform .8s var(--ease); }
.fx-tt-cap.c2 { opacity:0; transform:translateY(14px); }
.fx-tt.flow .fx-tt-cap.c1 { opacity:0; transform:translateY(-14px); }
.fx-tt.flow .fx-tt-cap.c2 { opacity:1; transform:none; }
.fx-tt-legend { display:flex; align-items:center; gap:10px; margin-top:22px; font:600 11px/1 var(--font-display); letter-spacing:.08em; color:#a1a1a8; opacity:0; transition:opacity .6s; }
.fx-tt-legend i { width:140px; height:4px; border-radius:2px; background:linear-gradient(90deg,#3e4ca8,#b12a90 50%,#ec145a 75%,#ffd2e1); }
.fx-tt.flow .fx-tt-legend { opacity:1; }
.fx-tt-note { margin-top:14px; font-size:12px; color:rgba(255,255,255,.55); max-width:520px; }
@media (max-width:819px) {
  .fx-tt-stage::after { background:linear-gradient(180deg,rgba(5,5,7,.85) 0%,rgba(5,5,7,.4) 34%,rgba(5,5,7,0) 52%); }
  .fx-tt-copy { top:calc(env(safe-area-inset-top,0px) + 120px); } .fx-tt-caps { min-height:4.4em; }
  .make-card, .product-card { transform:none; }
}

/* ---------- style-B glass slabs: flat app screens on product heroes (markup from fx/inject.mjs) ---------- */
.fx-slabs { position:relative; max-width:1080px; margin:56px auto 0; padding-bottom:6%; text-align:left; }
.fx-slabs-tilt { position:relative; transform-origin:50% 100%; transform:perspective(2200px) rotateX(calc(var(--t,0) * 10deg)) scale(calc(1 - var(--t,0) * .045)); will-change:transform; }
.fx-slab { position:relative; border-radius:30px; padding:12px; box-shadow:0 1px 1px rgba(0,0,0,.14), 0 50px 100px -40px rgba(20,20,60,.5); }
.fx-slab > .warp, .fx-slab > .tint, .fx-slab > .rim { position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.fx-slab > .warp { -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); }
.fx-slab > .tint { background:var(--glass-tint); }
.fx-slab > .rim { padding:var(--hair,1px); background:linear-gradient(calc(var(--a,-60deg) + 90deg),rgba(255,255,255,.95),rgba(255,255,255,.16) 24%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.16) 76%,rgba(255,255,255,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); }
.fx-slab .scr { position:relative; border-radius:20px; overflow:hidden; background:var(--hull-2); }
.fx-slab .scr img { display:block; width:100%; height:auto; border-radius:0; }
.fx-slab.main { width:84%; }
.fx-slab.second { position:absolute; right:0; bottom:-4%; translate:0 calc(var(--t,0) * -36px); }
.fx-slab.phone { width:21%; border-radius:36px; padding:9px; } .fx-slab.phone .scr { border-radius:28px; }
.fx-slab.wide { width:44%; border-radius:24px; padding:9px; } .fx-slab.wide .scr { border-radius:16px; }
.fx-slabs:not(.has-phone):not(.has-desktop-2) .fx-slab.main { margin-inline:auto; }
.fx-slab-glow { position:absolute; z-index:-1; inset:4% -2% -2%; border-radius:50%; pointer-events:none; filter:blur(50px);
  background:radial-gradient(40% 50% at 32% 55%,rgba(92,110,255,.34),transparent 70%),radial-gradient(36% 46% at 74% 45%,rgba(130,80,255,.34),transparent 70%); }
.fx-slab-cap { margin:22px auto 0; max-width:720px; text-align:center; color:var(--mute); font-size:13px; }
@media (prefers-reduced-motion:no-preference) { .hero .fx-slabs { animation:fx-stage-in 1.6s var(--ease) .1s both; } .hero .fx-slabs-tilt { --t:1; } }
@media (max-width:819px) {
  .fx-slabs { margin-top:40px; padding-bottom:10%; }
  .fx-slab { border-radius:20px; padding:7px; } .fx-slab .scr { border-radius:14px; }
  .fx-slab.main { width:88%; } .fx-slab.phone { width:30%; border-radius:22px; padding:6px; } .fx-slab.phone .scr { border-radius:17px; }
  .fx-slab.wide { width:52%; padding:6px; border-radius:16px; } .fx-slab.wide .scr { border-radius:11px; }
}
@media (prefers-reduced-transparency:reduce) { .fx-slab > .warp { backdrop-filter:none; -webkit-backdrop-filter:none; } .fx-slab > .tint { background:var(--hull); } }

/* products index cards: a flat desktop screen in a small glass slab (0d adds class "flat" to .product-card-image) */
.product-card-image.flat { padding:14px; background:radial-gradient(60% 70% at 30% 60%,rgba(92,110,255,.2),transparent 70%),radial-gradient(55% 65% at 75% 40%,rgba(130,80,255,.18),transparent 70%),var(--hull-2); }
.product-card-image.flat img { border-radius:12px; aspect-ratio:16/10; object-fit:cover; object-position:top left;
  box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 0 6px color-mix(in srgb,var(--glass-tint) 80%,transparent),0 22px 40px -20px rgba(20,20,60,.55); }

@media (prefers-reduced-motion:reduce) {
  .hero figure img, .screen-gallery figure img, .fx-slabs-tilt { transform:none; } .fx-slab.second { translate:none; }
  .fx-tt { height:auto; } .fx-tt .fx-pin { position:relative; height:70svh; }
}
@media (prefers-reduced-transparency:reduce) { .make-card { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--hull-2); } }

/* Card art on the products index and industries cards (Glass rail lane, 2026-10-29; markup from products/card-art.mjs via fx/inject.mjs).
   Auto image style: Night glass in the dark theme (default), Silver studio in the light theme, following html[data-theme]. A lazy
   image with display:none is not fetched, so each visitor downloads one twin. The art is a full 16:10 scene: no slab padding. */
.product-card-image.art { padding:0; overflow:hidden; background:#05060c; }
:root[data-theme="light"] .product-card-image.art { background:#eef0f6; }
.product-card-image.art img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.product-card-image.art .ub-art-studio { display:none; }
:root[data-theme="light"] .product-card-image.art .ub-art-night { display:none; }
:root[data-theme="light"] .product-card-image.art .ub-art-studio { display:block; }