/* Set up Orbitron for older browsers (no variable font support), using static files for Regular and Bold */
@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: 'Orbitron';
    src: url('../staticfont/Orbitron-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Orbitron';
    src: url('../staticfont/Orbitron-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
  /* Optionally define other weights if needed for older browsers */
  @font-face {
    font-family: 'Orbitron';
    src: url('../staticfont/Orbitron-Medium.ttf') format('truetype');
    font-weight: 500; /* Medium */
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Orbitron';
    src: url('../staticfont/Orbitron-SemiBold.ttf') format('truetype');
    font-weight: 600; /* SemiBold */
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Orbitron';
    src: url('../staticfont/Orbitron-ExtraBold.ttf') format('truetype');
    font-weight: 800; /* ExtraBold */
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Orbitron';
    src: url('../staticfont/Orbitron-Black.ttf') format('truetype');
    font-weight: 900; /* Black */
    font-style: normal;
    font-display: swap;
  }
}
/* Set up Orbitron for modern browsers (variable font support), all weights */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Orbitron';
    src: url('../variablefont/Orbitron-VariableFont_wght.ttf') format('truetype supports variations'),
    url('../variablefont/Orbitron-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 400 900; /* Range from Regular (400) to Black (900) */
    font-style: normal;
    font-display: swap;
  }
}

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Orbitron', sans-serif;
  overflow: hidden;
}
.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url('../img/LandingPageBG.jpg') no-repeat center center fixed;
  background-size: cover;
  position: relative;
}
/* If you decide to use an AI overlay, uncomment and adjust the path below */
/* .container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('path/to/ai-overlay.png') repeat;
    opacity: 0.1;
    z-index: 1;
} */

@keyframes expandSpacing {
  0% {
    letter-spacing: -0.2em; /* Tight spacing at start */
  }
  100% {
    letter-spacing: 0.05em; /* Slightly wider spacing at end */
  }
}
@keyframes fade {
  0% {
    opacity: 0.4;
    text-shadow: 0 0 10px #ffffff, 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 15px #ffffff, 0 0 30px #00ffff, 0 0 45px #00ffff, 0 0 60px #00ffff;
  }
}
@keyframes zoomIn {
  0% {
    font-size: 0.5em; /* Starting size */
  }
  100% {
    font-size: 3em; /* Final size */
  }
}
/* Updated colorToggle Keyframes to Ensure Background Color Changes */
@keyframes colorToggle {
  0% {
    color: #6c04de; /* Purple */
    transform: scale(1); /* Normal size */
  }
  10% {
    color: #4c038c; /* Intermediate between #6c04de and #33027f */
    background-color: #4c038c;
    transform: scale(1);
  }
  20% {
    color: #33027f;
    background-color: #33027f;
    transform: scale(1);
  }
  30% {
    color: #33415d; /* Intermediate between #33027f and #34603f */
    background-color: #33415d;
    transform: scale(1);
  }
  40% {
    color: #34603f;
    background-color: #34603f;
    transform: scale(1);
  }
  50% {
    color: #4daf5f; /* Intermediate between #34603f and #6cfe7e */
    background-color: #4daf5f;
    transform: scale(1);
  }
  60% {
    color: #6cfe7e;
    background-color: #6cfe7e;
    transform: scale(1);
  }
  70% {
    color: #55f6bd; /* Intermediate between #6cfe7e and #38f1fc */
    background-color: #55f6bd;
    transform: scale(1);
  }
  80% {
    color: #38f1fc;
    background-color: #38f1fc;
    transform: scale(1);
  }
  90% {
    color: #37c3d5; /* Intermediate between #38f1fc and #3795ae */
    background-color: #37c3d5;
    transform: scale(1);
  }
  92% {
    color: #3795ae;
    background-color: #3795ae;
    transform: scale(1.05); /* Start gradual size increase */
  }
  95% {
    color: #4c038c; /* Intermediate color closer to #6c04de */
    background-color: #4c038c;
    transform: scale(1.2); /* Peak size */
  }
  98% {
    color: #4c038c;
    background-color: #4c038c;
    transform: scale(1.05); /* Gradual decrease */
  }
  100% {
    color: #4c038c;
    background-color: #4c038c;
    transform: scale(1); /* Back to normal size */
  }
}

/* Separate Keyframe for Ball Glow Color Changes */


h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 3em;
  text-align: center;
  position: relative;
  z-index: 2;
  margin: 0;
  color: #6c04de; /* Initial color before animations */
  font-weight: normal;
  background: transparent !important; /* Force no background */
  animation:
          zoomIn 2s ease-out forwards, /* One-time zoom effect */
          fade 2s ease-in forwards,    /* One-time fade and glow effect */
          expandSpacing 2s ease-in-out forwards, /* One-time spacing effect */
          colorToggle 12s linear infinite 2s; /* Color cycling starts after entrance animations */
  transition: color 0.3s ease; /* For hover effect */
}
/*  transparency effect running across the h1 text before the color change */

h1:hover {
  color: #e6e6e6; /* Hover color */
  animation-play-state: paused; /* Pause colorToggle on hover for visibility */
}



/* New Pulsating Animation for Attention */
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1); /* Slightly larger */
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}


/* Styles for p element */
p {
  font-size: 2.5em;
  color: #5a53c6;
  text-align: center;
  position: relative;
  z-index: 2;
  margin: 10px 0 0;
  animation: fade 2s ease-in forwards; /* One-time fade for consistency */
  transition: color 0.3s ease;
}
p:hover {
  color: #b3b3b3;
}

/* Canvas-specific styles for explosion effect */
canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 3; /* Ensure canvas is above other elements */
}
/* Background flash effect */
.flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  z-index: 2;
  animation: flashEffect 0.6s ease-out forwards;
}
@keyframes flashEffect {
  0% { opacity: 0; transform: scale(0.5); }
  30% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.5); }
}
/* Additional flash layers for enhanced explosion effect */
.flash2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle, rgba(255, 200, 150, 0.6) 0%, rgba(255, 200, 150, 0) 70%);
  opacity: 0;
  z-index: 2;
  animation: flashEffect 0.8s ease-out forwards 0.2s; /* Slight delay for second flash */
}
.flash3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle, rgba(255, 150, 100, 0.4) 0%, rgba(255, 150, 100, 0) 70%);
  opacity: 0;
  z-index: 2;
  animation: flashEffect 1.0s ease-out forwards 0.4s; /* Further delay for third flash */
}
/* Shock wave ring effects with realistic timing and color */
.shockwave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border: 3px solid rgba(255, 180, 100, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 2;
  animation: waveExpand 2.0s ease-out forwards;
}
.shockwave2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  border: 2px solid rgba(255, 200, 120, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 2;
  animation: waveExpand 2.5s ease-out forwards 0.3s; /* Delayed second wave */
}
.shockwave3 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  border: 1.5px solid rgba(255, 220, 140, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 2;
  animation: waveExpand 3.0s ease-out forwards 0.6s; /* Delayed third wave */
}
@keyframes waveExpand {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(7.0); opacity: 0; }
}
/* Copy right */
/* Ensure the body and html take full height */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* Full viewport height */
  display: flex;
  flex-direction: column;
}

/* Push footer to bottom by making main content grow */
body > *:not(footer) {
  flex-grow: 1;
}
.copyright-footer {
  text-align: center;
  padding: 10px 0; /* Minimal padding for spacing */
  font-size: 10px !important; /* Keep the smaller size */
  color: #333; /* Darker text for readability */
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10; /* Ensure it's above other elements if needed */
}

.copyright-footer p {
  margin: 0;
  line-height: 1.2;
  font-size: 10px !important;
}
/* Media Queries for Smaller Screens */
@media screen and (max-width: 768px) {
  h1 {
    font-size: 2.5em; /* Reduced from 4em for tablets and smaller */
  }
  p {
    font-size: 1.8em; /* Reduced from 2.5em for tablets and smaller */
  }
}
@media screen and (max-width: 480px) {
  h1 {
    font-size: 1.8em; /* Further reduced for mobile phones */
  }
  p {
    font-size: 1.2em; /* Further reduced for mobile phones */
  }
}