/* ========================================
   vividXperience — Vision Pro subpage
   Vision Pro Liquid Glass + game-engine 3D map + 4 immersive scenes.
   ======================================== */

:root {
    --vivid-magenta: #ff3da6;
    --vivid-purple: #8a2cff;
    --vivid-cyan: #2cd9ff;
    --vivid-violet: #c45cff;
    --vivid-amber: #ffc864;
    --vivid-deep: #0a0418;
}

/* ========================================
   Hero
   ======================================== */

.vivid-hero { position: relative; overflow: hidden; }

.vivid-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.vivid-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    mix-blend-mode: screen;
}
.vivid-glow-1 {
    width: 520px; height: 520px;
    background: radial-gradient(circle, var(--vivid-magenta), transparent 70%);
    top: -120px; left: -80px;
    animation: vividGlowFloat1 14s ease-in-out infinite alternate;
}
.vivid-glow-2 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--vivid-purple), transparent 70%);
    top: 20%; right: -120px;
    animation: vividGlowFloat2 18s ease-in-out infinite alternate;
}
.vivid-glow-3 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, var(--vivid-cyan), transparent 70%);
    bottom: -100px; left: 30%; opacity: 0.35;
    animation: vividGlowFloat3 22s ease-in-out infinite alternate;
}
@keyframes vividGlowFloat1 { from { transform: translate(0,0); } to { transform: translate(40px,30px); } }
@keyframes vividGlowFloat2 { from { transform: translate(0,0); } to { transform: translate(-30px,40px); } }
@keyframes vividGlowFloat3 { from { transform: translate(0,0); } to { transform: translate(50px,-30px); } }

.vivid-hero .project-hero-inner { position: relative; z-index: 1; }

.vivid-title {
    background: linear-gradient(135deg, #ffffff 0%, var(--vivid-violet) 50%, var(--vivid-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.vivid-cover {
    position: relative;
    z-index: 1;
    border-color: rgba(196, 92, 255, 0.25);
    box-shadow: 0 0 60px rgba(138, 44, 255, 0.15);
}
.vivid-cover-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(255, 61, 166, 0.25), transparent 55%),
        radial-gradient(ellipse at 70% 70%, rgba(44, 217, 255, 0.18), transparent 55%),
        linear-gradient(180deg, transparent 50%, rgba(5, 5, 5, 0.6) 100%);
    pointer-events: none;
}
.vivid-cover-marquee {
    position: absolute;
    bottom: 1.5rem; left: 0; right: 0;
    display: flex; overflow: hidden;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.4em;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    pointer-events: none;
}
.vivid-cover-marquee span {
    display: inline-block;
    animation: vividMarquee 28s linear infinite;
}
@keyframes vividMarquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* Feature card accent */
.vivid-feature { transition: all 0.4s var(--ease-smooth); }
.vivid-feature:hover {
    border-color: rgba(196, 92, 255, 0.5);
    box-shadow: 0 0 30px rgba(138, 44, 255, 0.15);
}
.vivid-feature .feature-num {
    background: linear-gradient(135deg, var(--vivid-magenta), var(--vivid-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ========================================
   Vision Pro Demo Frame
   ======================================== */

.vp-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 760px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #1a0a2e, #050208 70%);
    box-shadow:
        0 0 0 1px rgba(196, 92, 255, 0.1),
        0 30px 80px rgba(0, 0, 0, 0.5),
        inset 0 0 60px rgba(138, 44, 255, 0.08);
}

.vp-frame-hint {
    margin-top: 1rem;
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    color: var(--text-grey);
}

/* Pre-launch poster (unchanged) */
.vp-poster {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    transition: opacity 0.6s var(--ease-smooth);
    overflow: hidden;
}
.vp-poster.hidden { opacity: 0; pointer-events: none; }
.vp-poster-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(255, 61, 166, 0.35), transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(44, 217, 255, 0.3), transparent 55%),
        radial-gradient(ellipse at 50% 50%, rgba(138, 44, 255, 0.4), transparent 65%);
    filter: blur(20px);
    animation: vpPosterPulse 4s ease-in-out infinite alternate;
}
@keyframes vpPosterPulse {
    from { opacity: 0.7; transform: scale(1); }
    to   { opacity: 1; transform: scale(1.05); }
}
.vp-poster-inner { position: relative; z-index: 1; text-align: center; padding: 2rem; }
.vp-poster-eyebrow {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.4em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1rem;
}
.vp-poster-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fff, var(--vivid-violet) 60%, var(--vivid-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin: 0 0 0.5rem;
}
.vp-poster-sub {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    color: var(--text-light-grey);
    margin: 0 0 2rem;
}
.vp-enter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 2.2rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    color: var(--text-white);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    border-radius: 999px;
    cursor: none;
    transition: all 0.3s var(--ease-smooth);
}
.vp-enter-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--black);
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 40px rgba(196, 92, 255, 0.5);
    transform: translateY(-2px);
}
.vp-enter-arrow { transition: transform 0.3s var(--ease-smooth); }
.vp-enter-btn:hover .vp-enter-arrow { transform: translateX(4px); }

/* ========================================
   Vision Pro Shell — slim glass sidebar
   ======================================== */

.vp-shell {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 56px 1fr;
    opacity: 0;
    transition: opacity 0.6s var(--ease-smooth);
}
.vp-shell.active { opacity: 1; }

.vp-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.4rem;
    margin: 0.7rem 0 0.7rem 0.7rem;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(20, 10, 40, 0.5);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 12px 40px rgba(0, 0, 0, 0.45);
    align-self: center;
    height: fit-content;
}
.vp-sidebar::before {
    content: '';
    position: absolute;
    top: 1px; left: 1px; right: 1px;
    height: 50%;
    border-radius: 17px 17px 50% 50% / 17px 17px 30% 30%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
    pointer-events: none;
    opacity: 0.6;
}

.vp-sb-item {
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    border-radius: 9px;
    cursor: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--ease-smooth);
    position: relative;
    z-index: 1;
}
.vp-sb-item svg {
    width: 15px; height: 15px;
    transition: transform 0.3s var(--ease-smooth);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.vp-sb-item:hover {
    color: var(--text-white);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 6px 16px rgba(196, 92, 255, 0.35);
    transform: scale(1.08);
}
.vp-sb-item:active { transform: scale(0.92); }
.vp-sb-item.active {
    color: var(--text-white);
    background:
        linear-gradient(180deg, rgba(196, 92, 255, 0.45), rgba(138, 44, 255, 0.25));
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 6px 18px rgba(196, 92, 255, 0.5),
        0 0 12px rgba(196, 92, 255, 0.4);
}

.vp-sb-label {
    position: absolute;
    left: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    padding: 0.3rem 0.55rem;
    background: rgba(0, 0, 0, 0.85);
    color: var(--text-white);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s var(--ease-smooth);
    z-index: 5;
}
.vp-sb-item:hover .vp-sb-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Stage */

.vp-stage {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0d0518 0%, #050208 100%);
}

.vp-screen {
    position: absolute;
    inset: 0;
    padding: 1.2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease-smooth);
    overflow: auto;
}
.vp-screen.active {
    opacity: 1;
    pointer-events: auto;
}

/* ========================================
   Home — large 3D Map entry + 2x2 grid + Recommended + News
   ======================================== */

.vp-screen-home {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.2rem;
}

.vp-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}
.vp-search svg {
    width: 14px; height: 14px;
    color: var(--text-grey);
}
.vp-search-placeholder {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    color: var(--text-grey);
}

.vp-home-main {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0.85rem;
    flex: 1;
    min-height: 0;
}

/* Large 3D Map entry */
.vp-home-map-entry {
    position: relative;
    border: 1px solid rgba(196, 92, 255, 0.3);
    border-radius: 16px;
    overflow: hidden;
    cursor: none;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(80, 30, 120, 0.7), transparent 60%),
        linear-gradient(180deg, #0a0420, #150828);
    transition: all 0.4s var(--ease-smooth);
}
.vp-home-map-entry:hover {
    border-color: rgba(196, 92, 255, 0.7);
    box-shadow: 0 0 40px rgba(196, 92, 255, 0.35);
    transform: translateY(-2px);
}

.vp-home-map-preview {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.vp-home-map-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(196, 92, 255, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(196, 92, 255, 0.18) 1px, transparent 1px);
    background-size: 28px 28px;
    transform: perspective(500px) rotateX(60deg) translateY(15%) scale(1.4);
    transform-origin: 50% 60%;
    opacity: 0.7;
}
.vp-home-map-pin {
    position: absolute;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--vivid-magenta);
    box-shadow:
        0 0 0 3px rgba(255, 61, 166, 0.25),
        0 0 12px rgba(255, 61, 166, 0.7);
    transform: translate(-50%, -50%);
    animation: vpPinPulse 2s ease-in-out infinite;
}
.vp-home-map-pin:nth-child(2) { animation-delay: 0.3s; }
.vp-home-map-pin:nth-child(3) { animation-delay: 0.6s; }
.vp-home-map-pin:nth-child(4) { animation-delay: 0.9s; }

@keyframes vpPinPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.3); }
}

.vp-home-map-label {
    position: absolute;
    left: 1.1rem;
    bottom: 1.1rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.vp-home-map-eyebrow {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    color: var(--vivid-cyan);
}
.vp-home-map-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-white);
}
.vp-home-map-arrow {
    position: absolute;
    top: 50%; right: 0.85rem;
    transform: translateY(-50%);
    color: var(--text-light-grey);
    font-size: 1.1rem;
    transition: transform 0.3s var(--ease-smooth);
}
.vp-home-map-entry:hover .vp-home-map-arrow {
    transform: translateY(-50%) translateX(4px);
}

/* 2x2 menu grid */
.vp-home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.6rem;
}

.vp-tile {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
    border-radius: 12px;
    overflow: hidden;
    cursor: none;
    transition: all 0.35s var(--ease-smooth);
}
.vp-tile:hover {
    border-color: rgba(196, 92, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(138, 44, 255, 0.25);
}

.vp-tile-bg {
    position: absolute;
    inset: 0;
    transition: transform 0.5s var(--ease-smooth);
}
.vp-tile:hover .vp-tile-bg { transform: scale(1.08); }

.vp-tile-bg-events {
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 61, 166, 0.4), transparent 60%),
        radial-gradient(circle at 50% 80%, rgba(138, 44, 255, 0.4), transparent 60%),
        linear-gradient(135deg, #2a0c1f, #0a0418);
}
.vp-tile-bg-quick {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 200, 100, 0.3), transparent 55%),
        linear-gradient(135deg, #2a1a40, #0a0418);
}
.vp-tile-bg-album {
    background:
        radial-gradient(circle at 30% 50%, rgba(44, 217, 255, 0.35), transparent 55%),
        radial-gradient(circle at 70% 50%, rgba(255, 61, 166, 0.35), transparent 55%),
        linear-gradient(135deg, #0c1f2a, #0a0418);
}
.vp-tile-bg-settings {
    background:
        radial-gradient(circle at 50% 50%, rgba(150, 150, 170, 0.25), transparent 55%),
        linear-gradient(135deg, #1a1828, #0a0418);
}

.vp-tile-label {
    position: absolute;
    bottom: 0.7rem;
    left: 0.85rem;
    right: 0.85rem;
    z-index: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--text-white);
    text-transform: uppercase;
}

/* Bottom row: Recommended + Latest News */
.vp-home-footer {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0.85rem;
    flex-shrink: 0;
}
.vp-home-col-head {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    color: var(--text-grey);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}
.vp-recommend-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
}
.vp-rec-card {
    position: relative;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    overflow: hidden;
    cursor: none;
    transition: all 0.3s var(--ease-smooth);
}
.vp-rec-card:hover {
    border-color: rgba(196, 92, 255, 0.5);
    transform: scale(1.04);
}
.vp-rec-thumb { position: absolute; inset: 0; }
.vp-rec-thumb-1 {
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 100, 200, 0.5), transparent 50%),
        radial-gradient(circle at 30% 70%, rgba(100, 200, 255, 0.4), transparent 50%),
        linear-gradient(180deg, #1a0420, #0a0210);
}
.vp-rec-thumb-2 {
    background:
        radial-gradient(ellipse at 50% 60%, rgba(180, 80, 255, 0.55), transparent 55%),
        linear-gradient(180deg, #150825, #050310);
}
.vp-rec-thumb-3 {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 200, 100, 0.4), transparent 50%),
        radial-gradient(circle at 30% 30%, rgba(100, 100, 255, 0.4), transparent 50%),
        linear-gradient(180deg, #0a0820, #020210);
}
.vp-rec-name {
    position: absolute;
    bottom: 0.4rem;
    left: 0.6rem;
    right: 0.6rem;
    z-index: 1;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-white);
}

.vp-news-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.vp-news-list li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.4rem 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.78rem;
    color: var(--text-light-grey);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.vp-news-list li:last-child { border-bottom: none; }
.vp-news-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--vivid-cyan);
    box-shadow: 0 0 6px rgba(44, 217, 255, 0.6);
}
.vp-news-title {
    color: var(--text-light-grey);
    line-height: 1.35;
}
.vp-news-date {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    color: var(--text-grey);
    letter-spacing: 0.1em;
}

/* ========================================
   3D MAP — game-engine perspective plane
   ======================================== */

.vp-screen-map {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 1rem;
    padding: 1.2rem;
}

.vp-map-canvas {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    cursor: none;
    outline: none;
    background: linear-gradient(180deg, #050218 0%, #02010c 100%);
}

/* Sky + horizon */
.vp-map-sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(80, 30, 120, 0.4), transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(20, 50, 90, 0.5), transparent 60%),
        linear-gradient(180deg, #0a0418 0%, #150830 50%, #02010c 100%);
    pointer-events: none;
}
.vp-map-sky::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 28% 22%, rgba(196, 220, 255, 0.6), transparent),
        radial-gradient(1px 1px at 56% 12%, rgba(255, 200, 200, 0.6), transparent),
        radial-gradient(1.4px 1.4px at 78% 8%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1px 1px at 88% 28%, rgba(180, 200, 255, 0.6), transparent),
        radial-gradient(1.4px 1.4px at 8% 38%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 42% 6%, rgba(255, 220, 220, 0.5), transparent),
        radial-gradient(1px 1px at 65% 32%, rgba(196, 92, 255, 0.5), transparent),
        radial-gradient(1px 1px at 92% 14%, rgba(255, 255, 255, 0.7), transparent);
    animation: vpStarsTwinkle 6s ease-in-out infinite alternate;
}
@keyframes vpStarsTwinkle {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.vp-map-horizon-glow {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 80px;
    transform: translateY(-50%);
    background: radial-gradient(ellipse at 50% 50%, rgba(196, 92, 255, 0.3), transparent 70%);
    pointer-events: none;
    filter: blur(10px);
}

/* World container — moves & rotates as a whole */
.vp-world {
    position: absolute;
    left: 50%;
    top: 60%;
    width: 0; height: 0;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(60deg) rotateZ(0deg) translate3d(0, 0, 0);
    will-change: transform;
}

/* Ground plane: a large rectangle with an animated grid texture */
.vp-ground {
    position: absolute;
    width: 3000px;
    height: 3000px;
    left: -1500px;
    top: -1500px;
    transform-style: preserve-3d;
    pointer-events: none;
}
.vp-ground-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(196, 92, 255, 0.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(196, 92, 255, 0.25) 1px, transparent 1px);
    background-size: 80px 80px;
    /* Radial mask: clearer near origin, fade out toward edges */
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 35%, rgba(0,0,0,0) 60%);
    mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 35%, rgba(0,0,0,0) 60%);
}
.vp-ground::before {
    /* Coloured halo glow on the ground */
    content: '';
    position: absolute;
    inset: 30%;
    background:
        radial-gradient(circle at 50% 50%, rgba(196, 92, 255, 0.18), transparent 70%);
    filter: blur(40px);
}

/* ----- Landmarks: multi-layer 3D billboards -----
   Each landmark is a preserve-3d wrapper at world XZ position.
   It contains:
   - A footprint (rotateX 90deg → flat on ground plane, gives shadow)
   - A vp-lm-layers container holding multiple SVG layers, each at a
     different translateZ() depth so they parallax against each other.
   - A pin floating above (counter-rotated to billboard, always faces user)
*/
.vp-landmark {
    position: absolute;
    left: 0; top: 0;
    transform-style: preserve-3d;
    transform: translate3d(var(--wx), var(--wz), 0);
    pointer-events: auto;
}

/* Footprint sits flat on the ground plane (rotateX 90deg) */
.vp-lm-footprint {
    position: absolute;
    left: 50%; top: 0;
    transform: translateX(-50%) rotateX(90deg);
    transform-origin: 50% 50%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(196, 92, 255, 0.35), transparent 70%);
    filter: blur(4px);
}
.vp-lm-footprint-opera   { width: 110px; height: 32px; }
.vp-lm-footprint-bridge  { width: 230px; height: 36px; }
.vp-lm-footprint-drones  { width: 80px;  height: 26px; }
.vp-lm-footprint-walk    { width: 70px;  height: 24px; }

.vp-landmark.selected .vp-lm-footprint {
    background: radial-gradient(ellipse at center, rgba(44, 217, 255, 0.55), transparent 70%);
}

/* The layers container is a vertical billboard plane (default orientation,
   facing the camera direction along Y axis). Layers translate in Z to
   create depth (back / mid / front). */
.vp-lm-layers {
    position: absolute;
    left: 0; top: 0;
    transform-style: preserve-3d;
    pointer-events: none;
    /* True billboard: counter-rotate against the live camera so the SVG
       always faces the viewer perpendicular to the ground.
       --cam-rz and --cam-rx are written by JS each animation frame. */
    transform:
        rotateZ(calc(-1 * var(--cam-rz, 0deg)))
        rotateX(calc(-1 * var(--cam-rx, 60deg)));
}

.vp-lm-layer {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform-origin: 50% 100%;
    width: 200px;
    height: auto;
    pointer-events: none;
}
.vp-lm-layer-back  { transform: translateX(-50%) translateZ(-20px); opacity: 0.6; }
.vp-lm-layer-mid   { transform: translateX(-50%) translateZ(0px);   opacity: 0.85; }
.vp-lm-layer-front { transform: translateX(-50%) translateZ(20px);  opacity: 1; }

.vp-landmark-bridge .vp-lm-layer { width: 320px; }
.vp-landmark-walk   .vp-lm-layer { width: 90px; }
.vp-landmark-opera  .vp-lm-layer { width: 130px; }

/* Image-based landmark icons (PNG with cyan glow on dark background).
   `screen` blend mode lets the dark background fall away while the cyan
   glow stays — so the icon blends naturally into the 3D map. */
.vp-landmark-img .vp-lm-layers {
    /* Center the image and let it stand vertically on the ground plane. */
    transform-origin: 50% 100%;
}
.vp-lm-icon {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 220px;
    height: auto;
    pointer-events: none;
    /* Icons are pre-cut transparent PNGs (see Assets/*-cut.png). */
    filter: drop-shadow(0 0 14px rgba(44, 217, 255, 0.55));
    user-select: none;
    -webkit-user-drag: none;
}
.vp-landmark-bridge .vp-lm-icon { width: 280px; }
.vp-landmark-drones .vp-lm-icon { width: 240px; }
/* op.png is a pure transparent neon line — give it a touch more glow to
   match the other landmarks' built-in halo. */
.vp-landmark-opera  .vp-lm-icon {
    width: 180px;
    filter:
        drop-shadow(0 0 8px rgba(44, 217, 255, 0.8))
        drop-shadow(0 0 22px rgba(44, 217, 255, 0.45));
}

.vp-landmark-img.selected .vp-lm-icon {
    filter:
        drop-shadow(0 0 16px rgba(44, 217, 255, 0.95))
        drop-shadow(0 0 32px rgba(44, 217, 255, 0.5));
    transform: translateX(-50%) scale(1.05);
}

/* ---- Wireframe SVG landmarks (line-art with depth) ----
   Two SVG layers per landmark sit at different Z. When the camera
   rotates, they parallax against each other producing real volume. */
.vp-landmark-wire .vp-lm-layers {
    transform-origin: 50% 100%;
}
.vp-lm-wire {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform-origin: 50% 100%;
    height: auto;
    pointer-events: none;
    overflow: visible;
    color: rgba(120, 230, 255, 0.95);
}
.vp-lm-wire-back {
    transform: translateX(-50%) translateZ(-32px);
    opacity: 0.55;
    filter: blur(0.4px);
}
.vp-lm-wire-front {
    transform: translateX(-50%) translateZ(0);
    opacity: 1;
}
.vp-landmark-opera  .vp-lm-wire { width: 180px; }
.vp-landmark-bridge .vp-lm-wire { width: 300px; }
.vp-landmark-drones .vp-lm-wire { width: 180px; }

/* The shared cyan stroke styles already defined for .wf-stroke and
   .wf-stroke-bright are inherited here — the back layer just inherits
   the dimmed opacity, the front layer the full glow. We add a small
   selected-state lift so the front layer pops when the landmark is
   chosen. */
.vp-landmark-wire.selected .vp-lm-wire-front {
    filter: drop-shadow(0 0 10px rgba(120, 230, 255, 0.95));
    transform: translateX(-50%) translateZ(0) scale(1.06);
}
.vp-landmark-wire.selected .vp-lm-wire-back {
    opacity: 0.75;
}

/* Subtle vertical drift so the landmarks read as alive */
.vp-lm-wire-front { animation: vpLmWireBob 5s ease-in-out infinite; }
.vp-lm-wire-back  { animation: vpLmWireBob 7s ease-in-out infinite; animation-delay: -2s; }
@keyframes vpLmWireBob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -2px; }
}

.vp-lm-layer .wf-stroke,
.vp-lm-wire .wf-stroke {
    stroke: rgba(196, 92, 255, 0.7);
    stroke-width: 1.4;
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
    color: rgba(196, 92, 255, 0.9);
    filter: drop-shadow(0 0 4px rgba(196, 92, 255, 0.6));
}

.vp-lm-layer .wf-stroke-bright,
.vp-lm-wire .wf-stroke-bright {
    stroke: rgba(196, 92, 255, 1);
    stroke-width: 1.6;
    fill: none;
    color: rgba(196, 92, 255, 1);
    filter: drop-shadow(0 0 8px rgba(196, 92, 255, 0.85));
}

.vp-landmark.selected .wf-stroke,
.vp-landmark.selected .wf-stroke-bright {
    stroke: rgba(44, 217, 255, 1);
    color: rgba(44, 217, 255, 1);
    fill: rgba(44, 217, 255, 0.1);
    filter: drop-shadow(0 0 8px rgba(44, 217, 255, 0.95));
}

/* Cyan-glow variant (matches the reference Vision Pro screenshot) */
.vp-landmark-cyan .vp-lm-layer .wf-stroke,
.vp-landmark-cyan .vp-lm-wire .wf-stroke {
    stroke: rgba(44, 217, 255, 0.85);
    color: rgba(44, 217, 255, 0.95);
    fill: none;
    filter: drop-shadow(0 0 5px rgba(44, 217, 255, 0.7));
}
.vp-landmark-cyan .vp-lm-layer .wf-stroke-bright,
.vp-landmark-cyan .vp-lm-wire .wf-stroke-bright {
    stroke: rgba(120, 230, 255, 1);
    color: rgba(120, 230, 255, 1);
    fill: none;
    stroke-width: 1.6;
    filter: drop-shadow(0 0 8px rgba(44, 217, 255, 0.95));
}
/* Cyan pin colour to match */
.vp-landmark-cyan .vp-pin-dot {
    background: rgba(44, 217, 255, 1);
    box-shadow:
        0 0 0 3px rgba(44, 217, 255, 0.25),
        0 0 16px rgba(44, 217, 255, 0.95);
}
.vp-landmark-cyan .vp-pin-dot::before {
    border-color: rgba(44, 217, 255, 0.5);
}


/* Pylon towers — 4 faces of a real CSS box */
.vp-lm-pylon {
    position: absolute;
    bottom: 0;
    width: 14px;
    height: 35px;
    transform-style: preserve-3d;
}
.vp-lm-pylon-left  { left: -160px; transform: rotateX(calc(-1 * var(--cam-rx, 60deg))) translateZ(0); }
.vp-lm-pylon-right { left: 146px;  transform: rotateX(calc(-1 * var(--cam-rx, 60deg))) translateZ(0); }
.vp-lm-pylon-face {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(44, 217, 255, 0.7);
    background: rgba(20, 50, 80, 0.5);
    box-shadow: inset 0 1px 0 rgba(120, 230, 255, 0.25);
}
.vp-lm-pylon-face.front { transform: translateZ(7px); }
.vp-lm-pylon-face.right { transform: rotateY(90deg) translateZ(7px); width: 14px; }
.vp-lm-pylon-face.left  { transform: rotateY(-90deg) translateZ(7px); width: 14px; }

/* Drone Show: 9 dots distributed in 3D space using --dx/--dy/--dz */
.drone-3d {
    position: absolute;
    left: 50%; bottom: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(44, 217, 255, 0.95);
    box-shadow:
        0 0 8px rgba(44, 217, 255, 1),
        0 0 16px rgba(196, 92, 255, 0.6);
    transform: translate3d(var(--dx), var(--dy), var(--dz));
    animation: dronePulse 2.4s ease-in-out infinite;
}
.drone-3d:nth-child(2n) { animation-delay: 0.4s; }
.drone-3d:nth-child(3n) { animation-delay: 0.8s; }
.drone-3d:nth-child(5n) { animation-delay: 1.2s; }
.vp-landmark.selected .drone-3d {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 12px rgba(44, 217, 255, 1), 0 0 22px rgba(44, 217, 255, 1);
}

@keyframes dronePulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* Pin on each landmark.
   Two-layer transform:
     - .vp-landmark-pin: positions itself at landmark origin then translates
       up in world-Z (which becomes screen-up after the world's rotateX 60°).
     - The button content is then billboarded by counter-rotating the
       camera, so the dot+label always face the viewer flat-on. */
.vp-landmark-pin {
    position: absolute;
    left: 0;
    top: 0;
    /* translateZ lifts the pin into the air above the ground plane.
       The world's rotateX(60) turns most of that Z into screen-up. */
    transform:
        translateZ(var(--pin-lift, 100px))
        rotateZ(calc(-1 * var(--cam-rz, 0deg)))
        rotateX(calc(-1 * var(--cam-rx, 60deg)))
        translateX(-50%);
    transform-origin: 0 0;
    transform-style: preserve-3d;
    background: transparent;
    border: none;
    cursor: none;
    color: var(--text-white);
    z-index: 50;
    pointer-events: auto;
    --pin-lift: 100px;
    /* Compact column for dot + label */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 4px;
}
.vp-landmark-opera   { --pin-lift: 110px; }
.vp-landmark-bridge  { --pin-lift: 200px; }
.vp-landmark-drones  { --pin-lift: 150px; }

.vp-pin-dot {
    display: block;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--vivid-magenta);
    box-shadow:
        0 0 0 3px rgba(255, 61, 166, 0.2),
        0 0 16px rgba(255, 61, 166, 0.85);
    margin: 0 auto;
    position: relative;
    animation: vpPinPulse 2s ease-in-out infinite;
}
.vp-pin-dot::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(255, 61, 166, 0.4);
    animation: vpPinRing 2.4s ease-out infinite;
}
@keyframes vpPinRing {
    0%   { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
}

.vp-pin-label {
    display: block;
    margin-top: 0.4rem;
    padding: 0.2rem 0.55rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-light-grey);
    white-space: nowrap;
    transition: all 0.25s var(--ease-smooth);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

.vp-landmark-pin:hover .vp-pin-dot,
.vp-landmark.selected .vp-pin-dot {
    background: var(--vivid-cyan);
    box-shadow:
        0 0 0 4px rgba(44, 217, 255, 0.25),
        0 0 22px rgba(44, 217, 255, 0.95),
        0 0 40px rgba(44, 217, 255, 0.5);
}
.vp-landmark-pin:hover .vp-pin-dot::before,
.vp-landmark.selected .vp-pin-dot::before {
    border-color: rgba(44, 217, 255, 0.5);
}
.vp-landmark-pin:hover .vp-pin-label,
.vp-landmark.selected .vp-pin-label {
    border-color: rgba(44, 217, 255, 0.5);
    color: var(--text-white);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 6px 20px rgba(44, 217, 255, 0.35);
}

@keyframes vpPinPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

/* Reset camera button */
.vp-map-reset {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 32px;
    height: 32px;
    z-index: 6;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    color: var(--text-light-grey);
    border-radius: 8px;
    cursor: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s var(--ease-smooth);
}
.vp-map-reset svg { width: 16px; height: 16px; }
.vp-map-reset:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--black);
    border-color: rgba(255, 255, 255, 0.95);
}

/* Side panel */
.vp-map-sidepanel {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(20, 10, 40, 0.5);
    backdrop-filter: blur(40px) saturate(180%);
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-self: start;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 12px 30px rgba(0, 0, 0, 0.4);
}
.vp-side-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    color: var(--text-grey);
    text-transform: uppercase;
}
.vp-side-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-white);
    margin: 0;
    line-height: 1.3;
}
.vp-side-desc {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-light-grey);
    margin: 0;
}
.vp-side-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid rgba(196, 92, 255, 0.4);
    background: rgba(196, 92, 255, 0.15);
    color: var(--text-white);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    border-radius: 8px;
    cursor: none;
    transition: all 0.25s var(--ease-smooth);
}
.vp-side-cta:not(:disabled):hover {
    background: var(--vivid-magenta);
    border-color: var(--vivid-magenta);
    box-shadow: 0 0 20px rgba(255, 61, 166, 0.5);
}
.vp-side-cta:disabled { opacity: 0.4; cursor: not-allowed; }

/* ========================================
   Events screen (existing — light tweaks)
   ======================================== */

.vp-events-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
    overflow-x: auto;
}
.vp-evt-tab {
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: var(--text-grey);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    border-radius: 999px;
    cursor: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.25s var(--ease-smooth);
}
.vp-evt-tab:hover {
    color: var(--text-white);
    border-color: rgba(255, 255, 255, 0.3);
}
.vp-evt-tab.active {
    background: rgba(196, 92, 255, 0.2);
    border-color: var(--vivid-violet);
    color: var(--text-white);
}

.vp-events-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.7rem;
}

.vp-evt-card {
    position: relative;
    aspect-ratio: 3 / 4;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    cursor: none;
    transition: transform 0.4s var(--ease-smooth), border-color 0.4s, box-shadow 0.4s;
    background: rgba(255, 255, 255, 0.02);
}
.vp-evt-card:hover {
    transform: translateY(-6px) scale(1.04);
    border-color: rgba(196, 92, 255, 0.55);
    box-shadow: 0 18px 40px rgba(138, 44, 255, 0.4);
    z-index: 2;
}
.vp-evt-thumb { position: absolute; inset: 0; transition: transform 0.5s var(--ease-smooth); }
.vp-evt-card:hover .vp-evt-thumb { transform: scale(1.1); }
.vp-evt-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0.7rem;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85));
}
.vp-evt-cat {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    color: var(--vivid-cyan);
    margin-bottom: 0.3rem;
}
.vp-evt-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-white);
    line-height: 1.3;
}

/* ========================================
   Immersive — 4 distinct scenes
   ======================================== */

.vp-screen-immersive { padding: 0; }

.vp-imm-stage {
    position: absolute;
    inset: 0;
    cursor: none;
    overflow: hidden;
    perspective: 1500px;
}

.vp-imm-bg {
    position: absolute;
    inset: -10%;
    transition: opacity 0.6s var(--ease-smooth), background 0.8s var(--ease-smooth);
    animation: vpImmDrift 30s ease-in-out infinite alternate;
}
@keyframes vpImmDrift {
    from { transform: scale(1.05); }
    to   { transform: scale(1.12) translate(-2%, -2%); }
}
.vp-imm-bg[data-scene="Drone Show"] {
    background:
        radial-gradient(ellipse at 50% 80%, rgba(20, 50, 90, 0.7), transparent 60%),
        radial-gradient(circle at 30% 30%, rgba(255, 100, 200, 0.2), transparent 45%),
        radial-gradient(circle at 70% 40%, rgba(100, 200, 255, 0.18), transparent 45%),
        linear-gradient(180deg, #050218 0%, #0a0428 50%, #000 100%);
}
.vp-imm-bg[data-scene="Opera Light"] {
    background:
        radial-gradient(ellipse at 50% 80%, rgba(60, 30, 100, 0.7), transparent 60%),
        radial-gradient(ellipse at 50% 50%, rgba(180, 80, 255, 0.4), transparent 50%),
        linear-gradient(180deg, #1a0420 0%, #0a0418 60%, #000 100%);
}
.vp-imm-bg[data-scene="Harbour Bridge"] {
    background:
        radial-gradient(ellipse at 50% 80%, rgba(20, 50, 90, 0.75), transparent 60%),
        radial-gradient(ellipse at 50% 35%, rgba(44, 217, 255, 0.3), transparent 55%),
        linear-gradient(180deg, #0a1a3e 0%, #050218 60%, #000 100%);
}
.vp-imm-bg[data-scene="Light Walk"] {
    background:
        radial-gradient(ellipse at 50% 90%, rgba(40, 20, 80, 0.7), transparent 55%),
        radial-gradient(circle at 25% 60%, rgba(196, 92, 255, 0.3), transparent 45%),
        radial-gradient(circle at 75% 60%, rgba(44, 217, 255, 0.3), transparent 45%),
        linear-gradient(180deg, #0a0418 0%, #150828 50%, #050218 100%);
}

.vp-imm-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1px 1px at 28% 22%, rgba(196, 220, 255, 0.7), transparent),
        radial-gradient(1px 1px at 56% 12%, rgba(255, 200, 200, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 78% 8%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 88% 28%, rgba(180, 200, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 8% 38%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 42% 6%, rgba(255, 220, 220, 0.6), transparent),
        radial-gradient(1px 1px at 65% 32%, rgba(196, 92, 255, 0.6), transparent),
        radial-gradient(1px 1px at 92% 14%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 18% 52%, rgba(180, 220, 255, 0.5), transparent),
        radial-gradient(1px 1px at 36% 28%, rgba(255, 200, 100, 0.6), transparent);
    animation: vpStarsTwinkle 5s ease-in-out infinite alternate;
}

.vp-imm-parallax {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.3s var(--ease-smooth);
}

.vp-imm-art {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80%;
    max-width: 800px;
    height: auto;
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
    transition: opacity 0.7s var(--ease-smooth), transform 0.9s var(--ease-smooth);
    pointer-events: none;
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5));
}

.vp-imm-bg.scene-Opera-Light ~ .vp-imm-parallax .vp-imm-art-opera,
.vp-imm-bg.scene-Harbour-Bridge ~ .vp-imm-parallax .vp-imm-art-bridge,
.vp-imm-bg.scene-Drone-Show ~ .vp-imm-parallax .vp-imm-art-drones {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
/* Only enable pointer events on art when the immersive screen itself is active */
.vp-screen.active .vp-imm-bg.scene-Opera-Light ~ .vp-imm-parallax .vp-imm-art-opera,
.vp-screen.active .vp-imm-bg.scene-Harbour-Bridge ~ .vp-imm-parallax .vp-imm-art-bridge,
.vp-screen.active .vp-imm-bg.scene-Drone-Show ~ .vp-imm-parallax .vp-imm-art-drones {
    pointer-events: auto;
}

/* Wireframe glow */
.wf-glow {
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px currentColor);
}

/* Scene 1: Opera Light — Sydney Opera House w/ switchable light effects.
   Each shell is rendered twice: a filled silhouette (background gradient,
   driven by the active light mode) + an outline + a structural rib line.
   Modes are toggled via the data-light-mode attribute on the SVG root. */

.vp-imm-art-opera {
    overflow: visible;
}

/* Two-layer composition:
   - .opera-fill-layer: closed silhouettes only — pure colour, no stroke.
     These provide the "exterior wall colour" canvas that morphs across
     the four light modes (projection / aurora / fire / pulse).
   - .opera-stroke-layer: open neon paths traced from the reference image.
     They give the building its iconic line silhouette and never change
     colour with light mode (only their glow intensity does). */

.opera-shell-fill {
    fill: url(#operaProjection);
    opacity: 0.78;
    transition: opacity 0.6s ease, fill 0.6s ease;
}
.opera-podium-fill {
    fill: rgba(20, 12, 38, 0.55);
}

/* All neon stroke lines share these props */
.opera-line {
    fill: none;
    stroke: rgba(180, 240, 255, 0.95);
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(44, 217, 255, 0.85));
}

/* Water shimmer below */
.opera-water {
    stroke: rgba(120, 200, 255, 0.5);
    filter: drop-shadow(0 0 4px rgba(80, 180, 255, 0.4));
    animation: operaWaterShimmer 5s ease-in-out infinite;
}
@keyframes operaWaterShimmer {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1; }
}

/* ===== Light modes — only the SAIL EXTERIOR colour shifts. =====
   No flowing stripes, no scrolling lines. The sails act as one big
   colour-changing canvas, and their outlines glow accordingly. */

/* Mode: PROJECTION (default) — animated rainbow gradient cycling
   across all the sails as one surface. */
[data-light-mode="projection"] .opera-shell-fill {
    fill: url(#operaProjection);
    opacity: 0.85;
    animation: operaSailPulse 4s ease-in-out infinite;
}
[data-light-mode="projection"] .opera-line {
    stroke: rgba(220, 240, 255, 0.98);
    filter: drop-shadow(0 0 5px rgba(196, 92, 255, 0.75));
}

/* Mode: AURORA — green/teal/violet vertical sweep */
[data-light-mode="aurora"] .opera-shell-fill {
    fill: url(#operaAurora);
    opacity: 0.9;
    animation: operaAuroraGlow 3.5s ease-in-out infinite;
}
[data-light-mode="aurora"] .opera-line {
    stroke: rgba(180, 255, 230, 0.98);
    filter: drop-shadow(0 0 6px rgba(22, 210, 168, 0.9));
}
@keyframes operaAuroraGlow {
    0%, 100% { opacity: 0.8; filter: hue-rotate(0deg); }
    50%      { opacity: 1;   filter: hue-rotate(25deg); }
}

/* Mode: FIRE — warm reds + a fast flicker */
[data-light-mode="fire"] .opera-shell-fill {
    fill: url(#operaFire);
    opacity: 0.9;
    animation: operaFireFlicker 0.32s steps(2) infinite;
}
[data-light-mode="fire"] .opera-line {
    stroke: rgba(255, 220, 140, 0.98);
    filter: drop-shadow(0 0 6px rgba(255, 90, 30, 0.9));
}
@keyframes operaFireFlicker {
    0%   { opacity: 0.9; }
    50%  { opacity: 0.75; }
    100% { opacity: 1; }
}

/* Mode: PULSE — clean cyan beat */
[data-light-mode="pulse"] .opera-shell-fill {
    fill: url(#operaPulse);
    opacity: 0.75;
    animation: operaPulseBeat 1.4s ease-in-out infinite;
}
[data-light-mode="pulse"] .opera-line {
    stroke: rgba(180, 240, 255, 1);
    filter: drop-shadow(0 0 8px rgba(44, 217, 255, 0.95));
    animation: operaPulseStroke 1.4s ease-in-out infinite;
}
@keyframes operaPulseBeat {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1;   }
}
@keyframes operaPulseStroke {
    0%, 100% { stroke-width: 1.4; }
    50%      { stroke-width: 2.4; }
}

@keyframes operaSailPulse {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 0.85; }
}

/* ===== Mode picker UI ===== */
.opera-mode-picker {
    position: absolute;
    bottom: -3.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 6px 18px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
    z-index: 6;
}
/* Show only when Opera Light scene is active */
.vp-imm-bg.scene-Opera-Light ~ .vp-imm-parallax .opera-mode-picker {
    display: inline-flex;
}

.opera-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s var(--ease-smooth);
}
.opera-mode-btn .opera-mode-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}
.opera-mode-btn[data-mode="projection"] { color: rgba(196, 92, 255, 0.85); }
.opera-mode-btn[data-mode="aurora"]     { color: rgba(22, 210, 168, 0.85); }
.opera-mode-btn[data-mode="fire"]       { color: rgba(255, 160, 60, 0.85); }
.opera-mode-btn[data-mode="pulse"]      { color: rgba(44, 217, 255, 0.85); }

.opera-mode-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
}
.opera-mode-btn.active {
    color: #fff;
    border-color: currentColor;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 12px currentColor;
}
.opera-mode-btn.active[data-mode="projection"] { color: #c45cff; }
.opera-mode-btn.active[data-mode="aurora"]     { color: #16d2a8; }
.opera-mode-btn.active[data-mode="fire"]       { color: #ff8c2e; }
.opera-mode-btn.active[data-mode="pulse"]      { color: #2cd9ff; }

/* Scene 2: Harbour Bridge — fireworks (kept) */

.vp-imm-art-bridge { overflow: visible; }
.bridge-fireworks { /* JS-injected children */ }
.firework-rocket {
    fill: rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 0 4px currentColor);
}
.firework-burst-line {
    stroke-width: 1.4;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px currentColor);
}
.bridge-flag rect {
    animation: bridgeFlagWave 3s ease-in-out infinite;
    transform-origin: 0% 50%;
}
@keyframes bridgeFlagWave {
    0%, 100% { transform: scaleX(1); }
    50%      { transform: scaleX(0.94); }
}

/* Scene 3: Drone Show */

.vp-imm-art-drones {
    width: 70%;
    aspect-ratio: 16 / 9;
}
.drone-swarm {
    position: relative;
    width: 100%;
    height: 100%;
}
.drone-swarm .drone-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 0 8px rgba(44, 217, 255, 0.95),
        0 0 16px rgba(196, 92, 255, 0.6);
    /* Center the particle on its (left, top) coordinate (default scale 1). */
    transform: translate(-50%, -50%);
    /* Smooth morph between formations + smooth scale change for spare drones. */
    transition:
        left 2.4s cubic-bezier(0.4, 0, 0.2, 1),
        top  2.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 1.6s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 1.2s ease,
        background 1.2s ease;
    will-change: left, top, transform;
}
/* Drone Show shape stepper (◀ LABEL ▶) */
.drone-shape-stepper {
    position: absolute;
    bottom: -3.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.4rem 0.6rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 6px 18px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
}

.drone-stepper-btn {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    color: var(--text-light-grey);
    border-radius: 50%;
    cursor: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s var(--ease-smooth);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.drone-stepper-btn svg {
    width: 16px;
    height: 16px;
}
.drone-stepper-btn:hover {
    color: var(--text-white);
    border-color: rgba(196, 92, 255, 0.5);
    background: linear-gradient(180deg, rgba(196, 92, 255, 0.2), rgba(138, 44, 255, 0.08));
}
.drone-stepper-btn:active {
    transform: scale(0.92);
}

.drone-shape-label {
    min-width: 110px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: var(--text-white);
    text-transform: uppercase;
    pointer-events: none;
}

/* Generic immersive HUD bits */

.vp-imm-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.85) 100%);
    pointer-events: none;
    z-index: 2;
}

.vp-imm-title {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.4rem 1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-white);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    z-index: 3;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 6px 18px rgba(0, 0, 0, 0.5);
}

/* Floating immersive controls — Vision Pro liquid glass */

.vp-imm-scenes {
    position: absolute;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s var(--ease-smooth);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
        rgba(20, 10, 40, 0.45);
    backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 16px 48px rgba(0, 0, 0, 0.5);
    right: 1rem;
    top: 50%;
    transform: translateY(-50%) translateX(12px);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem;
    border-radius: 16px;
    width: 150px;
}
.vp-imm-scenes.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.vp-imm-scene {
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    color: var(--text-light-grey);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.78rem;
    text-align: left;
    border-radius: 9px;
    cursor: none;
    transition: all 0.25s var(--ease-smooth);
}
.vp-imm-scene:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    color: var(--text-white);
    transform: translateX(2px);
}
.vp-imm-scene.active {
    background: linear-gradient(90deg, rgba(196, 92, 255, 0.3), rgba(255, 61, 166, 0.18));
    border-color: rgba(196, 92, 255, 0.5);
    color: var(--text-white);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 14px rgba(196, 92, 255, 0.3);
}

/* EXIT button — top-right of immersive, only visible when controls shown */
.vp-imm-exit {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 4;
    padding: 0.4rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px) saturate(180%);
    color: var(--text-light-grey);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    border-radius: 999px;
    cursor: none;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s var(--ease-smooth);
    transform: translateY(-6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.vp-imm-exit.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.vp-imm-exit:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--black);
    border-color: rgba(255, 255, 255, 0.95);
}

/* ========================================
   Album screen
   ======================================== */

.vp-album-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}
.vp-album-tab {
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: var(--text-grey);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    border-radius: 999px;
    cursor: none;
    text-transform: uppercase;
    transition: all 0.25s var(--ease-smooth);
}
.vp-album-tab:hover {
    color: var(--text-white);
    border-color: rgba(255, 255, 255, 0.3);
}
.vp-album-tab.active {
    background: rgba(44, 217, 255, 0.15);
    border-color: var(--vivid-cyan);
    color: var(--text-white);
}

.vp-album-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}
.vp-album-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.25s var(--ease-smooth);
}
.vp-album-thumb:hover {
    border-color: rgba(44, 217, 255, 0.5);
    transform: scale(1.04);
}
.vp-album-thumb-bg { position: absolute; inset: 0; }
.vp-album-source {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    padding: 0.12rem 0.35rem;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.5rem;
    letter-spacing: 0.15em;
    color: var(--text-white);
}
.vp-album-source.phone {
    border-color: rgba(255, 200, 100, 0.5);
    color: rgb(255, 220, 130);
}
.vp-album-source.vp {
    border-color: rgba(44, 217, 255, 0.5);
    color: rgb(150, 230, 255);
}
.vp-album-record {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 1rem;
    border: 1px solid rgba(255, 100, 100, 0.4);
    background: rgba(255, 60, 60, 0.1);
    color: var(--text-white);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    border-radius: 999px;
    cursor: none;
    transition: all 0.25s var(--ease-smooth);
}
.vp-album-record:hover {
    background: rgba(255, 60, 60, 0.25);
    border-color: rgb(255, 100, 100);
    box-shadow: 0 0 20px rgba(255, 60, 60, 0.4);
}
.vp-album-rec-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgb(255, 80, 80);
    animation: chatPulse 1.2s ease-in-out infinite;
}
.vp-album-record.recording {
    background: rgba(255, 60, 60, 0.3);
    border-color: rgb(255, 100, 100);
}

/* ========================================
   Stub screens
   ======================================== */

.vp-stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-grey);
}
.vp-stub-icon {
    font-size: 2.5rem;
    margin-bottom: 0.85rem;
    opacity: 0.6;
}
.vp-stub h4 {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-white);
    margin: 0 0 0.4rem;
    font-weight: 500;
}
.vp-stub p {
    font-family: 'Rajdhani', sans-serif;
    margin: 0;
}

/* ========================================
   Prototype CTA (kept)
   ======================================== */

.vivid-cta-section { text-align: center; }
.vivid-cta-inner { text-align: center; }
.vivid-cta-section .project-h2 { text-align: center; }
.vivid-cta-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    color: var(--text-light-grey);
    margin: 0 auto 2rem;
    max-width: 500px;
}
.vivid-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.1rem 2.5rem;
    border: 1px solid var(--vivid-violet);
    background: linear-gradient(135deg, rgba(196, 92, 255, 0.2), rgba(255, 61, 166, 0.2));
    color: var(--text-white);
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    border-radius: 999px;
    text-transform: uppercase;
    cursor: none;
    transition: all 0.3s var(--ease-smooth);
    box-shadow: 0 0 30px rgba(196, 92, 255, 0.2);
}
.vivid-cta-btn:hover {
    background: linear-gradient(135deg, var(--vivid-violet), var(--vivid-magenta));
    box-shadow: 0 0 40px rgba(255, 61, 166, 0.5);
    transform: translateY(-2px);
}
.vivid-cta-arrow { font-size: 1.1rem; }

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 900px) {
    .vp-frame { aspect-ratio: 4 / 3; }

    .vp-shell { grid-template-columns: 48px 1fr; }
    .vp-sidebar { padding: 0.5rem 0.3rem; margin: 0.5rem 0 0.5rem 0.5rem; }
    .vp-sb-item { width: 28px; height: 28px; }

    .vp-home-main {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .vp-home-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

    .vp-home-footer { grid-template-columns: 1fr; }

    .vp-recommend-row { grid-template-columns: repeat(3, 1fr); }

    .vp-events-grid { grid-template-columns: repeat(2, 1fr); }

    .vp-album-grid { grid-template-columns: repeat(3, 1fr); }

    .vp-screen-map { grid-template-columns: 1fr; }
}