<div class="demo-container">
    <img id="ghostImage" src="casper.png" alt="Casper the Friendly Ghost">
</div>

<div class="controls">
    <button id="toggleVisibility">Toggle Visibility</button>
    <input type="range" id="opacitySlider" min="0" max="100" value="100">
    <button id="fadeOut">Fade Out</button>
    <button id="fadeIn">Fade In</button>
</div>

const ghost = document.getElementById('ghostImage');
const toggleBtn = document.getElementById('toggleVisibility');
const opacitySlider = document.getElementById('opacitySlider');
const opacityValue = document.getElementById('opacityValue');
const fadeOutBtn = document.getElementById('fadeOut');
const fadeInBtn = document.getElementById('fadeIn');
const visibilityStatus = document.getElementById('visibilityStatus');

// Toggle visibility (keeps space in layout)
toggleBtn.addEventListener('click', () => {
  if (ghost.style.visibility === 'hidden') {
    ghost.style.visibility = 'visible';
    visibilityStatus.textContent = 'Visible';
  } else {
    ghost.style.visibility = 'hidden';
    visibilityStatus.textContent = 'Hidden';
  }
});

// Opacity slider
opacitySlider.addEventListener('input', () => {
  const value = opacitySlider.value;
  ghost.style.opacity = value / 100;
  opacityValue.textContent = value + '%';
});

// Fade out button
fadeOutBtn.addEventListener('click', () => {
  ghost.style.opacity = '0';
  opacitySlider.value = 0;
  opacityValue.textContent = '0%';
});

// Fade in button
fadeInBtn.addEventListener('click', () => {
  ghost.style.opacity = '1';
  opacitySlider.value = 100;
  opacityValue.textContent = '100%';
});

.demo-container {
  text-align: center;
  padding: 40px;
  background-color: #f8f9fa;
  border-radius: 8px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ghostImage {
  max-width: 200px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Smooth transitions for opacity and visibility */
img {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}