/* Page Load Animation Sequence - 50% Slower */

/* Initially hide all content and prevent scrolling during animation */
body {
  overflow: hidden;
  animation: enableScroll 0s 8.5s forwards;
}

@keyframes enableScroll {
  to {
    overflow: visible;
    overflow-x: hidden;
  }
}

/* Custom cursor - Note: Image needs to be 32x32 or smaller for most browsers */
body, * {
  cursor: url('../img/logo/cursor.png'), auto !important;
}

/* Keep pointer cursor for interactive elements */
a:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, .btn:hover {
  cursor: url('../img/logo/cursor.png'), pointer !important;
}

/* Hero section animations */
#hero {
  position: relative;
  overflow: hidden;
}

/* Logo animation - drops from top */
#hero .logo {
  animation: logoDropIn 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  animation-delay: 0.5s;
  opacity: 0;
  transform: translateY(-500px);
}

/* Video zoom in effect */
#hero video {
  animation: zoomIn 2.5s ease-out forwards;
  animation-delay: 2.5s;
  opacity: 0;
  transform: scale(0.3);
}

/* Grammy icon animation - simple fade in at the end */
#hero .grammy-hero {
  animation: fadeIn 1.5s ease-out forwards !important;
  animation-delay: 5.5s !important;
  animation-fill-mode: forwards !important;
  opacity: 0;
}

/* Hero content */
#hero .content {
  animation: fadeInUp 1.5s ease-out forwards;
  animation-delay: 4.5s;
  opacity: 0;
  transform: translateY(30px);
}

#hero .hero-copy {
  animation: fadeInUp 1.2s ease-out forwards;
  animation-delay: 5s;
  opacity: 0;
  transform: translateY(20px);
}

#hero .scroll,
#hero .arrow-down {
  animation: fadeInUp 1.2s ease-out forwards;
  animation-delay: 5.5s;
  opacity: 0;
  transform: translateY(20px);
}

/* Rest of the site sections - fade in after hero */
#about,
#catalog,
#about-2,
#press,
#years,
#labels,
#gallery,
footer {
  animation: fadeInSection 1.5s ease-out forwards;
  animation-delay: 6s;
  opacity: 0;
  transform: translateY(50px);
}

/* Stagger the sections slightly */
#about { animation-delay: 6s; }
#catalog { animation-delay: 6.3s; }
#about-2 { animation-delay: 6.6s; }
#press { animation-delay: 6.9s; }
#years { animation-delay: 7.2s; }
#labels { animation-delay: 7.5s; }
#gallery { animation-delay: 7.8s; }
footer { animation-delay: 8.1s; }

/* Keyframe Animations */

/* Logo drops from top with bounce effect */
@keyframes logoDropIn {
  0% {
    opacity: 0;
    transform: translateY(-500px) scale(0.8);
  }
  60% {
    opacity: 0.69;
    transform: translateY(20px) scale(1.05);
  }
  80% {
    opacity: 0.69;
    transform: translateY(-10px) scale(0.98);
  }
  100% {
    opacity: 0.69;
    transform: translateY(0) scale(1);
  }
}

/* Zoom in effect for video */
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Simple fade in */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Fade in to 0.69 opacity for Grammy */
@keyframes fadeInGrammy {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.69;
  }
}

/* Fade in with upward movement */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Section fade in */
@keyframes fadeInSection {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulse animation for arrow (after it appears) */
#hero .arrow-down {
  animation: fadeInUp 1.2s ease-out forwards, pulse 2s infinite;
  animation-delay: 5.5s, 7.5s;
}

@keyframes pulse {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

/* Loading overlay (optional - for smoother experience) */
.page-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999;
  animation: fadeOut 0.8s ease-out forwards;
  animation-delay: 0.3s;
  pointer-events: none;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* Marquee sections - ensure they animate smoothly */
.marquee {
  animation: fadeIn 1.5s ease-out forwards;
  animation-delay: 6s;
  opacity: 0;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

main section#hero .content-wrapper .container h1 img.logo {
	max-width: 15rem;
}

main section#hero .content-wrapper .container img.grammy-hero {
	opacity: 0;
	max-width: 7rem;
}