/* =====================================================
   PAANITRENDZZ — IMMERSIVE HERO CSS v3.0
   Only handles: 3D Canvas, hero animations, particle bg
   ===================================================== */

/* ─── PARTICLE CANVAS ─── */
#particleBg{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;opacity:0.35;
}
[data-theme="dark"] #particleBg{opacity:0.55}

/* ─── 3D HERO CANVAS CONTAINER ─── */
#hero3DCanvas{
  width:100%;height:100%;min-height:460px;
  border-radius:24px;position:relative;overflow:hidden;
  background:transparent;
}

/* CSS 3D Fallback — premium product capsule */
.hero-product-3d{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-height:460px;position:relative;
}
.h3d-scene{
  perspective:900px;width:280px;height:340px;position:relative;
}
.h3d-card{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  animation:heroSpin 14s ease-in-out infinite;
  border-radius:24px;
}
@keyframes heroSpin{
  0%{transform:rotateY(-15deg) rotateX(5deg)}
  25%{transform:rotateY(15deg) rotateX(-3deg)}
  50%{transform:rotateY(20deg) rotateX(5deg)}
  75%{transform:rotateY(-10deg) rotateX(-5deg)}
  100%{transform:rotateY(-15deg) rotateX(5deg)}
}
.h3d-face{
  position:absolute;inset:0;border-radius:24px;
  display:flex;align-items:center;justify-content:center;
  font-size:6rem;
  background:linear-gradient(145deg,var(--surface),var(--bg-alt));
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 20px 60px rgba(0,0,0,0.1);
}
[data-theme="dark"] .h3d-face{
  background:linear-gradient(145deg,var(--surface),var(--bg-alt));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 20px 60px rgba(0,0,0,0.4);
}
.h3d-glow{
  position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);
  width:220px;height:80px;
  background:radial-gradient(ellipse,rgba(201,168,76,0.2),transparent 70%);
  pointer-events:none;animation:glowBob 4s ease-in-out infinite;
}
@keyframes glowBob{0%,100%{opacity:0.6}50%{opacity:1}}
.h3d-shadow{
  position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);
  width:180px;height:20px;
  background:rgba(0,0,0,0.12);
  border-radius:50%;filter:blur(8px);
  animation:shadowPulse 4s ease-in-out infinite;
}
[data-theme="dark"] .h3d-shadow{background:rgba(0,0,0,0.5)}
@keyframes shadowPulse{0%,100%{transform:translateX(-50%) scaleX(1)}50%{transform:translateX(-50%) scaleX(1.1)}}
.h3d-label{
  position:absolute;bottom:24px;width:100%;
  text-align:center;font-family:var(--font-head);
  font-size:0.75rem;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--text-muted);
}
.h3d-rings{
  position:absolute;inset:-30px;border-radius:50%;
  border:1px solid rgba(201,168,76,0.12);
  animation:ringRotate 20s linear infinite;
}
.h3d-rings-2{
  position:absolute;inset:-50px;border-radius:50%;
  border:1px dashed rgba(201,168,76,0.07);
  animation:ringRotate 30s linear infinite reverse;
}
@keyframes ringRotate{to{transform:rotate(360deg)}}

/* ─── FEATURED PRODUCT 3D VISUAL ─── */
.feat-3d-wrap{
  perspective:800px;display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1;
}
.feat-3d-obj{
  width:260px;height:260px;border-radius:24px;
  background:linear-gradient(145deg,var(--surface),var(--bg-alt));
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:5rem;
  box-shadow:var(--shadow-lg);
  animation:featFloat 5s ease-in-out infinite;
  transition:transform var(--t-slow) var(--ease);
}
.feat-3d-obj:hover{transform:scale(1.03) rotateY(5deg)}
@keyframes featFloat{0%,100%{transform:translateY(0) rotateY(-5deg)}50%{transform:translateY(-12px) rotateY(5deg)}}

/* ─── PAGE TRANSITION ─── */
.page-enter{animation:pageEnter 0.5s var(--ease) forwards}
@keyframes pageEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}