/*
 * VISUAL SAINT VFX — Cinematic Studio VS Logo  v6.0
 * Scope: orbit-wrapper, vs-3d-scene, vs-logo-container, vs-minimal-text
 * + injected: vs-bg-glow, vs-rig, vs-atmo, vs-platform, vs-brand-text,
 *             vs-logo-reflection, vs-floor-glow, vs-fog-canvas
 * Nothing outside this scope is touched.
 */

/* ═══════════════════════════════════════════════════════════════════════
   0. VS LOGO IMAGE — animated glow, pulse rings
   ═══════════════════════════════════════════════════════════════════════ */
.vs-logo-container {
    position: absolute !important;
    transform-style: preserve-3d !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    animation: none !important;
    gap: 0;
}

.vs-img-logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 620px;
    height: 620px;
}

.vs-logo-img-animated {
    position: relative;
    z-index: 5;
    width: 580px;
    height: auto;
    object-fit: contain;
    animation: vs-img-float 7s ease-in-out infinite;
}

@keyframes vs-img-float {
    0%, 100% { transform: translateY(0px) scale(1);     }
    33%       { transform: translateY(-8px) scale(1.01); }
    66%       { transform: translateY(-4px) scale(1.005); }
}

/* Glow rings around logo */
.vs-img-glow-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(130, 100, 255, 0.25);
    animation: vs-ring-expand 3.5s ease-out infinite;
    pointer-events: none;
    z-index: 2;
}
.vs-img-glow-ring-2 {
    animation-delay: 1.75s;
    border-color: rgba(80, 160, 255, 0.20);
}
@keyframes vs-ring-expand {
    0%   { transform: scale(0.7);  opacity: 0.7; }
    70%  { transform: scale(1.35); opacity: 0.2; }
    100% { transform: scale(1.5);  opacity: 0; }
}

/* Central pulse orb behind logo */
.vs-img-pulse-orb {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(120, 80, 255, 0.22) 0%,
        rgba(80, 140, 255, 0.12) 40%,
        transparent 70%);
    filter: blur(18px);
    animation: vs-orb-breathe 5s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}
@keyframes vs-orb-breathe {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%       { opacity: 1.0; transform: scale(1.2); }
}

/* ── lights-on intensifies the logo glow ── */
.lights-on .vs-logo-img-animated {
    animation: vs-img-float 7s ease-in-out infinite;
}

/* ── Responsive ── */
/* Tablet: fits in centerpiece */
@media (max-width: 900px) {
    .vs-img-logo-wrap { width: 440px; height: 440px; }
    .vs-logo-img-animated { width: 400px; }
    .vs-logo-container { transform: translateY(0px) !important; }
}
/* Small tablet / large phone */
@media (max-width: 768px) {
    .vs-img-logo-wrap { width: 380px; height: 380px; }
    .vs-logo-img-animated { width: 340px; }
}
/* Phone: fits in centerpiece */
@media (max-width: 600px) {
    .vs-img-logo-wrap { width: 320px; height: 320px; }
    .vs-logo-img-animated { width: 280px; }
}
/* Small phone */
@media (max-width: 420px) {
    .vs-img-logo-wrap { width: 260px; height: 260px; }
    .vs-logo-img-animated { width: 220px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO TINY NAV IMAGES — 4 small glowing images below the logo
   ═══════════════════════════════════════════════════════════════════════ */
.hero-tiny-nav-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 10px 24px 0;
    margin-top: 30px;
    width: 100%;
    max-width: 600px;
}

.tiny-nav-img-link {
    position: relative;
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(.25,.46,.45,.94), box-shadow 0.35s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
    width: 78px;
    height: 78px;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.tiny-nav-img-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    pointer-events: none;
}

.tiny-nav-img-link:hover {
    transform: translateY(-5px) scale(1.15);
    box-shadow: 0 10px 25px rgba(130, 100, 255, 0.50), 0 4px 15px rgba(0, 0, 0, 0.50);
}

.tiny-nav-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.tiny-nav-img-link:hover img {
    transform: scale(1.15);
}

/* Responsive panels */
/* ≤900px — tablet: same 78px thumbnails, just less margin-top */
@media (max-width: 900px) {
    .hero-tiny-nav-images { gap: 18px; margin-top: 22px; }
}
/* ≤680px — large phone: smaller thumbnails */
@media (max-width: 680px) {
    .hero-tiny-nav-images { gap: 14px; padding-top: 4px; margin-top: 18px; }
    .tiny-nav-img-link { width: 58px; height: 58px; border-radius: 9px; }
    .tiny-nav-img-link::after { border-radius: 9px; }
}
/* ≤480px — phone: tighter */
@media (max-width: 480px) {
    .hero-tiny-nav-images { gap: 10px; margin-top: 14px; padding: 0 8px; }
    .tiny-nav-img-link { width: 52px; height: 52px; border-radius: 8px; }
    .tiny-nav-img-link::after { border-radius: 8px; }
}
/* ≤380px — very small phone */
@media (max-width: 380px) {
    .hero-tiny-nav-images { gap: 8px; }
    .tiny-nav-img-link { width: 44px; height: 44px; border-radius: 6px; }
    .tiny-nav-img-link::after { border-radius: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   1. HIDE orbit rings
   ═══════════════════════════════════════════════════════════════════════ */
.orbit-wrapper {
    opacity: 0 !important; visibility: hidden !important;
    animation: none !important; pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. SCENE: slow cinematic tilt, NO spin
   ═══════════════════════════════════════════════════════════════════════ */
.vs-3d-scene {
    animation: vs-scene-drift 22s ease-in-out infinite !important;
    will-change: transform;
}
@keyframes vs-scene-drift {
    0%   { transform: rotateX(9deg)  rotateY(-3deg); }
    30%  { transform: rotateX(6deg)  rotateY(2deg);  }
    60%  { transform: rotateX(10deg) rotateY(4deg);  }
    100% { transform: rotateX(9deg)  rotateY(-3deg); }
}

/* ═══════════════════════════════════════════════════════════════════════
   3. CAMERA LENS GEOMETRY — multi-ring cinematic lens system
   ═══════════════════════════════════════════════════════════════════════ */

/* Outer lens barrel ring */
.vs-aperture {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    animation: vs-ap-turn 120s linear infinite;
}

/* Primary outer lens ring */
.vs-aperture::before {
    content: ''; position: absolute;
    width: 88%; height: 88%; border-radius: 50%;
    border: 1px solid rgba(210,207,198,.22);
    box-shadow:
        0 0 0 2px  rgba(200,197,188,.10),
        0 0 0 10px rgba(200,197,188,.04),
        0 0 0 20px rgba(200,197,188,.025),
        0 0 0 38px rgba(200,197,188,.012),
        inset 0 0 60px rgba(200,197,188,.03);
}

/* Secondary inner focus ring — counter-rotates for depth */
.vs-aperture::after {
    content: ''; position: absolute;
    width: 70%; height: 70%; border-radius: 50%;
    border: 1px solid rgba(220,216,206,.14);
    box-shadow:
        0 0 0 6px  rgba(215,212,202,.06),
        0 0 0 14px rgba(210,207,197,.03);
    animation: vs-ap-counter 80s linear infinite;
}

@keyframes vs-ap-turn    { to { transform: rotate(360deg);  } }
@keyframes vs-ap-counter { to { transform: rotate(-360deg); } }

/* Lens thread tick marks — injected via JS; styled here */
.vs-lens-tick {
    position: absolute;
    width: 1px;
    background: linear-gradient(to bottom, rgba(220,217,208,.30), transparent);
    transform-origin: bottom center;
    pointer-events: none;
}

/* Aperture iris blades — 6 blades, subtle, elegant */
.vs-iris {
    position: absolute;
    width: 56%; height: 56%;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    opacity: 0.06;
    animation: vs-iris-breathe 14s ease-in-out infinite;
}
.vs-iris-blade {
    position: absolute;
    width: 42%; height: 42%;
    border-radius: 0 80% 0 80%;
    background: linear-gradient(135deg,
        rgba(210,207,198,.9) 0%,
        rgba(180,177,168,.3) 60%,
        transparent 100%);
    transform-origin: 100% 100%;
}
.vs-iris-blade:nth-child(1) { transform: rotate(0deg); }
.vs-iris-blade:nth-child(2) { transform: rotate(60deg); }
.vs-iris-blade:nth-child(3) { transform: rotate(120deg); }
.vs-iris-blade:nth-child(4) { transform: rotate(180deg); }
.vs-iris-blade:nth-child(5) { transform: rotate(240deg); }
.vs-iris-blade:nth-child(6) { transform: rotate(300deg); }

@keyframes vs-iris-breathe {
    0%,100% { opacity:.05; transform: rotate(0deg) scale(1); }
    50%      { opacity:.10; transform: rotate(3deg) scale(1.02); }
}

/* Lens inner glow — simulates internal element reflections */
.vs-lens-inner-glow {
    position: absolute;
    width: 52%; height: 52%; border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 38% 32%,
        rgba(255,252,245,.04) 0%,
        rgba(240,237,228,.02) 40%,
        transparent 68%);
    animation: vs-lens-shift 18s ease-in-out infinite;
}
@keyframes vs-lens-shift {
    0%,100% { transform: translate(0,0);       opacity:.7; }
    33%      { transform: translate(4px,-3px);  opacity:1;  }
    66%      { transform: translate(-3px,2px);  opacity:.8; }
}

/* Lens coating flare — single diagonal streak */
.vs-lens-flare {
    position: absolute;
    width: 60%; height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,252,245,.06) 30%,
        rgba(255,250,240,.12) 50%,
        rgba(255,252,245,.06) 70%,
        transparent 100%);
    transform: rotate(-28deg);
    pointer-events: none;
    animation: vs-flare-sweep 16s ease-in-out infinite;
    opacity: 0;
}
@keyframes vs-flare-sweep {
    0%,40%,100% { opacity:0; transform: rotate(-28deg) translateX(-40%); }
    52%          { opacity:1; transform: rotate(-28deg) translateX(10%);  }
    64%          { opacity:0; transform: rotate(-28deg) translateX(50%);  }
}



/* ═══════════════════════════════════════════════════════════════════════
   4. BACKGROUND RADIAL GLOW (behind VS, in front of aperture)
   ═══════════════════════════════════════════════════════════════════════ */
.vs-bg-glow {
    position: absolute;
    width: 65%; height: 65%;
    top: 17%; left: 17%;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(ellipse at center,
        rgba(175,172,162,.09) 0%,
        rgba(155,152,142,.05) 40%,
        transparent 72%);
    filter: blur(28px);
    animation: vs-bg-breathe 10s ease-in-out infinite;
}
@keyframes vs-bg-breathe {
    0%,100% { opacity: .7; transform: scale(1);    }
    50%      { opacity: 1;  transform: scale(1.06); }
}
.lights-on .vs-bg-glow {
    background: radial-gradient(ellipse at center,
        rgba(255,248,225,.10) 0%,
        rgba(240,232,210,.05) 40%,
        transparent 72%);
}

/* ═══════════════════════════════════════════════════════════════════════
   5. LOGO CONTAINER: stable column layout
   ═══════════════════════════════════════════════════════════════════════ */
.vs-logo-container {
    position: absolute !important;
    transform-style: preserve-3d !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    animation: none !important;
    gap: 0;
    transform: translateY(0px) !important; /* Perfect vertical center */
}

/* Top cinematic frame line disabled */
.vs-logo-container::before {
    content: none !important;
}
/* Removed bottom ::after line */
.vs-logo-container::after { content: none; }

/* ═══════════════════════════════════════════════════════════════════════
   6. VS TEXT: larger, warmer gunmetal — no blue tones
   ═══════════════════════════════════════════════════════════════════════ */
.vs-minimal-text {
    font-size: 240px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -12px;
    position: relative;
    display: block;
    -webkit-font-smoothing: antialiased;

    /* Warm dark gunmetal — charcoal/silver, zero blue */
    color: transparent;
    background: linear-gradient(
        165deg,
        #1c1c1e 0%,  #272727 12%,  #323232 24%,
        #3e3e3e 34%,  #484840 42%,  #4a4a42 48%,
        #3c3c36 56%,  #2a2a26 68%,  #1a1a18 82%,
        #121210 100%
    );
    -webkit-background-clip: text;
    background-clip: text;

    /* Edge glow — warm silver, not blue */
    text-shadow:
        0 0 30px rgba(220,215,200,.14),
        0 0 60px rgba(200,195,180,.06);

    filter:
        drop-shadow(0 2px 6px  rgba(0,0,0,.96))
        drop-shadow(0 16px 42px rgba(0,0,0,.98));
}

/* ── Chrome highlight: warm neutral silver, not cool blue ── */
.vs-minimal-text::before {
    content: attr(data-text);
    position: absolute; inset: 0; z-index: 2;
    padding: 24px; margin: -24px; pointer-events: none;
    background: linear-gradient(
        162deg,
        rgba(255,255,255,.00)   0%,
        rgba(245,243,238,.14)  16%,
        rgba(250,248,242,.48)  30%,
        rgba(255,253,248,.68)  42%,
        rgba(255,255,252,.76)  48%,
        rgba(252,250,245,.62)  56%,
        rgba(238,235,228,.36)  68%,
        rgba(218,215,208,.11)  82%,
        rgba(255,255,255,.00) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: vs-chrome-breathe 9s ease-in-out infinite;
}
@keyframes vs-chrome-breathe { 0%,100% { opacity:.62; } 50% { opacity:1; } }

/* ── Precision light sweep ── */
.vs-minimal-text::after {
    content: attr(data-text);
    position: absolute; inset: 0; z-index: 3;
    padding: 24px; margin: -24px; pointer-events: none;
    background: linear-gradient(
        108deg,
        transparent 0%, transparent 34%,
        rgba(255,253,248,.00) 40%,
        rgba(252,250,245,.82) 47%,
        rgba(255,255,252,.96) 50%,
        rgba(252,250,245,.82) 53%,
        rgba(255,253,248,.00) 60%,
        transparent 66%, transparent 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: vs-sweep 11s cubic-bezier(.25,.46,.45,.94) infinite;
    animation-delay: 2.5s;
}
@keyframes vs-sweep {
    0%       { background-position: 220% 50%; opacity: 0; }
    5%       { opacity: 1; }
    42%      { background-position: -50% 50%; opacity: 1; }
    52%,100% { opacity: 0; background-position: -50% 50%; }
}

/* Chrome intensifies under studio lights */
.lights-on .vs-minimal-text::before {
    animation: vs-chrome-hot 9s ease-in-out infinite;
}
@keyframes vs-chrome-hot { 0%,100% { opacity:.82; } 50% { opacity:1; } }

/* ═══════════════════════════════════════════════════════════════════════
   7. LOGO REFLECTION (injected div directly below VS text)
   ═══════════════════════════════════════════════════════════════════════ */
.vs-logo-reflection {
    font-size: 240px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -12px;
    color: transparent;
    background: linear-gradient(
        to bottom,
        rgba(190,185,172,.30) 0%,
        rgba(160,155,142,.12) 40%,
        transparent 75%
    );
    -webkit-background-clip: text;
    background-clip: text;
    transform: scaleY(-1);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.38) 0%, transparent 65%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.38) 0%, transparent 65%);
    filter: blur(2.5px);
    margin-top: -28px;
    height: 88px;
    overflow: hidden;
    pointer-events: none;
    display: block;
    -webkit-font-smoothing: antialiased;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. PLATFORM — glossy floor line grounding the logo
   ═══════════════════════════════════════════════════════════════════════ */
.vs-platform {
    position: relative;
    width: 300px; height: 1px;
    flex-shrink: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(215,210,195,.50) 20%,
        rgba(240,235,222,.85) 50%,
        rgba(215,210,195,.50) 80%,
        transparent 100%
    );
    box-shadow:
        0  0 18px rgba(220,212,185,.22),
        0  1px  0  rgba(255,252,240,.06);
    margin-top: 4px;
}
/* Platform highlight — thin top shimmer */
.vs-platform::before {
    content: '';
    position: absolute; top: 0; left: 10%; width: 80%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,252,240,.40) 50%, transparent);
}
/* Platform floor fog */
.vs-platform::after {
    content: '';
    position: absolute; top: 1px; left: 15%; width: 70%; height: 22px;
    background: radial-gradient(ellipse at center top,
        rgba(205,200,180,.08) 0%, transparent 70%);
    filter: blur(6px);
}

/* ═══════════════════════════════════════════════════════════════════════
   9. BRAND TEXT — "VISUAL SAINT VFX" beneath platform
   ═══════════════════════════════════════════════════════════════════════ */
.vs-brand-text {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 7px;
    text-transform: uppercase;
    color: rgba(195,190,178,.48);
    margin-top: 16px;
    text-shadow: 0 0 24px rgba(215,208,188,.14);
    animation: vs-brand-breathe 7s ease-in-out infinite;
    flex-shrink: 0;
    white-space: nowrap;
}
@keyframes vs-brand-breathe { 0%,100% { opacity:.45; } 50% { opacity:.72; } }
.lights-on .vs-brand-text {
    color: rgba(230,222,200,.65);
    text-shadow: 0 0 30px rgba(255,245,220,.22);
    animation: vs-brand-lit 7s ease-in-out infinite;
}
@keyframes vs-brand-lit { 0%,100% { opacity:.60; } 50% { opacity:.88; } }

/* ═══════════════════════════════════════════════════════════════════════
   10. STUDIO LIGHT RIGS — Fresnel 3-layer beam system
   ═══════════════════════════════════════════════════════════════════════ */
.vs-rig {
    position: absolute; top: -18%; width: 72%; height: 130%;
    pointer-events: none;
}
.vs-rig-left  { left:  -32%; }
.vs-rig-right { right: -32%; }

/* Outer scatter — wide ambient spill */
.vs-beam-scatter {
    position: absolute; inset: 0;
    filter: blur(40px);
    opacity: 0;
    transition: opacity 2.8s cubic-bezier(.16,1,.3,1);
}
.vs-rig-left  .vs-beam-scatter {
    background: radial-gradient(ellipse 78% 90% at 88% 8%,
        rgba(255,248,222,.26) 0%, rgba(255,244,212,.11) 40%, transparent 68%);
}
.vs-rig-right .vs-beam-scatter {
    background: radial-gradient(ellipse 78% 90% at 12% 8%,
        rgba(255,248,222,.26) 0%, rgba(255,244,212,.11) 40%, transparent 68%);
}

/* Main cone */
.vs-beam-body {
    position: absolute; inset: 0;
    filter: blur(18px);
    opacity: 0;
    transition: opacity 2.5s cubic-bezier(.16,1,.3,1);
    transition-delay: .3s;
}
.vs-rig-left  .vs-beam-body {
    background: radial-gradient(ellipse 52% 72% at 90% 5%,
        rgba(255,250,228,.40) 0%, rgba(255,246,218,.22) 30%,
        rgba(255,243,212,.09) 54%, transparent 72%);
}
.vs-rig-right .vs-beam-body {
    background: radial-gradient(ellipse 52% 72% at 10% 5%,
        rgba(255,250,228,.40) 0%, rgba(255,246,218,.22) 30%,
        rgba(255,243,212,.09) 54%, transparent 72%);
}

/* Core — tight bright ray */
.vs-beam-core {
    position: absolute; inset: 0;
    filter: blur(8px);
    opacity: 0;
    transition: opacity 2.2s cubic-bezier(.16,1,.3,1);
    transition-delay: .6s;
}
.vs-rig-left  .vs-beam-core {
    background: radial-gradient(ellipse 26% 38% at 92% 3%,
        rgba(255,252,238,.52) 0%, rgba(255,249,228,.30) 30%,
        rgba(255,246,218,.10) 56%, transparent 74%);
}
.vs-rig-right .vs-beam-core {
    background: radial-gradient(ellipse 26% 38% at 8% 3%,
        rgba(255,252,238,.52) 0%, rgba(255,249,228,.30) 30%,
        rgba(255,246,218,.10) 56%, transparent 74%);
}

/* Fixture lamp head */
.vs-fixture {
    position: absolute;
    width: 30px; height: 30px; border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255,255,248,1.0) 0%, rgba(255,252,235,.85) 28%,
        rgba(255,248,222,.40) 55%, transparent 75%);
    filter: blur(4px);
    opacity: 0;
    transition: opacity 1.8s ease; transition-delay: .2s;
}
.vs-fixture::after {
    content: ''; position: absolute;
    width: 72px; height: 72px; border-radius: 50%;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    background: radial-gradient(circle,
        rgba(255,250,228,.22) 0%, rgba(255,246,218,.08) 42%, transparent 65%);
    filter: blur(8px);
}
.vs-rig-left  .vs-fixture { top: 0%; right: 4%;  transform: translate(50%,-42%); }
.vs-rig-right .vs-fixture { top: 0%; left:  4%;  transform: translate(-50%,-42%); }

/* LIGHTS ON */
.lights-on .vs-beam-scatter { opacity:1; animation:vs-flicker-s 17s ease-in-out 2.8s infinite; }
.lights-on .vs-beam-body    { opacity:1; animation:vs-flicker-b 17s ease-in-out 2.5s infinite; }
.lights-on .vs-beam-core    { opacity:1; animation:vs-flicker-c 17s ease-in-out 2.2s infinite; }
.lights-on .vs-fixture      { opacity:1; animation:vs-fixture-on 1.8s ease-out both, vs-fixture-idle 8s ease-in-out 2.2s infinite; }

@keyframes vs-flicker-s { 0%,72%,100%{opacity:.90;} 73%{opacity:.74;} 75%{opacity:.88;} 77%{opacity:.66;} 79%{opacity:.86;} }
@keyframes vs-flicker-b { 0%,74%,100%{opacity:.95;} 75%{opacity:.70;} 77%{opacity:.90;} 79%{opacity:.62;} 81%{opacity:.88;} }
@keyframes vs-flicker-c { 0%,76%,100%{opacity:1.0;} 77%{opacity:.68;} 79%{opacity:.94;} 81%{opacity:.60;} 83%{opacity:.90;} }
@keyframes vs-fixture-on {
    0%  { opacity:0; filter:blur(8px); }
    35% { opacity:.55; filter:blur(6px); }
    65% { opacity:.38; filter:blur(5px); }
    85% { opacity:.92; filter:blur(4px); }
    100%{ opacity:1;  filter:blur(4px); }
}
@keyframes vs-fixture-idle { 0%,100%{opacity:1;} 50%{opacity:.86;} }

/* ═══════════════════════════════════════════════════════════════════════
   11. ATMOSPHERIC HAZE COLUMNS
   ═══════════════════════════════════════════════════════════════════════ */
.vs-atmo {
    position: absolute; top: 5%; width: 28%; height: 88%;
    filter: blur(36px); opacity: 0; pointer-events: none;
    transition: opacity 3.5s ease;
}
.vs-atmo-left {
    left: 4%;
    background: linear-gradient(175deg,
        rgba(255,248,222,.07) 0%, rgba(255,245,215,.04) 38%,
        rgba(255,242,210,.02) 68%, transparent 85%);
    animation: vs-atmo-l 20s ease-in-out infinite;
}
.vs-atmo-right {
    right: 4%;
    background: linear-gradient(185deg,
        rgba(255,248,222,.07) 0%, rgba(255,245,215,.04) 38%,
        rgba(255,242,210,.02) 68%, transparent 85%);
    animation: vs-atmo-r 22s ease-in-out infinite;
}
@keyframes vs-atmo-l { 0%,100%{transform:translateY(0) scaleX(1);} 50%{transform:translateY(-7px) scaleX(1.06);} }
@keyframes vs-atmo-r { 0%,100%{transform:translateY(0) scaleX(1);} 50%{transform:translateY(5px)  scaleX(1.04);} }
.lights-on .vs-atmo { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   12. CANVAS FOG
   ═══════════════════════════════════════════════════════════════════════ */
.vs-fog-canvas {
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
    opacity: 0; transition: opacity 3s ease;
}
.lights-on .vs-fog-canvas { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   13. FLOOR GLOW
   ═══════════════════════════════════════════════════════════════════════ */
.vs-floor-glow {
    position: absolute; bottom: -5%; left: 50%; transform: translateX(-50%);
    width: 52%; height: 16%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(ellipse at center top,
        rgba(195,190,172,.08) 0%, transparent 72%);
    filter: blur(14px);
    animation: vs-floor-breathe 9s ease-in-out infinite;
}
@keyframes vs-floor-breathe { 0%,100%{opacity:.6;} 50%{opacity:1;} }
.lights-on .vs-floor-glow {
    background: radial-gradient(ellipse at center top,
        rgba(255,245,215,.12) 0%, transparent 72%);
}

/* ═══════════════════════════════════════════════════════════════════════
   14. STUDIO CTRL toggle
   ═══════════════════════════════════════════════════════════════════════ */
.vs-studio-ctrl {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 18px 7px 14px;
    background: rgba(14,14,16,.70);
    border: 1px solid rgba(205,200,188,.12);
    border-radius: 100px; cursor: pointer;
    color: rgba(195,190,178,.40);
    font-family: 'Inter', sans-serif; font-size: 9px;
    letter-spacing: 3px; text-transform: uppercase;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    user-select: none; -webkit-user-select: none;
    transition: border-color .4s ease, color .4s ease, box-shadow .4s ease;
    z-index: 10; white-space: nowrap;
}
.vs-studio-ctrl svg { flex-shrink: 0; transition: color .4s ease; }
.vs-studio-ctrl:hover { border-color: rgba(205,200,188,.28); color: rgba(195,190,178,.70); }
.vs-ctrl-pip {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: rgba(195,188,172,.28);
    transition: background .4s ease, box-shadow .4s ease;
}
.vs-studio-ctrl.active {
    border-color: rgba(255,215,130,.35); color: rgba(255,222,148,.75);
    box-shadow: 0 0 22px rgba(255,195,70,.09);
}
.vs-studio-ctrl.active svg  { color: rgba(255,215,130,.82); }
.vs-studio-ctrl.active .vs-ctrl-pip {
    background: rgba(255,195,70,.92);
    box-shadow: 0 0 8px rgba(255,185,55,.75);
    animation: vs-pip-pulse 2s ease-in-out infinite;
}
@keyframes vs-pip-pulse {
    0%,100% { box-shadow: 0 0 8px rgba(255,185,55,.75); }
    50%      { box-shadow: 0 0 15px rgba(255,185,55,1.0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   15. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .vs-3d-scene { animation: vs-scene-mobile 11s ease-in-out infinite !important; }
    @keyframes vs-scene-mobile {
        0%,100% { transform: rotateX(7deg) rotateY(-2deg); }
        50%      { transform: rotateX(9deg) rotateY(2deg);  }
    }
    .vs-minimal-text    { font-size: 120px; }
    .vs-logo-reflection { font-size: 120px; height: 52px; }
    .vs-platform        { width: 180px; }
    .vs-brand-text      { font-size: 8px; letter-spacing: 5px; }
    .vs-studio-ctrl     { font-size: 8px; padding: 6px 14px 6px 10px; bottom: 4px; }
    .vs-rig, .vs-atmo   { display: none; } /* off on tablet for perf */
}
@media (max-width: 600px) {
    .vs-minimal-text       { font-size: 90px; }
    .vs-logo-reflection    { font-size: 90px; height: 40px; }
    .vs-logo-container::before { width: 150px; }
    .vs-platform           { width: 140px; }
}