/* Light 3D effects for the home page. Pure CSS + a tiny fx.js. Turns off for "reduce motion". */

/* ---- moving glow behind the hero ---- */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;pointer-events:none;z-index:0}
.glow.g1{width:420px;height:420px;background:#a855f7;top:-140px;right:-80px;animation:drift1 14s ease-in-out infinite alternate}
.glow.g2{width:360px;height:360px;background:#f59e0b;bottom:-160px;left:-120px;opacity:.28;animation:drift2 18s ease-in-out infinite alternate}
.glow.g3{width:260px;height:260px;background:#ec4899;top:40%;left:45%;opacity:.22;animation:drift1 20s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(-90px,70px) scale(1.15)}}
@keyframes drift2{to{transform:translate(110px,-60px) scale(1.1)}}

/* ---- 3D phone ---- */
.scene{perspective:1200px;display:grid;place-items:center;min-height:540px;position:relative}
.phone-wrap{transform-style:preserve-3d;animation:float 6s ease-in-out infinite}
.phone{width:258px;height:526px;border-radius:42px;background:#111827;padding:11px;position:relative;
  transform-style:preserve-3d;transform:rotateY(var(--py,-18deg)) rotateX(var(--px,8deg)) rotateZ(2deg);transition:transform .25s ease-out;
  box-shadow:inset 0 0 0 2px #374151,30px 40px 70px -20px rgba(76,29,149,.55),-6px 0 0 #1f2937}
.phone::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:84px;height:22px;background:#111827;border-radius:14px;z-index:3}
.phone::after{content:"";position:absolute;inset:0;border-radius:42px;background:linear-gradient(115deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 38%);pointer-events:none;z-index:4}
.screen{width:100%;height:100%;border-radius:32px;overflow:hidden;background:#fff;position:relative}
.scroller{animation:scrollsite 16s ease-in-out infinite}
@keyframes scrollsite{0%,12%{transform:translateY(0)}45%,58%{transform:translateY(-52%)}88%,100%{transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* mini website inside the phone */
.ms{font-size:10px;color:#1d2330}
.ms-top{display:flex;align-items:center;gap:6px;padding:40px 14px 10px;font-weight:700;font-size:11px}
.ms-top i{width:20px;height:20px;border-radius:6px;background:#0e8f7e;display:grid;place-items:center;color:#fff;font-style:normal;font-size:11px}
.ms-hero{margin:4px 10px;padding:16px 14px;border-radius:14px;background:linear-gradient(135deg,#e3f6f2,#fff)}
.ms-hero b{display:block;font-size:15px;line-height:1.2;margin-bottom:6px}.ms-hero b span{color:#0e8f7e}
.ms-hero p{color:#5b6475;margin-bottom:10px}
.ms-btn{display:inline-block;background:#22c55e;color:#fff;border-radius:999px;padding:6px 11px;font-weight:700;font-size:9.5px}
.ms-btn.o{background:#fff;color:#0e8f7e;border:1px solid #0e8f7e;margin-left:4px}
.ms-h{font-weight:700;font-size:12px;text-align:center;margin:16px 0 8px}
.ms-cards{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 10px}
.ms-cards div{border:1px solid #e6e8ee;border-radius:10px;padding:9px;font-weight:600}
.ms-cards div em{display:block;font-style:normal;font-size:15px;margin-bottom:3px}
.ms-time{margin:8px 10px;border:1px solid #e6e8ee;border-radius:10px;padding:9px;display:flex;justify-content:space-between}
.ms-map{margin:8px 10px;height:90px;border-radius:10px;background:
  linear-gradient(90deg,transparent 48%,#fff 48%,#fff 52%,transparent 52%),linear-gradient(0deg,transparent 45%,#fff 45%,#fff 50%,transparent 50%),#d1fae5;position:relative}
.ms-map::after{content:"📍";position:absolute;left:46%;top:28%;font-size:20px}
.ms-form{margin:8px 10px 14px;border:1px solid #e6e8ee;border-radius:10px;padding:10px}
.ms-form span{display:block;height:16px;border-radius:5px;background:#f1f5f9;margin-bottom:6px}
.ms-form .ms-btn{width:100%;text-align:center}

/* floating chips at different 3D depths */
.chip{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px 13px;font-size:13px;font-weight:600;
  box-shadow:0 14px 30px -14px rgba(76,29,149,.45);white-space:nowrap;z-index:2;animation:float 5s ease-in-out infinite}
.chip small{display:block;font-weight:400;color:var(--muted);font-size:11px}
.chip.c1{top:70px;left:-6px;animation-delay:-1s}
.chip.c2{top:250px;right:-14px;animation-delay:-2.5s}
.chip.c3{bottom:60px;left:4px;animation-delay:-4s}
.chip .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;margin-right:6px;box-shadow:0 0 0 4px rgba(34,197,94,.2)}

@media(max-width:820px){
  .scene{min-height:470px;margin-top:10px}
  .phone{width:220px;height:450px;border-radius:36px}.phone::after{border-radius:36px}.screen{border-radius:27px}
  .chip{font-size:12px;padding:7px 10px}.chip.c1{left:0}.chip.c2{right:0}.chip.c3{left:6px}
}

/* ---- 3D tilt cards (mouse only) ---- */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0)) scale(var(--s,1));
  transition:transform .2s ease-out,box-shadow .2s;will-change:transform}
.tilt:hover{--ty:-4px}
.plan.pop.tilt{--s:1.03}
@media(max-width:900px){.plan.pop.tilt{--s:1}}
.demo-card.tilt:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}

/* ---- slide / fade in on scroll (only hidden when JS is running) ---- */
html.fx .reveal{opacity:0;transform:translateY(28px) perspective(900px) rotateX(8deg);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
html.fx .reveal.in{opacity:1;transform:none}
html.fx .reveal.tilt.in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0)) scale(var(--s,1))}

/* ---- respect "reduce motion" ---- */
@media (prefers-reduced-motion: reduce){
  .glow,.phone-wrap,.scroller,.chip{animation:none!important}
  html.fx .reveal{opacity:1;transform:none;transition:none}
  .tilt{transition:none}
}