html, body {

margin:0;
padding:0;

width:100%;
height:100%;

overflow:hidden;

background:black;

cursor:none;

font-family:
Arial,
Helvetica,
sans-serif;

}



/* =========================
   PORTAL LAYER
   behind forest canvas
   ========================= */


#portals {

position:fixed;

inset:0;

z-index:1;

pointer-events:none;

}



.portal {

position:absolute;


width:150px;

height:150px;


border-radius:50%;


background:

rgba(255,255,255,0.92);



color:black;


display:flex;

align-items:center;

justify-content:center;



font-family:

Arial,
Helvetica,
sans-serif;



font-size:11px;


letter-spacing:

0.08em;


text-decoration:none;



opacity:0;



transform:

translate(-50%,-50%)
scale(0.75);



transition:

opacity 1.8s ease,

transform 0.25s ease;



pointer-events:none;


}



.portal.revealed {


opacity:0.88;


transform:

translate(-50%,-50%)
scale(1);



pointer-events:auto;

cursor:pointer;

z-index:10;


}



.portal.revealed:hover {


transform:

translate(-50%,-50%)
scale(1.15);



opacity:1;


}



.portal.revealed:active {


transform:

translate(-50%,-50%)
scale(0.95);


}







/* =========================
   FOREST CANVAS
   ========================= */


canvas {

position:fixed;

top:0;

left:0;


width:100%;

height:100%;


z-index:2;


pointer-events:none;

}







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


.message {

position:fixed;


left:6vw;

top:38vh;


z-index:10;


color:

rgba(230,230,230,0.8);



letter-spacing:

0.12em;


}



h1 {

font-family:

Arial,
Helvetica,
sans-serif;



font-weight:300;



font-size:

clamp(
25px,
3vw,
50px
);



line-height:1.5;



margin:0;


}



.char {

display:inline-block;

position:relative;

white-space:pre;


}



p {

margin-top:45px;


font-size:14px;


letter-spacing:

0.4em;


}







/* =========================
   CURSOR
   ========================= */


#cursor {


position:fixed;


width:14px;

height:14px;


border-radius:50%;



background:


radial-gradient(

circle,

white 0%,

rgba(255,255,255,0.9) 35%,

transparent 75%

);




box-shadow:


0 0 15px white,

0 0 35px rgba(255,255,255,0.9);




pointer-events:none;



z-index:100;



transform:

translate(-50%,-50%);



animation:

pulse 3s infinite;


}





@keyframes pulse {


0%,100% {


opacity:0.75;


}



50% {


opacity:1;


}


}

@media (max-width:768px){


.portal {

width:85px;

height:85px;

font-size:10px;


}



}

@media (max-width:768px){


.portal.revealed:hover {

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


}


.portal.revealed:active {

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


}


}