/* =========================================================
   Gifts N Pack — 3D layer
   Tilt cards, ambient float, parallax depth and the Three.js
   gift-box showcase. Loaded on every page after styles.css.
   ========================================================= */

/* ---------------- Tilt cards ---------------- */
.tilt-3d{
  transform-style: preserve-3d;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
  will-change: transform;
}

/* ---------------- Ambient float ---------------- */
@keyframes gnpFloat3d{
  0%,100%{ transform: translateY(0) rotate(var(--float-rot, 0deg)); }
  50%{ transform: translateY(-9px) rotate(var(--float-rot, 0deg)); }
}
.float-3d{
  animation: gnpFloat3d 5s ease-in-out infinite;
}
.hero-badge.float-3d{ --float-rot: 0deg; }
.hero-float-card.float-3d{ --float-rot: -4deg; }
.about-badge.float-3d{ --float-rot: 0deg; }

/* ---------------- Depth shadow helpers ---------------- */
.depth-shadow{
  box-shadow:
    0 1px 2px rgba(11,31,77,.06),
    0 8px 18px rgba(11,31,77,.08),
    0 28px 54px rgba(11,31,77,.14);
}

/* ---------------- Gift-box 3D showcase (hero) ---------------- */
.gift3d-showcase{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  border: 1px solid rgba(11,31,77,0.1);
  box-shadow: 0 26px 64px rgba(11,31,77,.28);
  margin-bottom: 20px;
  padding: 18px 18px 16px;
}
.gift3d-showcase::before{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 80% 0%, rgba(201,162,75,.22), transparent 70%);
  pointer-events: none;
}
.gift3d-canvas{
  position: relative;
  width: 100%;
  height: 240px;
  touch-action: none;
  cursor: grab;
  border-radius: 12px;
  overflow: hidden;
}
.gift3d-canvas:active{ cursor: grabbing; }
.gift3d-canvas canvas{ display: block; width: 100% !important; height: 100% !important; }
.gift3d-caption{
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
}
.gift3d-caption .tag{
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.gift3d-caption .hint{
  font-size: 11.5px; color: rgba(255,255,255,.65); display:flex; align-items:center; gap:6px;
}
.gift3d-caption .hint svg{ width: 13px; height: 13px; }

/* Small inline variant used on Shop / Product pages */
.gift3d-badge{
  position: relative;
  display: flex; align-items: center; gap: 12px;
  background: var(--navy);
  border-radius: 16px;
  padding: 10px 16px 10px 10px;
  box-shadow: 0 16px 40px rgba(11,31,77,.22);
  flex-shrink: 0;
}
.gift3d-badge .gift3d-canvas{ width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; }
.gift3d-badge .txt b{ display:block; font-size: 12.5px; color: #fff; font-family: var(--font-body); }
.gift3d-badge .txt span{ display:block; font-size: 10.5px; color: rgba(255,255,255,.6); margin-top: 2px; }

@media (prefers-reduced-motion: reduce){
  .float-3d{ animation: none !important; }
  .tilt-3d{ transition: none !important; }
}