/* ===== HERO PAGE ===== */
html, body {
  margin: 0;
  padding: 0;
  background: #000;
  overflow-x: hidden;
}
.hero-section {
  height: 100vh;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
  position: relative;
  overflow: hidden;
}

/* LOGO LEFT TOP */
.logo-box {
  position: absolute;
  top: 40px;
  left: 60px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  letter-spacing: 3px;
}

.logo {
  font-size: 2.4em;
  color: white;
  margin: 0;
  text-shadow: 0 0 8px red, 0 0 18px red;
}

.logo .fy {
  color: red;
}

.logo-underline {
  width: 150px;
  height: 2.5px;
  margin-top: 2px;
  background: linear-gradient(90deg, transparent, red, transparent);
}

.logo-tagline {
  font-size: 10px;
  letter-spacing: 3px;
  color: #bbb;
  margin: 1px 0 0 12px;
}

/* ===== 3D ROTATOR ===== */

.poster-rotator {
  position: relative;
  width: 160px;     /* Smaller */
  height: 240px;    /* Smaller */
  transform-style: preserve-3d;
  animation: rotate 30s linear infinite;
}

@keyframes rotate {
  from { transform: perspective(1000px) rotateY(0deg); }
  to { transform: perspective(1000px) rotateY(360deg); }
}

.poster {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(255,0,0,0.6);
  margin-top: 30px;
}

/* 5 POSTERS */
.poster:nth-child(1) { transform: rotateY(0deg) translateZ(280px); }
.poster:nth-child(2) { transform: rotateY(72deg) translateZ(280px); }
.poster:nth-child(3) { transform: rotateY(144deg) translateZ(280px); }
.poster:nth-child(4) { transform: rotateY(216deg) translateZ(280px); }
.poster:nth-child(5) { transform: rotateY(288deg) translateZ(280px); }

.poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Quote */
.hero-quote {
  color: #ffffff;
  font-size: 11px;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  letter-spacing: 3px;
  margin-top: 100px;
}

/* Button */
/* ===== PREMIUM BUTTON ===== */

.enter-btn {
  position: relative;
  padding: 12px 40px;
  background: red;
  border: none;
  border-radius: 30px;
  color: white;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  overflow: hidden;
  transition: 0.4s ease;
  box-shadow: 0 0 10px rgba(255,0,0,0.6);
}

/* Glow animation */
.enter-btn:hover {
  box-shadow: 0 0 20px rgba(255,0,0,0.9),
              0 0 40px rgba(255,0,0,0.6);
  transform: translateY(-3px);
}

/* Arrow animation */
.enter-btn .arrow {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.enter-btn:hover .arrow {
  transform: translateX(6px);
}

/* Ripple effect */
.enter-btn::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  transform: scale(1);
  opacity: 0;
  pointer-events: none;
}
/* ===== PAGE FADE EFFECT ===== */

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}