@import url('https://fonts.googleapis.com/css2?family=Poiret+One&family=Source+Sans+Pro:wght@300&display=swap');

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

body {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at bottom, #1b2735, #090a0f);
    font-family: 'Source Sans Pro', sans-serif;
    color: #ecf0f1;
    position: relative;
}

/* Dark Overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}


/* Stars Layers */
.stars, .stars2, .stars3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 0;
    overflow: hidden;
}

.stars {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 
        500px 800px #FFF, 200px 1300px #FFF, 1200px 600px #FFF,
        900px 1100px #FFF, 300px 500px #FFF, 400px 1000px #FFF,
        800px 1400px #FFF, 1300px 700px #FFF, 600px 2000px #FFF;
    animation: star-animation 60s linear infinite;
}

.stars2 {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 
        800px 300px #FFF, 400px 1500px #FFF, 1500px 1200px #FFF,
        600px 1700px #FFF, 1000px 900px #FFF, 500px 1600px #FFF;
    animation: star-animation2 90s linear infinite;
}

.stars3 {
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 
        1000px 700px #FFF, 300px 1800px #FFF, 1400px 1000px #FFF,
        200px 1500px #FFF, 1100px 1300px #FFF, 700px 1200px #FFF;
    animation: star-animation3 120s linear infinite;
}


/* Star Animations */
@keyframes star-animation {
    0% { transform: translateY(0); }
    100% { transform: translateY(-1500px); }
}

@keyframes star-animation2 {
    0% { transform: translateY(0); }
    100% { transform: translateY(-2000px); }
}

@keyframes star-animation3 {
    0% { transform: translateY(0); }
    100% { transform: translateY(-2500px); }
}

/* Main Content Styling */
.main {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.title {
    font-family: 'Poiret One', cursive;
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: fadeIn 2s ease-out;
}

.sub-title {
    font-size: 1.5rem;
    border-top: 1px solid #fff;
    padding-top: 1rem;
    animation: fadeIn 3s ease-out;
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Button Styling */
.oval-button {
    margin-top: 20px;
    padding: 12px 24px;
    border: 2px solid #ecf0f1;
    background: none;
    color: #ecf0f1;
    font-size: 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

.oval-button:hover {
    background-color: #ecf0f1;
    color: #1b2735;
    transform: translateY(-5px);
}

.text-button {
            margin: 0;
            padding: 0.3em 1em;
            font-size: 24px;
            font-family: 'Fruktur', cursive;
            background: none;
            border: none;
            color: inherit;
            cursor: pointer;
            text-decoration: none;
            transition: transform 0.2s;
            position: absolute;
        }
        .text-button:hover {
            transform: scale(1.1);
        }
        .nav-button {
            top: 25px;
        }
        .home-button {
            left: -400px;
        }
        .projects-button {
            left: 50%;
            
        }
        .contact-button {
            right: -400px;
        }

        @media (max-width: 700px) {
            .nav-button {
                position: static;
                display: block;
                margin: 10px auto;
                width: 90%;
                max-width: 300px;
                font-size: 20px;
            }
            .home-button,
            .projects-button,
            .contact-button {
                left: auto !important;
                right: auto !important;
                transform: none !important;
            }
            section.contact {
                text-align: center;
            }
        }
        .mobile-menu-icon {
            display: none;
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 1001;
            background: none;
            border: none;
            font-size: 2em;
            color: inherit;
            cursor: pointer;
        }
        .mobile-dropdown {
            display: none;
            position: absolute;
            top: 60px;
            right: 20px;
            background: rgba(30,30,30,0.98);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.2);
            z-index: 1000;
            min-width: 160px;
            padding: 10px 0;
        }
        .mobile-dropdown a {
            display: block;
            padding: 12px 24px;
            color: inherit;
            text-decoration: none;
            font-family: 'Fruktur', cursive;
            font-size: 20px;
            transition: background 0.2s;
        }
        .mobile-dropdown a:hover {
            background: rgba(255,255,255,0.08);
        }
        @media (max-width: 700px) {
            .mobile-menu-icon {
                display: block;
            }
            .nav-button {
                display: none !important;
            }
        }
        .intro {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 40px;
  color: #fff;
  font-family: 'Fruktur', cursive;
}

.intro h1 {
  font-size: 2.2rem;
  color: #fdfdfd;
  white-space: nowrap;
  border-right: 2px solid #00ffff;
  overflow: hidden;
  width: 0;
  animation: typing 3s steps(30, end) forwards, blink 0.8s step-end infinite;
  text-align-last: center;
}

.intro p {
  font-size: 1.1rem;
  color: #bbb;
  margin-top: 15px;
  font-style: italic;
}

@keyframes typing {
  from { width: 0; }
  to { width: 18ch; } /* Adjust this depending on how long your name/text is */
}

@keyframes blink {
  from, to { border-color: transparent; }
  50% { border-color: #00ffff; }
}

.logo-background {
      position: absolute;
      width: 150px;
      height: auto;
      z-index: 9999;
      opacity: 0.8;
      cursor: pointer;
      filter: drop-shadow(0 0 10px #0ff) brightness(1.2) contrast(1.1);
      animation: bounceAround 12s linear infinite;
      pointer-events: auto;
      transform: translate(-50%, -50%); /* centers ball from its top-left position */
    }

    @keyframes bounceAround {
  0%   { top: 5vh; left: 5vw; }
  25%  { top: 10vh; left: 85vw; }
  50%  { top: 80vh; left: 75vw; }
  75%  { top: 60vh; left: 10vw; }
  100% { top: 5vh; left: 5vw; }
}


    .exploding-star {
      position: absolute;
      width: 4px;
      height: 4px;
      background-color: white;
      border-radius: 50%;
      opacity: 0.8;
      pointer-events: none;
      z-index: 9999;
      animation: explodeStar 1s ease-out forwards;
    }

    @keyframes explodeStar {
      to {
        transform: translate(var(--x), var(--y));
        opacity: 0;
      }
    }


.glow-line-wrapper {
  position: relative;
  width: 60%;
  margin: 10px auto;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.glow-line {
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, transparent, #0ff, transparent);
  opacity: 0;
  pointer-events: none;
  animation: none;
  transition: opacity 0.2s ease;
}

.glow-line-wrapper:hover .glow-line {
  opacity: 1;
}

.glow-line::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0ff;
  box-shadow: 0 0 8px #0ff, 0 0 15px #0ff;
  pointer-events: none;
  transform: translateX(var(--x, 0));
  transition: transform 0.05s linear;
}
.custom-cursor {
  cursor: none; /* hide default cursor */
}

.cursor-dot,
.cursor-trail {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background: #00ffff;
  box-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff;
}

.cursor-trail {
  width: 20px;
  height: 20px;
  background: rgba(0, 255, 255, 0.2);
  box-shadow: 0 0 15px #00ffff, 0 0 25px #00ffff;
  transition: transform 0.1s ease-out;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-footer {
  margin-top: auto;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #19dbf5);
  border-radius: 30%;
  pointer-events: none;
  animation: explode 0.6s ease-out forwards;
  opacity: 0.8;
  transform: rotate(var(--angle));
}
@keyframes explode {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), var(--y)) scale(0.3);
    opacity: 0;
  }
}