@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');

body { font-family: 'Nunito', sans-serif; transition: background-color 0.7s; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #bae6fd; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb { background: #334155; }

/* --- UTILS --- */
.page-section { display: none; opacity: 0; transition: opacity 0.4s ease-out; }
.page-section.active { display: block; opacity: 1; }
.modal { transition: opacity 0.3s; opacity: 0; pointer-events: none; z-index: 100; }
.modal.open { opacity: 1; pointer-events: auto; }
.hero-btn { min-width: 180px; display: inline-flex; justify-content: center; align-items: center; }

/* --- THEME 1: BEACH (Light Mode) --- */
.beach-bg {
    position: fixed; inset: 0; z-index: -2;
    background: linear-gradient(to bottom, #7dd3fc 0%, #bae6fd 40%, #fffbeb 80%);
    opacity: 1; transition: opacity 0.7s ease-in-out; pointer-events: none; overflow: hidden;
}
html.dark .beach-bg { opacity: 0; }

/* Sun */
.sun {
    position: absolute; top: 10%; right: 10%; width: 120px; height: 120px;
    background: #FACC15; border-radius: 50%;
    box-shadow: 0 0 60px #fde047;
    animation: float 8s ease-in-out infinite;
}

/* Clouds */
.cloud {
    position: absolute; background: rgba(255,255,255,0.9); border-radius: 100px;
    filter: blur(8px); opacity: 0.9;
    animation: drift 60s linear infinite;
}
.cloud::after, .cloud::before { content: ''; position: absolute; background: inherit; border-radius: 50%; }
.cloud-1 { width: 200px; height: 60px; top: 15%; left: -20%; animation-duration: 45s; }
.cloud-1::after { width: 80px; height: 80px; top: -40px; left: 30px; }
.cloud-1::before { width: 100px; height: 100px; top: -50px; right: 30px; }
.cloud-2 { width: 120px; height: 40px; top: 25%; left: -10%; animation-duration: 35s; animation-delay: -15s; opacity: 0.6; }

/* Ocean Waves (CSS Wave) */
.ocean {
  height: 5%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #0ea5e9;
  z-index: 1;
}

.wave {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 198'%3E%3Cpath fill='%230ea5e9' d='M0 80 Q 400 30 800 80 T 1600 80 L 1600 200 L 0 200 Z' /%3E%3C/svg%3E") repeat-x; 
  position: absolute;
  top: -100px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.wave:nth-of-type(2) {
  top: -110px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 0.5;
}

/* --- THEME 2: NEBULA (Dark Mode) --- */
.nebula-bg {
    position: fixed; inset: 0; z-index: -2;
    background: #020617;
    opacity: 0; transition: opacity 0.7s ease-in-out; pointer-events: none; overflow: hidden;
}
html.dark .nebula-bg { opacity: 1; }

.stars {
    position: absolute; width: 1px; height: 1px; background: transparent;
    box-shadow: 10vw 10vh #fff, 20vw 50vh #fff, 30vw 20vh #fff, 60vw 80vh #fff, 80vw 10vh #fff, 90vw 60vh #fff;
    animation: twinkle 4s ease-in-out infinite;
}
.stars-2 {
    width: 2px; height: 2px;
    box-shadow: 15vw 15vh #fff, 25vw 55vh #fff, 35vw 25vh #fff;
    animation: twinkle 6s ease-in-out infinite 1s;
}
.stars-3 {
    width: 1px; height: 1px;
    box-shadow: 5vw 5vh #fff, 12vw 88vh #fff, 45vw 45vh #fff, 92vw 12vh #fff, 33vw 77vh #fff, 78vw 33vh #fff, 22vw 22vh #fff, 66vw 66vh #fff, 10vw 90vh #fff, 90vw 10vh #fff, 50vw 50vh #fff, 55vw 55vh #fff;
    animation: twinkle 3s ease-in-out infinite 0.5s;
    opacity: 0.8;
}

.nebula-gas {
    position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.4;
    animation: nebula-drift 30s ease-in-out infinite alternate;
}
.gas-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: radial-gradient(circle, #4f46e5 0%, transparent 70%); }
.gas-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, #db2777 0%, transparent 70%); animation-delay: -5s; }
.gas-3 { top: 40%; left: 30%; width: 40vw; height: 40vw; background: radial-gradient(circle, #9333ea 0%, transparent 70%); opacity: 0.2; animation-duration: 40s; }

/* --- ANIMATIONS --- */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes drift { from { transform: translateX(-100%); } to { transform: translateX(100vw); } }
@keyframes wave { 0% { margin-left: 0; } 100% { margin-left: -1600px; } }
@keyframes swell { 0%, 100% { transform: translate3d(0,-25px,0); } 50% { transform: translate3d(0,5px,0); } }
@keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes nebula-drift { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.1) translate(20px, -20px); } }