@font-face {
    font-family: 'Eurostile';
    src: url('../font/Eurostile-Bold.eot');
    src: url('../font/Eurostile-Bold.eot?#iefix') format('embedded-opentype'),
        url('../font/Eurostile-Bold.woff2') format('woff2'),
        url('../font/Eurostile-Bold.woff') format('woff'),
        url('../font/Eurostile-Bold.ttf') format('truetype'),
        url('../font/Eurostile-Bold.svg#Eurostile-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Eurostile';
    src: url('../font/Eurostile-Black.eot');
    src: url('../font/Eurostile-Black.eot?#iefix') format('embedded-opentype'),
        url('../font/Eurostile-Black.woff2') format('woff2'),
        url('../font/Eurostile-Black.woff') format('woff'),
        url('../font/Eurostile-Black.ttf') format('truetype'),
        url('../font/Eurostile-Black.svg#Eurostile-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Eurostile';
    src: url('../font/Eurostile-Medium.eot');
    src: url('../font/Eurostile-Medium.eot?#iefix') format('embedded-opentype'),
        url('../font/Eurostile-Medium.woff2') format('woff2'),
        url('../font/Eurostile-Medium.woff') format('woff'),
        url('../font/Eurostile-Medium.ttf') format('truetype'),
        url('../font/Eurostile-Medium.svg#Eurostile-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Eurostile';
    src: url('../font/Eurostile-Regular.eot');
    src: url('../font/Eurostile-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/Eurostile-Regular.woff2') format('woff2'),
        url('../font/Eurostile-Regular.woff') format('woff'),
        url('../font/Eurostile-Regular.ttf') format('truetype'),
        url('../font/Eurostile-Regular.svg#Eurostile-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EurostileExtended';
    src: url('../font/EurostileExtended-Black.eot');
    src: url('../font/EurostileExtended-Black.eot?#iefix') format('embedded-opentype'),
        url('../font/EurostileExtended-Black.woff2') format('woff2'),
        url('../font/EurostileExtended-Black.woff') format('woff'),
        url('../font/EurostileExtended-Black.ttf') format('truetype'),
        url('../font/EurostileExtended-Black.svg#EurostileExtended-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EurostileExtended';
    src: url('../font/EurostileExtended-Bold.eot');
    src: url('../font/EurostileExtended-Bold.eot?#iefix') format('embedded-opentype'),
        url('../font/EurostileExtended-Bold.woff2') format('woff2'),
        url('../font/EurostileExtended-Bold.woff') format('woff'),
        url('../font/EurostileExtended-Bold.ttf') format('truetype'),
        url('../font/EurostileExtended-Bold.svg#EurostileExtended-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EurostileExtended';
    src: url('../font/EurostileExtended-Regular.eot');
    src: url('../font/EurostileExtended-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/EurostileExtended-Regular.woff2') format('woff2'),
        url('../font/EurostileExtended-Regular.woff') format('woff'),
        url('../font/EurostileExtended-Regular.ttf') format('truetype'),
        url('../font/EurostileExtended-Regular.svg#EurostileExtended-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}





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

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #020313;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

/* Galaxy container fills the viewport */
.galaxy {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, #17286f66, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(8, 180, 232, 0.3), transparent 55%),
    radial-gradient(
      circle at 50% 40%,
      rgba(255, 255, 255, 0.1),
      transparent 60%
    ),
    #020313;
}

/* Layers for stars & shooting stars */
#stars-layer,
#shooting-stars-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Individual star wrapper: handles drifting/panning */
.star {
  position: absolute;
  animation-name: star-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Inner visible star: twinkling/pulsating - small glowing dots */
.star-inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0, #bbdefb 40%, transparent 70%);
  box-shadow:
    0 0 3px rgba(255, 255, 255, 0.9),
    0 0 6px rgba(187, 222, 251, 0.5);
  opacity: 0;
  animation-name: star-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Shooting star as a thin streak line (realistic meteor) */
.shooting-star {
  position: absolute;
  width: 180px;
  height: 2px;
  border-radius: 999px;
  /* Head is on the RIGHT (bright), tail on the LEFT (faint) */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.95)
  );
  filter: blur(0.4px);
  /* Origin at the bright "head" so motion goes head-first,
         tail trails behind correctly */
  transform-origin: right center;
  /* custom properties from JS: --shoot-angle, --shoot-distance */
  animation-name: shooting-star-move;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* --- Keyframes --- */

/* Twinkle / pulse effect */
@keyframes star-twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.7);
  }
  40% {
    opacity: 1;
    transform: scale(1.3);
  }
  60% {
    opacity: 0.8;
    transform: scale(1);
  }
}

/* Slow drift/panning for star wrappers */
@keyframes star-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(var(--drift-x, 40px), var(--drift-y, 30px), 0);
  }
}

/* Shooting star movement – streak slides along its own direction
       with the bright head leading and the tail trailing */
@keyframes shooting-star-move {
  0% {
    opacity: 0;
    transform: rotate(var(--shoot-angle, 30deg)) translateX(0) scaleX(0.2);
  }
  10% {
    opacity: 1;
    transform: rotate(var(--shoot-angle, 30deg)) translateX(0) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--shoot-angle, 30deg))
      translateX(var(--shoot-distance, 500px)) scaleX(0.9);
  }
}



.landing-frame {
    display:flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;

    padding:2rem;


}


.panel {
    
    background: #01021763;
    backdrop-filter: blur(2px);
    border-radius:2rem;
    padding:4rem;
}


.logo {
    width:100%;
    max-width:42rem;
}

.landing-frame h1 {
    font-size: 2.5rem;
    color: #fff;
    text-align: center;
    font-family: 'EurostileExtended', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-transform:uppercase
}