/* Ocean Serenity Template Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600&family=Alex+Brush&display=swap');

:root {
  --ocean-deep: #0f4c81;
  --ocean-primary: #1b7a9f;
  --ocean-light: #e6f6f9;
  --ocean-sand: #e5b983;
  --ocean-dark: #0d2838;
}

[x-cloak] { display: none !important; }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f0fafd;
}
::-webkit-scrollbar-thumb {
  background: #99d5e3;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #1b7a9f;
}

/* Glassmorphism Ocean */
.glass-ocean {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(27, 122, 159, 0.18);
  box-shadow: 0 10px 30px rgba(15, 76, 129, 0.08);
}

.glass-ocean-glow {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(27, 122, 159, 0.35);
  box-shadow: 0 8px 32px rgba(27, 122, 159, 0.16), 0 0 25px rgba(178, 235, 242, 0.5);
}

.glass-nav-ocean {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(27, 122, 159, 0.25);
  box-shadow: 0 10px 30px rgba(13, 40, 56, 0.15);
}

.ocean-input {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(27, 122, 159, 0.25);
  color: #0d2838;
  transition: all 0.3s ease;
}
.ocean-input:focus {
  outline: none;
  border-color: #1b7a9f;
  box-shadow: 0 0 10px rgba(27, 122, 159, 0.3);
  background: #ffffff;
}

/* Ocean Wave Animations */
@keyframes wave-flow {
  0% { transform: translateX(0) translateZ(0) scaleY(1); }
  50% { transform: translateX(-25%) translateZ(0) scaleY(0.95); }
  100% { transform: translateX(-50%) translateZ(0) scaleY(1); }
}

.animate-wave {
  animation: wave-flow 12s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
}

/* Vinyl rotation animation */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spin-slow 10s linear infinite;
}
.music-paused {
  animation-play-state: paused;
}

/* Coastal background texture */
.ocean-bg-pattern {
  background-color: #f2fafd;
  background-image: 
    radial-gradient(circle at 85% 15%, rgba(200, 238, 247, 0.55) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(247, 233, 213, 0.45) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
}