/* ------------------------------------------------------------
   GLOBAL FONTS
------------------------------------------------------------- */
@font-face { font-family: "Agusta-Regular"; src: url("/fonts/Agusta-Regular.woff") format("woff2"); }
@font-face { font-family: "Agusta-Medium"; src: url("/fonts/Agusta-Medium.woff") format("woff2"); }
@font-face { font-family: "Agusta-Book"; src: url("/fonts/Agusta-Book.woff") format("woff2"); }
@font-face { font-family: "Agusta-Light"; src: url("/fonts/Agusta-Light.woff") format("woff2"); }

body {
  margin: 0;
  height: 100vh;
  background: #211303;
  overflow: hidden;
  font-family: "Agusta-Book", sans-serif;
  position: relative;
}

/* GLOBAL TRANSITIONS */
#scene,
.logo-container,
.play-container,
body::after {
  transition: opacity 1s ease, transform 1s ease, filter 1s ease;
}

/* ------------------------------------------------------------
   NEBULA BACKGROUND
------------------------------------------------------------- */
body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    radial-gradient(circle at 82% 45%, rgba(255,192,0,0.4), transparent 20%),
    radial-gradient(circle at 35% 30%, rgba(255,192,0,0.5), transparent 20%),
    radial-gradient(circle at 62% 68%, rgba(255,192,0,0.4), transparent 30%);

  animation: nebulaMove 14s ease-in-out infinite alternate;
  background-size: 160% 160%;
  filter: blur(40px);
  opacity: 1;
}

@keyframes nebulaMove {
  0% { background-position: 100% 100%; transform: scale(1); }
  50% { background-position: 55% 85%; transform: scale(1.06); }
  100% { background-position: 100% 100%; transform: scale(1); }
}

/* Nebula collapse */
body.implode-nebula::after {
  opacity: 0.50; 
  transform: scale(0.45);
}

/* ------------------------------------------------------------
   CANVAS (A + particles)
------------------------------------------------------------- */
#scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  transform: none;
  transition: none;
  touch-action: none;
}



/* ------------------------------------------------------------
   LOGO + TEXT (fade in/out)
------------------------------------------------------------- */

.logo-container,
.play-container {
  position: fixed;
  left: 0;
  width: 100%;
  text-align: center;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.8s ease, transform 1.8s ease;
  z-index: 20;
}

.logo-container { top: 60px; }
.play-container { bottom: 60px; }

/* fade-in */
body.logo-visible .logo-container,
body.logo-visible .play-container {
  opacity: 1;
  transform: translateY(0);
}

/* fade-out at start */
body.video-opening-start .logo-container,
body.video-opening-start .play-container {
  opacity: 0 !important;
  transform: translateY(-10px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}

/* Typography */
.logo { width: 180px; }

.greetings { 
font-family: "Agusta-Regular";
font-size: 25px;
color: #fff;
opacity: 0.85;
margin-bottom: 24px;
}

.play-text {
  font-size: 14px;
  color: #fff;
  text-decoration: underline;
  letter-spacing: 1.4px;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.play-text:hover { transform: scale(1.05); }

/* ------------------------------------------------------------
   VIDEO OVERLAY
------------------------------------------------------------- */
#videoOverlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  opacity: 0;
  pointer-events: none;

  background: rgba(0,0,0,0.92);
  transition: opacity 0.9s ease;

  z-index: 999;
}

#videoOverlay.active {
  opacity: 1;
  pointer-events: auto;
}


.video-player {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  transform: translate(-50%, -50%);
  border: none;
  background: #211303;
  color: #211303;
}

/* Close button (unchanged) */
.close-btn {
  position: absolute;
  top: 30px;
  right: 40px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1000;
}


/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------- */
@media (min-width: 1900px){
  .logo { width: 280px; }
  .greetings { font-size: 35px; }
  .play-text { font-size: 20px; }
}