/* Slyce homepage motion layer: scroll parallax, reveals, marquee, tilt.
   Everything that hides content is gated on html.fx, which the inline head script only sets when the visitor has not asked
   for reduced motion (and removes again if home.js never reports ready). Without it the page is the plain static one. */

/* ---- scroll progress + nav ---- */
.scrollbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, #8f7dff, #e854a0 60%, #ffb36b); pointer-events: none; }
.sitenav { transition: background .3s ease, box-shadow .3s ease; }
.sitenav.is-stuck { background: rgba(255, 255, 255, 0.86); box-shadow: 0 8px 30px rgba(84, 56, 209, 0.08); }

/* ---- hero ---- */
.hero { isolation: isolate; }
.hero::before { display: none; }
.orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; filter: blur(8px); will-change: transform; }
.orb--a { top: -180px; right: -140px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(143, 125, 255, .34), rgba(143, 125, 255, 0) 68%); }
.orb--b { top: 140px; left: -200px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(232, 84, 160, .16), rgba(232, 84, 160, 0) 68%); }
.orb--c { bottom: -160px; right: 18%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(43, 159, 214, .16), rgba(43, 159, 214, 0) 68%); }
.hero__grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(106, 85, 240, .22) 1px, transparent 1.2px); background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 0%, transparent 70%); }

.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.hero h1 .w > span { display: inline-block; }
.hero h1 .grad { background: linear-gradient(100deg, #6a55f0 10%, #e854a0 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hero-art { position: relative; }
.chip3d { position: absolute; z-index: 3; will-change: transform; }
.chip3d-float { display: flex; align-items: center; gap: 9px; padding: 10px 15px 10px 11px; border-radius: 16px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(124, 108, 242, .18); box-shadow: 0 18px 40px rgba(84, 56, 209, .16); font-size: 13px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.chip3d .dot { width: 26px; height: 26px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(31, 157, 92, .14); }
.chip3d .dot svg { width: 15px; height: 15px; fill: none; stroke: var(--green); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.chip3d .dot--p { background: rgba(124, 108, 242, .16); }
.chip3d .dot--p svg { stroke: var(--accent); }
.chip3d small { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-3); margin-top: 1px; }
.chip3d--1 { top: -3%; left: -12%; }
.chip3d--2 { top: 50%; right: -11%; }
.chip3d--3 { bottom: -3%; left: -6%; }
@media (max-width: 1100px) { .chip3d--2 { right: -2%; } .chip3d--1 { left: 0; } }
@media (max-width: 900px) { .chip3d { display: none; } }

/* hero entrance (plays once on load) */
.fx .hero .eyebrow, .fx .hero .lede, .fx .hero__cta, .fx .hero__meta { opacity: 0; translate: 0 22px; }
.fx .hero h1 .w > span { translate: 0 110%; }
.fx .hero .phone, .fx .hero .chip3d { opacity: 0; translate: 0 70px; scale: .94; }
.fx.is-loaded .hero .eyebrow, .fx.is-loaded .hero .lede, .fx.is-loaded .hero__cta, .fx.is-loaded .hero__meta { opacity: 1; translate: 0 0; transition: opacity .8s ease, translate .9s cubic-bezier(.2, .8, .2, 1); }
.fx.is-loaded .hero .eyebrow { transition-delay: .05s; }
.fx.is-loaded .hero .lede { transition-delay: .5s; }
.fx.is-loaded .hero__cta { transition-delay: .65s; }
.fx.is-loaded .hero__meta { transition-delay: .8s; }
.fx.is-loaded .hero h1 .w > span { translate: 0 0; transition: translate 1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.12s + var(--i, 0) * 70ms); }
.fx.is-loaded .hero .phone, .fx.is-loaded .hero .chip3d { opacity: 1; translate: 0 0; scale: 1; transition: opacity 1s ease, translate 1.2s cubic-bezier(.2, .8, .2, 1), scale 1.2s cubic-bezier(.2, .8, .2, 1); }
.fx.is-loaded .hero .phone:nth-child(1) { transition-delay: .35s; }
.fx.is-loaded .hero .phone:nth-child(2) { transition-delay: .55s; }
.fx.is-loaded .hero .chip3d--1 { transition-delay: 1s; }
.fx.is-loaded .hero .chip3d--2 { transition-delay: 1.2s; }
.fx.is-loaded .hero .chip3d--3 { transition-delay: 1.4s; }
.chip3d-float { animation: chipfloat 6s ease-in-out infinite; }
.chip3d--2 .chip3d-float { animation-duration: 7.2s; animation-delay: -2s; }
.chip3d--3 .chip3d-float { animation-duration: 5.4s; animation-delay: -3.5s; }
@keyframes chipfloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* ---- scroll marquee ---- */
.marq { position: relative; overflow: hidden; padding: 28px 0 40px; margin-top: -28px; background: linear-gradient(180deg, #fff 0%, #faf8ff 55%, #fff 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.marq__row { display: flex; padding-left: 0; width: max-content; gap: 44px; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: clamp(54px, 8vw, 112px); line-height: 1.05; letter-spacing: -.02em; will-change: transform; }
.marq__row + .marq__row { margin-top: 4px; }
.marq__row span { color: transparent; -webkit-text-stroke: 1.5px rgba(106, 85, 240, .55); }
.marq__row span:nth-child(3n) { -webkit-text-stroke: 0; background: linear-gradient(100deg, #8f7dff, #5a45de 55%, #e854a0); -webkit-background-clip: text; background-clip: text; }
.marq__row i { font-style: normal; color: #e854a0; -webkit-text-stroke: 0; }

/* ---- reveals ---- */
.fx .rv { opacity: 0; translate: 0 44px; scale: .975; transition: opacity .8s ease, translate .95s cubic-bezier(.2, .8, .2, 1), scale .95s cubic-bezier(.2, .8, .2, 1), transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.fx .rv.is-in { opacity: 1; translate: 0 0; scale: 1; transition-delay: var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), 0s, 0s, 0s; }
.fx .rv.rv-done { transition-delay: 0s; }
.fx .rv--left { translate: -48px 0; }
.fx .rv--right { translate: 48px 0; }
.fx .rv--zoom { translate: 0 0; scale: .86; }

/* ---- how it works: progress track + number fill ---- */
.how { position: relative; }
.how__track { position: absolute; left: 6%; right: 6%; top: -22px; height: 4px; border-radius: 4px; background: rgba(106, 85, 240, .14); overflow: hidden; }
.how__track i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #8f7dff, #e854a0); transform-origin: 0 50%; transform: scaleX(var(--hp, 0)); }
.how__step { position: relative; overflow: hidden; }
.how__num { background: linear-gradient(135deg, #8f7dff, #e854a0); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 1; }
.fx .how__num { transform-origin: 0 100%; transition: transform .9s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0ms) + .25s); transform: scale(.4); }
.fx .how__step.is-in .how__num { transform: scale(1); }

/* ---- cards: tilt + spotlight ---- */
.usecase, .how__step { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; }
.fx .usecase:hover, .fx .how__step:hover { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px); }
.fx .usecase.is-tilting, .fx .how__step.is-tilting { transition: transform .08s linear, box-shadow .2s ease, border-color .2s ease; }
.usecase::after, .how__step::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(143, 125, 255, .18), transparent 55%); }
.usecase:hover::after, .how__step:hover::after { opacity: 1; }
.usecase__go { transition: translate .25s ease; }
.usecase:hover .usecase__go { translate: 6px 0; }

/* ---- device parallax: stage + soft glow ---- */
.split > div:last-child { position: relative; }
.split > div:last-child::before { content: ''; position: absolute; inset: 6% 4%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(143, 125, 255, .28), rgba(143, 125, 255, 0) 65%); filter: blur(20px); }
.section--tint { position: relative; overflow: hidden; }

/* ---- coverage: pop-in grid ---- */
.fx .coverage__item.rv { scale: .88; translate: 0 22px; }
.coverage__item { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.coverage__item:hover { transform: translateY(-3px); border-color: rgba(106, 85, 240, .4); box-shadow: 0 14px 30px rgba(106, 85, 240, .1); }

/* ---- CTA band: depth ---- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before, .cta-band::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.cta-band::before { width: 380px; height: 380px; top: -160px; right: 8%; background: radial-gradient(circle, rgba(255, 255, 255, .26), transparent 68%); transform: translate3d(0, var(--cy, 0px), 0); }
.cta-band::after { width: 300px; height: 300px; bottom: -150px; left: 10%; background: radial-gradient(circle, rgba(232, 84, 160, .5), transparent 68%); transform: translate3d(0, calc(var(--cy, 0px) * -1), 0); }
.cta-band h2 { font-size: clamp(34px, 5vw, 56px); line-height: 1.05; }

/* ---- buttons ---- */
.btn { transition: transform .25s cubic-bezier(.2, .8, .2, 1), filter .2s ease, box-shadow .2s ease, border-color .2s ease; will-change: transform; }
.btn--primary:hover { box-shadow: 0 16px 34px rgba(106, 85, 240, .42); }

@media (max-width: 900px) {
  .how__track { display: none; }
  .marq { padding: 26px 0 22px; }
  .fx .rv--left, .fx .rv--right { translate: 0 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .chip3d-float { animation: none; }
}