/* =========================================================
   NextShop.bg — Animations & Motion
   Scroll reveal, tilt, magnetic, loaders
   ========================================================= */

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .7s cubic-bezier(.22,1,.36,1),
    transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Directional reveal variants */
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="zoom"]  { transform: scale(.92); }
[data-reveal="left"].in-view,
[data-reveal="right"].in-view { transform: translateX(0); }
[data-reveal="zoom"].in-view  { transform: scale(1); }

/* ---------- 3D tilt ---------- */
.tilt {
  transform-style: preserve-3d;
  transition: transform .2s ease-out;
  will-change: transform;
}
.tilt > * { transform: translateZ(0); }
.tilt .sprod-img,
.tilt .bento-icon,
.tilt .step-icon,
.tilt .shm-h1,
.tilt .mini-dash,
.tilt .mini-builder { transform: translateZ(40px); }

/* ---------- Magnetic buttons ---------- */
.magnetic {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  will-change: transform;
}

/* ---------- Hero load stagger ---------- */
.hero .hero-eyebrow,
.hero .hero-title,
.hero .hero-sub,
.hero .hero-actions,
.hero .hero-trust,
.hero .hero-screen { animation: heroRise .9s cubic-bezier(.22,1,.36,1) backwards; }
.hero .hero-eyebrow { animation-delay: .05s; }
.hero .hero-title   { animation-delay: .15s; }
.hero .hero-sub     { animation-delay: .28s; }
.hero .hero-actions { animation-delay: .40s; }
.hero .hero-trust   { animation-delay: .50s; }
.hero .hero-screen  { animation-delay: .60s; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Eyebrow shimmer ---------- */
.hero-eyebrow { position: relative; overflow: hidden; }
.hero-eyebrow::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
  animation: shimmer 4.5s 1.5s infinite;
}
@keyframes shimmer {
  0% { left: -120%; } 60%, 100% { left: 140%; }
}

/* ---------- Text rotator (hero) ---------- */
[data-rotator] {
  display: inline-block;
  position: relative;
}

/* ---------- Cart bounce ---------- */
.screen-cart { animation: cartWiggle 5s ease-in-out infinite; }
@keyframes cartWiggle {
  0%, 92%, 100% { transform: rotate(0); }
  94% { transform: rotate(-12deg); }
  96% { transform: rotate(10deg); }
  98% { transform: rotate(-4deg); }
}

/* ---------- Product card float on hero mockup ---------- */
.shm-products .sprod:nth-child(1) { animation: floatY 6s ease-in-out infinite; }
.shm-products .sprod:nth-child(2) { animation: floatY 6s ease-in-out infinite .6s; }
.shm-products .sprod:nth-child(3) { animation: floatY 6s ease-in-out infinite 1.2s; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---------- Bar staggered grow ---------- */
.dash-bars .dbar:nth-child(1) { animation-delay: .0s; }
.dash-bars .dbar:nth-child(2) { animation-delay: .08s; }
.dash-bars .dbar:nth-child(3) { animation-delay: .16s; }
.dash-bars .dbar:nth-child(4) { animation-delay: .24s; }
.dash-bars .dbar:nth-child(5) { animation-delay: .32s; }
.dash-bars .dbar:nth-child(6) { animation-delay: .40s; }
.dash-bars .dbar:nth-child(7) { animation-delay: .48s; }

/* ---------- Mini chart grow when in view ---------- */
.mini-chart .mc-bar { transform: scaleY(0); transform-origin: bottom; transition: transform .8s cubic-bezier(.34,1.56,.64,1); }
.mini-chart.in-view .mc-bar { transform: scaleY(1); }
.mini-chart .mc-bar:nth-child(1) { transition-delay: .05s; }
.mini-chart .mc-bar:nth-child(2) { transition-delay: .12s; }
.mini-chart .mc-bar:nth-child(3) { transition-delay: .19s; }
.mini-chart .mc-bar:nth-child(4) { transition-delay: .26s; }
.mini-chart .mc-bar:nth-child(5) { transition-delay: .33s; }
.mini-chart .mc-bar:nth-child(6) { transition-delay: .40s; }

/* ---------- Plan popular floating glow ---------- */
.plan.popular::before {
  content: ''; position: absolute; inset: -1px; border-radius: var(--r3); z-index: -1;
  background: linear-gradient(135deg, var(--violet-light), var(--pink), var(--violet-light));
  background-size: 200% 200%; filter: blur(14px); opacity: .3;
  animation: gradShift 5s ease infinite;
}

/* ---------- Focus ring for a11y ---------- */
a:focus-visible,
button:focus-visible,
.faq-q:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------- Loader (initial page paint) ---------- */
body.is-loading { overflow: hidden; }
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--white);
  display: grid; place-items: center;
  transition: opacity .5s ease, visibility .5s ease;
}
.preloader.hide { opacity: 0; visibility: hidden; }
.preloader-mark {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, var(--violet-mid), var(--violet-light));
  display: grid; place-items: center; animation: logoBeat 1.1s ease-in-out infinite;
  box-shadow: var(--shadow-violet);
}
.preloader-mark svg { width: 26px; height: 26px; fill: #fff; }
@keyframes logoBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}