*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:linear-gradient(

180deg,

#0b3f55 0%,

#0a4b63 25%,

#0a5b73 50%,

#0b3f55 75%,

#06293a 100%

);

color:white;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

.hero{
min-height:100vh;
background:
linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.45)),
url("images/beach.png");
background-size:cover;
background-position:center;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:40px;
}

.overlay{

max-width:900px;

}

.logo{

width:420px;

max-width:90%;

margin-bottom:30px;

animation:logoFloat 4s ease-in-out infinite;

filter:drop-shadow(0 15px 25px rgba(0,0,0,.5));

}

@keyframes logoFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

.hero h1{

font-size:72px;

font-weight:900;

text-shadow:

0 5px 10px rgba(0,0,0,.4),

0 10px 30px rgba(0,0,0,.35);

animation:titleFloat 3s ease-in-out infinite;

}

@keyframes titleFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

.subtitle{

font-size:26px;

margin-bottom:35px;

opacity:.95;

}

.playButton{

display:inline-block;

padding:18px 40px;

background:#2ecc71;

border-radius:50px;

font-size:22px;

font-weight:bold;

color:white;

transition:.3s;

}

.playButton:hover{

background:#27ae60;

transform:scale(1.05);

}

section{

padding:90px 8%;

}

.container{

display:flex;

align-items:center;

gap:60px;

flex-wrap:wrap;

}

.left{

flex:1;

}

.right{

flex:1;

text-align:center;

}

.right img{

max-width:360px;

border-radius:25px;

box-shadow:0 20px 35px rgba(0,0,0,.3);

}

h2{

font-size:45px;

margin-bottom:35px;

text-align:center;

color:#ffe16a;

}

.left h2{

text-align:left;

}

.left p{

font-size:21px;

line-height:1.8;

}
.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

margin-top:40px;

}

.card{

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

backdrop-filter:blur(10px);

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

border:1px solid rgba(255,255,255,.15);

border-radius:25px;

padding:35px;

transition:.4s;

box-shadow:0 15px 40px rgba(0,0,0,.25);

}

.card:hover{

transform:translateY(-15px);

box-shadow:0 30px 60px rgba(0,0,0,.45);

border-color:#ffe16a;

}

.emoji{

font-size:60px;

margin-bottom:20px;

}

.card h3{

font-size:28px;

margin-bottom:15px;

color:#ffe16a;

}

.card p{

line-height:1.7;

font-size:18px;

}

.gallery{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

margin-top:40px;

}

.gallery img{

border-radius:22px;

transition:.4s;

box-shadow:0 15px 45px rgba(0,0,0,.35);

cursor:pointer;

}

.gallery img:hover{

transform:scale(1.08);

box-shadow:0 25px 70px rgba(0,0,0,.55);

}

.charactersGrid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:30px;

margin-top:40px;

}

.character{

background:#155d7b;

padding:25px;

border-radius:25px;

transition:.4s;

overflow:hidden;

}

.character img{

transition:.4s;

}

.character:hover{

background:#1d7398;

transform:translateY(-15px);

}

.character:hover img{

transform:scale(1.12) rotate(-4deg);

}

.character h3{

color:#ffe16a;

font-size:24px;

}

.contactBox{

max-width:700px;

margin:auto;

background:#155d7b;

padding:40px;

border-radius:25px;

text-align:center;

font-size:22px;

line-height:2;

}
.buttons{

display:flex;

justify-content:center;

align-items:center;

gap:25px;

flex-wrap:wrap;

margin-top:40px;

}

.button{

display:inline-block;

padding:18px 38px;

background:#2ecc71;

color:white;

font-size:20px;

font-weight:bold;

border-radius:50px;

transition:.3s;

}

.button:hover{

background:#27ae60;

transform:scale(1.06);

}

footer{

background:linear-gradient(

180deg,

#06293a,

#041d2b

);

padding:70px 20px;

text-align:center;

margin-top:80px;

}

.footerLogo{

width:220px;

margin:auto;

margin-bottom:20px;

}

.footerContent h3{

font-size:34px;

margin-bottom:15px;

color:#ffe16a;

}

.footerContent p{

font-size:18px;

margin:12px 0;

}

footer strong{

color:#ffe16a;

}

@media(max-width:900px){

.hero h1{

font-size:40px;

}

.subtitle{

font-size:20px;

}

.logo{

width:320px;

}

.container{

flex-direction:column;

text-align:center;

}

.left h2{

text-align:center;

}

.left p{

font-size:18px;

}

section{

padding:70px 6%;

}

.gallery{

grid-template-columns:1fr;

}

.cards{

grid-template-columns:1fr;

}

.charactersGrid{

grid-template-columns:repeat(2,1fr);

}

.button{

width:100%;

text-align:center;

}

}

@media(max-width:500px){

.charactersGrid{

grid-template-columns:1fr;

}

.hero{

padding:20px;

}

.hero h1{

font-size:32px;

}

.subtitle{

font-size:18px;

}

}
/* Floating Decorations */

.floating{
position:absolute;
font-size:40px;
pointer-events:none;
animation:float 4s ease-in-out infinite;
z-index:3;
}

.bee1{
top:90px;
left:8%;
animation-delay:0s;
}

.bee2{
top:220px;
right:8%;
animation-delay:1.5s;
}

.leaf1{
bottom:180px;
left:12%;
animation-delay:2s;
}

.star1{
top:120px;
right:22%;
animation-delay:3s;
}

@keyframes float{

0%{
transform:translateY(0) rotate(0deg);
}

50%{
transform:translateY(-18px) rotate(8deg);
}

100%{
transform:translateY(0) rotate(0deg);
}

}
/* ========================= */
/* Scroll Animations */
/* ========================= */

.about,
.features,
.screenshots,
.characters,
.contact,
.links{
opacity:0;
transform:translateY(80px);
transition:1s ease;
}

.showSection{
opacity:1;
transform:translateY(0);
}

.card{
transition:0.4s;
}

.card:hover{
transform:translateY(-15px) scale(1.03);
}

.gallery img{
transition:.4s;
cursor:pointer;
}

.gallery img:hover{
transform:scale(1.06) rotate(1deg);
}

.character{
transition:.4s;
}

.character:hover{
transform:translateY(-12px) scale(1.05);
}

.playButton{
animation:pulse 2s infinite;
}

@keyframes pulse{

0%{
box-shadow:0 0 0 0 rgba(46,204,113,.6);
}

70%{
box-shadow:0 0 0 20px rgba(46,204,113,0);
}

100%{
box-shadow:0 0 0 0 rgba(46,204,113,0);
}

}
.bee{

width:65px;

filter:drop-shadow(0 8px 12px rgba(0,0,0,.35));

pointer-events:none;

}

.beeOrbit{

position:absolute;

z-index:10;

}

.beeOrbit1{

left:15%;

top:18%;

animation:beeFly1 7s ease-in-out infinite;

}

.beeOrbit2{

right:12%;

top:28%;

animation:beeFly2 9s ease-in-out infinite;

}

.beeOrbit3{

left:45%;

top:8%;

animation:beeFly3 6s ease-in-out infinite;

}

@keyframes beeFly1{

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

25%{transform:translate(80px,-30px) rotate(20deg);}

50%{transform:translate(180px,40px) rotate(-15deg);}

75%{transform:translate(90px,90px) rotate(15deg);}

100%{transform:translate(0,0) rotate(0deg);}

}

@keyframes beeFly2{

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

25%{transform:translate(-120px,40px);}

50%{transform:translate(-220px,-40px);}

75%{transform:translate(-80px,-90px);}

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

transform:translate(-50%,-50%) rotate(360deg);

}
}

@keyframes beeFly3{

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

20%{transform:translate(-70px,70px);}

40%{transform:translate(80px,140px);}

60%{transform:translate(150px,30px);}

80%{transform:translate(-40px,-40px);}

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