/* Reset default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Nue', sans-serif;
  background: #F6F6F6;
}

/* Heading hierarchy styles */
h5 {
  font-size: 28.13px;
  font-weight: 400;
  text-align: center;
}

/* Paragraph text styles */
p {
  font-size: 18px;
  line-height: 27px;
  margin-bottom: 16px;
}

/* Header credit styles */
.header-credit {
  text-align: right;
  padding: 25px;
}

/* Header background styles */
header {
  width: 100vw;
  min-height: 100vh; /* Minimum height to fill at least one screen */
  background-color: #EEEEEE;
  background-image: radial-gradient(#868686 1px, transparent 1px);
  background-size: 40px 40px;
  position: relative;
  overflow: hidden;
  background-position: 0 0;
  transition: background-position 0.05s ease-out;
}

/* Hero section layout */
.hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  padding-top: 5vh;
}

/* Image collage container */
.title-images {
  position: relative;
  width: 100%;
  height: 350px;
  max-width: 1200px;
  margin: 0 auto;
  transition: all 0.3s ease;
}

/* Base image styles */
.title-images img {
  position: absolute;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
  animation:
      var(--appear-animation) 0.6s ease-out forwards,
      bounce-idle calc(3s * var(--speed, 1)) ease-in-out -0.6s infinite;
  --appear-animation: appear-up !important;
}

@keyframes appear-up {
  from {
    opacity: 0;
    transform: translateY(20px)
               translateY(calc(-8px * var(--amplitude, 1)))
               rotate(calc(2deg * var(--rotation, 1)));
  }
  to {
    opacity: 1;
    transform: translateY(0)
               translateY(calc(-8px * var(--amplitude, 1)))
               rotate(calc(2deg * var(--rotation, 1)));
  }
}

@keyframes appear-down {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* Modify idle animation */
@keyframes bounce-idle {
  0%, 100% { transform: translateY(0); }
  50% {
    transform:
        translateY(calc(-8px * var(--amplitude, 1)))
        rotate(calc(2deg * var(--rotation, 1)));
  }
}

.LetterP { --amplitude: 1.2; --speed: 1.1; --rotation: 0.8; }
.LetterA { --amplitude: 0.9; --speed: 0.95; --rotation: -1.1; }
.LetterT { --amplitude: 1.3; --speed: 1.25; --rotation: 1.3; z-index: -1; }
.LetterC { --amplitude: 1.0; --speed: 0.85; --rotation: -0.7; }
.LetterH { --amplitude: 1.1; --speed: 1.15; --rotation: 0.5; }
.LetterW { --amplitude: 0.8; --speed: 1.05; --rotation: -1.4; }
.LetterO { --amplitude: 1.4; --speed: 0.9; --rotation: 0.9; }
.LetterR { --amplitude: 0.7; --speed: 1.3; --rotation: -0.6; }
.LetterK { --amplitude: 1.2; --speed: 1.0; --rotation: 1.0; }

/* Large screen keeps original (>1280px) */
@media (max-width: 1280px) and (min-width: 1024px) {
  .title-images {
    max-width: 1000px;
  }
  /* PATCH section */
  .LetterP { left: 20px !important; }
  .LetterA { left: 100px !important; }  /* Original 112px */
  .LetterT { left: 190px !important; }  /* Original 256px */
  .LetterC { left: 290px !important; }  /* Original 385px */
  .LetterH { left: 400px !important; }  /* Original 533px */
  /* WORK section */
  .LetterW { left: 520px !important; }  /* Original 611px */
  .LetterO { left: 610px !important; }  /* Original 754px */
  .LetterR { left: 720px !important; }  /* Original 914px */
  .LetterK { left: 800px !important; }  /* Original 998px */
}

/* 1024px and below: line break and retain staggered effect */
@media (max-width: 1024px) {
  .title-images {
    max-width: 500px;
    height: 520px; /* Increase container height (Original 600px → 620px) */
  }

  /* First row PATCH */
  .LetterP { left: 0 !important; }
  .LetterA { left: 90px !important; }
  .LetterT { left: 180px !important; }
  .LetterC { left: 270px !important; }
  .LetterH { left: 360px !important; }  /* PATCH total width 360px */

  /* Second row WORK */
  .LetterW { left: 50px !important; }  /* WORK start position left shift 5px */
  .LetterO { left: 170px !important; }
  .LetterR { left: 290px !important; }
  .LetterK { left: 380px !important; }  /* WORK total width 330px */

  /* Increase row spacing */
  .LetterW, .LetterO, .LetterR, .LetterK {
      top: 255px !important;  /* Uniformly adjust up 5px (Original 250-240px → 255-245px) */
  }
  .LetterO { top: 225px !important; }  /* Difference maintained 30px */
  .LetterR { top: 205px !important; }
  .LetterK { top: 245px !important; }

  .hero-section {
    padding-top: 5vh; /* Reduce from 24vh to 15vh */
    min-height: 90vh;  /* Synchronize adjustment minimum height to maintain content centered */
  }
}

/* Subtitle styles */
.main-subtitle {
  margin-top: 40px;
  text-align: center;
  opacity: 0;
  animation: appear-down 0.6s ease-out 0.1s forwards;
}

/* Button container styles */
.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* Button base styles */
.btn {
  width: 266px;
  height: 60px;
  border-radius: 54px;
  border: 1px solid black;
  box-shadow: 0px 3px 0px black;
  cursor: pointer;
  font-size: 22.5px;
  font-family: Helvetica;
  font-weight: 400;
  transition: width 0.3s ease, transform 0.2s ease;
}
.btn:hover {
  width: 286px;
  transform: translateY(-2px);
}
.btn-primary {
  background: #FFAD61;
}
.btn-secondary {
  background: #FFE8A2;
}

/* Link styles */
a {
  color: inherit;
  text-decoration: underline;
}

/* Modal overlay styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  transition: background-color 0.3s ease;
}

/* Modal content styles */
.modal {
  background: white;
  border-radius: 20px;
  padding: 32px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  transform: scale(0.95);
  opacity: 0;
  transition: all 0.3s ease;
}
.modal h2 {
  font-size: 24px;
  margin-bottom: 16px;
}
.modal p {
  font-size: 16px;
  margin-bottom: 24px;
  line-height: 1.5;
}

/* Modal button styles */
.modal .btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 18px;
}
.modal .google-btn {
  background: white;
}
.modal .discord-btn {
  background: #E4EAF9;
}

/* Error message styles */
.error-message {
  color: #FF4D4F;
  font-size: 14px;
  margin-top: 16px;
  display: none;
}

/* Add show state styles */
.modal-overlay.show {
  background: rgba(0, 0, 0, 0.3);
}
.modal-overlay.show .modal {
  transform: scale(1);
  opacity: 1;
}

.button-container .btn {
  opacity: 0;
}
.button-container .btn-primary {
  animation: appear-down 0.6s ease-out 0.2s forwards;
}
.button-container .btn-secondary {
  animation: appear-down 0.6s ease-out 0.3s forwards;
}