/* --- GLOBAL RESET & FONTS --- */
body {
    margin: 0; padding: 0; background-color: #000;
    overflow-x: hidden; font-family: 'Poppins', sans-serif; color: white;
}

/* --- NEBULA BACKGROUND --- */
.nebula-bg {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1; overflow: hidden;
}
#nebula-video {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0.6; filter: saturate(1.4);
}
.nebula-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, transparent 20%, rgba(0,0,0,0.8) 100%);
}

/* --- HEADER --- */
.experience-header {
    position: absolute; top: 40px; width: 100%; text-align: center;
    z-index: 10; pointer-events: none;
}
.experience-header h1 {
    font-size: 2.5rem; letter-spacing: 0.2rem; margin: 0;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

/* --- CAROUSEL (iPad Fix) --- */
.memory-carousel {
    display: flex; align-items: center; overflow-x: auto;
    height: 100vh; padding: 0 10vw; gap: 60px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    transform-style: preserve-3d; perspective: 1000px; /* iPad 3D context */
    scrollbar-width: none;
}
.memory-carousel::-webkit-scrollbar { display: none; }

/* --- BUBBLES --- */
.gateway-icon {
    flex: 0 0 280px; display: flex; flex-direction: column;
    align-items: center; scroll-snap-align: center; cursor: pointer;
    -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);
    animation: floatIcon 6s ease-in-out infinite;
}

@keyframes floatIcon {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -25px, 0); }
}

.bubble {
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.bubble img { width: 90%; height: 90%; object-fit: cover; border-radius: 50%; }

.gateway-title {
    margin-top: 25px; font-weight: 600; text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    background: rgba(0,0,0,0.4); padding: 8px 16px; border-radius: 20px;
}

/* --- GLASS BUTTONS --- */
.glass-button {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 14px;
    cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 2000;
}
.glass-button:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.3); }

/* --- PORTAL OVERLAY --- */
.portal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000; z-index: 1000;
    display: flex; flex-direction: column;
}

.portal-back-btn { position: absolute; top: 40px; right: 40px; }
.ar-portal-btn { 
    position: absolute; top: 115px; right: 40px;
    pointer-events: auto; /* CRITICAL for clicks */
}

/* --- FIXED STAGE STYLES (Previously Missing) --- */
#portal-stage {
    width: 100%; height: 100%;
    position: relative;
    overflow: hidden;
    display: flex; justify-content: center; align-items: center;
}
model-viewer, canvas {
    width: 100% !important; height: 100% !important;
}