/* Animated sky + drifting cloud layer + evenly distributed props.
   Used on login / change password / 404 pages.
*/

.hero-section {
  position: relative;
  overflow: hidden;
  /* Animated sky (no static background image) */
  background: linear-gradient(180deg, #0a66b6 0%, #2f93db 28%, #6cc9f5 60%, #d7f2ff 100%) !important;
  background-size: 160% 160% !important;
  animation: sky-shift 26s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

@keyframes sky-shift {
  0%,
  100% {
    background-position: 35% 10%;
  }
  50% {
    background-position: 70% 40%;
  }
}

.hero-section > .container {
  width: 100%;
  position: relative;
  z-index: 10;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 560px at 22% 20%, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0) 62%),
    radial-gradient(760px 480px at 78% 30%, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 68%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.22) 100%);
  opacity: 0.75;
  z-index: 0;
  animation: haze-drift 14s ease-in-out infinite;
  will-change: transform, opacity;
}

.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.22;
  filter: blur(2px);
  background-image:
    radial-gradient(60% 45% at 18% 28%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(55% 40% at 82% 20%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 64%),
    radial-gradient(55% 42% at 62% 75%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 66%),
    radial-gradient(50% 38% at 28% 78%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
  animation: sky-wisp 22s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes haze-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.68;
  }
  50% {
    transform: translate3d(2.5%, -1.5%, 0) scale(1.05);
    opacity: 0.82;
  }
}

@keyframes sky-wisp {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.18;
  }
  50% {
    transform: translate3d(2.2%, -1.6%, 0) scale(1.06);
    opacity: 0.26;
  }
}

/* Clouds */
.cloud-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.cloud {
  position: absolute;
  top: var(--top, 15%);
  left: 0;
  width: clamp(260px, 38vw, 620px);
  height: auto;
  opacity: var(--opacity, 0.75);
  animation: cloud-move var(--dur, 180s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}

.cloud-img {
  display: block;
  width: 100%;
  height: auto;
  transform: translate3d(0, 0, 0) scale(var(--scale, 1));
  filter: blur(var(--blur, 0px)) drop-shadow(0 18px 30px rgba(10, 50, 95, 0.12)) contrast(1.02) brightness(1.02);
  animation: cloud-bob 7s ease-in-out infinite;
  will-change: transform;
  user-select: none;
}

/* Variation so the bobbing doesn't look synchronized */
.cloud:nth-child(odd) .cloud-img {
  animation-duration: 9.5s;
  animation-delay: -3s;
}
.cloud:nth-child(3n) .cloud-img {
  animation-duration: 7.75s;
  animation-delay: -1s;
}
.cloud:nth-child(4n) .cloud-img {
  animation-duration: 11s;
  animation-delay: -5s;
}

@keyframes cloud-move {
  from {
    transform: translate3d(-220vw, 0, 0);
  }
  to {
    transform: translate3d(220vw, 0, 0);
  }
}

@keyframes cloud-bob {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(var(--scale, 1));
  }
  50% {
    transform: translate3d(0, calc(var(--bob, 14px) * -1), 0) scale(var(--scale, 1));
  }
}

/* Props */
.bg-props {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.prop-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  align-items: center;
  justify-items: center;
  padding: clamp(18px, 4vw, 64px);
}

.prop {
  position: relative;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  width: var(--size, 80px);
  height: var(--size, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: calc(var(--size, 80px) * 0.38);
  animation: float-prop 10s infinite ease-in-out;
  box-shadow:
    0 14px 34px rgba(10, 50, 95, 0.14),
    inset 0 10px 18px rgba(255, 255, 255, 0.18);
  opacity: 0.95;
}

/* Spread around center (avoid login circle overlap) */
.prop-1 {
  grid-column: 2;
  grid-row: 2;
  --size: 76px;
  animation-duration: 12s;
}
.prop-6 {
  grid-column: 5;
  grid-row: 2;
  --size: 72px;
  animation-duration: 13s;
}
.prop-7 {
  grid-column: 9;
  grid-row: 2;
  --size: 78px;
  animation-duration: 11s;
  animation-delay: -1s;
}
.prop-3 {
  grid-column: 11;
  grid-row: 3;
  --size: 74px;
  animation-duration: 10s;
  animation-delay: -5s;
}

.prop-11 {
  grid-column: 2;
  grid-row: 4;
  --size: 70px;
  animation-duration: 15s;
}
.prop-10 {
  grid-column: 11;
  grid-row: 5;
  --size: 70px;
  animation-duration: 12s;
}

.prop-5 {
  grid-column: 2;
  grid-row: 7;
  --size: 82px;
  animation-duration: 14s;
  animation-delay: -3s;
}
.prop-2 {
  grid-column: 4;
  grid-row: 8;
  --size: 76px;
  animation-duration: 15s;
  animation-delay: -2s;
}
.prop-4 {
  grid-column: 11;
  grid-row: 7;
  --size: 82px;
  animation-duration: 18s;
  animation-delay: -7s;
}

.prop-8 {
  grid-column: 6;
  grid-row: 8;
  --size: 74px;
  animation-duration: 16s;
  animation-delay: -4s;
}
.prop-9 {
  grid-column: 8;
  grid-row: 8;
  --size: 74px;
  animation-duration: 14s;
  animation-delay: -6s;
}

@keyframes float-prop {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-40px) rotate(15deg) scale(1.1);
  }
}

/* Glow Points */
.glow-point {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 15px 2px #f2d03f;
  animation: pulse-glow 4s infinite;
}

@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

/* Ensure circle content stays above visuals */
.circle-box {
  z-index: 10;
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
}

/* Circle depth + sheen (more premium) */
.circle-box::before {
  content: '';
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(120% 120% at 25% 20%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.10) 35%, rgba(255, 255, 255, 0.02) 70%, rgba(255, 255, 255, 0) 100%);
  box-shadow:
    inset 0 12px 30px rgba(255, 255, 255, 0.18),
    inset 0 -18px 28px rgba(10, 50, 95, 0.10);
  opacity: 0.95;
}

.circle-box::after {
  content: '';
  position: absolute;
  inset: -10%;
  pointer-events: none;
  border-radius: 50%;
  background: conic-gradient(from 210deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.12) 32deg, rgba(255, 255, 255, 0) 72deg, rgba(255, 255, 255, 0) 360deg);
  opacity: 0.55;
  animation: sheen-sweep 10s ease-in-out infinite;
}

@keyframes sheen-sweep {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(18deg);
  }
}

.circle-box > * {
  position: relative;
  z-index: 1;
}

/* Inputs/buttons: cleaner, more "app" feel */
.hero-section .input-field input,
.hero-section .form-control.login-user {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 12px 26px rgba(10, 50, 95, 0.10);
}

.hero-section .input-field input::placeholder,
.hero-section .form-control.login-user::placeholder {
  color: rgba(20, 45, 70, 0.55);
}

.hero-section .btn,
.hero-section .home-btn {
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.hero-section .btn:hover,
.hero-section .home-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(10, 50, 95, 0.18);
}

@media (max-width: 992px) {
  .prop-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(10, 1fr);
    padding: 16px;
  }
  .prop {
    --size: 62px;
  }

  .prop-1 {
    grid-column: 1;
    grid-row: 1;
  }
  .prop-6 {
    grid-column: 3;
    grid-row: 2;
  }
  .prop-7 {
    grid-column: 6;
    grid-row: 1;
  }
  .prop-3 {
    grid-column: 6;
    grid-row: 3;
  }
  .prop-11 {
    grid-column: 1;
    grid-row: 4;
  }
  .prop-10 {
    grid-column: 6;
    grid-row: 4;
  }
  .prop-5 {
    grid-column: 1;
    grid-row: 7;
  }
  .prop-2 {
    grid-column: 3;
    grid-row: 8;
  }
  .prop-4 {
    grid-column: 6;
    grid-row: 7;
  }
  .prop-8 {
    grid-column: 2;
    grid-row: 10;
  }
  .prop-9 {
    grid-column: 5;
    grid-row: 10;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-section {
    animation: none !important;
  }
  .hero-section::before,
  .hero-section::after,
  .cloud,
  .cloud-img,
  .prop,
  .glow-point {
    animation: none !important;
  }
}