/* ==========================================================================
   OD STUDIO — HERO VISUAL SYSTEM GPU ANIMATIONS & LAYOUT
   Recreated from src/components/sections/HeroSection.jsx:L118-L216
   ========================================================================== */

/* ── Container Layout ── */
.od-hero-visual-system {
  position: relative;
  width: 100%;
  max-width: 590px;
  aspect-ratio: 640 / 520;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .od-hero-visual-system {
    height: 520px;
    aspect-ratio: auto;
  }
}
@media (min-width: 1024px) {
  .od-hero-visual-system {
    margin-left: auto;
    margin-right: 0;
  }
}
@media (min-width: 1280px) {
  .od-hero-visual-system {
    max-width: 640px;
  }
}

/* ── Atmosphere & Concentric Circles ── */
.od-hero-glow-orb {
  position: absolute;
  inset: 16px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(109, 40, 217, 0.22) 0%, rgba(109, 40, 217, 0.08) 34%, transparent 68%);
  filter: blur(40px);
}

.od-hero-circle-outer {
  position: absolute;
  inset: 9%;
  border-radius: 9999px;
  border: 1px solid rgba(211, 187, 255, 0.08);
}

.od-hero-circle-inner {
  position: absolute;
  inset: 18%;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.055);
}

.od-hero-axis-h {
  position: absolute;
  left: 8%;
  right: 6%;
  top: 50%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(211, 187, 255, 0.20), transparent);
}

.od-hero-axis-v {
  position: absolute;
  top: 7%;
  bottom: 9%;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.12), transparent);
}

/* ── Counter-Rotating Dashed Rings ── */
.od-hero-dashed-ring-outer {
  position: absolute;
  inset: 7%;
  border-radius: 9999px;
  border: 1px dashed rgba(211, 187, 255, 0.13);
  animation: odRotateCW 42s linear infinite;
  will-change: transform;
}

.od-hero-dashed-ring-inner {
  position: absolute;
  inset: 21%;
  border-radius: 9999px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  animation: odRotateCCW 54s linear infinite;
  will-change: transform;
}

@keyframes odRotateCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes odRotateCCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ── Curved Flow SVG Paths ── */
.od-hero-svg-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(211, 187, 255, 0.18);
  pointer-events: none;
}

/* ── Central Ecosystem Dashboard Card ── */
.od-ecosystem-card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  width: 52%;
  transform: translate(-50%, -50%);
  animation: odFloatCore 8s ease-in-out infinite;
  will-change: transform;
}

@keyframes odFloatCore {
  0%, 100% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(calc(-50% + 8px), calc(-50% - 12px));
  }
}

.od-ecosystem-outer {
  border-radius: 1rem;
  border: 1px solid rgba(211, 187, 255, 0.20);
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.25) 0%, rgba(15, 12, 27, 0.95) 50%, var(--color-base) 100%);
  padding: 8px;
  box-shadow: 0 34px 110px rgba(109, 40, 217, 0.28);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
@media (min-width: 640px) {
  .od-ecosystem-outer {
    border-radius: 1.35rem;
    padding: 16px;
  }
}

.od-ecosystem-inner {
  border-radius: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(7, 4, 14, 0.50);
  padding: 10px;
}
@media (min-width: 640px) {
  .od-ecosystem-inner {
    border-radius: 1rem;
    padding: 16px;
  }
}

.od-ecosystem-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
@media (min-width: 640px) {
  .od-ecosystem-header { margin-bottom: 16px; }
}

.od-ecosystem-label {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary-light);
}
@media (min-width: 640px) {
  .od-ecosystem-label { font-size: 11px; }
}

.od-ecosystem-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-on-surface);
  margin-top: 2px;
}
@media (min-width: 640px) {
  .od-ecosystem-title {
    font-size: 20px;
    margin-top: 8px;
  }
}

.od-ecosystem-orb {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  border: 1px solid rgba(211, 187, 255, 0.20);
  background: rgba(109, 40, 217, 0.20);
  box-shadow: 0 0 28px rgba(109, 40, 217, 0.45);
}
@media (min-width: 640px) {
  .od-ecosystem-orb {
    width: 40px;
    height: 40px;
  }
}

.od-ecosystem-bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
@media (min-width: 640px) {
  .od-ecosystem-bars { gap: 8px; }
}

.od-ecosystem-bar-chamber {
  display: flex;
  align-items: flex-end;
  height: 56px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.035);
  padding: 6px;
}
@media (min-width: 640px) {
  .od-ecosystem-bar-chamber {
    height: 96px;
    border-radius: 8px;
    padding: 8px;
  }
}

.od-bar-fill {
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(to top, var(--color-primary), rgba(211, 187, 255, 0.80));
  transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 640px) {
  .od-bar-fill { border-radius: 6px; }
}

/* ── 3 Browser Preview Cards ── */
.od-preview-card {
  position: absolute;
  transition: transform 0.3s ease;
  will-change: transform;
}
.od-preview-card:hover {
  transform: translateY(-8px) rotate(0deg) scale(1.02) !important;
  z-index: 30;
}

.od-card-1 {
  left: 0;
  top: 19%;
  width: 64%;
  transform: rotate(-7deg);
}
.od-card-1 .od-preview-inner {
  animation: odFloatCard1 6s ease-in-out infinite;
}

.od-card-2 {
  right: 0;
  top: 6%;
  width: 58%;
  transform: rotate(5deg);
}
.od-card-2 .od-preview-inner {
  animation: odFloatCard2 7s ease-in-out 0.35s infinite;
}

.od-card-3 {
  right: 8%;
  bottom: 9%;
  width: 62%;
  transform: rotate(-3deg);
}
.od-card-3 .od-preview-inner {
  animation: odFloatCard3 8s ease-in-out 0.55s infinite;
}

@keyframes odFloatCard1 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes odFloatCard2 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes odFloatCard3 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.od-preview-inner {
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(15, 12, 27, 0.80);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.od-preview-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  padding: 8px 12px;
}
@media (min-width: 640px) {
  .od-preview-chrome { padding: 12px 16px; }
}

.od-dot-1 { width: 6px; height: 6px; border-radius: 9999px; background: rgba(255, 255, 255, 0.20); }
.od-dot-2 { width: 6px; height: 6px; border-radius: 9999px; background: rgba(255, 255, 255, 0.14); }
.od-dot-3 { width: 6px; height: 6px; border-radius: 9999px; background: rgba(211, 187, 255, 0.50); }
@media (min-width: 640px) {
  .od-dot-1, .od-dot-2, .od-dot-3 { width: 8px; height: 8px; }
}

.od-preview-address {
  margin-left: auto;
  height: 4px;
  width: 48px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.10);
}
@media (min-width: 640px) {
  .od-preview-address { height: 6px; width: 64px; }
}

.od-preview-body {
  padding: 12px;
}
@media (min-width: 640px) {
  .od-preview-body { padding: 20px; }
}

.od-preview-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-on-surface);
}
@media (min-width: 640px) {
  .od-preview-title { font-size: 14px; }
}

.od-preview-sublabel {
  font-size: 9px;
  line-height: 1.2;
  color: var(--color-muted);
  margin-top: 4px;
}
@media (min-width: 640px) {
  .od-preview-sublabel { font-size: 11px; margin-top: 6px; }
}

.od-preview-stat-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-end;
  gap: 8px;
  margin-top: 12px;
}
@media (min-width: 640px) {
  .od-preview-stat-row { gap: 12px; margin-top: 18px; }
}

.od-preview-metric {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary-light);
}
@media (min-width: 640px) {
  .od-preview-metric { font-size: 24px; }
}

.od-preview-bar-track {
  height: 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.10);
  margin-bottom: 2px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 640px) {
  .od-preview-bar-track { height: 6px; }
}
.od-preview-bar-fill {
  height: 100%;
  width: 66%;
  background: rgba(109, 40, 217, 0.35);
  border-radius: 9999px;
}

.od-preview-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 12px;
}
@media (min-width: 640px) {
  .od-preview-tiles { margin-top: 16px; }
}

.od-tile {
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.045);
}
@media (min-width: 640px) {
  .od-tile { height: 32px; border-radius: 6px; }
}
.od-tile.is-highlighted {
  background: rgba(109, 40, 217, 0.35);
}

/* ── 4 Orbit Nodes ── */
.od-orbit-node {
  position: absolute;
  animation: odOrbitFloat 5.5s ease-in-out infinite;
  will-change: transform;
}
.od-node-ux  { left: 13%; top: 22%; animation-delay: 0s; }
.od-node-seo { right: 11%; top: 18%; animation-delay: 0.35s; }
.od-node-api { right: 6%; bottom: 26%; animation-delay: 0.70s; }
.od-node-web { left: 8%; bottom: 20%; animation-delay: 1.05s; }

@keyframes odOrbitFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.05); }
}

.od-orbit-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid rgba(211, 187, 255, 0.20);
  background: rgba(7, 4, 14, 0.70);
  box-shadow: 0 0 34px rgba(109, 40, 217, 0.34);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
@media (min-width: 640px) {
  .od-orbit-pill { width: 48px; height: 48px; }
}

.od-orbit-label {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  color: var(--color-primary-light);
}
@media (min-width: 640px) {
  .od-orbit-label { font-size: 10px; }
}

/* ── 2 Pulsing Glow Dots ── */
.od-pulse-dot {
  position: absolute;
  border-radius: 9999px;
  will-change: transform, opacity;
}
.od-pulse-1 {
  left: 27%;
  bottom: 22%;
  width: 12px;
  height: 12px;
  background: var(--color-primary-light);
  box-shadow: 0 0 26px rgba(211, 187, 255, 0.90);
  animation: odPulseDot1 4.6s ease-in-out infinite;
}
.od-pulse-2 {
  right: 29%;
  top: 28%;
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  box-shadow: 0 0 24px rgba(109, 40, 217, 0.90);
  animation: odPulseDot2 5.2s ease-in-out 0.8s infinite;
}

@keyframes odPulseDot1 {
  0%, 100% { opacity: 0.40; transform: scale(1); }
  50%      { opacity: 0.90; transform: scale(1.08); }
}

@keyframes odPulseDot2 {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.12); }
}