/* Template Name: Hercules Beats - Coming Soon CSS v1.0 */

body {
  background: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(255, 0, 0, 0.1)),
    url('https://herculesbeats.com/wp-content/uploads/2025/02/bg-4.jpg') no-repeat center center fixed;
  background-size: cover;
  background-attachment: fixed;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.animated-text {
  text-align: center;
  font-size: 6rem;
  font-weight: 400;
}

.animated-text span {
  display: block;
}

.line1 {
  color: #fff;
  animation: flicker 3s infinite;
}

@keyframes flicker {
  0%   { opacity: 1; }
  5%   { opacity: 0.4; }
  10%  { opacity: 1; }
  15%  { opacity: 0.8; }
  20%  { opacity: 0.4; }
  25%  { opacity: 1; }
  30%  { opacity: 0.7; }
  35%  { opacity: 1; }
  40%  { opacity: 0.5; }
  45%  { opacity: 1; }
  50%  { opacity: 1; }
  55%  { opacity: 0.6; }
  60%  { opacity: 1; }
  65%  { opacity: 0.4; }
  70%  { opacity: 1; }
  75%  { opacity: 0.8; }
  80%  { opacity: 1; }
  85%  { opacity: 0.6; }
  90%  { opacity: 1; }
  95%  { opacity: 0.8; }
  100% { opacity: 1; }
}

.line2 {
  position: relative;
  color: #ff2a2a;
  font-weight: 600;
  animation: clip-path-reveal-1 3s ease infinite alternate;
}

.line2:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 4px;
  background-color: #ff0000;
  transform-origin: center center;
  transform: scaleX(0);
  animation: line-animation 3s ease infinite alternate;
}

@keyframes line-animation {
  0% { transform: scaleX( 0 ); }
  15% { transform: scaleX( 0 ); }
  20%, 25% { transform: scaleX( 1 ); top: calc( 100% - 2px ); }
  50% { transform: scaleX( 1 ); top: 0px; }
  70% { transform: scaleX( 0.2 ); top: 0px; }
  80%, 100% { transform: scaleX( 0.2 ); top: 0px; }
}

@keyframes clip-path-reveal-1 {
  0%, 25% { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); }
  50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
}

.company-logo img {
  max-height: 200px;
}

.social-icons {
  margin-top: 20px;
}

.social-icons i {
  font-size: 2rem;
  color: #fff;
  transition: transform 0.3s ease, color 0.4s ease;
}

.social-icons a {
  margin: 0 10px;
  display: inline-block;
  transition: transform 0.3s ease, color 0.4s ease;
}

.social-icons a i:hover {
  transform: skewX(-10deg);
  color: red;
}

.copyright {
  margin-top: 20px;
  font-size: 0.6rem;
  color: #fff;
  letter-spacing: 6px;
  font-weight: normal;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.copyright::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: #dbd55b;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s ease-in-out;
}

.copyright:hover::after {
  transform: scaleX(1);
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }
  .header-container {
    flex-direction: column;
    gap: 10px;
  }
  
  .animated-text {
    font-size: 4rem;
  }
  
  .company-logo {
    display: flex;
    justify-content: center;
    padding: 0 20px;
  }

  .company-logo img {
    max-width: 90%;
    height: auto;
    max-height: 250px;
  }
  
  .social-icons {
    text-align: center;
  }
  
  .social-icons i {
    font-size: 35px;
  }

  .copyright {
    font-size: 0.8rem;
    text-align: center;
  }

  .copyright::after {
    bottom: -1px;
    height: 1px;
  }
}