/* ============================================================
   TraceZoo 2.0 — LIVE / ANIMATION layer
   fe + oto1..oto5 sab pages par lagti hai.
   oto.css / oto4.css ke BAAD load karo.
   ============================================================ */

/* ---------- hero me chamakti sparkles ---------- */
.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sky svg{width:100%;height:auto}
.spark{position:absolute;display:block;animation:tz-twinkle ease-in-out infinite}
@keyframes tz-twinkle{
  0%,100%{transform:scale(.55) rotate(0deg);opacity:.18}
  50%    {transform:scale(1)   rotate(45deg);opacity:.85}
}
.hero{position:relative}
.hero > .wrap,.hero__grid,.hero__badge{position:relative;z-index:2}

/* ---------- hero artwork saans leta hai + mouse ke saath tilt ---------- */
.heroart,.hero__art,.heroblocks{animation:tz-bob 5.5s ease-in-out infinite}
@keyframes tz-bob{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-13px)}
}
.hero__right{perspective:900px}
.hero__right.tilt .heroart,
.hero__right.tilt .hero__art{
  animation:none;
  transform:rotateY(var(--tx,0deg)) rotateX(var(--ty,0deg)) translateY(-6px);
  transition:transform .25s ease-out;
}

/* ---------- price / offer badge dhadakta hai ---------- */
.oneonly,.launch,.price-circle,.badge-star,.badge-circle,
.offer__badge-left,.offer__badge-right{animation:tz-beat 2.8s ease-in-out infinite}
@keyframes tz-beat{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.05)}
}
/* jinke apne rotate/position hain unhe sirf halka upar-neeche do */
.badge-circle--l,.badge-star{animation:tz-float 3.4s ease-in-out infinite}
@keyframes tz-float{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-7px)}
}

/* ---------- scroll par section fade-up (JS .in lagata hai) ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.07s}
.reveal-d2{transition-delay:.14s}
.reveal-d3{transition-delay:.21s}
.reveal-d4{transition-delay:.28s}

/* ---------- cards / icons hover ---------- */
.peek__card{cursor:pointer;transition:transform .2s ease}
.peek__card:hover{transform:translateY(-9px) scale(1.04)}
.sheetcard{transition:transform .2s ease,box-shadow .2s ease}
.peek__card:hover .sheetcard{box-shadow:0 14px 28px #1a3b7726}
.sheetstack .sheetcard:hover{transform:translateY(-10px) rotate(-2deg);z-index:3;position:relative}

.usp__ico,.why__ico,.strip__ico,.gt__ico{transition:transform .2s ease}
.usp li:hover .usp__ico,
.why__grid li:hover .why__ico,
.strip li:hover .strip__ico,
.gt li:hover .gt__ico{animation:tz-jump .55s ease}
@keyframes tz-jump{
  0%,100%{transform:translateY(0) scale(1)}
  40%    {transform:translateY(-13px) scale(1.09)}
}

/* ---------- CTA button: halki dhadkan + hover shine ---------- */
.cta{position:relative;overflow:hidden;animation:tz-pulse 2.6s ease-in-out infinite}
@keyframes tz-pulse{
  0%,100%{box-shadow:0 6px 0 #2f7e33, 0 0 0 0 rgba(76,175,80,.5)}
  50%    {box-shadow:0 6px 0 #2f7e33, 0 0 0 14px rgba(76,175,80,0)}
}
.cta::after{
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,#ffffff85,transparent);
  transform:skewX(-18deg);pointer-events:none;
}
.cta:hover::after{animation:tz-shine .75s ease}
@keyframes tz-shine{to{left:130%}}

/* ---------- FAQ / checks halka hover ---------- */
.faq__item{transition:box-shadow .2s ease,transform .2s ease}
.faq__item:hover{box-shadow:0 8px 20px #1a3b7714;transform:translateY(-2px)}

/* ---------- peek card click par bada preview ---------- */
.zoom{
  position:fixed;inset:0;z-index:99;display:none;place-items:center;padding:26px;
  background:rgba(12,32,64,.82);backdrop-filter:blur(3px);
}
.zoom.on{display:grid;animation:tz-fade .2s ease}
@keyframes tz-fade{from{opacity:0}to{opacity:1}}
.zoom img{
  max-width:min(560px,92vw);max-height:90vh;width:auto;
  border-radius:14px;border:6px solid #fff;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  animation:tz-zoom .25s cubic-bezier(.2,1.2,.4,1);
}
@keyframes tz-zoom{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.zoom__x{
  position:absolute;top:18px;right:22px;width:46px;height:46px;
  border:0;border-radius:50%;cursor:pointer;
  background:#fff;color:#122b63;font-size:30px;line-height:1;
  box-shadow:0 6px 16px rgba(0,0,0,.3);transition:transform .15s;
}
.zoom__x:hover{transform:rotate(90deg) scale(1.08)}

/* ---------- jinko animation nahi chahiye ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- asli worksheet ka bada photo ---------- */
.sheetshot{display:block;width:100%;max-width:460px;margin:0 auto}
.sheetshot .slot,
.sheetshot img{width:100%;height:auto;display:block}
.sheetshot img{
  filter:drop-shadow(0 16px 26px rgba(30,40,90,.16));
  transition:transform .3s ease;
}
.sheetshot img:hover{transform:scale(1.02)}
.sheetshot--wide{max-width:720px;margin:22px auto 6px}