/* ═══════════════════════════════════════════════════════════
   3D IMMERSIVE EFFECTS — Massagemap Thailand
   ═══════════════════════════════════════════════════════════ */

/* Three.js Canvas Background */
#threejs-bg,
.threejs-bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
}

/* ─── Scale Wrapper (3D depth container) ─────────────── */
.scale-wrapper {
    position: relative;
    z-index: 1;
    transform-style: preserve-3d;
}

/* ─── 3D Perspective Scene ───────────────────────────── */
.scene-3d {
    perspective: 1200px;
    perspective-origin: 50% 40%;
}

/* ─── Hero Depth Layer ───────────────────────────────── */
.hero-3d-wrapper {
    transform-style: preserve-3d;
    transition: transform 0.12s ease-out;
    will-change: transform;
}

.hero-depth-1 { transform: translateZ(0px); }
.hero-depth-2 { transform: translateZ(24px); }
.hero-depth-3 { transform: translateZ(48px); }
.hero-depth-4 { transform: translateZ(72px); }

/* ─── 3D Shop Card Tilt ──────────────────────────────── */
.shop-card {
    transform-style: preserve-3d;
    transition:
        transform 0.08s linear,
        box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1),
        border-color 0.4s ease;
    will-change: transform;
}

.shop-card .card-3d-inner {
    transform-style: preserve-3d;
    transform: translateZ(0);
    transition: transform 0.08s linear;
}

.shop-card .card-image {
    transform: translateZ(8px);
    transform-style: preserve-3d;
}

.shop-card .card-info {
    transform: translateZ(18px);
    transform-style: preserve-3d;
}

.shop-card .card-info h3 {
    transform: translateZ(6px);
}

.shop-card .card-badges-left,
.shop-card .card-badges-right {
    transform: translateZ(28px);
}

/* Override existing hover — tilt JS will handle transform */
.shop-card:hover {
    box-shadow:
        0 30px 60px -12px rgba(16, 185, 129, 0.35),
        0 0 0 1px rgba(16, 185, 129, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.08);
    border-color: rgba(16, 185, 129, 0.5);
}

/* Specular highlight that moves with mouse */
.shop-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1.25rem;
    background: radial-gradient(
        circle at var(--mx, 50%) var(--my, 30%),
        rgba(255, 255, 255, 0.08) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.shop-card:hover::after {
    opacity: 1;
}

/* ─── Featured Card 3D ───────────────────────────────── */
.featured-card {
    transform-style: preserve-3d;
    will-change: transform;
}

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

@keyframes float3d {
    0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
    25%       { transform: translateY(-4px) rotateX(4deg) rotateY(4deg); }
    50%       { transform: translateY(-6px) rotateX(0deg) rotateY(-4deg); }
    75%       { transform: translateY(-2px) rotateX(-4deg) rotateY(2deg); }
}

/* ─── Stats Bar 3D Depth Cards ───────────────────────── */
#stats-bar > div {
    transform: translateZ(0);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

#stats-bar > div:hover {
    transform: translateZ(10px) scale(1.08);
}

/* ─── 3D CTA Banner ──────────────────────────────────── */
.cta-3d {
    transform-style: preserve-3d;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.cta-3d:hover {
    transform: perspective(600px) rotateX(-2deg) translateY(-4px);
}

/* ─── Section Depth on Scroll ────────────────────────── */
.depth-section {
    transform: translateZ(0);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease;
    opacity: 0;
}

.depth-section.visible {
    opacity: 1;
}

/* ─── 3D Filter Bar ──────────────────────────────────── */
section.filters-3d {
    transform-style: preserve-3d;
    transition: box-shadow 0.4s ease;
}

section.filters-3d:hover {
    box-shadow:
        0 20px 40px -10px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.04),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ─── Parallax Hero Image ────────────────────────────── */
.hero-parallax-img {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ─── 3D Map Container ───────────────────────────────── */
#map {
    transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.23,1,0.32,1);
}

#map:hover {
    transform: perspective(800px) rotateY(-2deg) rotateX(1deg) scale(1.01);
    box-shadow:
        20px 20px 60px -15px rgba(0,0,0,0.6),
        -5px -5px 30px rgba(16, 185, 129, 0.08);
}

/* ─── Vibe Search 3D Box ─────────────────────────────── */
#vibe-search-input:focus + button,
#vibe-search-input:focus {
    transform: translateZ(0);
}

#vibe-search-btn {
    transition:
        transform 0.2s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.2s ease;
}

#vibe-search-btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 24px -4px rgba(16, 185, 129, 0.5);
}

/* ─── 3D Floating Particles (CSS backup to Three.js) ─── */
@keyframes particle-float {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 0.5; }
    100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

.css-particle {
    position: fixed;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.6);
    pointer-events: none;
    z-index: -1;
    animation: particle-float linear infinite;
}

/* ─── Holographic Shimmer on Header ──────────────────── */
header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(16, 185, 129, 0.4) 30%,
        rgba(139, 92, 246, 0.4) 60%,
        transparent 100%
    );
    animation: headerGlow 4s ease-in-out infinite alternate;
}

@keyframes headerGlow {
    0%   { opacity: 0.3; transform: scaleX(0.7); }
    100% { opacity: 1;   transform: scaleX(1); }
}

/* ─── 3D Banner Carousel ─────────────────────────────── */
.banner-carousel {
    transform-style: preserve-3d;
}

.banner-slide {
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ─── Therapist Section Depth ────────────────────────── */
#therapists {
    transform-style: preserve-3d;
}

#therapist-list > div {
    transition: transform 0.3s cubic-bezier(0.23,1,0.32,1), box-shadow 0.3s ease;
    transform-style: preserve-3d;
}

#therapist-list > div:hover {
    transform: perspective(600px) rotateY(-4deg) translateY(-6px);
    box-shadow: 12px 16px 40px -8px rgba(16, 185, 129, 0.3);
}

/* ─── Reduce motion accessibility ───────────────────── */
@media (prefers-reduced-motion: reduce) {
    .shop-card,
    .featured-card,
    .hero-3d-wrapper,
    #threejs-bg,
    .logo-3d,
    .css-particle,
    #therapist-list > div,
    #map {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}