@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;1,500;1,600&display=swap');

:root{
    --paper:#f0f2df;
    --lime:#c5df7a;
    --mist:#ced8c9;
    --ink:#06120d;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    overflow:hidden;
    background:#0b2016;
    color:var(--paper);
    font-family:'DM Sans',sans-serif;
}

button{
    font:inherit;
    cursor:pointer;
}

#experience{
    min-height:100svh;
    isolation:isolate;
    overflow:hidden;
    position:relative;
}


/* =========================================================
   BACKGROUND VIDEO / PHOTO FALLBACK
   ========================================================= */

#bgVideo,
#photoFallback,
.veil{
    position:absolute;
    inset:-4%;
    height:108%;
    width:108%;
}

#bgVideo{
    z-index:-3;
    object-fit:cover;
    opacity:.8;
    transform:scale(1.06);
    transition:transform .2s ease-out;
}

#photoFallback{
    z-index:-4;
    background:url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=2400&q=90') center/cover;
    transform:scale(1.06);
    transition:transform .2s ease-out;
}

.veil{
    z-index:-2;
    background:
        linear-gradient(
            90deg,
            rgba(3,15,9,.82),
            rgba(3,15,9,.34) 62%,
            rgba(3,15,9,.17)
        ),
        linear-gradient(
            0deg,
            rgba(3,15,9,.92),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            rgba(3,15,9,.5),
            transparent 20%
        );
}


/* =========================================================
   HEADER / HERO / PLAYER
   ========================================================= */

header{
    position:relative;
    z-index:20;
    height:82px;
    padding:0 clamp(24px,5vw,82px);
    border-bottom:1px solid #dce8d433;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brand{
    color:var(--paper);
    font:600 16px 'DM Mono';
    letter-spacing:.15em;
    text-decoration:none;
}

.status{
    font:10px 'DM Mono';
    letter-spacing:.14em;
}

.status i{
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:8px;
    background:var(--lime);
    border-radius:50%;
    box-shadow:0 0 14px var(--lime);
}

header button,
.outline{
    border:1px solid #e9f2df55;
    background:#06150c66;
    color:var(--paper);
    border-radius:50%;
}

header button{
    width:40px;
    height:40px;
    font-size:21px;
}

.hero{
    position:relative;
    z-index:20;
    padding:
        clamp(64px,13vh,150px)
        clamp(24px,9vw,145px)
        230px;
    max-width:650px;
}

.eyebrow,
small{
    color:var(--lime);
    font:10px 'DM Mono';
    letter-spacing:.17em;
}

.hero h1{
    font:500 clamp(56px,7.5vw,110px)/.9 'Playfair Display';
    letter-spacing:-.055em;
    margin:20px 0;
}

.hero em{
    color:#d7e9a8;
}

.hero p:not(.eyebrow){
    color:var(--mist);
    line-height:1.65;
    max-width:430px;
}

.begin,
.outline{
    border-radius:999px;
    margin:14px 8px 0 0;
    padding:14px 20px;
    font-size:13px;
}

.begin{
    border:0;
    background:var(--lime);
    color:#142016;
    font-weight:600;
}

.player{
    position:relative;
    z-index:20;
    bottom:0;
    width:100%;
    padding:14px clamp(24px,5vw,82px) 20px;
    background:linear-gradient(transparent,#030e08 23%);
}

.progress{
    display:grid;
    grid-template-columns:52px 1fr 52px;
    gap:12px;
    align-items:center;
    font:10px 'DM Mono';
    color:var(--mist);
}

input{
    accent-color:var(--lime);
}


/* =========================================================
   LANDING CHROME TRANSITION
   ========================================================= */

header,
.hero,
.player{
    opacity:1;
    visibility:visible;
    transition:
        opacity .4s ease,
        visibility .4s ease;
}

#experience.session-started header,
#experience.session-started .hero,
#experience.session-started .player{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}


/* =========================================================
   VR CONTROLS BAR
   ========================================================= */

#vrControls{
    position:fixed;
    z-index:25;
    left:0;
    right:0;
    bottom:0;
    padding:18px clamp(18px,4vw,72px) 24px;
    background:linear-gradient(
        transparent,
        rgba(1,10,6,.94) 50%
    );
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .4s ease,
        visibility .4s ease,
        background .4s ease;
}

#experience.session-started #vrControls,
#experience.immersive #vrControls{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.vr-progress{
    display:grid;
    grid-template-columns:52px 1fr 52px;
    gap:12px;
    align-items:center;
    font:10px 'DM Mono';
    color:var(--mist);
    margin-bottom:14px;
}

.vr-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
}

.vr-actions>button{
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid #e9f2df55;
    background:#06150c66;
    color:var(--paper);
}

.vr-actions>button.active{
    background:var(--lime);
    color:#142016;
    border-color:var(--lime);
}

.audio-controls{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:center;
    margin-left:auto;
}

.audio-controls label{
    display:flex;
    align-items:center;
    gap:8px;
    font:11px 'DM Mono';
    color:var(--mist);
}

.audio-controls input[type="range"]{
    width:80px;
}

.audio-controls button{
    border:1px solid #e9f2df55;
    background:#06150c66;
    color:var(--paper);
    border-radius:999px;
    padding:8px 14px;
    font-size:11px;
}

.audio-controls .exit-btn,
.vr-progress,
.vr-actions>button,
.audio-controls>label,
.audio-controls>#vrFullscreen{
    transition:
        opacity .35s ease,
        visibility .35s ease;
}


/* =========================================================
   IMMERSIVE MODE
   ========================================================= */

#experience.immersive header,
#experience.immersive .hero,
#experience.immersive .player,
#experience.immersive .vr-progress,
#experience.immersive .vr-actions>button:not(.exit-btn),
#experience.immersive .audio-controls>label,
#experience.immersive .audio-controls>#vrFullscreen{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

#experience.immersive #vrControls{
    background:none;
    padding-bottom:28px;
}

#experience.immersive .exit-btn{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}


/* =========================================================
   FLOATING TIME
   ========================================================= */

#floatingTime{
    position:fixed;
    top:18px;
    right:18px;
    z-index:30;
    font:11px 'DM Mono';
    letter-spacing:.05em;
    color:var(--paper);
    background:rgba(3,15,9,.55);
    border:1px solid #e9f2df33;
    padding:7px 14px;
    border-radius:999px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .35s ease,
        visibility .35s ease;
}

#experience.immersive #floatingTime{
    opacity:1;
    visibility:visible;
}


/* =========================================================
   360° VR ENVIRONMENT
   ========================================================= */

#vr360Environment{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    overflow:hidden;
    z-index:1;
    background:#07150d;
}


/* =========================================================
   A-FRAME VR SCENE
   ========================================================= */

#vr360Environment a-scene,
#vr360Environment canvas{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
}


/* =========================================================
   NEW — 360° PANORAMA CROSS-DISSOLVE SYSTEM
   =========================================================

   IMPORTANT:

   These are NOT normal HTML images.

   They are A-Frame <a-sky> WebGL objects.

   JavaScript will control the actual material opacity.

   All skies remain inside the SAME A-Frame scene.

   Therefore:
      - VR camera remains unchanged
      - phone gyroscope remains unchanged
      - drag-to-look remains unchanged
      - headset orientation remains unchanged
      - panorama changes without reloading the scene
   ========================================================= */


/* All panorama skies occupy the exact same 360° sphere */

#vr360Environment .vr360-sky{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    pointer-events:none !important;

    /*
       Prevent browser-level fading/position changes.
       The real dissolve is controlled by A-Frame material
       opacity in JavaScript.
    */
    transition:none !important;

    will-change:opacity;
}


/*
   Current panorama layer.

   The first image starts fully visible.
*/

#vr360Environment .vr360-sky-current{
    opacity:1;
}


/*
   Next panorama layers.

   They begin completely invisible.
*/

#vr360Environment .vr360-sky-next{
    opacity:0;
}


/*
   Do NOT apply transforms to the skies.

   This is intentional.

   The panorama itself must remain fixed around the
   camera so that the user's 360° viewing direction
   is not disturbed during the dissolve.
*/

#vr360Environment .vr360-sky,
#vr360Environment .vr360-sky-current,
#vr360Environment .vr360-sky-next{
    transform:none !important;
}


/*
   During the actual dissolve the JavaScript can add
   these helper classes.

   They do not move the panorama.
   They simply document/control transition state.
*/

#vr360Environment.panorama-dissolving{
    pointer-events:none;
}

#vr360Environment.panorama-dissolving
.vr360-sky{
    pointer-events:none !important;
}


/*
   The VR camera must always remain interactive.
*/

#vr360Environment a-camera{
    pointer-events:auto;
}


/* =========================================================
   SUNLIGHT
   ========================================================= */

.sun-rays{
    position:absolute;
    inset:-20%;
    z-index:5;
    pointer-events:none;

    background:
        linear-gradient(
            115deg,
            transparent 22%,
            rgba(255,236,170,.13) 36%,
            rgba(255,244,190,.05) 46%,
            transparent 61%
        ),
        linear-gradient(
            70deg,
            transparent 45%,
            rgba(255,239,180,.07) 55%,
            transparent 67%
        );

    mix-blend-mode:screen;

    animation:
        sunlightMove 14s ease-in-out infinite alternate;
}

@keyframes sunlightMove{

    0%{
        transform:translateX(-3%) scale(1);
        opacity:.35;
    }

    50%{
        opacity:.65;
    }

    100%{
        transform:translateX(3%) scale(1.08);
        opacity:.45;
    }

}


/* =========================================================
   FLOATING AIR PARTICLES
   ========================================================= */

.vr-particles{
    position:absolute;
    inset:0;
    z-index:20;
    pointer-events:none;

    background-image:
        radial-gradient(
            circle,
            rgba(233,173,76,.52) .9px 1px,
            transparent 2px
        );

    background-size:150px 170px;

    opacity:.8;

    animation:
        airMove 10s linear infinite;
}

@keyframes airMove{

    0%{
        transform:translate3d(-2%,2%,0);
    }

    50%{
        transform:translate3d(2%,-2%,0);
    }

    100%{
        transform:translate3d(-2%,2%,0);
    }

}


/* =========================================================
   PARALLAX DEPTH MIST
   ========================================================= */

.depth-mist{
    position:absolute;
    inset:-10%;
    pointer-events:none;

    background:
        radial-gradient(
            ellipse at 30% 70%,
            rgba(200,225,190,.10),
            transparent 60%
        ),
        radial-gradient(
            ellipse at 75% 40%,
            rgba(180,210,170,.08),
            transparent 55%
        );

    filter:blur(6px);
}

.mist-far{
    z-index:3;
    opacity:.55;

    animation:
        driftFar 34s ease-in-out infinite alternate;
}

.mist-near{
    z-index:9;
    opacity:.4;

    animation:
        driftNear 21s ease-in-out infinite alternate;

    filter:blur(3px);
}

@keyframes driftFar{

    0%{
        transform:translate3d(-3%,0,0) scale(1.05);
    }

    100%{
        transform:translate3d(3%,-2%,0) scale(1.15);
    }

}

@keyframes driftNear{

    0%{
        transform:translate3d(2%,1%,0) scale(1);
    }

    100%{
        transform:translate3d(-4%,-1%,0) scale(1.1);
    }

}


/* =========================================================
   FOREST FILM GRAIN
   ========================================================= */

.forest-grain{
    position:absolute;
    inset:0;
    z-index:22;
    pointer-events:none;

    opacity:.05;

    mix-blend-mode:overlay;

    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

    animation:
        grainFlicker .5s steps(2) infinite;
}

@keyframes grainFlicker{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(-1%,1%);
    }

    100%{
        transform:translate(1%,-1%);
    }

}


/* =========================================================
   BIRDS — 2D CSS
   ========================================================= */

.vr-birds{
    position:absolute;
    inset:0;
    z-index:10;
    overflow:hidden;
    pointer-events:none;
}

.bird{
    position:absolute;
    display:block;

    width:35px;
    height:20px;

    color:rgba(10,18,13,.85);

    font-family:Arial,sans-serif;
    font-size:25px;
    font-weight:bold;
    line-height:1;

    opacity:0;

    filter:
        drop-shadow(
            0 2px 3px rgba(0,0,0,.3)
        );

    animation-timing-function:linear;
    animation-iteration-count:infinite;
}

.bird-01{
    top:17%;
    left:-8%;
    animation:birdLeftRight 19s infinite;
}

.bird-02{
    top:25%;
    right:-8%;
    animation:birdRightLeft 22s 3s infinite;
}

.bird-03{
    bottom:25%;
    left:-5%;
    animation:birdDiagonalUp 24s 5s infinite;
}

.bird-04{
    top:10%;
    right:-5%;
    animation:birdDiagonalDown 26s 7s infinite;
}

.bird-05{
    top:31%;
    left:20%;
    animation:birdLeftRight 23s 9s infinite;
}

.bird-06{
    top:20%;
    right:15%;
    animation:birdRightLeft 20s 11s infinite;
}

.bird-07{
    top:38%;
    left:-5%;
    animation:birdLeftRight 28s 4s infinite;
}

.bird-08{
    top:15%;
    right:-5%;
    animation:birdRightLeft 25s 8s infinite;
}

.bird-09{
    top:43%;
    left:10%;
    animation:birdDiagonalUp 30s 13s infinite;
}

.bird-10{
    top:28%;
    right:10%;
    animation:birdDiagonalDown 27s 14s infinite;
}

.bird-11{
    top:12%;
    left:35%;
    animation:birdLeftRight 21s 15s infinite;
}

.bird-12{
    top:35%;
    right:25%;
    animation:birdRightLeft 24s 17s infinite;
}

.bird-13{
    top:22%;
    left:5%;
    animation:birdDiagonalUp 29s 12s infinite;
}

.bird-14{
    top:40%;
    right:5%;
    animation:birdDiagonalDown 31s 10s infinite;
}

.bird-15{
    top:8%;
    left:65%;
    animation:birdLeftRight 26s 18s infinite;
}


/* =========================================================
   BIRD ANIMATIONS
   ========================================================= */

@keyframes birdLeftRight{

    0%{
        transform:
            translate(-10vw,0)
            scale(.45)
            rotate(-8deg);
        opacity:0;
    }

    10%{
        opacity:.8;
    }

    50%{
        transform:
            translate(45vw,-5vh)
            scale(.8)
            rotate(5deg);
    }

    90%{
        opacity:.75;
    }

    100%{
        transform:
            translate(120vw,4vh)
            scale(.35)
            rotate(-5deg);
        opacity:0;
    }

}

@keyframes birdRightLeft{

    0%{
        transform:
            translate(10vw,0)
            scale(.4)
            rotate(8deg);
        opacity:0;
    }

    10%{
        opacity:.8;
    }

    50%{
        transform:
            translate(-45vw,5vh)
            scale(.75)
            rotate(-5deg);
    }

    90%{
        opacity:.7;
    }

    100%{
        transform:
            translate(-120vw,-3vh)
            scale(.3)
            rotate(5deg);
        opacity:0;
    }

}

@keyframes birdDiagonalUp{

    0%{
        transform:
            translate(-10vw,15vh)
            scale(.4);
        opacity:0;
    }

    10%{
        opacity:.75;
    }

    50%{
        transform:
            translate(45vw,-15vh)
            scale(.75);
    }

    90%{
        opacity:.7;
    }

    100%{
        transform:
            translate(115vw,-35vh)
            scale(.3);
        opacity:0;
    }

}

@keyframes birdDiagonalDown{

    0%{
        transform:
            translate(10vw,-15vh)
            scale(.4);
        opacity:0;
    }

    10%{
        opacity:.75;
    }

    50%{
        transform:
            translate(-45vw,15vh)
            scale(.75);
    }

    90%{
        opacity:.7;
    }

    100%{
        transform:
            translate(-115vw,35vh)
            scale(.3);
        opacity:0;
    }

}


/* =========================================================
   CHAKRA FIGURE
   ========================================================= */

#chakra-figure-wrap{

    position:absolute;

    top:40%;

    left:50%;

    transform:
        translate(-50%,-50%);

    width:370px;

    height:370px;

    max-width:70vw;

    max-height:70vh;

    z-index:5;

    margin-bottom:100px;
}

#chakra-human-model{

    position:absolute;

    inset:0;

    width:100%;

    height:140%;

    --poster-color:transparent;

    background-color:transparent;

    object-fit:contain;

    z-index:1;
}

#chakra-figure-canvas{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    background:transparent;

    z-index:2;

    /*
       Allows the 360° A-Frame scene underneath to
       receive drag/look input.
    */

    pointer-events:none;
}


/* =========================================================
   SINGLE CENTER VIBRATION CHAKRA
   ========================================================= */

#singleCenterChakra{

    position:fixed;

    left:50%;
    top:50%;

    width:66px;
    height:66px;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    z-index:15;

    pointer-events:none;

    opacity:0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,1) 0%,
            rgba(253,215,148,.95) 12%,
            rgba(254,179,58,.75) 28%,
            rgba(251,114,35,.573) 48%,
            transparent 72%
        );

    box-shadow:
        0 0 12px rgba(255,255,255,.9),
        0 0 28px rgba(255,212,120,.7),
        0 0 55px rgba(248,112,44,.655);

    transition:
        opacity .4s ease,
        transform .4s ease;
}

#singleCenterChakra.chakra-active{

    opacity:.9;

    animation:
        chakraBreathing 3.5s ease-in-out infinite;
}

#singleCenterChakra.chakra-paused{

    opacity:.55;

    animation:none;
}

#singleCenterChakra.chakra-off{

    opacity:0;

    animation:none;
}

@keyframes chakraBreathing{

    0%{
        transform:
            translate(-50%,-50%)
            scale(.88);

        filter:brightness(.9);
    }

    50%{
        transform:
            translate(-50%,-50%)
            scale(1.12);

        filter:brightness(1.35);
    }

    100%{
        transform:
            translate(-50%,-50%)
            scale(.88);

        filter:brightness(.9);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:720px){

    body{
        overflow:auto;
    }

    .status{
        display:none;
    }

    .hero{
        padding:
            75px
            25px
            300px;
    }

    .hero h1{
        font-size:58px;
    }

    .player{
        padding:
            12px
            18px;
    }

    .progress,
    .vr-progress{
        grid-template-columns:
            42px
            1fr
            42px;
    }

    .audio-controls{
        margin-left:0;
    }

    .audio-controls input[type="range"]{
        width:60px;
    }

    #floatingTime{
        top:12px;
        right:12px;
        font-size:10px;
        padding:6px 12px;
    }

    #chakra-figure-wrap{
        width:320px;
        height:320px;
    }

    #singleCenterChakra{
        width:38px;
        height:38px;
    }

}
#chakra-figure-wrap {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 370px;
  height: 370px;
  max-width: 70vw;
  max-height: 70vh;
  z-index: 5;
  margin-bottom: 100px;
}

#chakra-human-model {
  position:absolute ;
  inset: 0;
  width: 100%;
  height: 140%;
  --poster-color: transparent;
  background-color: transparent;
  object-fit: contain;
  z-index: 1;
 
}

#chakra-figure-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  z-index: 2;

  pointer-events: none; /* lets your 360 drag-to-look keep working underneath */
}

@media (max-width: 600px) {
  #chakra-figure-wrap { width: 320px; height: 320px; }
}
/* sliding  code. */