/* 1) Alaphelyzet és Alapbeállítások */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Ez letiltja a görgetést és elrejti a görgetősávot */
}

/* 2) Rögzített gradient háttérréteg (Réteg 1) */
.gradient-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3; /* a videó és a tartalom mögött */
  
  background: linear-gradient(
    to top left,
    rgba(149, 57, 184, 0.4) 10%,   /* jobb alsó: #9539B8 */
    rgba(240, 132, 94, 0.4) 20%,     /* közép: #F0845E */
    rgba(68, 68, 68, 0.4) 40%        /* bal felső: #444 */
  );
  background-size: 270% 270%;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  animation: loginShift 8s ease forwards;
}

/* Kulcsképkockák a háttér gradient animációjához */
@keyframes loginShift {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

/* 3) Háttér videó réteg (Réteg 2) */
.video-bg {
  position: fixed;
  top: 0;
  left: 0;
  /* A dimenziók növelése a teljes képernyő lefedéséhez */
  width: 400%;
  height: 400%;
  object-fit: cover;
  z-index: -2;
}

/* 4) Előtér logótároló (Réteg 3) */
.logo-container {
  position: relative;
  z-index: 3;
  text-align: center;
  transform: translateY(-80px);
}

/* 5) Stílus az logó videóhoz */
.logo-container video {
  width: 950px;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.4));
  opacity: 0; /* Kezdetben rejtve */
  animation: fadeInVideo 1s ease-out forwards;
}

/* 6) Ragyogó szövegtároló */
.glow-text {
  font-size: 50px;
  font-weight: bold;
  margin-top: -150px;
  position: relative;
  /* Itt nincs árnyék; a statikus réteg hordozza a drop shadow-t */
}

/* 7) Frissített statikus szövegréteg árnyék effekttel és alulról beúszó animációval */
.static-text {
  color: #EDEDED;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 1;
  opacity: 0; /* Kezdetben rejtve */
  animation: showStatic 1s ease-out 5s forwards;
}

/* 8) Animált gradient átfedő (drop shadow nélkül) */
/* Frissítve úgy, hogy a fadeIn-t használja a csúszás helyett; egyszerűen átlátszóvá válik anélkül, hogy pozícionálódna */
.animated-text {
  position: absolute;
  top: 7px;
  left: 0;
  width: 100%;
  overflow: hidden;
  color: transparent;
  background: linear-gradient(
    90deg,
    #4A52BD,
    #9539B8,
    #E95091,
    #EE6D72,
    #F0845E,
    #4A52BD
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  z-index: 2;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.7);

  /*
    Három animáció:
    - gradientAnimation: Folyamatosan mozgatja a gradient hátteret.
    - shiftIn: Egy kis mértékben (20px) felfelé mozdítja a szöveget és megjeleníti azt.
    - fadeGradient: Opcionálisan elhalványítja később (késleltetés után).
       (Távolítsd el a fadeGradient-et, ha azt szeretnéd, hogy a szöveg látható maradjon.)
  */
  animation: 
    gradientAnimation 6s linear infinite,
    shiftIn 1s ease-out forwards,
    fadeGradient 1s ease-out 5s forwards;
}

/* 9) Kulcsképkockák a folyamatos gradient animációhoz */
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: -200% 50%;
  }
}

/* 10) Kulcsképkockák a gradient átfedő elhalványításához (opcionális) */
@keyframes fadeGradient {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* 12) Új kulcsképkockák egy finom, sima elmozduláshoz */
@keyframes shiftIn {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 11) (Opcionális) Kulcsképkockák egy csúszós animációhoz */
@keyframes showStatic {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Biztosítja, hogy a gomb változatlan marad, miközben relatív pozíciót ad a pszeudoelemeknek */
.fancy-glowbutton {
  position: relative;
  z-index: 3; /* Biztosítja, hogy a gomb a legfelül maradjon */
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  animation: buttonFadeIn ease-out forwards 1.3s; /* 4s késleltetés, 1s időtartam */
}

/* Glow animációs pszeudoelem (a normál áramlástól kívül) */
.fancy-glowbutton::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 10px;
  background: linear-gradient(45deg, #4A52BD, #9539B8, #E95091, #EE6D72, #F0845E, #EE6D72, #E95091, #9539B8, #4A52BD);
  background-size: 600%;  /* Animációhoz */
  filter: blur(8px);
  opacity: 0;             /* Kezdetben rejtve */
  transition: opacity 0.3s ease;
  animation: glow-move 20s linear infinite;
  z-index: -2;            /* A gomb tartalma alatt */
}

.fancy-glowbutton::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  background: #315ed1;   /* Megfelel a gomb fő színének */
  z-index: -1;
}

/* Aktiválja a glow hatást, amikor az egér a gomb fölött van */
.fancy-glowbutton:hover::before {
  opacity: 1;
}

/* Kulcsképkockák a gradient mozgásához */
@keyframes glow-move {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

/* Az átfedő a teljes nézetablakot lefedi */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);      /* Alapértelmezetten teljesen átlátszó */
  pointer-events: none;             /* Lehetővé teszi az alatta lévő elemek kattinthatóságát */
  transition: background 0.3s ease; /* Sima átmenet, amikor az átfedő sötétedik */
  z-index: 1;                     /* Biztosítja, hogy a tartalom alatt maradjon */
}

/* Sötétíti az átfedőt, amikor aktív */
#overlay.active {
  background: rgba(0, 0, 0, 0.6);   /* Igény szerint módosítsd az átlátszóságot */
}   

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

@keyframes fadeInVideo {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}