@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,700;6..96,800;6..96,900&display=swap');

html,
body{

margin:0;
width:100%;
height:100%;
overflow:hidden;
background:black;

}

body{
    position:fixed;
    inset:0;
}

#scene {
    position:relative;
    width:100%;
    height:100dvh;
    overflow:hidden;
}

/* ========================= */



#mist1,
#mist2{

position:absolute;

inset:-15%;

background:

radial-gradient(circle,
rgba(80,255,170,.08),
transparent 65%);

filter:blur(80px);

mix-blend-mode:screen;

}

#mist1{

animation:

mistA 26s linear infinite;

}

#mist2{

animation:

mistB 40s linear infinite reverse;

opacity:.6;

}

/* ========================= */

#particles{

position:absolute;

inset:0;

pointer-events:none;

}

/* ========================= */

#vignette{

position:absolute;

inset:0;

background:

radial-gradient(circle,
transparent 45%,
rgba(0,0,0,.72));

}

/* ========================= */

@keyframes fadeIn{

to{

opacity:1;

}

}

@keyframes drift {

    0% {
        transform:
            translate(-50%, -50%)
            scale(1.00)
            translateX(-0.5%)
            translateY(-0.5%);
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(1.03)
            translateX(0.5%)
            translateY(0.5%);
    }

}

@keyframes mistA{

0%{

transform:
translate(-6%,0);

}

100%{

transform:
translate(6%,0);

}

}

@keyframes mistB{

0%{

transform:
translate(5%,5%);

}

100%{

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

}

}


/* ========================= */
/* TEXT LAYER                */
/* ========================= */

#content{
 /*   background: rgba(255, 0, 0, 0.3);
    border: 2px solid red;   */
    position:absolute; 


    left:1%;
    right:1%;
    top:5%;
    bottom:5%;
justify-content:center;

    align-items:center;
    pointer-events:none;

    /* REMOVE THESE */
    /* display:flex; */
    /* justify-content:center; */
    /* align-items:center; */

}

#content2{

    position:absolute;

    left:17%;
    right:17%;

    top:18%;
    bottom:18%;

    display:flex;

    justify-content:center;

    align-items:center;

    pointer-events:none;

}




.paragraph_blue{
    position:absolute;

    left:50%;
    transform:translate(-50%,15px);

    box-sizing:border-box;

    color:#dffcff;

    font-family:"Arial", sans-serif;
    font-weight:600;

    font-size:clamp(22px,2.2vw,36px);
    line-height:1.3;

    text-align:center;

    letter-spacing:.045em;

    opacity:0;
    filter:blur(8px);

    /*
       BLUE HOLOGRAPHIC / 3D EFFECT
    */
    -webkit-text-stroke: .6px rgba(110,235,255,.9);

    text-shadow:

        /* brilliant upper highlight */
        0 -1px 0 #ffffff,
        0 -2px 2px #bffaff,

        /* cyan bevel */
        1px 1px 0 #65eaff,
        2px 2px 0 #22b9e8,

        /* deep blue extrusion */
        3px 3px 0 #0875b7,
        4px 4px 1px #06477d,
        6px 6px 3px rgba(0,20,60,.9),

        /* huge atmospheric glow */
        0 0 5px #66eeff,
        0 0 15px rgba(40,210,255,.9),
        0 0 30px rgba(20,130,255,.65),
        0 0 55px rgba(0,100,255,.4);

    transition:
        opacity 1.5s ease,
        transform 1.5s ease,
        filter 1.5s ease;
}



.paragraph_gold{
    position:absolute;
    left:50%;
    transform:translate(-50%,15px);

    box-sizing:border-box;

    font-family:"Garamond", sans-serif;
    font-weight:700;

    font-size:clamp(24px,2.6vw,42px);
    line-height:1.3;

    text-align:center;
    letter-spacing:.035em;

    color:#ffe9a3;

    opacity:0;
    filter:blur(8px);

    /*
       HEAVY EMBOSSED GOLD
    */
 /*   -webkit-text-stroke:1px #5a3500;   */

-webkit-text-stroke:1.2px #4a2800;


    text-shadow:

        /* bright upper bevel */
        -1px -1px 0 #fffde0,
        -2px -2px 1px #fff3a8,

        /* golden face */
        1px 1px 0 #f5c84c,

        /* lower bevel */
        2px 2px 0 #b97808,
        3px 3px 0 #805000,

        /* deep raised extrusion */
        4px 4px 0 #573400,
        5px 5px 1px #362000,
        7px 7px 4px rgba(0,0,0,.85),

        /* golden aura */
        0 0 6px rgba(255,220,100,.9),
        0 0 16px rgba(255,190,40,.7),
        0 0 32px rgba(255,160,20,.45);

    transition:
        opacity 1.5s ease,
        transform 1.5s ease,
        filter 1.5s ease;
}


.paragraph_old{
    position:absolute;
    left:50%;
    transform:translate(-50%,15px);

    box-sizing:border-box;

    font-family:"garamond",sans-serif;

    /* THICK MAIN LETTERS */
    font-weight:800;

    font-size:clamp(24px,2.6vw,42px);
    line-height:1.3;
    text-align:center;
    letter-spacing:.025em;

    /* STRONG GOLD FACE */
    color:#ffe9a0;

    opacity:0;
    filter:blur(8px);

    /* clean dark edge */
    -webkit-text-stroke:1px #4b2b00;

    text-shadow:

        /* ===== BRIGHT FACE / INNER BEVEL ===== */
        -1px -1px 0 #ffffff,
        0 -1px 0 #fff8cf,

        /* ===== GOLD LOWER BEVEL ===== */
        1px 1px 0 #e4aa24,

        /* ===== DEEP EMBOSS ===== */
        2px 2px 0 #9b6205,
        3px 3px 0 #684000,
        5px 5px 1px #3b2200,

        /* ===== HEAVY SHADOW ===== */
        7px 7px 4px rgba(0,0,0,.75),

        /* ===== GOLD GLOW ===== */
        0 0 5px rgba(255,225,120,.9),
        0 0 14px rgba(255,195,55,.65),
        0 0 28px rgba(255,160,20,.35);

    transition:
        opacity 1.5s ease,
        transform 1.5s ease,
        filter 1.5s ease;
}



.paragraph {
    position: absolute;
    left: 50%;
    transform: translate(-50%,15px);

    box-sizing: border-box;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 700;

    font-size: clamp(22px, 2.4vw, 40px);
    line-height: 1.35;
    letter-spacing: 0.015em;

    color: #f4df9b;

    -webkit-text-stroke: 0;

    text-shadow:
        /* strong dark separation */
        0 0 3px #000,
        0 0 6px #000,

        /* outer dark halo */
        0 0 10px rgba(0,0,0,.95),
        0 0 16px rgba(0,0,0,.85),

        /* existing subtle depth */
        0 2px 3px rgba(0,0,0,.8),
        0 5px 12px rgba(0,0,0,.5),

        /* very subtle gold atmosphere */
        0 0 12px rgba(216,184,106,.18);

    opacity: 0;
    filter: blur(8px);

    transition:
        opacity 1.5s ease,
        transform 1.5s ease,
        filter 1.5s ease;
}



.paragraph.visible{
    opacity:1;
    transform:translate(-50%,0);
    filter:blur(0) brightness(1.05);
}




.paragraph_old.visible{
    opacity:1;

    transform:translate(-50%,0);

    filter:blur(0) brightness(1.08);

    animation:goldEmboss 4s ease-in-out infinite;
}

.paragraph_blue.visible{
    opacity:1;

    transform:translate(-50%,0);

    filter:
        blur(0)
        brightness(1.15);

    animation: cosmicTextPulse 4s ease-in-out infinite;
}


@keyframes goldEmboss{

    0%,100%{
        filter:blur(0) brightness(1);
    }

    50%{
        filter:blur(0) brightness(1.18);
    }

}



@keyframes cosmicTextPulse{

    0%,100%{
        text-shadow:
            0 -1px 0 #ffffff,
            0 -2px 2px #bffaff,
            1px 1px 0 #65eaff,
            2px 2px 0 #22b9e8,
            3px 3px 0 #0875b7,
            4px 4px 1px #06477d,
            6px 6px 3px rgba(0,20,60,.9),
            0 0 8px #66eeff,
            0 0 20px rgba(40,210,255,.9),
            0 0 40px rgba(20,130,255,.65);
    }

    50%{
        text-shadow:
            0 -1px 0 #ffffff,
            0 -2px 3px #e8ffff,
            1px 1px 0 #9af5ff,
            2px 2px 0 #42d8ff,
            3px 3px 0 #108ed0,
            4px 4px 1px #07558e,
            6px 6px 3px rgba(0,20,60,.9),
            0 0 12px #9af7ff,
            0 0 30px rgba(40,230,255,1),
            0 0 65px rgba(20,130,255,.8);
    }

}


#artboard0 {

    position:absolute;

    left:50%;
    top:50%;

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

	width:min(96vw, calc(100dvh * 1534 / 1024));
	
    aspect-ratio:1534 / 1024;

    animation:drift 60s ease-in-out infinite alternate;

    z-index:100;
}


#artboard{

    position:absolute;

    left:50%;
    top:50%;

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

    width:min(96vw, 96vh);

    aspect-ratio:1534 / 1024;

}



/*


#artboard{
    outline: 3px solid lime;
    position:absolute;

    left:50%;
    top:50%;

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

    width:min(96vw, calc(96vh * 1534 / 1024));

    aspect-ratio:1534 / 1024;

    animation:drift 60s ease-in-out infinite alternate;
    z-index:100;
}
*/


#background{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;

    opacity:0;

    animation:fadeIn 4s ease forwards;

}

@media (max-width:700px){

    #background{
        width:110%;
        height:110%;

        object-fit:cover;
        object-position:center center;

        transform:translate(-5%,-5%);
    }

}



#mistBack,
#mistFront,
#particles,
#glow,
#vignette{

    pointer-events:none;

}





#galleryButton {
    position: absolute;
    left: 80%;
    top: 80%;
    width: 50%;
    height: 18%;

    transform: translateX(-50%);

    z-index: 9999;
    cursor: pointer;

    background: transparent;
    border: none;

    pointer-events: auto;
	font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 700;

    font-size:clamp(32px,3.4vw,58px);
    line-height:1.25;
    text-align:center;

    letter-spacing:.01em;

    color: #f4df9b;

    -webkit-text-stroke: 0;

    text-shadow:
        /* strong dark separation */
        0 0 3px #000,
        0 0 6px #000,

        /* outer dark halo */
        0 0 10px rgba(0,0,0,.95),
        0 0 16px rgba(0,0,0,.85),

        /* existing subtle depth */
        0 2px 3px rgba(0,0,0,.8),
        0 5px 12px rgba(0,0,0,.5),

        /* very subtle gold atmosphere */
        0 0 12px rgba(216,184,106,.18);

    
    opacity:1;
    filter:blur(0);

    transition:
        opacity 1.5s ease,
        transform 1.5s ease,
        filter 1.5s ease;
}




#galleryButton,
#galleryButton:link,
#galleryButton:visited,
#galleryButton:hover,
#galleryButton:focus,
#galleryButton:active {
    color: #ffe9a0;
    text-decoration: none;
    outline: none;
}



@media (max-width:700px){

    .paragraph{

        width:78% !important;

        font-size:clamp(24px,6vw,32px);

        line-height:1.25;

    }

    #artboard {
 /*   outline: 5px solid lime !important;  */

    }

    #content {
/*	border: 5px solid red !important;    */
    }
	
	#galleryButton {
    position: absolute;
    left: 50%;
    top: 92%;
    width: 50%;
    height: 18%;
    font-size:clamp(32px,8vw,60px);

}
}



.gold{
    color:#F7E4A8;
}

.glow{
    text-shadow:0 0 15px rgba(255,235,150,.8);
}

.big{
    font-size:1.2em;
}

.small{
    font-size:.85em;
}

.italic{
    font-style:italic;
}

.bold{
    font-weight:700;
}

.sacred{
    color:#fff4c8;
    font-weight:600;
    letter-spacing:.04em;
    text-shadow:0 0 12px rgba(255,230,170,.6);
}

/* =========================================================
   VIDEO TRANSITION / FULLSCREEN PRESENTATION
   ========================================================= */

#videoOverlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    place-items: center;
    background: #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 900ms ease, visibility 0s linear 900ms;
}

#videoOverlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 900ms ease;
}

#transitionVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

#skipButton,
#soundButton {
    position: absolute;
    z-index: 2;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 999px;
    background: rgba(0,0,0,.42);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: clamp(13px, 1.1vw, 16px);
    line-height: 1;
    letter-spacing: .08em;
    padding: 10px 16px;
    min-height: 42px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 350ms ease, transform 350ms ease, background 200ms ease;
}

#skipButton {
    right: clamp(16px, 2.5vw, 40px);
    bottom: max(18px, env(safe-area-inset-bottom));
}

#soundButton {
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: translate(-50%, 8px);
    display: none;
}

#skipButton.is-visible,
#soundButton.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#soundButton.is-visible {
    transform: translate(-50%, 0);
}

#skipButton:hover,
#soundButton:hover {
    background: rgba(255,255,255,.14);
}

#skipButton:focus-visible,
#soundButton:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}







/* =========================================================
   AMBIENT MUSIC TOGGLE
   ========================================================= */

/* =========================================================
   ALWAYS-VISIBLE AMBIENT MUSIC TOGGLE
   ========================================================= */

#musicToggle {
    position: fixed;

    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));

    z-index: 25000;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    appearance: none;
    -webkit-appearance: none;

    min-height: 42px;
    padding: 10px 16px;

    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.35);

    background: rgba(0,0,0,.48);

    color: rgba(255,255,255,.55);

    font-family: Arial, sans-serif;
    font-size: clamp(13px, 1.1vw, 16px);
    line-height: 1;
    letter-spacing: .08em;

    cursor: pointer;

    opacity: 1;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    -webkit-tap-highlight-color: transparent;

    transition:
        color 250ms ease,
        background 250ms ease,
        border-color 250ms ease,
        box-shadow 300ms ease,
        transform 150ms ease;
}


/* ---------------------------------------------------------
   MUSIC ICON
   --------------------------------------------------------- */

#musicToggle .musicIcon {
    font-size: 20px;
    line-height: 1;
}


/* =========================================================
   MUSIC ON
   ========================================================= */

#musicToggle.is-on {

    color: #efffc7;

    border-color: rgba(205,255,115,.8);

    background:
        rgba(20,35,8,.62);

    box-shadow:
        0 0 6px rgba(210,255,120,.55),
        0 0 16px rgba(180,255,80,.35),
        0 0 32px rgba(150,255,60,.16);

}


/* glowing music symbol */

#musicToggle.is-on .musicIcon {

    color: #dfff91;

    text-shadow:
        0 0 5px rgba(220,255,140,1),
        0 0 12px rgba(180,255,80,.8),
        0 0 22px rgba(150,255,60,.5);

}


/* =========================================================
   MUSIC OFF
   ========================================================= */

#musicToggle:not(.is-on) {

    color: rgba(255,255,255,.48);

    border-color: rgba(255,255,255,.25);

    background: rgba(0,0,0,.42);

    box-shadow: none;

}


#musicToggle:not(.is-on) .musicIcon {

    opacity: .55;

    text-shadow: none;

}


/* =========================================================
   HOVER / PRESS
   ========================================================= */

#musicToggle:hover {

    color: #fff;

    border-color: rgba(255,255,255,.65);

    background: rgba(255,255,255,.12);

}


#musicToggle:active {

    transform: scale(.95);

}


#musicToggle:focus-visible {

    outline: 2px solid #fff;

    outline-offset: 3px;

}


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

@media (max-width:700px) {

    #musicToggle {

        top: max(14px, env(safe-area-inset-top));
        right: max(14px, env(safe-area-inset-right));

        min-height: 40px;

        padding: 9px 14px;

        font-size: 13px;

    }

}







#finalFade {
    position: fixed;
    inset: 0;
    z-index: 30000;
    background: #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 1000ms ease, visibility 0s linear 1000ms;
}

#finalFade.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 1000ms ease;
}

@media (max-width: 700px) {
    #skipButton {
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        padding: 9px 14px;
        min-height: 40px;
    }

    #soundButton {
        bottom: max(14px, env(safe-area-inset-bottom));
    }
}

/* Respect reduced-motion preferences without removing the video sequence. */
@media (prefers-reduced-motion: reduce) {
    #videoOverlay,
    #finalFade {
        transition-duration: 500ms;
    }
}


/* =========================================================
   UPDATED AMBIENT MUSIC TOGGLE
   Always visible, highlighted when ON, fades on page exit.
   ========================================================= */

#musicToggle {
    position: fixed;
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    z-index: 25000;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    appearance: none;
    -webkit-appearance: none;

    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.48);

    color: rgba(255,255,255,.55);
    font-family: Arial, sans-serif;
    font-size: clamp(13px, 1.1vw, 16px);
    line-height: 1;
    letter-spacing: .08em;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    opacity: 0;
    transform: translateY(-8px);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        opacity 700ms ease,
        transform 700ms ease,
        color 250ms ease,
        background 250ms ease,
        border-color 250ms ease,
        box-shadow 300ms ease;
}

#musicToggle.is-ready {
    opacity: 1;
    transform: translateY(0);
}

#musicToggle .musicIcon {
    font-size: 20px;
    line-height: 1;
}

#musicToggle.is-on {
    color: #efffc7;
    border-color: rgba(205,255,115,.8);
    background: rgba(20,35,8,.62);
    box-shadow:
        0 0 6px rgba(210,255,120,.55),
        0 0 16px rgba(180,255,80,.35),
        0 0 32px rgba(150,255,60,.16);
}

#musicToggle.is-on .musicIcon {
    color: #dfff91;
    text-shadow:
        0 0 5px rgba(220,255,140,1),
        0 0 12px rgba(180,255,80,.8),
        0 0 22px rgba(150,255,60,.5);
}

#musicToggle:not(.is-on) {
    color: rgba(255,255,255,.48);
    border-color: rgba(255,255,255,.25);
    background: rgba(0,0,0,.42);
    box-shadow: none;
}

#musicToggle:not(.is-on) .musicIcon {
    opacity: .55;
    text-shadow: none;
}

#musicToggle:hover {
    color: #fff;
    border-color: rgba(255,255,255,.65);
    background: rgba(255,255,255,.12);
}

#musicToggle:active {
    transform: scale(.95);
}

#musicToggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

#musicToggle.is-leaving {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

@media (max-width:700px) {
    #musicToggle {
        top: max(14px, env(safe-area-inset-top));
        right: max(14px, env(safe-area-inset-right));
        min-height: 40px;
        padding: 9px 14px;
        font-size: 13px;
    }
}




#videoOverlay {
    z-index: 20000;
}

#musicToggle {
    z-index: 25000;
}

#finalFade {
    z-index: 30000;
}