/*
  DS2 hero com foto — renewal-ds2-hero-photo (scrim + glass + texto claro).
  Importar depois de for-providers-ds2.css (ou base DS2) para sobrepor o hero legado.
  Scope: .ds2-page
*/

:root {
  --ds2-hero-overlay-fade-end: 78%;
}

@keyframes ds2-nebula-drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.6;
  }
  25% {
    transform: translate(5%, -4%) scale(1.1) rotate(2deg);
    opacity: 0.75;
  }
  50% {
    transform: translate(-3%, 5%) scale(0.95) rotate(-1deg);
    opacity: 0.55;
  }
  75% {
    transform: translate(4%, 2%) scale(1.05) rotate(1deg);
    opacity: 0.7;
  }
}

@keyframes ds2-fade-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ds2-morph-blob {
  0%,
  100% {
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  }
  25% {
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
  }
  50% {
    border-radius: 30% 70% 50% 50% / 60% 30% 70% 40%;
  }
  75% {
    border-radius: 50% 50% 40% 60% / 35% 55% 45% 65%;
  }
}

@keyframes ds2-text-glow {
  0%,
  100% {
    text-shadow: 0 0 40px rgb(0 115 255 / 0.2), 0 0 80px rgb(80 160 255 / 0.1);
  }
  50% {
    text-shadow: 0 0 60px rgb(0 115 255 / 0.3), 0 0 100px rgb(80 160 255 / 0.15);
  }
}

@keyframes ds2-count-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

.ds2-page .ds2-hero__bg img {
  opacity: 1;
  filter: none;
}

.ds2-page .ds2-hero__overlay {
  background:
    linear-gradient(
      180deg,
      rgb(15 23 42 / 0.22) 0%,
      transparent 38%,
      transparent 58%,
      rgb(15 23 42 / 0.32) 100%
    ),
    linear-gradient(
      90deg,
      rgb(15 23 42 / 0.92) 0%,
      rgb(15 23 42 / 0.78) 18%,
      rgb(15 23 42 / 0.52) 38%,
      rgb(15 23 42 / 0.22) 55%,
      rgb(15 23 42 / 0.06) 68%,
      transparent var(--ds2-hero-overlay-fade-end)
    );
}

@media (max-width: 768px) {
  .ds2-page .ds2-hero__overlay {
    background: linear-gradient(
      180deg,
      rgb(15 23 42 / 0.72) 0%,
      rgb(15 23 42 / 0.78) 45%,
      rgb(15 23 42 / 0.84) 100%
    );
  }
}

.ds2-page .ds2-hero__content {
  align-items: flex-start;
  padding: 6rem max(clamp(1.25rem, 4vw, 2rem), env(safe-area-inset-right, 0px)) 5rem max(clamp(1.25rem, 4vw, 2rem), env(safe-area-inset-left, 0px));
  text-align: left;
}

.ds2-page .ds2-hero__badge {
  border-radius: 9999px;
  padding: 0.5rem 1.15rem;
  border: 1px solid rgb(255 255 255 / 0.32);
  background: linear-gradient(
    145deg,
    rgb(255 255 255 / 0.2) 0%,
    rgb(255 255 255 / 0.06) 55%,
    rgb(255 255 255 / 0.03) 100%
  );
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  color: #f1f5f9;
  box-shadow:
    0 4px 28px rgb(0 0 0 / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.38);
  transition: background 0.35s var(--ds2-ease), border-color 0.35s var(--ds2-ease), transform 0.35s var(--ds2-ease),
    box-shadow 0.35s var(--ds2-ease);
}

.ds2-page .ds2-hero__badge::before {
  box-shadow:
    0 0 0 2px rgb(255 255 255 / 0.35),
    0 0 10px rgb(5 200 50 / 0.55);
}

.ds2-page .ds2-hero__badge:hover {
  border-color: rgb(255 255 255 / 0.45);
  box-shadow:
    0 8px 32px rgb(0 0 0 / 0.22),
    inset 0 1px 0 rgb(255 255 255 / 0.45);
}

.ds2-page .ds2-hero__title {
  align-self: flex-start;
  width: 100%;
  max-width: 42rem;
  box-sizing: border-box;
  text-align: left;
  color: #f8fafc;
  filter: drop-shadow(0 2px 16px rgb(0 0 0 / 0.45));
}

.ds2-page .ds2-hero__title-glow {
  background: linear-gradient(
    105deg,
    #f0f9ff 0%,
    #7dd3fc 38%,
    #38bdf8 72%,
    #0ea5e9 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ds2-page .ds2-hero__title-line--solid {
  color: #f8fafc;
  text-shadow: 0 2px 20px rgb(0 0 0 / 0.35);
}

.ds2-page .ds2-hero__subtitle {
  width: 100%;
  max-width: 42rem;
  box-sizing: border-box;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: rgb(226 232 240);
}

.ds2-page .ds2-hero__lead {
  width: 100%;
  max-width: 42rem;
  box-sizing: border-box;
  text-align: left;
  font-size: 16px;
  color: rgb(203 213 225);
}

.ds2-page .ds2-hero__actions {
  align-self: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 42rem;
  box-sizing: border-box;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.ds2-page .ds2-hero__actions .btn,
.ds2-page .ds2-hero__actions .btn--primary,
.ds2-page .ds2-hero__actions .btn--outline {
  border-radius: 9999px;
}

.ds2-page .ds2-hero__actions .btn--outline {
  color: #f8fafc;
  border-color: rgb(255 255 255 / 0.45);
  background: rgb(255 255 255 / 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ds2-page .ds2-hero__actions .btn--outline:hover {
  color: #fff;
  border-color: rgb(255 255 255 / 0.65);
  background: rgb(255 255 255 / 0.2);
}

@media (max-width: 767px) {
  .ds2-page .ds2-hero__content {
    padding-top: calc(5rem + 1.15rem);
    padding-bottom: 3.35rem;
  }

  .ds2-page .ds2-hero__subtitle,
  .ds2-page .ds2-hero__lead {
    font-size: 16px;
  }

  .ds2-page .ds2-hero__actions {
    align-self: stretch;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .ds2-page .ds2-hero__actions .btn,
  .ds2-page .ds2-hero__actions .btn--primary,
  .ds2-page .ds2-hero__actions .btn--outline {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (min-width: 1024px) {
  .ds2-page .ds2-hero__content {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}