@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter:wght@100..900&display=swap');
@import "tailwindcss";

@theme {
  --font-serif: "Playfair Display", serif;
  --font-sans: "Inter", sans-serif;
  --color-turquoise: #40e0d0;
  --color-gold: #d4af37;
  --color-diamond: #e5e4e2;
}

:root {
  background-color: #050505;
  color: white;
}

@layer utilities {
  .diamond-dust {
    background-image: 
      radial-gradient(1px 1px at 20px 30px, #fff, rgba(0,0,0,0)),
      radial-gradient(1px 1px at 40px 70px, #fff, rgba(0,0,0,0)),
      radial-gradient(1px 1px at 50px 160px, #fff, rgba(0,0,0,0)),
      radial-gradient(1px 1px at 90px 40px, #fff, rgba(0,0,0,0)),
      radial-gradient(1px 1px at 130px 80px, #fff, rgba(0,0,0,0)),
      radial-gradient(1px 1px at 160px 120px, #fff, rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: sparkle 5s linear infinite;
  }

  .sea-waves {
    background: linear-gradient(180deg, rgba(5,5,5,1) 0%, rgba(0,64,64,0.4) 50%, rgba(212,175,55,0.1) 100%);
  }

  .glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .gold-glow {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
  }

  .animate-float {
    animation: float 4s ease-in-out infinite;
  }

  .animate-glow-line {
      animation: glow-line 3s infinite;
  }
}

@keyframes sparkle {
  0% { transform: translateY(0); }
  100% { transform: translateY(-200px); }
}

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

@keyframes glow-line {
    0%, 100% { width: 0%; opacity: 0; }
    50% { width: 30%; opacity: 0.5; }
}

html {
  scroll-behavior: smooth;
}

/* Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 1s ease-out;
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 1s ease-out;
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-bottom {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease-out;
}

.reveal-bottom.active {
    opacity: 1;
    transform: translateY(0);
}