/**
 * تأثيرات أمواج البحر المتحركة - تصميم احترافي
 */

/* خلفية البحر */
.ocean-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
    #0a2744 0%,
    #1a4b7c 25%,
    #2a6eaa 50%,
    #3a8dca 75%,
    #5fb8ff 100%);
  z-index: -2;
  overflow: hidden;
}

/* إضافة تأثير النجوم */
.ocean-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background-image:
    radial-gradient(1px 1px at 25% 15%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 25%, rgba(255, 255, 255, 0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 5%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 15% 35%, rgba(255, 255, 255, 0.6) 0%, transparent 100%),
    radial-gradient(2px 2px at 35% 45%, rgba(255, 255, 255, 0.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 65% 40%, rgba(255, 255, 255, 0.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 85% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 100%);
  opacity: 0.5;
  animation: stars-twinkle 8s ease-in-out infinite alternate;
}

/* إضافة تأثير الضباب */
.ocean-background::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to top,
    rgba(95, 184, 255, 0.2) 0%,
    rgba(58, 141, 202, 0.1) 50%,
    transparent 100%);
  filter: blur(20px);
  animation: fog-move 20s ease-in-out infinite alternate;
}

@keyframes stars-twinkle {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes fog-move {
  0% {
    transform: translateX(-5%) translateY(0);
  }
  50% {
    transform: translateX(5%) translateY(-5%);
  }
  100% {
    transform: translateX(-5%) translateY(0);
  }
}

/* حاوية الأمواج */
.ocean {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 250px;
  z-index: -1;
  perspective: 1000px;
  perspective-origin: center bottom;
}

/* الموجة الأولى */
.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: url('../images/wave.svg');
  background-size: 1200px 120px;
  animation: wave 20s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  opacity: 0.8;
  transform-origin: center bottom;
}

.wave:nth-child(1) {
  bottom: 0;
  height: 120px;
  animation: wave 22s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  opacity: 0.9;
  background-size: 1200px 120px;
  z-index: 4;
  filter: brightness(0.8) blur(0px);
}

.wave:nth-child(2) {
  bottom: 10px;
  height: 100px;
  animation: wave2 18s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  animation-delay: 0.5s;
  opacity: 0.75;
  background-size: 1000px 100px;
  z-index: 3;
  filter: brightness(0.9) blur(1px);
}

.wave:nth-child(3) {
  bottom: 25px;
  height: 80px;
  animation: wave 15s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  animation-delay: 1s;
  opacity: 0.6;
  background-size: 900px 80px;
  z-index: 2;
  filter: brightness(1) blur(2px);
}

.wave:nth-child(4) {
  bottom: 40px;
  height: 60px;
  animation: wave2 12s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  animation-delay: 1.5s;
  opacity: 0.45;
  background-size: 800px 60px;
  z-index: 1;
  filter: brightness(1.1) blur(3px);
}

@keyframes wave {
  0% {
    background-position-x: 0;
    transform: translateZ(0) scaleY(1);
  }
  50% {
    transform: translateZ(50px) scaleY(1.1);
  }
  100% {
    background-position-x: 1200px;
    transform: translateZ(0) scaleY(1);
  }
}

@keyframes wave2 {
  0% {
    background-position-x: 1200px;
    transform: translateZ(0) scaleY(1);
  }
  50% {
    transform: translateZ(30px) scaleY(1.05);
  }
  100% {
    background-position-x: 0;
    transform: translateZ(0) scaleY(1);
  }
}

/* تعديلات على بطاقة تسجيل الدخول لتناسب خلفية البحر */
.login-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3),
              0 0 20px rgba(255, 255, 255, 0.1),
              inset 0 0 15px rgba(255, 255, 255, 0.05);
}

/* تعديلات على الحقول لتناسب خلفية البحر */
.login-input {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.login-input:focus {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* تعديلات على الزر ليناسب خلفية البحر */
.login-button {
  background: linear-gradient(to right, #1a4b7c, #3a8dca);
  box-shadow: 0 5px 15px rgba(26, 75, 124, 0.4);
}

.login-button:hover {
  background: linear-gradient(to right, #3a8dca, #1a4b7c);
  box-shadow: 0 8px 20px rgba(26, 75, 124, 0.5);
}

/* تعديلات على الألوان لتناسب خلفية البحر */
:root {
  --primary-dark: #1a4b7c;
  --primary-medium: #2a6eaa;
  --primary-light: #3a8dca;
  --accent-color: #5fb8ff;
  --accent-light: #a0d8ff;
  --text-color: #ffffff;
  --error-color: #ff6b6b;
  --success-color: #66d9a8;
  --card-bg: rgba(26, 75, 124, 0.6);
  --input-bg: rgba(255, 255, 255, 0.15);
  --input-border: rgba(255, 255, 255, 0.3);
  --button-gradient: linear-gradient(to right, #1a4b7c, #3a8dca);
}

/* تعديلات على الدوائر لتناسب خلفية البحر */
.circle-1 {
  background: radial-gradient(circle, rgba(160, 216, 255, 0.6) 0%, transparent 70%);
}

.circle-2 {
  background: radial-gradient(circle, rgba(95, 184, 255, 0.5) 0%, transparent 70%);
}

.circle-3 {
  background: radial-gradient(circle, rgba(42, 110, 170, 0.4) 0%, transparent 70%);
}

.circle-4 {
  background: radial-gradient(circle, rgba(26, 75, 124, 0.5) 0%, transparent 70%);
}

/* تعديلات على الخط ليناسب خلفية البحر */
.login-title {
  color: #ffffff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.login-title::after {
  background: linear-gradient(to right, transparent, #5fb8ff, transparent);
}

/* إضافة تأثير قطرات الماء */
.water-drop {
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: drop 3s linear infinite;
  opacity: 0;
}

@keyframes drop {
  0% {
    transform: translateY(-100px) scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100px) scale(1);
    opacity: 0;
  }
}
