/* BOS — motion & premium effects: shooting stars, 3D tilt, 3D logo, reveal-on-scroll. */

/* ---------- Shooting stars canvas ---------- */
.fx-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.fx-stars.fixed { position: fixed; }
[data-stars] { position: relative; isolation: isolate; }
[data-stars] > *:not(.fx-stars):not(.hero-aura) { position: relative; z-index: 1; }
body.auth > .auth-shell { z-index: 1; }

/* ---------- Hero polish ---------- */
.hero .gr { background: linear-gradient(90deg, #1d4ed8, #38bdf8, #6366f1, #1d4ed8); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gr-flow 6s linear infinite; }
@keyframes gr-flow { to { background-position: 300% 0; } }
.hero-aura { position: absolute; inset: -20% -10% auto; height: 110%; z-index: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 30% 30%, rgba(56, 189, 248, .18), transparent 70%), radial-gradient(35% 45% at 75% 25%, rgba(99, 102, 241, .14), transparent 70%);
  filter: blur(10px); animation: aura 14s ease-in-out infinite alternate; }
@keyframes aura { to { transform: translate3d(0, 30px, 0) scale(1.08); } }

/* 3D spinning logo emblem */
.logo3d { width: 84px; height: 84px; margin: 0 auto 1.2rem; perspective: 600px; }
.logo3d .spin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: spin3d 9s cubic-bezier(.45, .05, .55, .95) infinite; }
.logo3d .layer { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: visible; }
.logo3d .layer svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 18px rgba(37, 99, 235, .25)); }
.logo3d .layer:nth-child(1) { transform: translateZ(10px); }
.logo3d .layer:nth-child(2) { transform: translateZ(5px); opacity: .55; filter: saturate(.7) brightness(.85); }
.logo3d .layer:nth-child(3) { transform: translateZ(0); opacity: .45; filter: saturate(.6) brightness(.75); }
.logo3d .layer:nth-child(4) { transform: translateZ(-5px); opacity: .55; filter: saturate(.7) brightness(.85); }
.logo3d .layer:nth-child(5) { transform: translateZ(-10px) rotateY(180deg); }
@keyframes spin3d { 0% { transform: rotateY(0) rotateX(8deg); } 50% { transform: rotateY(180deg) rotateX(-8deg); } 100% { transform: rotateY(360deg) rotateX(8deg); } }
.logo3d .shadow { width: 60%; height: 10px; margin: 8px auto 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 23, 42, .18), transparent); animation: shadow3d 4.5s ease-in-out infinite; }
@keyframes shadow3d { 50% { transform: scaleX(.7); opacity: .6; } }

/* 3D dashboard stage */
.stage3d { perspective: 1600px; margin-top: 3.5rem; position: relative; }
.stage3d .mock { margin-top: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 16deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, .96)); transition: transform .25s ease-out; will-change: transform; }
.chip3d { position: absolute; z-index: 3; display: flex; align-items: center; gap: .55rem; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 14px; padding: .65rem .9rem; box-shadow: 0 18px 40px rgba(15, 23, 42, .14); font-size: .85rem; font-weight: 700; color: var(--ink); animation: float3d 6s ease-in-out infinite; }
.chip3d i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-style: normal; font-size: .95rem; }
.chip3d small { display: block; font-weight: 500; color: var(--muted); font-size: .72rem; }
.chip3d.c1 { top: 8%; inset-inline-start: -2%; }
.chip3d.c2 { top: 46%; inset-inline-end: -3%; animation-delay: -2s; }
.chip3d.c3 { bottom: -4%; inset-inline-start: 22%; animation-delay: -4s; }
@keyframes float3d { 0%, 100% { transform: translate3d(0, 0, 60px); } 50% { transform: translate3d(0, -14px, 60px); } }
@media (max-width: 760px) { .chip3d { display: none; } }

/* ---------- Buttons: shine + glow ---------- */
.btn-grad { position: relative; overflow: hidden; background-size: 200% 100%; transition: background-position .5s, box-shadow .2s, transform .15s; }
.btn-grad:hover { background-position: 100% 0; box-shadow: 0 14px 34px rgba(37, 99, 235, .4); transform: translateY(-2px); }
.btn-grad::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; inset-inline-start: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); }
.btn-grad:hover::after { animation: shine .9s ease; }
@keyframes shine { to { inset-inline-start: 130%; } }

/* ---------- Cards: gradient border + 3D tilt ---------- */
[data-tilt] { transform-style: preserve-3d; transition: transform .2s ease-out, box-shadow .2s; will-change: transform; }
[data-tilt]:hover { box-shadow: 0 24px 50px rgba(15, 23, 42, .12); }
[data-tilt] .tilt-pop { transform: translateZ(30px); }
.mod-card, .plan, .app-row, .ind { position: relative; }
.mod-card::before, .plan::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(37, 99, 235, .55), rgba(56, 189, 248, .15), rgba(99, 102, 241, .5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .25s; pointer-events: none; }
.mod-card:hover::before, .plan:hover::before { opacity: 1; }
.mod-card .ic { transition: transform .3s; }
.mod-card:hover .ic { transform: translateZ(40px) rotate(-6deg) scale(1.08); }
.mod-card .glare, .plan .glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 50%), rgba(56, 189, 248, .12), transparent 45%); opacity: 0; transition: opacity .2s; }
.mod-card:hover .glare, .plan:hover .glare { opacity: 1; }
.visual { perspective: 1000px; }
.visual .paper { transition: transform .3s ease-out; }
.visual .floaty { animation: float2d 5s ease-in-out infinite; }
.visual .floaty + .floaty { animation-delay: -2.5s; }
@keyframes float2d { 50% { transform: translateY(-10px); } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translate3d(0, 28px, 0) scale(.98); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* Section dividers with soft glow */
.section { position: relative; }
.section.alt::before { content: ''; position: absolute; top: 0; inset-inline: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .35), transparent); }

/* Scroll progress bar */
.scroll-bar { position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #1d4ed8, #38bdf8, #6366f1); z-index: 100; }
[dir='rtl'] .scroll-bar { transform-origin: 100% 50%; }

/* Auth & app touches */
body.auth .auth-card { position: relative; z-index: 1; backdrop-filter: blur(6px); background: rgba(255, 255, 255, .94); }
body.app .tile, body.app .kpi { transition: transform .2s, box-shadow .2s; }
body.app .kpi:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 23, 42, .1); }
body.app .tile .ico { transition: transform .3s; }
body.app .tile:hover .ico { transform: translateY(-3px) scale(1.12) rotate(-4deg); }

@media (prefers-reduced-motion: reduce) {
  .hero .gr, .hero-aura, .logo3d .spin, .logo3d .shadow, .chip3d, .visual .floaty { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .stage3d .mock, [data-tilt] { transform: none !important; }
}

/* ---------- Robo placements ---------- */
.robo-hero { position: absolute; z-index: 4; bottom: -28px; inset-inline-end: -40px; width: 150px; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.robo-hero .robo { width: 120px; height: 150px; filter: drop-shadow(0 18px 26px rgba(37, 99, 235, .22)); }
.robo-hero .robo-bubble { font-size: .82rem; white-space: nowrap; animation: float2d 4s ease-in-out infinite; }
@media (max-width: 1100px) { .robo-hero { inset-inline-end: 0; bottom: -40px; transform: scale(.8); } }
@media (max-width: 760px) { .robo-hero { display: none; } }
.robo-cta { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.robo-cta .robo { width: 110px; height: 138px; }
.robo-cta .robo-bubble { cursor: pointer; font: inherit; font-weight: 700; }
.robo-cta .robo-bubble:hover { border-color: var(--blue-300); color: var(--blue-600); }
.robo-side { display: flex; align-items: flex-end; gap: .8rem; margin-top: 1.6rem; }
.robo-side .robo { width: 96px; height: 120px; flex: none; }
.welcome { position: relative; }
.welcome .robo-welcome { position: absolute; inset-inline-end: 1.2rem; bottom: .6rem; width: 92px; height: 115px; }
.welcome .welcome-text { padding-inline-end: 110px; }
@media (max-width: 700px) { .welcome .robo-welcome { display: none; } .welcome .welcome-text { padding-inline-end: 0; } }