@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

 to {
    opacity: 1;
    transform: translateY(0);
  }
}

.link-list li {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
  animation-play-state: paused;
  animation-fill-mode: both; /* <--- this keeps it at opacity: 0 until resumed */
}

.link-list li:nth-child(1) {
  animation-delay: 0.1s;
}
.link-list li:nth-child(2) {
  animation-delay: 0.3s;
}
.link-list li:nth-child(3) {
  animation-delay: 0.5s;
}
.link-list li:nth-child(4) {
  animation-delay: 0.7s;
}

#typed-text {
    display: inline-block;
    min-height: 40px;
  }

#subtext {
    display: block;
    min-height: 24px;
  }

.slide-in {
    visibility: hidden;
    animation: slideInRight 0.6s ease-out forwards;
}

.slide-in.slide-in-animate {
    visibility: visible;
}

* {
  box-sizing: border-box;
}

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

body {
  font-family: 'Courier New', Courier, monospace;
  background: #0f0f0f;
  padding: 40px;
  color: #599EE4;
  text-align: center;
  animation: colorGlowPulse 12s infinite alternate ease-in-out;
}

.container {
  max-width: 95%;
  margin: 0 auto;
  padding: 20px;
}

@keyframes colorGlowPulse {
  0% {
    color: #599EE4;
    text-shadow: 0 0 4px rgba(89, 158, 228, 0.6), 0 0 10px rgba(89, 158, 228, 0.4);
  }
  25% {
    color: #ad71a4;
    text-shadow: 0 0 6px rgba(173, 113, 164, 0.8), 0 0 14px rgba(173, 113, 164, 0.6);
  }
  50% {
    color: #89ADDE;
    text-shadow: 0 0 7px rgba(137, 173, 222, 0.9), 0 0 16px rgba(137, 173, 222, 0.7);
  }
  75% {
    color: #008AE8;
    text-shadow: 0 0 8px rgba(0, 138, 232, 0.95), 0 0 20px rgba(0, 138, 232, 0.7);
  }
  100% {
    color: #599EE4;
    text-shadow: 0 0 5px rgba(89, 158, 228, 0.7), 0 0 14px rgba(89, 158, 228, 0.5);
  }
}

h1 { font-size: 28px; margin-bottom: 8px; }

.subtext {
  opacity: 0;
  font-size: 16px;
  font-style: italic;
  margin-bottom: 20px;
  animation: shimmer 1s ease forwards;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

ul { list-style: none; padding-left: 0; display: inline-block; text-align: center; margin-bottom: 80px; }
li { margin-bottom: 30px; }

a { position: relative; display: inline-block; text-decoration: none; color: inherit; font-size: 18px; transition: color 0.3s ease; }
a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 2px; background-color: #ffffff; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
a:hover { color: #ffffff; }
a:hover::after { transform: scaleX(1); }

ion-icon { display: inline-block; width: 1em; height: 1em; vertical-align: middle; margin-right: 8px; font-size: 18px; color: inherit; opacity: 0; transition: opacity 1s ease; }

form { text-align: left; max-width: 400px; margin-left: auto; margin-right: auto; }
label { display: block; margin-bottom: 6px; font-weight: bold; color: inherit; text-shadow: 0 0 4px currentColor; }

input[type="email"], textarea { width: 100%; padding: 10px; border: 2px solid currentColor; border-radius: 6px; background-color: #1a1a1a; color: inherit; font-family: 'Courier New', Courier, monospace; font-size: 16px; box-shadow: 0 0 8px currentColor; transition: border-color 0.3s ease, box-shadow 0.3s ease; resize: vertical; }
input[type="email"]:focus, textarea:focus { outline: none; border-color: #ad71a4; box-shadow: 0 0 12px rgba(173, 113, 164, 0.8); }

button { margin-top: 15px; background-color: #599EE4; border: none; padding: 12px 24px; color: white; font-size: 16px; font-family: 'Courier New', Courier, monospace; border-radius: 8px; cursor: pointer; box-shadow: 0 0 15px rgba(89, 158, 228, 0.8); transition: background-color 0.3s ease, box-shadow 0.3s ease; }
button:hover { background-color: #ad71a4; box-shadow: 0 0 20px rgba(173, 113, 164, 1); }

#oceanCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; background: black; image-rendering: pixelated; }

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.slide-in { display: inline-block; animation: slideInRight 0.6s ease-out forwards; opacity: 0; }
.header-wrapper { min-height: 100px; margin-bottom: 20px; }
.contact-toggle { margin: 20px auto; padding: 10px 20px; background-color: #599EE4; color: white; border: none; font-size: 16px; border-radius: 8px; cursor: pointer; }

.contact-section { max-width: 95%; width: 100%; margin: 0 auto; overflow: hidden; transition: max-height 0.6s ease, opacity 0.6s ease; max-height: 0; opacity: 0; }
.contact-section.open { max-height: 600px; opacity: 1; animation: fadeIn 0.6s ease-in forwards; }

.link-list { margin-bottom: 40px; }
.fade-out { animation: fadeOut 1.5s forwards; }

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); filter: blur(2px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes fadeOut {
  to { opacity: 0; transform: scale(0.95); filter: blur(3px); }
}

.shiny-splash {
  color: #599EE4;
  font-weight: bold;
  background: linear-gradient(90deg, #599EE4, #ad71a4, #89ADDE, #008AE8);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shinyGlow 2s linear infinite, sparkle 1.2s ease-in-out infinite alternate;
  text-shadow: 0 0 5px #599EE4, 0 0 8px #ad71a4, 0 0 12px #008AE8;
}

@keyframes shinyGlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes sparkle {
  from {
    text-shadow: 0 0 4px #fff, 0 0 6px #599EE4, 0 0 10px #ad71a4;
    transform: scale(1);
  }
  to {
    text-shadow: 0 0 8px #fff, 0 0 14px #008AE8, 0 0 20px #89ADDE;
    transform: scale(1.05);
  }
}