/**
 * Home page atmosphere — radial gradients & depth (structure unchanged).
 * Scoped to main.home-page on / and /en/ /ar/ index.
 */

/* —— Services strip (home) —— */
.home-page .svc-cards-section--home {
  background: linear-gradient(
    180deg,
    var(--hero-bg-to) 0%,
    var(--bg-color) 18%,
    var(--bg-color) 82%,
    var(--hero-bg-from) 100%
  );
  border-top: 1px solid var(--hero-border);
}

.home-page .svc-cards-section--home::before {
  background:
    radial-gradient(ellipse 72% 52% at 14% 0%, color-mix(in srgb, #6366f1 14%, transparent), transparent 58%),
    radial-gradient(ellipse 58% 48% at 88% 12%, color-mix(in srgb, #2563eb 12%, transparent), transparent 52%),
    radial-gradient(ellipse 75% 45% at 50% 100%, var(--hero-grain) 0%, transparent 62%);
}

/* —— Portfolio teaser —— */
.home-page .portfolio-teaser {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    165deg,
    var(--hero-bg-from) 0%,
    var(--bg-color) 42%,
    var(--hero-bg-to) 100%
  );
  border-top: 1px solid var(--hero-border);
  border-bottom: 1px solid var(--hero-border);
}

.home-page .portfolio-teaser::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 50% -8%, var(--hero-glow) 0%, transparent 58%),
    radial-gradient(ellipse 42% 38% at 8% 95%, var(--hero-grain) 0%, transparent 62%),
    radial-gradient(ellipse 42% 38% at 92% 90%, color-mix(in srgb, #3b82f6 9%, transparent), transparent 62%);
}

.home-page .portfolio-teaser__inner {
  position: relative;
  z-index: 1;
}

/* —— Technologies —— */
.home-page .technologies-section {
  position: relative;
  background: linear-gradient(
    180deg,
    var(--bg-color) 0%,
    color-mix(in srgb, var(--hero-bg-from) 55%, var(--bg-color)) 50%,
    var(--bg-color) 100%
  );
  border-top: 1px solid var(--hero-border);
}

.home-page .technologies-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 65% 45% at 50% 0%, color-mix(in srgb, #2563eb 9%, transparent), transparent 58%),
    radial-gradient(ellipse 50% 40% at 0% 60%, color-mix(in srgb, #3b82f6 8%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 70%, color-mix(in srgb, #6366f1 7%, transparent), transparent 55%);
}

.home-page .technologies-section .technologies-header,
.home-page .technologies-section .technologies-slider {
  position: relative;
  z-index: 1;
}

/* —— FAQ —— */
.home-page .faq-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--hero-bg-from) 0%, var(--hero-bg-to) 100%);
}

.home-page .faq-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, var(--hero-glow) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 20% 100%, var(--hero-grain) 0%, transparent 58%),
    radial-gradient(ellipse 45% 35% at 80% 100%, var(--hero-grain) 0%, transparent 58%);
}

.home-page .faq-container {
  position: relative;
  z-index: 1;
}

/* —— Contact —— */
.home-page #contacto.contact-form-container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--hero-bg-from) 70%, var(--glass-bg)),
    color-mix(in srgb, var(--hero-bg-to) 50%, var(--glass-bg))
  );
  border: 1px solid var(--glass-border);
  box-shadow: 0 22px 48px var(--glass-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.home-page #contacto.contact-form-container::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 60% 55% at 0% 50%, color-mix(in srgb, #6366f1 10%, transparent), transparent 58%),
    radial-gradient(ellipse 55% 50% at 100% 40%, color-mix(in srgb, #2563eb 10%, transparent), transparent 55%);
}

.home-page #contacto .contact-content {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .home-page .svc-cards-section--home,
  .home-page .portfolio-teaser,
  .home-page .technologies-section,
  .home-page .faq-section,
  .home-page #contacto.contact-form-container {
    background: var(--bg-color);
  }

  .home-page .svc-cards-section--home::before,
  .home-page .portfolio-teaser::before,
  .home-page .technologies-section::before,
  .home-page .faq-section::before,
  .home-page #contacto.contact-form-container::before {
    opacity: 0.65;
  }
}