/* ALLIN1DEVELOPERS STORE - 3D, hero and touch effects (performance tuned: only transform/opacity are animated) */
:root{--a1-blue:#2563eb;--a1-cyan:#22d3ee}
html{scroll-behavior:smooth}

/* ---------- 3D tilt cards (driven by allin1-3d.js, desktop mouse only) ---------- */
.tilt-3d{transition:box-shadow .3s ease,border-color .3s ease,transform .45s cubic-bezier(.2,.8,.2,1);contain:layout style}
.tilt-3d.is-tilting{transition:box-shadow .3s ease,border-color .3s ease,transform 0s;will-change:transform}
.tilt-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .25s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),transparent 55%);z-index:30}
.tilt-3d.is-tilting .tilt-glare{opacity:1}

/* ---------- 3D push buttons ---------- */
.btn-3d{position:relative;transition:transform .12s,box-shadow .12s}
.btn-3d:hover{transform:translateY(-2px)}
.btn-3d:active{transform:translateY(5px)}

/* ---------- 3D flip icons ---------- */
.icon-3d{transition:transform .5s}
*:hover>.icon-3d,.icon-3d:hover{transform:rotateY(180deg)}

/* ---------- 3D extruded heading ---------- */
.text-3d{color:#fff;text-shadow:0 1px 0 #38bdf8,0 2px 0 #2490d4,0 3px 0 #1a70b0,0 4px 0 #11559c,0 10px 18px rgba(0,0,0,.55)}

/* ---------- Hero ---------- */
.a1-hero{position:relative;overflow:hidden;min-height:640px;
  background:radial-gradient(900px 520px at 72% 35%,rgba(11,74,143,.75) 0%,rgba(6,33,74,.55) 45%,rgba(2,6,23,.35) 100%)}
.a1-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* animated grid floor: static mask on the wrapper, only the inner layer moves (compositor-only) */
.a1-grid{position:absolute;left:-25%;right:-25%;bottom:-10%;height:60%;overflow:hidden;transform:rotateX(68deg);transform-origin:bottom;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 90%);mask-image:linear-gradient(to top,#000 10%,transparent 90%)}
.a1-grid::before{content:"";position:absolute;left:0;right:0;top:-60px;bottom:0;
  background-image:linear-gradient(rgba(56,189,248,.30) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.30) 1px,transparent 1px);background-size:60px 60px;
  animation:a1grid 4s linear infinite;will-change:transform}
@keyframes a1grid{to{transform:translate3d(0,60px,0)}}

.a1-slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;transform:translate3d(24px,0,0);
  transition:opacity .7s,transform .7s,visibility .7s;z-index:5}
.a1-slide.active{opacity:1;visibility:visible;transform:none}
.a1-dot{width:10px;height:10px;border-radius:9999px;background:rgba(255,255,255,.35);transition:width .3s,background .3s;cursor:pointer}
.a1-dot.active{width:34px;background:linear-gradient(90deg,#22d3ee,#3b82f6)}

/* CSS cube = lightweight fallback for phones / weak GPUs (no WebGL needed) */
.a1-fallback-wrap{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none;perspective:900px}
.a1-hero.use-css-cube .a1-fallback-wrap{display:flex}
@media (min-width:1024px){.a1-fallback-wrap{justify-content:flex-end;padding-right:9rem}}
.a1-fallback-cube{width:170px;height:170px;position:relative;transform-style:preserve-3d;animation:a1spin 14s linear infinite;will-change:transform}
.a1-fallback-cube div{position:absolute;inset:0;border-radius:16px;border:2px solid rgba(56,189,248,.75);
  background:center/84% no-repeat url(logo-sm.webp),linear-gradient(135deg,#06214a,#020617);box-shadow:0 0 26px rgba(34,211,238,.35) inset}
.a1-fallback-cube div:nth-child(1){transform:translateZ(85px)}.a1-fallback-cube div:nth-child(2){transform:rotateY(180deg) translateZ(85px)}
.a1-fallback-cube div:nth-child(3){transform:rotateY(90deg) translateZ(85px)}.a1-fallback-cube div:nth-child(4){transform:rotateY(-90deg) translateZ(85px)}
.a1-fallback-cube div:nth-child(5){transform:rotateX(90deg) translateZ(85px)}.a1-fallback-cube div:nth-child(6){transform:rotateX(-90deg) translateZ(85px)}
@keyframes a1spin{from{transform:rotateX(-18deg) rotateY(0)}to{transform:rotateX(-18deg) rotateY(360deg)}}
@media (max-width:768px){.a1-hero{min-height:840px}.a1-slide{align-items:flex-start}.a1-fallback-wrap{align-items:flex-start;padding-top:2.5rem}.a1-grid::before{animation:none}}

/* ---------- Touch / click effect ---------- */
.a1-fx{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:99999}
.a1-fx i{position:absolute;left:0;top:0;display:block;border-radius:50%;pointer-events:none}
.a1-fx .ring{width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid rgba(125,211,252,.9);box-shadow:0 0 14px rgba(56,189,248,.8),inset 0 0 10px rgba(56,189,248,.5);
  animation:a1ring .7s cubic-bezier(.15,.7,.3,1) forwards}
.a1-fx .glow{width:120px;height:120px;margin:-60px 0 0 -60px;background:radial-gradient(circle,rgba(56,189,248,.45),rgba(37,99,235,.18) 45%,transparent 70%);animation:a1glow .6s ease-out forwards}
.a1-fx .spark{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:#7dd3fc;box-shadow:0 0 8px #22d3ee;animation:a1spark .65s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes a1ring{from{transform:scale(.3);opacity:1}to{transform:scale(4.2);opacity:0}}
@keyframes a1glow{from{transform:scale(.4);opacity:1}to{transform:scale(1.4);opacity:0}}
@keyframes a1spark{from{transform:translate3d(0,0,0) scale(1);opacity:1}to{transform:translate3d(var(--dx),var(--dy),0) scale(0);opacity:0}}
/* glass light that follows the mouse (desktop only) */
#a1-cursor-glow{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;z-index:1;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle,rgba(56,189,248,.14),rgba(37,99,235,.06) 45%,transparent 70%);will-change:transform}
#a1-cursor-glow.on{opacity:1}

@media (prefers-reduced-motion:reduce){.a1-grid::before,.a1-fallback-cube{animation:none}.tilt-3d,.btn-3d,.icon-3d,.a1-slide{transition:none}.a1-fx,#a1-cursor-glow{display:none}}