/* Oracle + Lens hero animation container */

.oracle-lens-hero {
  width: 100%;
}

.oracle-lens-hero-frame {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  background: #f5f6f8;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 80px rgba(255, 255, 255, 0.04);
  will-change: transform, opacity;
}

.oracle-lens-svg {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: geometricPrecision;
  text-rendering: optimizeLegibility;
}

.oracle-lens-hero-mobile {
  display: none;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: inherit;
}

.oracle-lens-svg .status-card,
.oracle-lens-svg .insight-item,
.oracle-lens-svg .summary-line,
.oracle-lens-svg .rec-item,
.oracle-lens-svg .rec-btn,
	.oracle-lens-svg #lens-assistant,
	.oracle-lens-svg #lens-intro-placeholder,
	.oracle-lens-svg #scan-line,
.oracle-lens-svg .flow-path,
.oracle-lens-svg .flow-dot,
.oracle-lens-svg .row-hl,
.oracle-lens-svg #lens-glow,
.oracle-lens-svg #lens-analyzing,
.oracle-lens-svg #ask-query,
.oracle-lens-svg #send-icon,
.oracle-lens-svg #lens-icon,
	.oracle-lens-svg #refresh-icon {
	will-change: transform, opacity;
}

.oracle-lens-svg .lens-loading-ring {
	animation: lens-loading-dash 1.1s linear infinite;
}


@keyframes lens-loading-dash {
	from {
		stroke-dashoffset: 0;
	}

	to {
		stroke-dashoffset: -82;
	}
}

.oracle-lens-hero-frame.is-animating {
  contain: layout paint style;
}

/* ≤768px: plain static image (homeherobg.png) — crop bottom footer, bleed into next section */
@media (max-width: 768px) {
  .hero-image {
    margin-top: 40px;
    margin-bottom: -56px;
    position: relative;
    z-index: 2;
  }

  .hero-image-frame,
  .oracle-lens-hero-frame {
    aspect-ratio: 1440 / 870;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    border-bottom: 0;
  }

  .oracle-lens-svg {
    display: none !important;
  }

  .oracle-lens-hero-mobile {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    object-fit: unset !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oracle-lens-hero-frame,
	.oracle-lens-svg {
		will-change: auto;
	}

	.oracle-lens-svg .lens-loading-ring {
		animation: none;
	}
}