* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  background: black;
  color: white;
  font-family: Arial, sans-serif;
  scroll-behavior: smooth;
}

/* HERO */

.hero {
  position: relative;

  width: 100%;
  min-height: 100vh;

  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;

  background:
    radial-gradient(circle at center,
    #071426 0%,
    #000000 60%);
}

/* VIDEO */

.hero-video {
  position: absolute;

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: none;
}

.hero.has-video .hero-video {
  display: block;
}

.hero.has-video .fallback-logo {
  display: none;
}

/* LOGO */

.logo {
  width: min(90vw, 850px);

  position: relative;

  z-index: 2;

  filter:
    drop-shadow(0 0 18px #006eff);

  animation:
    logoGlow 4s ease-in-out infinite alternate;
}

/* OVERLAY */

.overlay {
  position: absolute;

  bottom: 7%;

  width: 100%;

  padding: 20px;

  text-align: center;

  z-index: 3;

  opacity: 0;

  transform:
    translateY(30px);

  transition:
    opacity 1.5s ease,
    transform 1.5s ease;
}

.loaded .overlay {

  opacity: 1;

  transform:
    translateY(0);
}

/* TITLE */

h1 {
  margin: 0;

  font-size:
    clamp(2rem, 8vw, 5rem);

  letter-spacing: 0.2em;
}

/* PARAGRAPH */

p {
  margin-top: 10px;

  color: #c9d8ff;

  letter-spacing: 0.12em;

  font-size:
    clamp(0.9rem, 2vw, 1.1rem);
}

/* EMAIL FORM */

.email-form {
  margin-top: 25px;

  display: flex;

  justify-content: center;
  align-items: center;

  gap: 12px;

  flex-wrap: wrap;
}

/* INPUT */

.email-form input {
  padding: 15px 18px;

  width:
    min(90vw, 320px);

  background:
    rgba(0, 0, 0, 0.65);

  border:
    1px solid #3d6cff;

  color: white;

  outline: none;

  letter-spacing: 0.08em;

  border-radius: 8px;
}

.email-form input::placeholder {
  color: #9eb7ff;
}

/* BUTTON */

button {
  padding: 15px 28px;

  border-radius: 8px;

  background: transparent;

  border:
    1px solid #ff2aa3;

  color: white;

  cursor: pointer;

  letter-spacing: 0.15em;

  transition: 0.3s ease;

  animation:
    pulseGlow 2s infinite alternate;
}

button:hover {

  background: #ff2aa3;

  box-shadow:
    0 0 25px #ff2aa3;
}

/* SOCIALS */

.social-links {

  display: flex;

  justify-content: center;
  align-items: center;

  gap: 25px;

  margin-top: 30px;
}

.social-links a {

  color: white;

  font-size: 1.8rem;

  transition: 0.3s ease;

  text-decoration: none;
}

.social-links a:hover {

  color: #ff2aa3;

  transform:
    translateY(-4px);

  text-shadow:
    0 0 18px #ff2aa3;
}

/* SMALL TEXT */

small {
  display: block;

  margin-top: 18px;

  color: #c9d8ff;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}

/* INFO SECTION */

.info-section {
  position: relative;

  min-height: 100vh;

  overflow: hidden;

  background:
    linear-gradient(
      to bottom,
      #000000,
      #071426
    );

  display: flex;

  justify-content: center;
  align-items: center;

  padding: 90px 20px;
}

/* GLOW LINES */

.glow-line {
  position: absolute;

  width: 2px;

  height: 140%;

  opacity: 0.6;

  filter:
    blur(1px);

  background:
    linear-gradient(
      to bottom,
      transparent,
      #006eff,
      #ff2aa3,
      transparent
    );

  animation:
    linePulse 3s ease-in-out infinite alternate;
}

/* GLOW LINE POSITIONS */

.line-1 {
  left: 12%;
  top: -10%;

  transform:
    rotate(8deg);

  animation-delay: 0s;
}

.line-2 {
  left: 28%;
  top: -5%;

  transform:
    rotate(-6deg);

  animation-delay: 0.5s;
}

.line-3 {
  left: 50%;
  top: -12%;

  transform:
    rotate(2deg);

  animation-delay: 1s;
}

.line-4 {
  right: 28%;
  top: -5%;

  transform:
    rotate(6deg);

  animation-delay: 1.5s;
}

.line-5 {
  right: 12%;
  top: -10%;

  transform:
    rotate(-8deg);

  animation-delay: 2s;
}

/* CONTENT */

.info-content {
  max-width: 900px;

  text-align: center;

  z-index: 2;
}

/* TITLES */

.info-content h2,
.teaser-content h2 {

  font-size:
    clamp(2rem, 5vw, 4rem);

  letter-spacing: 0.22em;

  margin-bottom: 35px;
}

/* INFO TEXT */

.info-content p,
.teaser-content p {

  font-size:
    clamp(1rem, 2vw, 1.3rem);

  line-height: 1.8;

  color: #d7e3ff;

  margin-bottom: 28px;
}

/* FORCE VISUAL */

.force-visual {
  position: relative;

  width:
    min(80vw, 480px);

  height: 160px;

  margin: 55px auto;
}

/* FORCE LINES */

.force-visual span {
  position: absolute;

  top: 50%;

  width: 45%;

  height: 2px;

  background:
    linear-gradient(
      to right,
      transparent,
      #3d6cff
    );

  box-shadow:
    0 0 18px #006eff;
}

.force-visual span:first-child {

  left: 0;

  transform:
    rotate(18deg);

  animation:
    pullLeft 2s ease-in-out infinite alternate;
}

.force-visual span:nth-child(2) {

  right: 0;

  transform:
    rotate(-18deg);

  background:
    linear-gradient(
      to left,
      transparent,
      #3d6cff
    );

  animation:
    pullRight 2s ease-in-out infinite alternate;
}

/* CORE */

.core-dot {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 26px;
  height: 26px;

  transform:
    translate(-50%, -50%);

  background:
    #ff2aa3;

  box-shadow:
    0 0 35px #ff2aa3;

  clip-path:
    polygon(
      50% 0%,
      100% 50%,
      50% 100%,
      0% 50%
    );
}

/* TEASER SECTION */

.teaser-section {

  min-height: 100vh;

  background:
    radial-gradient(
      circle at center,
      #100014 0%,
      #000000 60%
    );

  display: flex;

  justify-content: center;
  align-items: center;

  padding: 90px 20px;
}

/* TEASER CONTENT */

.teaser-content {
  max-width: 850px;

  text-align: center;
}

/* REVEAL */

.reveal {

  opacity: 0;

  transform:
    translateY(45px);

  transition:
    opacity 1.1s ease,
    transform 1.1s ease;
}

.reveal.active {

  opacity: 1;

  transform:
    translateY(0);
}

/* ANIMATIONS */

@keyframes logoGlow {

  from {

    filter:
      drop-shadow(0 0 18px #006eff);
  }

  to {

    filter:
      drop-shadow(0 0 55px #006eff);
  }

}

@keyframes pulseGlow {

  from {

    box-shadow:
      0 0 8px #ff2aa3;
  }

  to {

    box-shadow:
      0 0 25px #ff2aa3;
  }

}

@keyframes linePulse {

  from {

    opacity: 0.15;

    transform:
      scaleY(0.75);
  }

  to {

    opacity: 0.85;

    transform:
      scaleY(1.08);
  }

}

@keyframes pullLeft {

  from {

    transform:
      rotate(18deg)
      translateX(0);
  }

  to {

    transform:
      rotate(18deg)
      translateX(18px);
  }

}

@keyframes pullRight {

  from {

    transform:
      rotate(-18deg)
      translateX(0);
  }

  to {

    transform:
      rotate(-18deg)
      translateX(-18px);
  }

}

/* MOBILE */

@media (max-width: 768px) {

  .overlay {
    bottom: 5%;
  }

  h1 {
    letter-spacing: 0.12em;
  }

  .email-form {
    flex-direction: column;
  }

  .email-form input,
  .email-form button {
    width: 90%;
  }

  .logo {
    width: 110vw;
  }

  .info-content h2,
  .teaser-content h2 {
    letter-spacing: 0.12em;
  }

}