/* Contact Page Styles for SPA - Imported from contact.html */

/* Custom container for contact page */
.contact-container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 1rem;
  border: none;
  background: linear-gradient(135deg, #150a0f 0%, #000000 25%, #301020 50%, #000000 75%, #1a0f15 100%);
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
  box-sizing: border-box;
  cursor: auto !important;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* CONTACT ME Title */
.journey-title {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 999;
  opacity: 1;
}

.journey-text {
  font-size: min(8rem, 15vw, 13vh);
  font-weight: 400;
  font-family: 'Anton', 'Montserrat', 'Inter', Arial, sans-serif;
  background: linear-gradient(90deg, #ff00ff, #00ffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: left;
  letter-spacing: 0.05em;
  text-transform: none;
  margin: 0;
  line-height: 0.9;
  display: flex;
  flex-direction: column;
}

.journey-text div {
  font-size: min(8rem, 15vw, 13vh);
  font-weight: 400;
  font-family: 'Anton', 'Montserrat', 'Inter', Arial, sans-serif;
  background: linear-gradient(90deg, #ff00ff, #00ffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: left;
  letter-spacing: 0.05em;
  text-transform: none;
  margin: 0;
}

/* Contact Buttons */
.contact-buttons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 2rem;
  z-index: 100;
}

.contact-btn {
  width: 160px;
  height: 160px;
  font-family: 'Anton', 'Montserrat', 'Inter', Arial, sans-serif; 
  font-weight: 400; 
  text-transform: uppercase; 
  letter-spacing: 0.15em;
  font-size: 1rem;
  font-weight: 600;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: none;
  letter-spacing: 0.1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.contact-btn svg {
  width: 100px;
  height: 100px;
  fill: currentColor;
}

.contact-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  transform: translateY(-5px) scale(1.05);
}

/* Gmail button specific hover - change to Gmail red */
.contact-btn:first-child:hover svg {
  fill: #ea4335;
}

/* LinkedIn button specific hover - change to LinkedIn blue */
.contact-btn:nth-child(2):hover svg {
  fill: #0077b5;
}

/* GitHub button specific hover - change to GitHub dark */
.contact-btn:nth-child(3):hover svg {
  fill: #333333;
}

.contact-btn:active {
  transform: translateY(-2px) scale(1.02);
}

/* Layout for vertical mode */
@media (orientation: portrait), (max-width: 768px) {
  .contact-buttons {
    flex-direction: column;
    gap: 1.5rem;
  }
}

/* Falling 3D models - contained within contact content */
.falling-model {
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  transition: none;
}

/* Ensure contact content can contain the falling shapes */
#contact-content {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.falling-model model-viewer {
  width: 100%;
  height: 100%;
  --poster-color: transparent;
}

@keyframes fall {
  0% {
    transform: translateY(-150px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100vh + 150px)) rotate(360deg);
    opacity: 0;
  }
}

/* Contact route visibility control */
body[data-current-route="contact"] .contact-only {
  display: block !important;
}

body:not([data-current-route="contact"]) .contact-only {
  display: none !important;
}