/*
 * Banner V2 - Additional Styles
 * Core hero styles are in styles/design-system.css
 * This file only contains banner-specific overrides and logo carousel
 */

.banner-v2 {
  min-height: auto;
}

.blob {
  pointer-events: none;
}

.blob-orange {
  background: rgba(255, 103, 56, 0.1);
}

.blob-brown {
  background: rgba(178, 73, 52, 0.1);
}

.hero-cta-wrap {
  margin-top: 0;
}

.hero-g2 {
  color: var(--ds-brown);
  margin-top: 16px;
  font-size: 0.9rem;
}

/* Logos spacing */
.hero-logos-section {
  margin-top: 96px;
  padding: 64px 0 72px;
  background: transparent;
}

.hero-logos {
  margin-top: 0;
}

.hero-logos-title {
  display: none;
}

.hero-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: nowrap;
  padding: 0;
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}

/* Mobile scrolling carousel */
@media (max-width: 768px) {
  .hero-logos-section {
    overflow: hidden;
    width: 100%;
  }

  .hero-logo-row {
    overflow: visible;
    justify-content: flex-start;
    scrollbar-width: none;
    max-width: none;
    width: max-content;
    padding: 0;
  }

  .hero-logo-row::-webkit-scrollbar {
    display: none;
  }

  .hero-logo-item {
    flex-shrink: 0;
    width: 100px;
    flex: 0 0 100px;
  }
}

/* Auto-scroll animation for mobile */
@media (max-width: 768px) {
  @keyframes scroll-logos {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-33.333%);
    }
  }

  .hero-logo-row {
    animation: scroll-logos 12s linear infinite;
    will-change: transform;
  }

  .hero-logo-row:hover {
    animation-play-state: paused;
  }
}

.hero-logo-item {
  width: 140px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 140px;
  padding: 0;
}

.hero-logo-inner {
  display: block;
  height: 100%;
  width: auto;
  transform-origin: center;
}

.hero-logo-item img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.25s ease, opacity 0.25s ease;
  vertical-align: middle;
}

.hero-logo-item img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Optical balance tweaks per logo */
.logo-fellowmind .hero-logo-inner {
  transform: scale(1.12);
}

.logo-becklar .hero-logo-inner {
  transform: scale(1.00);
}

.logo-powerflex .hero-logo-inner {
  transform: scale(1.10);
}

.logo-north-highland .hero-logo-inner {
  transform: scale(0.88);
}

.logo-addsecure .hero-logo-inner {
  transform: scale(0.88);
}

.logo-canada .hero-logo-inner {
  transform: scale(1.10);
}

.hero-g2-logo {
  height: 24px;
  width: auto;
  opacity: 0.8;
}

.hero-g2-text {
  max-width: 320px;
}

.hero-star {
  color: #F59E0B;
}

.hero-g2-copy {
  color: var(--docsie-v2-brown);
  font-weight: 500;
  font-family: var(--font-sans);
}

.hero-right {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

/* Card styling replaced by ds-hero-card classes */

.hero-video-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero-video {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

/* Animation Keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation Classes */
.animate-fade-in {
  animation: fadeIn 1s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 1s ease-out forwards;
}

/* Sparkle animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1024px) {
  .hero-title-top {
    font-size: clamp(2.9rem, 5.5vw + 0.6rem, 3.7rem);
  }
  .hero-title-bottom {
    font-size: clamp(2.6rem, 5vw + 0.5rem, 3.2rem);
  }
  .hero-container {
    max-width: 960px;
  }
}

@media (max-width: 768px) {
  .hero-shell {
    padding: 64px 0 72px;
  }
  .hero-container {
    max-width: 100%;
  }
  .hero-grid {
    gap: 28px;
  }
  .hero-right {
    margin-top: 0;
    width: 100%;
  }
  .hero-video-card {
    padding: 16px 16px 14px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-video-title {
    font-size: 1.15rem;
    text-align: center;
  }
  .hero-video-header {
    text-align: center;
  }
  .hero-video-pill {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-logo-row {
    gap: 32px;
    max-width: 760px;
  }
  .hero-title {
    line-height: 1.1;
    margin-bottom: 16px;
  }
  .hero-title-top {
    font-size: clamp(2.2rem, 6.5vw + 0.5rem, 3rem);
  }
  .hero-title-bottom {
    font-size: clamp(2rem, 6vw + 0.4rem, 2.7rem);
  }
  .hero-badge {
    margin-bottom: 20px;
  }
  .hero-subhead,
  .hero-support {
    font-size: 1.05rem;
  }
  .hero-support {
    margin-bottom: 22px;
  }
  .hero-cta {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 480px) {
  .hero-shell {
    padding: 56px 0 64px;
  }
  .hero-title {
    margin-bottom: 14px;
  }
  .hero-title-top {
    font-size: clamp(2rem, 7vw + 0.4rem, 2.6rem);
  }
  .hero-title-bottom {
    font-size: clamp(1.85rem, 6.5vw + 0.3rem, 2.4rem);
  }
  .hero-subhead {
    margin-bottom: 8px;
  }
  .hero-support {
    margin-bottom: 18px;
  }
  .hero-badge {
    max-width: 320px;
  }
  .hero-video-card {
    padding: 14px 14px 12px;
  }
  .hero-video-title {
    font-size: 1.05rem;
  }
  .hero-video-sub {
    font-size: 0.95rem;
  }
  .hero-logo-row {
    gap: 20px;
    max-width: 100%;
  }
  .hero-logo-item {
    height: 22px;
  }
}