/* خلفية الهيرو */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(13, 25, 44, 0.38), rgba(36, 68, 127, 0.55));
  pointer-events: none;
}

/* تحكم الحجم من الCustomizer */
:root {
  --logo-size-m: 128px;
  --logo-size-d: 192px;
}

.logo-box {
  width: var(--logo-size-m);
  height: var(--logo-size-m);
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
}

@media (min-width: 768px) {
  .logo-box {
    width: var(--logo-size-d);
    height: var(--logo-size-d);
  }
}

.logos-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.hero-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 2px 6px rgba(255, 255, 255, .28))
    drop-shadow(0 6px 18px rgba(255, 255, 255, .18));
  opacity: 0;
  transform: translateY(12px);
  will-change: transform, opacity, filter;
  transition: filter .6s ease;
}

.logo-box::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  border-radius: 24px;
  background:
    radial-gradient(120px 120px at 50% 50%, rgba(255, 255, 255, .22), transparent 60%),
    radial-gradient(220px 220px at 50% 60%, rgba(255, 255, 255, .12), transparent 60%);
  opacity: 0;
  filter: blur(18px);
  transition: opacity .8s ease;
  pointer-events: none;
}

.hero-logo.in {
  animation: logo-pop .75s cubic-bezier(.2, .9, .2, 1) both;
  animation-delay: var(--d, 0ms);
}

.logo-box.in::before {
  opacity: .8;
}

.hero-logo.in.pulse {
  animation:
    logo-pop .75s cubic-bezier(.2, .9, .2, 1) both var(--d, 0ms),
    glowPulse 3.2s ease-in-out 1s infinite;
}

@media (hover:hover) {
  .logo-box:hover .hero-logo {
    transform: translateY(-2px);
    filter:
      drop-shadow(0 4px 12px rgba(255, 255, 255, .35))
      drop-shadow(0 14px 26px rgba(255, 255, 255, .22));
  }
}

@keyframes logo-pop {
  0% {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(.6px);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glowPulse {
  0%,
  100% {
    filter:
      drop-shadow(0 2px 6px rgba(255, 255, 255, .28))
      drop-shadow(0 6px 18px rgba(255, 255, 255, .18));
  }
  50% {
    filter:
      drop-shadow(0 3px 10px rgba(255, 255, 255, .36))
      drop-shadow(0 16px 32px rgba(255, 255, 255, .26));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo,
  .hero-logo.in,
  .hero-logo.in.pulse {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    transform: none;
  }
  .logo-box::before {
    opacity: .5;
  }
}