/* Motion layer for the landing page. Patterns after 21st.dev's tilt card,
   infinite-moving-cards marquee and scroll reveal, rewritten in plain CSS/JS
   (the page has no build step). Every effect is added by motion.js, so a
   no-JS or reduced-motion visit shows the finished page, nothing hidden. */

/* scroll progress, from the inline-start edge (right in RTL) */
.mv-progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 80;
  background: linear-gradient(90deg, #D54C15, #FF9A62); transform-origin: 100% 50%;
  transform: scaleX(var(--p, 0)); pointer-events: none; }
html[dir="ltr"] .mv-progress { transform-origin: 0 50%; }

/* word-by-word heading reveal (words only, so Arabic letter joining is untouched) */
.mv-w { display: inline-block; }
html:not(.gsap) .mv-w { opacity: 0; transform: translateY(.6em); filter: blur(6px);
  transition: opacity .7s var(--ease, ease), transform .7s var(--ease, ease), filter .7s var(--ease, ease);
  transition-delay: calc(var(--i, 0) * 55ms); will-change: transform, opacity; }
html:not(.gsap) .mv-on .mv-w { opacity: 1; transform: none; filter: none; }

/* generic block reveal */
.mv { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease, ease), transform .75s var(--ease, ease);
  transition-delay: calc(var(--d, 0) * 70ms); }
.mv.mv-on { opacity: 1; transform: none; }

/* tilt + spotlight cards */
.mv-tilt { position: relative; transform-style: preserve-3d; --rx: 0deg; --ry: 0deg; --lift: 0px; }
.mv-tilt.mv-live { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)) !important;
  transition: transform .12s linear, box-shadow .3s var(--ease, ease) !important; }
.mv-tilt.mv-rest { transition: transform .5s var(--ease, ease) !important; }
.mv-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,154,98,.22), transparent 62%);
  opacity: 0; transition: opacity .3s; }
.mv-tilt.mv-live::after { opacity: 1; }

/* magnetic buttons use the independent translate property, so existing transforms stay */
.mv-mag { translate: var(--bx, 0px) var(--by, 0px); transition: translate .25s var(--ease, ease); }

/* hero scene drifts with the pointer; scroll drives --sy on the letter, not this */
.fold-scene { translate: var(--px, 0px) var(--py, 0px); transition: translate .45s cubic-bezier(.2,.7,.2,1); }

/* opening veil — removed by motion.js; never shipped in the HTML */
.mv-veil { position: fixed; inset: 0; z-index: 200; background: #3A1A0D; color: #FFF4EC;
  display: grid; place-items: center; pointer-events: none; }
.mv-veil-in { display: grid; justify-items: center; gap: 8px; }
.mv-veil b { font-family: var(--fd, "Readex Pro", sans-serif); font-weight: 700; font-size: clamp(36px, 6vw, 64px); letter-spacing: -.03em; }
.mv-veil span { font-family: var(--fb, sans-serif); font-size: 15px; color: #C9B3A4; }

/* hold the paper fold still while the intro owns --f */
.letter.mv-hold { animation: none !important; }
html.gsap .letter { animation: none; }
.token i.mv-scrub { animation: none; }

/* journey steps light as the scroll passes them */
html.gsap .rseg { transition: box-shadow .45s var(--ease, ease), border-color .45s var(--ease, ease); }
html.gsap .rseg.mv-now { border-color: var(--od, #B8400F); box-shadow: 0 18px 36px -26px rgba(184,64,15,.85); }
html.gsap .rseg.key.mv-now { box-shadow: 0 22px 40px -22px rgba(0,0,0,.45); }
html.gsap .mv-w { transition: none; filter: none; }

.hdr { transition: box-shadow .35s var(--ease, ease), background .35s var(--ease, ease); }
.hdr.is-scrolled { background: rgba(251,246,240,.97); box-shadow: 0 14px 30px -26px rgba(58,26,13,.7); }

html.mv-boot:not(.mv-go) .hero .status,
html.mv-boot:not(.mv-go) .hero .h1,
html.mv-boot:not(.mv-go) .hero .lede,
html.mv-boot:not(.mv-go) .hero .cta,
html.mv-boot:not(.mv-go) .fold-scene { opacity: 0; }

.hero > .wrap, .band > .wrap { position: relative; z-index: 1; }
.hero, .band { position: relative; }

/* ticker of the page's own category words */
.mv-ticker { overflow: hidden; background: var(--ember, #3A1A0D); color: var(--one, #FFF4EC);
  border-block: 1px solid rgba(255,244,236,.12); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mv-track { display: flex; width: max-content; animation: mv-run 38s linear infinite; }
.mv-ticker:hover .mv-track { animation-play-state: paused; }
.mv-track ul { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; flex: none; }
.mv-track li { font-family: var(--fd, sans-serif); font-weight: 600; font-size: 17px; padding: 16px 28px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 28px; }
.mv-track li::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--oone, #FF9A62); }
@keyframes mv-run { to { transform: translateX(50%); } }
html[dir="ltr"] .mv-track { animation-name: mv-run-ltr; }
@keyframes mv-run-ltr { to { transform: translateX(-50%); } }

/* current section in the header */
.nav a.mv-cur { color: var(--odd, #9C360C); background: var(--oll, #FBE3D3); }

@media (prefers-reduced-motion: reduce) {
  .mv, .mv-w { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .mv-track, .mv-veil { animation: none !important; }
  .mv-veil { display: none !important; }
  .mv-progress { display: none; }
  .ftr, .hero .status, .hero .h1, .hero .lede, .hero .cta, .fold-scene { opacity: 1 !important; transform: none !important; }
}

/* the shader canvas sits behind the page; light and dark bands let it show through.
   .contact (solid orange) and the footer keep their own colour. */
.mv-gl-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
html.mv-gl .nst, html.mv-gl .hero, html.mv-gl .band:not(.contact), html.mv-gl .band[style]:not(.contact) { background: transparent !important; }
html.mv-gl .nst { position: relative; z-index: 1; }
html.mv-gl .fold-bg { opacity: .5; }

/* ---- the three figures: a dark panel, glowing numerals, one moving icon each ---- */
html .stats { grid-template-columns: minmax(0, 1fr); gap: 14px; border: 0; border-radius: 0; overflow: visible; background: transparent; }
@media (min-width: 640px) { html .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
html .stats > div { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 30px 20px 26px;
  border-radius: 22px; color: #FFF4EC; border: 1px solid rgba(255,154,98,.28);
  background: linear-gradient(165deg, #4A2414 0%, #3A1A0D 62%, #2B1206 100%);
  box-shadow: 0 24px 46px -30px rgba(58,26,13,.85), inset 0 1px 0 rgba(255,244,236,.08); }
html .stats > div::before { content: ""; position: absolute; z-index: -1; width: 170px; height: 170px; border-radius: 50%;
  inset-block-start: -60px; inset-inline-end: -40px; background: radial-gradient(circle, rgba(213,76,21,.55), transparent 68%);
  animation: mv-orb 9s ease-in-out infinite alternate; }
html .stats > div:nth-child(2)::before { animation-delay: -3s; }
html .stats > div:nth-child(3)::before { animation-delay: -6s; }
@keyframes mv-orb { to { transform: translate(-26px, 22px) scale(1.18); } }
html .stats > div:hover { background: linear-gradient(165deg, #55291a 0%, #3A1A0D 62%, #2B1206 100%); }
html .stats dt { font-size: clamp(56px, 7vw, 84px); line-height: 1; margin-top: 10px; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFF4EC 10%, #FF9A62 95%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 6px 18px rgba(213,76,21,.45)); }
html .stats > div:hover dt { color: transparent; transform: scale(1.05); }
html .stats dd { margin-top: 10px; color: #E8D2C3; font-size: 15px; }
.stats .si { width: 46px; height: 46px; color: #FF9A62; display: block; margin-inline: auto; overflow: visible; }
.si-screens .a, .si-screens .c { animation: mv-screen 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.si-screens .c { animation-delay: -1.6s; }
.si-screens .b { animation: mv-screen-mid 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes mv-screen { 50% { transform: translateY(-4px); } }
@keyframes mv-screen-mid { 50% { transform: translateY(-6px) scale(1.04); } }
.si-tag .swing { transform-box: view-box; transform-origin: 24px 8px; animation: mv-swing-tag 3.6s ease-in-out infinite; }
@keyframes mv-swing-tag { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.si-clock .mn { transform-box: view-box; transform-origin: 24px 24px; animation: mv-hand 6s linear infinite; }
.si-clock .hr { transform-box: view-box; transform-origin: 24px 24px; animation: mv-hand 72s linear infinite; }
@keyframes mv-hand { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html .stats > div::before, .stats .si * { animation: none !important; }
}

/* ---- icons on every service and product example ---- */
.ci { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; color: var(--od, #B8400F); }
.ci svg { width: 100%; height: 100%; overflow: visible; }
.ci * { transform-box: fill-box; transform-origin: 50% 50%; }
.cats li, .chipx { display: inline-flex; align-items: center; gap: 7px; }
.cats li:hover .ci, .chipx:hover .ci { color: #fff; }
.mv-track li { gap: 12px; } .mv-track li .ci { color: var(--oone, #FF9A62); width: 22px; height: 22px; }
.mv-track li { flex-direction: row; }
.ci svg, .ci .a, .ci .b, .ci .c, .ci .ck { animation-delay: var(--ci-d, 0s); }
.ci-sparkle .a { animation: ci-pulse 2.4s ease-in-out infinite; }
.ci-sparkle .b { animation: ci-twinkle 2.4s ease-in-out infinite; animation-delay: -1.2s; }
.ci-wrench svg { animation: ci-wiggle 2.6s ease-in-out infinite; }
.ci-snow svg { animation: ci-spin 9s linear infinite; }
.ci-bolt svg { animation: ci-flash 2.2s ease-in-out infinite; }
.ci-washer .a { animation: ci-spin 2.8s linear infinite; }
.ci-bug .a { animation: ci-wiggle 1.2s ease-in-out infinite; }
.ci-waves .a { animation: ci-wave 2.4s ease-in-out infinite alternate; }
.ci-waves .b { animation: ci-wave 2.4s ease-in-out infinite alternate-reverse; }
.ci-waves .c { animation: ci-wave 2.4s ease-in-out infinite alternate; }
.ci-truck .a { animation: ci-drive 2.4s ease-in-out infinite alternate; }
.ci-roller .a { animation: ci-drive 2s ease-in-out infinite alternate; }
.ci-shield .ck { stroke-dasharray: 14; animation: ci-draw 2.8s ease-in-out infinite; }
.ci-bell .a { transform-origin: 50% 12%; animation: ci-ring 2.6s ease-in-out infinite; }
.ci-bed .a { animation: ci-hop 1.8s ease-in-out infinite; }
.ci-gift .a { animation: ci-hop 2s ease-in-out infinite; }
.ci-spray .a { animation: ci-puff 1.6s ease-in-out infinite; }
.ci-spray .b { animation: ci-puff 1.6s ease-in-out infinite .2s; }
.ci-spray .c { animation: ci-puff 1.6s ease-in-out infinite .4s; }
.ci-hammer .a { transform-origin: 20% 80%; animation: ci-wiggle 1.8s ease-in-out infinite; }
.ci-camera .a { animation: ci-pulse 2.6s ease-in-out infinite; }
.ci-camera .b { animation: ci-blink 1.4s steps(1) infinite; }
.ci-lock .a { animation: ci-shackle 3s ease-in-out infinite; }
.ci-cross .a { animation: ci-pulse 1.6s ease-in-out infinite; }
.ci-lamp .a { animation: ci-flash 2.4s ease-in-out infinite; }
.ci-plug .a { animation: ci-hop 1.9s ease-in-out infinite; }
.ci-box .a { animation: ci-hop 2.2s ease-in-out infinite; }
@keyframes ci-pulse { 50% { transform: scale(1.18); } }
@keyframes ci-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes ci-wiggle { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes ci-spin { to { transform: rotate(360deg); } }
@keyframes ci-flash { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.12); } }
@keyframes ci-wave { from { transform: translateX(-2px); } to { transform: translateX(2px); } }
@keyframes ci-drive { from { transform: translateX(-1.5px); } to { transform: translateX(1.5px); } }
@keyframes ci-draw { 0% { stroke-dashoffset: 14; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -14; } }
@keyframes ci-ring { 0%, 55%, 100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-12deg); } 30% { transform: rotate(9deg); } 40% { transform: rotate(-6deg); } }
@keyframes ci-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-2.2px); } }
@keyframes ci-puff { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes ci-blink { 50% { opacity: 0; } }
@keyframes ci-shackle { 0%, 50%, 100% { transform: translateY(0); } 60%, 85% { transform: translateY(-2.4px); } }
@media (prefers-reduced-motion: reduce) { .ci svg, .ci * { animation: none !important; } }

/* ---- early-access form ---- */
.joinform { display: grid; gap: 14px; }
.jf-type { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jf-type legend { font-family: var(--fd, sans-serif); font-weight: 600; font-size: 14px; color: var(--ink2, #6E5446); margin-block-end: 8px; padding: 0; }
.jf-type label { position: relative; }
.jf-type input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.jf-type span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line2, #CDB7A3);
  font-family: var(--fd, sans-serif); font-weight: 600; font-size: 14.5px; color: var(--ink, #2B1206); background: var(--card, #FFFCF8); transition: all .25s var(--ease, ease); }
.jf-type input:checked + span { background: var(--od, #B8400F); border-color: var(--od, #B8400F); color: #fff; }
.jf-type input:focus-visible + span { outline: 3px solid var(--od, #B8400F); outline-offset: 3px; }
.jf-row { display: grid; gap: 6px; }
.jf-row label { font-family: var(--fd, sans-serif); font-weight: 600; font-size: 14px; color: var(--ink2, #6E5446); }
.jf-row .opt { font-weight: 400; opacity: .8; }
.joinform input[type="text"], .joinform input[type="tel"], .joinform textarea { font: inherit; font-size: 16px; color: var(--ink, #2B1206); background: #fff;
  border: 1.5px solid var(--line2, #CDB7A3); border-radius: 12px; padding: 11px 14px; min-height: 48px; width: 100%; box-sizing: border-box; }
.joinform textarea { resize: vertical; min-height: 72px; }
.joinform input:focus, .joinform textarea:focus { outline: 3px solid rgba(184,64,15,.35); border-color: var(--od, #B8400F); }
.joinform [aria-invalid="true"] { border-color: #9E2F2F; }
.jf-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.jf-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.7; color: var(--ink2, #6E5446); }
.jf-consent input { width: 22px; height: 22px; margin-top: 3px; accent-color: #B8400F; flex: none; }
.jf-consent a { color: var(--od, #B8400F); font-weight: 700; display: inline-block; min-height: 24px; }
.jf-err { margin: 0; color: #9E2F2F; font-weight: 700; font-size: 14.5px; }
.jf-ok { margin: 0; color: #2E6B4F; font-weight: 700; font-size: 15.5px; }
.jf-submit { width: 100%; justify-content: center; }
.jf-submit[disabled] { opacity: .65; cursor: progress; }
.jf-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px dashed var(--line2, #CDB7A3);
  font-size: 14px; color: var(--ink2, #6E5446); }
.jf-alt .mail { direction: ltr; font-family: var(--fm, monospace); font-size: 14px; }
.jf-alt .copy { min-height: 44px; padding: 0 16px; }

/* long capability lists fold after a few items */
.lane li.mv-more { display: none; }
.lane.mv-open li.mv-more { display: flex; }
.lane-toggle { appearance: none; border: 1.5px solid var(--line2, #CDB7A3); background: var(--card, #FFFCF8); color: var(--od, #B8400F); cursor: pointer;
  font-family: var(--fd, sans-serif); font-weight: 700; font-size: 14.5px; min-height: 44px; padding: 0 18px; border-radius: 999px; margin-block-start: 12px; }
.lane-toggle:hover { background: var(--oll, #FBE3D3); }

/* ---- readability floor: real copy is never under 14px (the product mock-ups keep their own scale) ---- */
html .cats li, html .cats-h, html .cats-note, html .status, html .legal, html .legal a, html .qa summary .qn,
html .mailbox label, html .jf-row label, html .jf-consent span, html .opt, html span.soon, html .brand small { font-size: 14px; }
html .cats li { padding-block: 7px; }
html .brand small { font-size: 12.5px; }
html .chipx { font-size: 13px; }
/* small text links get a 44px-tall hit area without changing the layout */
html .legal a, html p a[href^="#"], html .jf-consent a { position: relative; display: inline-block; }
html .legal a::after, html p a[href^="#"]::after, html .jf-consent a::after { content: ""; position: absolute; inset-inline: -6px; inset-block: -12px; }

/* ---- phones: nothing is wider than the screen, and chips wrap instead of cutting their text ---- */
@media (max-width: 1019px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-grid > * { min-width: 0; } }
.face .row { flex-wrap: wrap; gap: 6px; }
.chipx { flex: none; }
@media (max-width: 480px) { .chipx { padding: 3px 8px; } .chipx .ci { width: 14px; height: 14px; } .face .row { gap: 5px; } }