/* public/css/block_effect.css */

:root {
  --gap: 0.5em;
  --min-block-size: 150px;
  --max-block-size: 350px;
}

#outer-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
#outer-wrap.visible {
  opacity: 1;
}

#grid {
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  gap: var(--gap);
  z-index: 1;
  margin-top: 8px;
}

.cell {
  contain: layout;
  aspect-ratio: 1/1;
  background: #23272a; /* Alapértelmezett háttér üres celláknak */
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border-radius: 500px;
  transition: opacity 1s ease-in-out;
  /* Hardveres gyorsítás kényszerítése és animációs optimalizációk */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.cell:hover, .cell:focus-visible {
  box-shadow: 0 2px 20px #0003;
  z-index: 2;
}

.cell-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  background: #333;
  opacity: 0.5;
  /* Hardveres gyorsítás kényszerítése */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
  transition: opacity 0.2s ease-in-out;
}

#loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.loader-content {
  display: flex;
  font-size: 2.5em;
  font-weight: 700;
  letter-spacing: .05em;
  animation: fuse-effect 2.5s infinite ease-in-out;
}

.loader-news {
  color: #fff;
  animation: slide-news 2.5s infinite ease-in-out;
}

.loader-fuse {
  color: rgb(194 65 12);
  animation: slide-fuse 2.5s infinite ease-in-out;
}

@keyframes slide-news {
  0%, 100% { transform: translateX(-25%); opacity: 0; }
  20%, 80% { transform: translateX(0); opacity: 1; }
}
@keyframes slide-fuse {
  0%, 100% { transform: translateX(25%); opacity: 0; }
  20%, 80% { transform: translateX(0); opacity: 1; }
}
@keyframes fuse-effect {
  0%, 45%, 100% { text-shadow: none; }
  50% { text-shadow: 0 0 25px rgba(255, 140, 0, 0.8); }
}
@keyframes bounce-low {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(10px); }
    60% { transform: translateY(5px); }
}
.animate-bounce-low {
    animation: bounce-low 2.5s infinite;
}