@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@300;400;500;600;700&family=Montserrat:wght@200;300;400;500;600&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  scroll-behavior: smooth;
}

body {
  background-color: #0A0A0A;
  font-family: 'Montserrat', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant', serif;
}

/* Logo shimmer effect */
.logo-shimmer {
  position: relative;
  filter: brightness(1.1);
}

.logo-shimmer::before,
.logo-shimmer::after,
.logo-shimmer span {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 75%,
    transparent
  );
  mask-image: url('https://alconstruction.gmbh/img/logo.png');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.logo-shimmer::before {
  animation: shimmerWave1 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.logo-shimmer::after {
  animation: shimmerWave2 3s cubic-bezier(0.4,  0, 0.2, 1) infinite;
  animation-delay: 1s;
}

.logo-shimmer span {
  animation: shimmerWave3 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 2s;
}

@keyframes shimmerWave1 {
  0% {
    transform: translateX(-100%) rotate(-5deg);
  }
  100% {
    transform: translateX(100%) rotate(5deg);
  }
}

@keyframes shimmerWave2 {
  0% {
    transform: translateX(-100%) rotate(5deg);
  }
  100% {
    transform: translateX(100%) rotate(-5deg);
  }
}

@keyframes shimmerWave3 {
  0% {
    transform: translateX(-100%) rotate(0deg);
  }
  100% {
    transform: translateX(100%) rotate(0deg);
  }
}

/* Enhanced gold gradient */
.gold-gradient {
  background: linear-gradient(135deg, 
    #BF953F 0%, 
    #FCF6BA 20%, 
    #B38728 40%, 
    #FBF5B7 60%, 
    #AA771C 80%, 
    #FCF6BA 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: shimmer 8s linear infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.gold-border {
  background: linear-gradient(135deg, 
    #BF953F 0%, 
    #FCF6BA 20%, 
    #B38728 40%, 
    #FBF5B7 60%, 
    #AA771C 80%, 
    #FCF6BA 100%
  );
  padding: 1px;
  position: relative;
  overflow: hidden;
}

.gold-border::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(5px);
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.gold-border:hover::after {
  opacity: 0.5;
}

.gold-border-hover {
  position: relative;
  overflow: hidden;
}

.gold-border-hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #BF953F, #FCF6BA, #B38728);
  transition: 0.5s;
}

.gold-border-hover:hover::before {
  left: 100%;
}

.parallax-text {
  mix-blend-mode: difference;
}

/* Enhanced scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0A0A0A;
  border-left: 1px solid rgba(191, 149, 63, 0.1);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #BF953F, #B38728);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #FCF6BA, #BF953F);
}

/* Enhanced image reveal animation */
.image-reveal {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

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

/* Enhanced luxury gradient overlay */
.luxury-overlay {
  background: linear-gradient(to bottom, 
    rgba(10, 10, 10, 0.95),
    rgba(10, 10, 10, 0.2) 50%,
    rgba(10, 10, 10, 0.95)
  );
  backdrop-filter: blur(5px);
}

/* Glass effect */
.glass-effect {
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(191, 149, 63, 0.1);
}

/* Enhanced Pannellum viewer styles */
.pnlm-container {
  background: #0A0A0A !important;
}

.pnlm-load-button {
  background: rgba(10, 10, 10, 0.8) !important;
  border: 1px solid rgba(191, 149, 63, 0.5) !important;
  border-radius: 8px !important;
  color: #BF953F !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 12px rgba(191, 149, 63, 0.1) !important;
  transition: all 0.3s ease !important;
}

.pnlm-load-button:hover {
  background: rgba(10, 10, 10, 0.9) !important;
  border-color: #BF953F !important;
  box-shadow: 0 8px 24px rgba(191, 149, 63, 0.2) !important;
}

.pnlm-orientation-button {
  background: rgba(10, 10, 10, 0.8) !important;
  border: 1px solid rgba(191, 149, 63, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 12px rgba(191, 149, 63, 0.1) !important;
}

.pnlm-compass {
  border: 2px solid #BF953F !important;
  box-shadow: 0 4px 12px rgba(191, 149, 63, 0.2) !important;
}

.pnlm-zoom-controls {
  background: rgba(10, 10, 10, 0.8) !important;
  border: 1px solid rgba(191, 149, 63, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 12px rgba(191, 149, 63, 0.1) !important;
  border-radius: 8px !important;
  padding: 4px !important;
}

.pnlm-zoom-in, .pnlm-zoom-out {
  color: #BF953F !important;
  transition: color 0.3s ease !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 4px !important;
}

.pnlm-zoom-in:hover, .pnlm-zoom-out:hover {
  color: #FCF6BA !important;
  background-color: rgba(191, 149, 63, 0.1) !important;
}

.pnlm-fullscreen-toggle-button {
  background: rgba(10, 10, 10, 0.8) !important;
  border: 1px solid rgba(191, 149, 63, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 12px rgba(191, 149, 63, 0.1) !important;
  transition: all 0.3s ease !important;
  border-radius: 8px !important;
  padding: 8px !important;
}

.pnlm-fullscreen-toggle-button:hover {
  border-color: #BF953F !important;
  box-shadow: 0 8px 24px rgba(191, 149, 63, 0.2) !important;
  background-color: rgba(191, 149, 63, 0.1) !important;
}

.pnlm-load-box {
  background: rgba(10, 10, 10, 0.9) !important;
  border: 1px solid rgba(191, 149, 63, 0.5) !important;
  border-radius: 8px !important;
}

.pnlm-lbar {
  background: rgba(191, 149, 63, 0.2) !important;
  border: 1px solid rgba(191, 149, 63, 0.3) !important;
  border-radius: 4px !important;
}

.pnlm-lbar-fill {
  background: #BF953F !important;
}

.pnlm-pointer {
  color: #BF953F !important;
}

.pnlm-about-msg {
  background: rgba(10, 10, 10, 0.95) !important;
  border: 1px solid rgba(191, 149, 63, 0.5) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(10px) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.pnlm-about-msg a {
  color: #BF953F !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.pnlm-about-msg a:hover {
  color: #FCF6BA !important;
}

/* Hover effects */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

/* Input focus effects */
.focus-gold {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.focus-gold:focus {
  border-color: #BF953F !important;
  box-shadow: 0 0 0 2px rgba(191, 149, 63, 0.2) !important;
  outline: none;
}