/**
 * Water Visualization Component
 * ==============================
 * Interactive water physics simulation canvas
 * Supports fullscreen mode and touch/mouse interaction
 */

/* ====================
   CONTAINER
   ==================== */

.water-visualization-container {
  max-width: 1000px;
  margin: 3rem auto;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(232, 244, 248, 0.9));
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 15px 50px rgba(0, 119, 190, 0.15);
  border: 1px solid rgba(0, 212, 228, 0.2);
}

/* Z-index layering for water visualizations */
.water-visualization-container,
.water-viz-wrapper {
  position: relative;
  z-index: 10;
}

/* Water viz controls - above the canvas */
.water-viz-hint {
  position: relative;
  z-index: 15;
}

/* ====================
   TITLE & DESCRIPTION
   ==================== */

.water-viz-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--water-700);
  margin: -0.5rem 0 0.75rem 0 !important;
  text-align: center;
}

.water-viz-description {
  font-size: 1rem;
  color: var(--water-800);
  margin: 0 0 1.5rem 0;
  text-align: center;
  line-height: 1.6;
}

/* ====================
   CANVAS WRAPPER
   ==================== */

.water-viz-wrapper {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  --giw-photon-core: #64dfff;
  --giw-photon-accent: #bba6ff;
  --giw-photon-glow: rgba(100, 223, 255, 0.35);
  background: linear-gradient(135deg, rgba(232, 244, 248, 0.25), rgba(255, 255, 255, 0.55));
  box-shadow: inset 0 2px 14px rgba(0, 119, 190, 0.08);
}

.water-viz-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--giw-photon-core), #ffffff 45%),
      color-mix(in srgb, var(--giw-photon-accent), #ffffff 60%)),
    radial-gradient(circle at 25% 30%, var(--giw-photon-core) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(circle at 75% 70%, var(--giw-photon-accent) 0%, rgba(255, 255, 255, 0) 55%);
  opacity: 0.6;
  mix-blend-mode: multiply;
  z-index: 0;
}

.water-viz-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 25%, var(--giw-photon-glow) 0%, rgba(0, 0, 0, 0) 55%),
    radial-gradient(circle at 80% 30%, var(--giw-photon-accent) 0%, rgba(0, 0, 0, 0) 55%);
  opacity: 0.65;
  mix-blend-mode: screen;
  z-index: 1;
}

body.dark-mode .water-viz-wrapper::before {
  opacity: 0.35;
  mix-blend-mode: screen;
}

body.dark-mode .water-viz-wrapper::after {
  mix-blend-mode: color-dodge;
}

.giw-viz-controls button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--giw-photon-button-border, rgba(255, 255, 255, 0.35));
  background: var(--giw-photon-button-bg, rgba(255, 255, 255, 0.18));
}

.giw-viz-controls select {
  border: 1px solid var(--giw-photon-button-border, rgba(255, 255, 255, 0.35));
  background: var(--giw-photon-button-bg, rgba(255, 255, 255, 0.18));
  color: inherit;
  border-radius: 6px;
  padding: 2px 4px;
  cursor: pointer;
}

.giw-viz-controls button.giw-active {
  background: var(--giw-photon-core);
  color: #0d1b2a;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.giw-viz-controls button[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

.water-viz-canvas {
  width: 100%;
  position: relative;
  z-index: 2;
  display: block;
  cursor: crosshair;
  border-radius: 16px;
}

/* ====================
   HINT TEXT
   ==================== */

.water-viz-hint {
  text-align: center;
  padding: 0.75rem;
  font-size: 0.9rem;
  color: var(--water-800);
  background: rgba(255, 255, 255, 0.7);
  font-style: italic;
}

/* ====================
   FULLSCREEN MODE
   ==================== */

/* Fullscreen adjustments for clean edges and full bleed */
.water-viz-wrapper:fullscreen,
.water-viz-wrapper:-webkit-full-screen {
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100vw !important;
  height: 100vh !important;
}

.water-viz-wrapper.giw-fs {
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100vw !important;
  height: 100vh !important;
}

.water-viz-wrapper:fullscreen .water-viz-canvas,
.water-viz-wrapper:-webkit-full-screen .water-viz-canvas,
.water-viz-wrapper.giw-fs .water-viz-canvas {
  width: 100vw !important;
  height: 100vh !important;
}

/* ====================
   DARK MODE
   ==================== */

body.dark-mode .water-visualization-container {
  background: linear-gradient(135deg, rgba(27, 38, 59, 0.95), rgba(13, 27, 42, 0.9));
  border-color: rgba(0, 212, 228, 0.3);
}

body.dark-mode .water-viz-title {
  color: var(--accent-cyan);
}

body.dark-mode .water-viz-description,
body.dark-mode .water-viz-hint {
  color: #B8D4E8;
}

body.dark-mode .water-viz-wrapper {
  background: linear-gradient(135deg, rgba(13, 27, 42, 0.5), rgba(27, 38, 59, 0.3));
  box-shadow: inset 0 2px 10px rgba(0, 212, 228, 0.1);
}

body.dark-mode .water-viz-hint {
  background: rgba(13, 27, 42, 0.7);
}

body.dark-mode .giw-viz-controls button.giw-active {
  background: rgba(0, 212, 228, 0.35) !important;
  box-shadow: 0 0 0 2px rgba(0, 212, 228, 0.25);
}

/* ====================
   MOBILE RESPONSIVE
   ==================== */

@media (max-width: 768px) {
  .water-visualization-container {
    margin: 2rem auto;
    padding: 1.5rem;
  }

  .water-viz-title {
    font-size: 1.4rem;
  }

  .water-viz-description {
    font-size: 0.9rem;
  }

  .water-viz-canvas {
    cursor: default;
  }
}