/**
 * Hero Interactive Module
 * D3.js powered dot grid display with animated background elements
 */

/* ==========================================================================
   Wrapper for Hero Integration
   ========================================================================== */

.hero-interactive-wrapper {
  flex: 0 0 auto;
  position: relative;
  width: 50%; /* Desktop: 50% to sit alongside headline */
}

@media (max-width: 767px) {
  .hero-interactive-wrapper {
    width: 100%; /* Mobile: Full width */
  }
}

/* ==========================================================================
   Container & Stage
   ========================================================================== */

.hero-interactive-container {
  --hero-scale: 1; /* Global scale multiplier for all elements */
  width: 100%;
  position: relative;
  cursor: crosshair; /* Indicate interactive area */
}

/* Responsive fixed heights */
@media (min-width: 1200px) {
  .hero-interactive-container {
    height: 600px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .hero-interactive-container {
    height: 500px;
  }
}

@media (max-width: 767px) {
  .hero-interactive-container {
    height: 350px;
  }
}

.hero-interactive-stage {
  position: relative;
  width: 100%;
  height: 100%;
}


/* ==========================================================================
   Background SVG Elements
   ========================================================================== */

.hero-bg-element {
  position: absolute;
  height: auto;
  pointer-events: none; /* Allow interaction to pass through to canvas */
  z-index: 1;
  /* width and position set inline via Twig */
}


/* ==========================================================================
   Display Device (iPad Frame)
   ========================================================================== */

.hero-display-device {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--hero-scale) * 341px); /* Base width from device image */
  height: calc(var(--hero-scale) * 352px); /* Base height from device image */

  /* Device frame image - set via inline style from CMS or fallback gradient */
  background-image: linear-gradient(145deg, #e6e6e6, #ffffff);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2; /* Above background elements */
}

.hero-display-screen {
  position: absolute;
  top: calc(var(--hero-scale) * 14px); /* Y offset from device image */
  left: calc(var(--hero-scale) * 29px); /* X offset from device image */
  width: calc(var(--hero-scale) * 276px); /* 46 dots * 6px = 276px */
  height: calc(var(--hero-scale) * 276px); /* 46 dots * 6px = 276px */
  background: #000; /* Black screen background */
  overflow: hidden;
}

#heroD3Canvas {
  width: 100%;
  height: 100%;
  position: relative;
}

#heroD3Canvas svg {
  display: block;
  background: #000; /* Black canvas background */
}


/* ==========================================================================
   D3.js Circle Styles
   ========================================================================== */

.circle {
  cursor: pointer;
  transition: opacity 0.3s ease; /* Smooth color transitions */
}


/* ==========================================================================
   Mobile Responsive Adjustments
   ========================================================================== */

@media (max-width: 767px) {
  .hero-display-device {
    left: 50%;
    top: 55%;
  }

  /* Optionally reduce scale on mobile */
  .hero-interactive-container {
    --hero-scale: 0.9;
  }
}


/* ==========================================================================
   GSAP Animation Hooks (for future use)
   ========================================================================== */

/* Background elements can be targeted by .hero-bg-1, .hero-bg-2, etc. for GSAP animations */
.hero-bg-element {
  /* Animation-ready: GSAP can animate transform, opacity, etc. */
}