/* ============================================================
   SHOAL MARKETPLACE — Ocean Animated Background
   Subtle island / tropical atmosphere layer
   ============================================================ */

/* ─── Animated Gradient Body Background ─────────────────────── */
@keyframes oceanGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body {
  background-image: linear-gradient(
    135deg,
    #f0fbfc 0%,
    #e8f8fa 20%,
    #f4fbfc 40%,
    #e0f4f7 60%,
    #eef9fa 80%,
    #f0fbfc 100%
  );
  background-size: 400% 400%;
  animation: oceanGradientShift 25s ease infinite;
}

/* Hero sections get the deep ocean gradient instead */
.hero,
.page-hero,
.hero-section,
section[class*="hero"],
.auth-hero {
  background-image: linear-gradient(
    135deg,
    #064E6E 0%,
    #0A1628 25%,
    #0097A7 60%,
    #00BCD4 85%,
    #064E6E 100%
  ) !important;
  background-size: 300% 300% !important;
  animation: oceanGradientShift 20s ease infinite !important;
}

/* ─── Wave SVG Divider Helper ────────────────────────────────── */
.wave-divider {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: 60px;
}

/* ─── Floating Particle Bubbles (CSS only, fixed layer) ──────── */
.ocean-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

@keyframes bubbleRise {
  0%   { transform: translateY(110vh) translateX(0px)   scale(1);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-10vh)  translateX(40px) scale(0.6); opacity: 0; }
}

.ocean-particles::before,
.ocean-particles::after,
.ocean-particles .p1,
.ocean-particles .p2,
.ocean-particles .p3,
.ocean-particles .p4,
.ocean-particles .p5,
.ocean-particles .p6 {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(0,188,212,0.5), rgba(0,151,167,0.1));
  animation: bubbleRise linear infinite;
  will-change: transform, opacity;
}

/* Particle 1 */
.ocean-particles::before {
  width: 6px; height: 6px;
  left: 10%; bottom: -10px;
  opacity: 0.05;
  animation-duration: 18s;
  animation-delay: 0s;
}
/* Particle 2 */
.ocean-particles::after {
  width: 10px; height: 10px;
  left: 30%; bottom: -10px;
  opacity: 0.06;
  animation-duration: 22s;
  animation-delay: 4s;
}
/* Particles 3-8 via added child elements */
.ocean-particles .p1 { width: 4px;  height: 4px;  left: 55%; bottom: -10px; opacity: 0.04; animation-duration: 15s; animation-delay: 2s; }
.ocean-particles .p2 { width: 8px;  height: 8px;  left: 70%; bottom: -10px; opacity: 0.06; animation-duration: 20s; animation-delay: 7s; }
.ocean-particles .p3 { width: 5px;  height: 5px;  left: 80%; bottom: -10px; opacity: 0.05; animation-duration: 17s; animation-delay: 1s; }
.ocean-particles .p4 { width: 12px; height: 12px; left: 20%; bottom: -10px; opacity: 0.04; animation-duration: 24s; animation-delay: 9s; }
.ocean-particles .p5 { width: 7px;  height: 7px;  left: 45%; bottom: -10px; opacity: 0.05; animation-duration: 19s; animation-delay: 5s; }
.ocean-particles .p6 { width: 9px;  height: 9px;  left: 90%; bottom: -10px; opacity: 0.05; animation-duration: 21s; animation-delay: 12s; }

/* ─── Announcement bar shimmer ───────────────────────────────── */
@keyframes shimmerSlide {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

.header-announcement a {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.7) 0%,
    rgba(255,255,255,1)   40%,
    rgba(255,255,255,0.7) 80%
  );
  background-size: 600px 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerSlide 2.5s linear infinite;
  font-weight: 700;
  text-decoration: none;
}

/* ─── Header scroll effect ───────────────────────────────────── */
.site-header {
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

.site-header.header-scrolled {
  background: rgba(10, 22, 40, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

.site-header.header-scrolled .header-logo .logo-text,
.site-header.header-scrolled .nav-item,
.site-header.header-scrolled .header-search input {
  color: white;
}

/* ─── Mobile: disable particles ─────────────────────────────── */
@media (max-width: 767px) {
  .ocean-particles { display: none; }
  body {
    animation-duration: 40s; /* slower / less distracting on mobile */
  }
}

/* ─── Reduced motion support ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body                       { animation: none; }
  .hero, .page-hero,
  .hero-section, .auth-hero  { animation: none !important; }
  .header-announcement a     { animation: none; background: none; -webkit-text-fill-color: inherit; }
  .ocean-particles           { display: none; }
}