/* ==========================================================================
   TrendKart 3D — 3d.css · 3D scenes, ambient background, micro-interactions
   ========================================================================== */

/* ---------- 3D hero stage ---------- */
.hero-stage{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-fallback-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(52% 42% at 78% 22%,rgba(232,67,147,.28),transparent 70%),
    radial-gradient(44% 38% at 16% 78%,rgba(245,166,35,.24),transparent 70%),
    radial-gradient(60% 50% at 50% 55%,rgba(255,227,241,.9),transparent 75%),
    linear-gradient(180deg,#fff7fb,#ffeef6);
}
/* soft vignette so text stays readable over the 3D scene */
.hero-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,247,251,.94) 8%,rgba(255,247,251,.55) 42%,rgba(255,247,251,.08) 75%);
}

/* ---------- ambient mesh gradient background ---------- */
.mesh-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.mesh-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.mesh-blob.b1{width:46vmax;height:46vmax;left:-12vmax;top:-10vmax;background:radial-gradient(circle,#ffd3e8,transparent 65%);animation:drift1 22s ease-in-out infinite alternate}
.mesh-blob.b2{width:40vmax;height:40vmax;right:-10vmax;top:22vh;background:radial-gradient(circle,#ffe6b8,transparent 65%);animation:drift2 26s ease-in-out infinite alternate}
.mesh-blob.b3{width:36vmax;height:36vmax;left:24vw;bottom:-14vmax;background:radial-gradient(circle,#f7c6de,transparent 65%);animation:drift1 30s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(9vmax,7vmax) scale(1.12)}}
@keyframes drift2{to{transform:translate(-8vmax,-6vmax) scale(.92)}}

/* ---------- film grain ---------- */
.grain{
  position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-4%,-6%)}30%{transform:translate(5%,-4%)}
  50%{transform:translate(-5%,6%)}70%{transform:translate(6%,3%)}90%{transform:translate(-3%,4%)}
}

/* ---------- custom cursor glow (desktop, fine pointer only) ---------- */
#cursorGlow{
  position:fixed;top:0;left:0;width:340px;height:340px;z-index:1;pointer-events:none;
  border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(232,67,147,.16),rgba(245,166,35,.07) 45%,transparent 68%);
  transform:translate(-50%,-50%);transition:opacity .4s ease;
  mix-blend-mode:multiply;
}
#cursorGlow.on{opacity:1}
#cursorGlow.hot{background:radial-gradient(circle,rgba(232,67,147,.28),rgba(245,166,35,.12) 45%,transparent 68%)}
@media(pointer:coarse){#cursorGlow{display:none}}

/* ---------- page transition ---------- */
#pagefade{position:fixed;inset:0;z-index:200;background:var(--cream);pointer-events:none;opacity:0;transition:opacity .28s ease}
#pagefade.cover{opacity:1;pointer-events:all}

/* ---------- 3D tilt cards ---------- */
.tilt{transform-style:preserve-3d;perspective:900px}
.tilt.tilting{transition:transform .12s ease-out}
.tilt:not(.tilting){transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}

/* ---------- magnetic buttons ---------- */
.magnetic{will-change:transform}

/* ---------- scroll reveal defaults (JS animates from these) ---------- */
[data-reveal]{will-change:transform,opacity}

/* ---------- section divider wave ---------- */
.wave-sep{display:block;width:100%;height:60px;margin:-1px 0;color:var(--pink-mist)}

/* ---------- reduced motion: static hero, no ambient animation ---------- */
@media(prefers-reduced-motion:reduce){
  .mesh-blob,.grain,.marquee-track,.hero-badge .dot,.scroll-hint::after{animation:none!important}
  #cursorGlow{display:none}
  .hero-stage canvas{display:none}
}