/* ===== Hero background scene ===== */
.hero-bg-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint style;
}

.hero-bg-scene--lite .bg-sky {
  background:
    linear-gradient(180deg, rgba(125, 211, 252, 0.12) 0%, rgba(254, 249, 195, 0.06) 40%, transparent 52%);
}

.hero-bg-scene--lite .bg-sky-zone {
  height: 38%;
}

.bg-sky {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(125, 211, 252, 0.16) 0%, rgba(186, 230, 253, 0.12) 32%, rgba(254, 249, 195, 0.08) 48%, transparent 55%);
}

/* ===== Sky zone — plane among clouds ===== */
.bg-sky-zone {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44%;
  overflow: hidden;
  pointer-events: none;
}

/* آسمان محو زیر ابرها */
.bg-sky-under {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 95% 75% at 50% 8%, rgba(56, 189, 248, 0.11) 0%, transparent 62%),
    radial-gradient(ellipse 80% 55% at 72% 22%, rgba(125, 211, 252, 0.09) 0%, transparent 58%),
    radial-gradient(ellipse 80% 55% at 28% 28%, rgba(147, 197, 253, 0.08) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(125, 211, 252, 0.11) 0%,
      rgba(186, 230, 253, 0.09) 38%,
      rgba(224, 242, 254, 0.06) 68%,
      rgba(254, 249, 195, 0.03) 88%,
      transparent 100%
    );
  pointer-events: none;
}

.bg-sky-zone::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(255, 255, 255, 0.06) 0%, transparent 55%),
    linear-gradient(180deg, transparent 55%, rgba(254, 249, 195, 0.04) 100%);
  pointer-events: none;
}

.bg-cloud-layer {
  position: absolute;
  inset: 0;
}

.bg-cloud-layer-back {
  z-index: 2;
}

.bg-cloud-layer-front {
  z-index: 8;
}

.cloud-slot {
  position: absolute;
  animation: cloud-float 14s ease-in-out infinite;
}

.cloud-slot-back {
  opacity: 0.72;
}

.cloud-slot-front {
  opacity: 0.52;
}

.cloud-cluster {
  position: relative;
  width: 100%;
  height: 100%;
}

.cloud-cluster span {
  position: absolute;
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cloud-soft span {
  background: radial-gradient(
    circle at 38% 32%,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.82) 28%,
    rgba(255, 255, 255, 0.45) 58%,
    rgba(255, 255, 255, 0.08) 78%,
    transparent 100%
  );
  filter: blur(5px);
  box-shadow:
    0 8px 28px rgba(255, 255, 255, 0.35),
    0 2px 12px rgba(147, 197, 253, 0.15);
}

.cloud-wispy span {
  background: radial-gradient(
    circle at 40% 35%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.7) 32%,
    rgba(255, 255, 255, 0.35) 62%,
    rgba(255, 255, 255, 0.05) 82%,
    transparent 100%
  );
  filter: blur(8px);
  box-shadow:
    0 12px 36px rgba(255, 255, 255, 0.45),
    0 4px 16px rgba(186, 230, 253, 0.2);
}

.cloud-slot-back .cloud-cluster {
  filter: blur(1px);
}

.cloud-slot-front .cloud-cluster {
  filter: blur(2px);
}

@keyframes cloud-float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.02);
  }
}

.bg-cloud-layer-back {
  animation: cloud-drift-back 58s linear infinite;
}

.bg-cloud-layer-front {
  animation: cloud-drift-front 55s linear infinite;
}

@keyframes cloud-drift-back {
  0% { transform: translateX(-12vw); }
  100% { transform: translateX(18vw); }
}

@keyframes cloud-drift-front {
  0% { transform: translateX(-18vw); }
  100% { transform: translateX(22vw); }
}

/* Hero transport icons — circular ring, no fill, neon line glow */
.bg-icon {
  position: absolute;
  z-index: 6;
  width: var(--icon-size, 88px);
  height: var(--icon-size, 88px);
  border-radius: 50%;
  border: 2px solid rgba(234, 179, 8, 0.45);
  background: transparent;
  padding: var(--icon-pad, 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
  animation: icon-ring-pulse 3s ease-in-out infinite;
  animation-delay: var(--icon-delay, 0s);
}

.bg-icon::before {
  display: none;
}

.bg-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: none;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  animation: icon-line-glow 3s ease-in-out infinite;
  animation-delay: var(--icon-delay, 0s);
}

/* Hero icons — parenthesis: ( left ) content ( right ) */
.bg-icon-plane { top: 16%; right: 13%; left: auto; }
.bg-icon-car { top: 16%; left: 13%; right: auto; }
.bg-icon-metro { top: 32%; left: 4%; right: auto; }
.bg-icon-bus { top: 42%; right: 4%; left: auto; }
.bg-icon-train { top: 64%; right: 12%; left: auto; }
.bg-icon-sim { top: 48%; left: 4%; right: auto; }
.bg-icon-cash { top: 64%; left: 12%; right: auto; }

@keyframes icon-ring-pulse {
  0%, 100% {
    border-color: rgba(234, 179, 8, 0.3);
    box-shadow: none;
  }
  50% {
    border-color: rgba(234, 179, 8, 0.95);
    box-shadow: 0 0 14px rgba(234, 179, 8, 0.35);
  }
}

@keyframes icon-line-glow {
  0%, 100% {
    opacity: 0.7;
    filter: brightness(0.92) saturate(1.05);
  }
  50% {
    opacity: 1;
    filter:
      brightness(1.35)
      saturate(1.25)
      drop-shadow(0 0 6px rgba(234, 179, 8, 0.95))
      drop-shadow(0 0 14px rgba(250, 204, 21, 0.7));
  }
}

/* Track bed + train */
.bg-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 128px;
  z-index: 0;
}

.bg-track-bed {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: linear-gradient(180deg, rgba(202, 138, 4, 0.06) 0%, rgba(202, 138, 4, 0.12) 100%);
  border-top: 1px solid rgba(202, 138, 4, 0.1);
}

.bg-train {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: auto;
  aspect-ratio: 1725 / 101;
  z-index: 3;
  opacity: 1;
  filter: drop-shadow(0 8px 20px rgba(15, 23, 42, 0.16));
  animation: train-run 28s linear infinite;
}

.bg-train img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: bottom center;
  transform: scaleX(-1);
}

@keyframes train-run {
  0% {
    transform: translateX(102vw);
  }
  100% {
    transform: translateX(-102vw);
  }
}

/* Airplane — sky (large animated plane among clouds) */
.bg-plane {
  position: absolute;
  width: min(320px, 42vw);
  height: auto;
  aspect-ratio: 660 / 263;
  top: 6%;
  left: 0;
  z-index: 7;
  opacity: 1;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.15));
  animation: fly-plane-ltr 18s linear infinite;
}

.bg-plane img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@keyframes fly-plane-ltr {
  0% {
    transform: translateX(-22vw) translateY(0) scale(0.97);
  }
  100% {
    transform: translateX(calc(100vw + 50px)) translateY(0) scale(1);
  }
}

@media (max-width: 768px) {
  .bg-sky-zone { height: 38%; }
  .cloud-slot-back { opacity: 0.55; }
  .cloud-slot-front { opacity: 0.35; }
  .cloud-soft span { filter: blur(3px); }
  .cloud-wispy span { filter: blur(4px); }
  .bg-plane { width: min(240px, 58vw); top: 4%; opacity: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.12)); animation-duration: 18s; }
  .bg-icon {
    width: calc(var(--icon-size, 88px) * 0.86);
    height: calc(var(--icon-size, 88px) * 0.86);
    padding: calc(var(--icon-pad, 10px) * 0.85);
    border-width: 2px;
  }
  .bg-icon-plane { top: 14%; right: 7%; left: auto; }
  .bg-icon-car { top: 14%; left: 7%; right: auto; }
  .bg-icon-metro { top: 30%; left: 2%; right: auto; }
  .bg-icon-bus { top: 40%; right: 2%; left: auto; }
  .bg-icon-train { top: 60%; right: 6%; left: auto; }
  .bg-icon-sim { top: 46%; left: 2%; right: auto; }
  .bg-icon-cash { top: 60%; left: 6%; right: auto; }
  .bg-track {
    height: 100px;
    bottom: 0;
  }
  .bg-track-bed {
    height: 28px;
  }
  .bg-train {
    animation-duration: 24s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-cloud-layer-back,
  .bg-cloud-layer-front,
  .bg-plane,
  .bg-train,
  .bg-icon,
  .bg-icon img {
    animation: none !important;
  }
}