/* style.css */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html, body{
height:100%;
width:100%;
margin:0;
overflow:hidden;
background:#000;
}

body{
display:flex;
justify-content:center;
align-items:center;
}

.scene{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background:url("hero.png") center 40% / cover no-repeat;
}
/* smoke */
.smoke{
position:absolute;
width:120%;
height:120%;
top:-10%;
left:-10%;
background:
radial-gradient(circle at 30% 50%, rgba(255,255,255,.05), transparent 40%),
radial-gradient(circle at 70% 40%, rgba(255,255,255,.04), transparent 45%);
filter:blur(80px);
animation:drift 40s infinite alternate ease-in-out;
mix-blend-mode:screen;
opacity:.5;
}

/* front smoke */
.smoke-front{
position:absolute;
width:100%;
height:100%;
background:
radial-gradient(circle at 50% 55%, rgba(255,255,255,.03), transparent 50%);
filter:blur(100px);
animation:slowDrift 60s infinite alternate ease-in-out;
mix-blend-mode:screen;
opacity:.4;
}

/* camera motion */
@keyframes cameraDrift{
0%{transform:scale(1.02) translateX(-0.5%);}
100%{transform:scale(1.04) translateX(0.5%);}
}

@keyframes drift{
0%{transform:translateX(-2%) translateY(-1%);}
100%{transform:translateX(2%) translateY(1%);}
}

@keyframes slowDrift{
0%{transform:translateX(-1%)}
100%{transform:translateX(1%)}
}

/* gold bloom */
.scene::after{
content:"";
position:absolute;
width:100%;
height:100%;
background:
radial-gradient(circle at 50% 28%,
rgba(255,210,120,.08),
transparent 60%);
pointer-events:none;
mix-blend-mode:screen;
}

/* grain */
.grain{
position:absolute;
width:100%;
height:100%;
background:url("https://grainy-gradients.vercel.app/noise.svg");
opacity:.04;
mix-blend-mode:overlay;
pointer-events:none;
}

/* investor portal */
.portal{
position:absolute;
top:18%;
left:50%;
transform:translateX(-50%);
width:260px;
height:260px;
cursor:pointer;
}

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

@media (max-width: 768px){

.scene{
background-position:center 35%;
animation:cameraDriftMobile 80s ease-in-out infinite alternate;
}

/* reduce smoke intensity */
.smoke{
opacity:.35;
filter:blur(60px);
}

.smoke-front{
opacity:.25;
filter:blur(70px);
}

/* smaller investor hotspot */
.portal{
width:180px;
height:180px;
top:22%;
}

/* softer bloom */
.scene::after{
background:
radial-gradient(circle at 50% 30%,
rgba(255,210,120,.05),
transparent 70%);
}

}

/* mobile camera motion */
@keyframes cameraDriftMobile{
0%{
transform:scale(1.08);
}
100%{
transform:scale(1.1);
}
}

@media (max-width:768px){
.smoke,
.smoke-front{
will-change:transform;
}
}

/* ======================
PRELOADER
====================== */

#preloader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
z-index:9999;
transition:opacity 2s ease;
}

.scene{
opacity:0;
transition:opacity 3s ease;

}

/* ======================
AMBIENT LIGHT
====================== */

.ambient-light{
position:absolute;
width:120%;
height:120%;
top:-10%;
left:-10%;
pointer-events:none;
background:
radial-gradient(circle at 50% 50%,
rgba(255,210,120,.12),
transparent 60%);
mix-blend-mode:screen;
transition:background-position .2s ease;
}

body{
animation:filmStart 1.8s ease;
}

@keyframes filmStart{
from{
filter:brightness(.6);
}
to{
filter:brightness(1);
}
}