/* ══════════════════════════════════════
   3D PERSPECTIVE SYSTEM
══════════════════════════════════════ */

/* Container that holds perspective */
.perspective-container {
  perspective: 1000px;
  perspective-origin: center center;
}

/* Tiltable card wrapper */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.08s linear, box-shadow var(--transition-base);
  will-change: transform;
  cursor: default;
}

/* JS sets --rx and --ry via inline style */
.tilt-card.js-tilt {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale3d(1.02, 1.02, 1.02);
}

.tilt-card:not(.js-tilt) {
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
}

/* Card face — pushes content forward for parallax depth */
.tilt-card-face {
  transform: translateZ(20px);
}

/* Deep push for featured elements on card */
.tilt-card-deep {
  transform: translateZ(36px);
}

/* ── Logo float animation ── */
.logo-float {
  animation: floatLogo 4s ease-in-out infinite;
  transform-style: preserve-3d;
}

/* ── 3D hero logo wrapper ── */
.hero-logo-3d {
  position: relative;
  display: inline-block;
  filter: drop-shadow(0 20px 40px rgba(201,166,107,0.35))
          drop-shadow(0 0 60px rgba(201,166,107,0.15));
  animation: floatLogo 5s ease-in-out infinite,
             shimmerLoop 4s ease-in-out 1s infinite;
}

/* ── Pricing card ── */
.pricing-card-3d {
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow var(--transition-base);
}

.pricing-card-3d:hover {
  transform: translateY(-12px) rotateX(4deg);
  box-shadow: var(--shadow-card-lg), 0 24px 48px var(--shadow-gold);
}

/* ── Team card ── */
.team-card-3d {
  transform-style: preserve-3d;
  transition: transform 0.1s linear;
}

/* ── Featured pricing (highlighted) ── */
.pricing-featured {
  border-color: rgba(201,166,107,0.35) !important;
  box-shadow: var(--shadow-card), 0 0 32px rgba(201,166,107,0.15),
              inset 0 1px 0 rgba(201,166,107,0.15) !important;
  position: relative;
}

.pricing-featured::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(201,166,107,0.2), transparent, rgba(201,166,107,0.1));
  pointer-events: none;
  border-radius: var(--radius-lg);
}

/* ── 3D image frame ── */
.image-frame-3d {
  transform-style: preserve-3d;
  position: relative;
}

.image-frame-3d::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(201,166,107,0.25);
  border-radius: calc(var(--radius-lg) + 4px);
  transform: translateZ(-10px);
  pointer-events: none;
}

/* ── Gold avatar ring ── */
.avatar-ring {
  padding: 3px;
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark), var(--accent-silver));
  border-radius: 50%;
  display: inline-flex;
}

.avatar-inner {
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-elevated);
}