/* ═══════════════════════════════════════════════
   SafePlace — 3D & Visual Effects
   ═══════════════════════════════════════════════ */

/* ── Tilt cards (applied via JS) ── */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-card .tilt-inner {
  transform: translateZ(12px);
  transition: transform 0.15s ease;
}

/* ── Neon glow on play buttons ── */
@keyframes neonPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(159,247,0,0.55),
                0 4px 18px rgba(159,247,0,0.35);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(159,247,0,0),
                0 6px 28px rgba(159,247,0,0.55);
  }
}
.neon-play {
  animation: neonPulse 2.6s ease-in-out infinite;
}

/* ── Holographic shimmer on card hover ── */
.holo-card {
  position: relative;
  overflow: hidden;
}
.holo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    108deg,
    transparent 20%,
    rgba(159,247,0,0.07) 38%,
    rgba(255,255,255,0.12) 50%,
    rgba(159,247,0,0.07) 62%,
    transparent 80%
  );
  background-size: 220% 220%;
  background-position: left center;
  opacity: 0;
  transition: opacity 0.35s ease, background-position 0.5s ease;
  pointer-events: none;
  z-index: 3;
}
.holo-card:hover::after {
  opacity: 1;
  background-position: right center;
}

/* ── Deep shadow (layered depth) ── */
.depth-card {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.05),
    0 4px 10px rgba(0,38,27,0.05),
    0 10px 28px rgba(0,38,27,0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.depth-card:hover {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.07),
    0 8px 22px rgba(0,38,27,0.1),
    0 22px 60px rgba(0,38,27,0.08),
    0 0 0 1px rgba(159,247,0,0.08);
  transform: translateY(-6px);
}

/* ── Glass morphism ── */
.glass-card {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.42);
  box-shadow: 0 8px 32px rgba(0,38,27,0.08);
}

/* ── Floating card animation ── */
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-10px) rotate(-0.4deg); }
  66%       { transform: translateY(-5px) rotate(0.4deg); }
}
.float-card {
  animation: floatY 6s ease-in-out infinite;
}

/* ── Orb background glow ── */
.orb-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.18;
  pointer-events: none;
}
@keyframes floatOrb {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-32px) scale(1.1); }
}
.orb-glow { animation: floatOrb 9s ease-in-out infinite; }

/* ── Stagger list items ── */
.stagger-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.stagger-item.visible {
  opacity: 1;
  transform: none;
}

/* ── 3D text shadow ── */
.text-3d {
  text-shadow:
    1px 1px 0 rgba(0,38,27,0.18),
    2px 2px 0 rgba(0,38,27,0.12),
    3px 3px 8px rgba(0,38,27,0.1);
}

/* ── Particles canvas (bento) ── */
.bento-particle-canvas {
  opacity: 0.45;
  transition: opacity 0.3s ease;
}
.bento-card:hover .bento-particle-canvas {
  opacity: 0.85;
}

/* ── Ripple on click ── */
@keyframes ripple {
  from { transform: scale(0); opacity: 0.5; }
  to   { transform: scale(2.8); opacity: 0; }
}
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(159,247,0,0.4);
  width: 60px;
  height: 60px;
  margin-top: -30px;
  margin-left: -30px;
  pointer-events: none;
  animation: ripple 0.55s ease-out forwards;
  z-index: 10;
}

/* ── Glare overlay (JS-driven) ── */
.glare-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,0.15) 0%,
    transparent 65%);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 4;
}
.tilt-card:hover .glare-overlay {
  opacity: 1;
}

/* ── Magnetic button micro-interaction ── */
.magnetic-btn {
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.22s ease;
}
.magnetic-btn:active {
  transform: scale(0.95) !important;
}

/* ── Card entry animation ── */
@keyframes cardEntry {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.card-enter {
  animation: cardEntry 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}