<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      width: 100%;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .diagram-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 640px;
    }

    @media (max-width: 440px) {
      .diagram-grid {
        grid-template-columns: 1fr;
      }
      body {
        padding: 8px;
      }
    }

    .panel {
      position: relative;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 280px;
    }

    .panel-header {
      padding: 8px 10px;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      background: #ffffff;
      border-bottom: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      z-index: 2;
    }

    .panel-header.cool { color: #0284c7; }
    .panel-header.warm { color: #d97706; }

    .canvas-container {
      position: relative;
      flex: 1;
      width: 100%;
      height: 100%;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    .tag {
      position: absolute;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      pointer-events: none;
      z-index: 3;
    }

    .tag-gas {
      top: 26px;
      right: 8px;
      background: rgba(224, 242, 254, 0.95);
      border: 1px solid #38bdf8;
      color: #0369a1;
    }

    .tag-heat {
      top: 6px;
      left: 8px;
      background: rgba(254, 243, 199, 0.95);
      border: 1px solid #f59e0b;
      color: #b45309;
    }

    .controls {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
    }

    .btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, border-color 0.2s;
    }

    .btn:active {
      background: #f1f5f9;
    }

    .btn.active {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
    }
  </style>
</head>
<body>

  <div class="diagram-grid">
    
    <div class="panel">
      <div class="panel-header cool">
        <span>💧 Cool Liquid</span>
      </div>
      <div class="canvas-container">
        <canvas id="coolCanvas"></canvas>
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-header warm">
        <span>☀️ Warmed (Evaporating)</span>
      </div>
      <div class="canvas-container">
        <div class="tag tag-heat">Heat ☀️</div>
        <div class="tag tag-gas">Water Vapor (Gas)</div>
        <canvas id="warmCanvas"></canvas>
      </div>
    </div>
  </div>

  <div class="controls">
    <button id="toggleSpeedBtn" class="btn">
      <span>🐢 Slow Motion</span>
    </button>
  </div>

  <script>
    const coolCanvas = document.getElementById('coolCanvas');
    const warmCanvas = document.getElementById('warmCanvas');
    const ctxCool = coolCanvas.getContext('2d');
    const ctxWarm = warmCanvas.getContext('2d');
    const toggleSpeedBtn = document.getElementById('toggleSpeedBtn');

    let isSlowMo = false;
    let speedMult = 1.0;

    toggleSpeedBtn.addEventListener('click', () => {
      isSlowMo = !isSlowMo;
      speedMult = isSlowMo ? 0.35 : 1.0;
      toggleSpeedBtn.classList.toggle('active', isSlowMo);
      toggleSpeedBtn.innerHTML = isSlowMo ? '<span>⚡ Normal Speed</span>' : '<span>🐢 Slow Motion</span>';
    });

    let width = 0;
    let height = 0;
    const PARTICLE_RADIUS = 7;
    const LIQUID_SURFACE_RATIO = 0.46; // Liquid starts at 46% from top

    function resize() {
      const rect = coolCanvas.parentElement.getBoundingClientRect();
      width = rect.width;
      height = rect.height;
      const dpr = window.devicePixelRatio || 1;

      coolCanvas.width = width * dpr;
      coolCanvas.height = height * dpr;
      warmCanvas.width = width * dpr;
      warmCanvas.height = height * dpr;

      ctxCool.setTransform(dpr, 0, 0, dpr, 0, 0);
      ctxWarm.setTransform(dpr, 0, 0, dpr, 0, 0);
    }

    window.addEventListener('resize', resize);
    resize();

    // Initialize Cool particles (closely packed, low kinetic energy)
    const coolParticles = [];
    const NUM_COOL = 42;

    function initCool() {
      coolParticles.length = 0;
      for (let i = 0; i < NUM_COOL; i++) {
        coolParticles.push({
          x: Math.random() * (width - PARTICLE_RADIUS * 2) + PARTICLE_RADIUS,
          y: height * LIQUID_SURFACE_RATIO + Math.random() * (height * (1 - LIQUID_SURFACE_RATIO) - PARTICLE_RADIUS * 2) + PARTICLE_RADIUS,
          vx: (Math.random() - 0.5) * 0.7,
          vy: (Math.random() - 0.5) * 0.7,
          ox: 0,
          oy: 0
        });
      }
    }

    // Initialize Warm particles (energetic liquid + escaping gas)
    const warmParticles = [];
    const NUM_WARM = 42;

    function initWarm() {
      warmParticles.length = 0;
      for (let i = 0; i < NUM_WARM; i++) {
        const isGas = i < 7; // start a few as gas
        warmParticles.push({
          x: Math.random() * (width - PARTICLE_RADIUS * 2) + PARTICLE_RADIUS,
          y: isGas 
            ? Math.random() * (height * LIQUID_SURFACE_RATIO - 20) + 10
            : height * LIQUID_SURFACE_RATIO + Math.random() * (height * (1 - LIQUID_SURFACE_RATIO) - PARTICLE_RADIUS * 2) + PARTICLE_RADIUS,
          vx: (Math.random() - 0.5) * (isGas ? 1.6 : 2.2),
          vy: isGas ? -1.2 - Math.random() * 1.0 : (Math.random() - 0.5) * 2.2,
          state: isGas ? 'gas' : 'liquid',
          trail: []
        });
      }
    }

    setTimeout(() => {
      resize();
      initCool();
      initWarm();
    }, 50);

    let heatPhase = 0;

    function draw() {
      if (!width || !height) {
        requestAnimationFrame(draw);
        return;
      }

      heatPhase += 0.05 * speedMult;

      const surfaceY = height * LIQUID_SURFACE_RATIO;

      // ------------------------------------
      // 1. RENDER COOL PANEL
      // ------------------------------------
      ctxCool.clearRect(0, 0, width, height);

      // Water background zone
      ctxCool.fillStyle = '#f0f9ff';
      ctxCool.fillRect(0, surfaceY, width, height - surfaceY);

      // Surface line
      ctxCool.strokeStyle = '#bae6fd';
      ctxCool.lineWidth = 2;
      ctxCool.beginPath();
      ctxCool.moveTo(0, surfaceY);
      ctxCool.lineTo(width, surfaceY);
      ctxCool.stroke();

      // Update & Draw Cool Particles
      ctxCool.fillStyle = '#0284c7';
      for (const p of coolParticles) {
        p.x += p.vx * speedMult;
        p.y += p.vy * speedMult;

        // Soft bounce boundaries within liquid region
        if (p.x < PARTICLE_RADIUS) { p.x = PARTICLE_RADIUS; p.vx *= -1; }
        if (p.x > width - PARTICLE_RADIUS) { p.x = width - PARTICLE_RADIUS; p.vx *= -1; }
        if (p.y < surfaceY + PARTICLE_RADIUS) { p.y = surfaceY + PARTICLE_RADIUS; p.vy *= -1; }
        if (p.y > height - PARTICLE_RADIUS) { p.y = height - PARTICLE_RADIUS; p.vy *= -1; }

        ctxCool.beginPath();
        ctxCool.arc(p.x, p.y, PARTICLE_RADIUS, 0, Math.PI * 2);
        ctxCool.fill();

        // Small vibration line
        ctxCool.strokeStyle = 'rgba(2, 132, 199, 0.4)';
        ctxCool.lineWidth = 1.2;
        ctxCool.beginPath();
        ctxCool.moveTo(p.x - p.vx * 3, p.y - p.vy * 3);
        ctxCool.lineTo(p.x + p.vx * 3, p.y + p.vy * 3);
        ctxCool.stroke();
      }

      // ------------------------------------
      // 2. RENDER WARM PANEL
      // ------------------------------------
      ctxWarm.clearRect(0, 0, width, height);

      // Water background zone
      ctxWarm.fillStyle = '#fef3c7';
      ctxWarm.fillRect(0, surfaceY, width, height - surfaceY);

      // Surface line
      ctxWarm.strokeStyle = '#fcd34d';
      ctxWarm.lineWidth = 2;
      ctxWarm.beginPath();
      ctxWarm.moveTo(0, surfaceY);
      ctxWarm.lineTo(width, surfaceY);
      ctxWarm.stroke();

      // Heat rays / arrows entering surface
      const rayCount = 4;
      ctxWarm.strokeStyle = 'rgba(245, 158, 11, 0.45)';
      ctxWarm.lineWidth = 2;
      for (let i = 0; i < rayCount; i++) {
        const rx = width * 0.15 + (i * width * 0.22);
        const rayOffset = (heatPhase * 15 + i * 20) % 40;
        const startY = 32;
        const endY = surfaceY - 6;

        ctxWarm.beginPath();
        ctxWarm.setLineDash([4, 4]);
        ctxWarm.moveTo(rx, startY);
        ctxWarm.lineTo(rx, endY);
        ctxWarm.stroke();
        ctxWarm.setLineDash([]);

        // Downward arrowhead
        const arrowY = startY + ((endY - startY + rayOffset) % (endY - startY));
        ctxWarm.fillStyle = '#f59e0b';
        ctxWarm.beginPath();
        ctxWarm.moveTo(rx, arrowY + 6);
        ctxWarm.lineTo(rx - 3, arrowY);
        ctxWarm.lineTo(rx + 3, arrowY);
        ctxWarm.fill();
      }

      // Update & Draw Warm Particles
      for (const p of warmParticles) {
        p.x += p.vx * speedMult;
        p.y += p.vy * speedMult;

        if (p.state === 'liquid') {
          // Energetic bounce in liquid
          if (p.x < PARTICLE_RADIUS) { p.x = PARTICLE_RADIUS; p.vx *= -1; }
          if (p.x > width - PARTICLE_RADIUS) { p.x = width - PARTICLE_RADIUS; p.vx *= -1; }
          if (p.y > height - PARTICLE_RADIUS) { p.y = height - PARTICLE_RADIUS; p.vy *= -1; }

          // Evaporation trigger near surface with upward momentum
          if (p.y <= surfaceY + PARTICLE_RADIUS + 4 && p.vy < 0 && Math.random() < 0.04) {
            p.state = 'gas';
            p.vy = -1.8 - Math.random() * 1.4; // Break out into air
            p.vx = (Math.random() - 0.5) * 1.5;
          } else if (p.y < surfaceY + PARTICLE_RADIUS) {
            p.y = surfaceY + PARTICLE_RADIUS;
            p.vy *= -1;
          }
        } else {
          // Gas state: rises, spreads out widely
          if (p.x < PARTICLE_RADIUS) { p.x = PARTICLE_RADIUS; p.vx *= -1; }
          if (p.x > width - PARTICLE_RADIUS) { p.x = width - PARTICLE_RADIUS; p.vx *= -1; }

          // Save trail
          p.trail.push({ x: p.x, y: p.y });
          if (p.trail.length > 5) p.trail.shift();

          // Reset when reaching top into liquid bed
          if (p.y < -PARTICLE_RADIUS) {
            p.state = 'liquid';
            p.y = height - PARTICLE_RADIUS - 4;
            p.x = Math.random() * (width - PARTICLE_RADIUS * 2) + PARTICLE_RADIUS;
            p.vy = -Math.random() * 2.0;
            p.vx = (Math.random() - 0.5) * 2.2;
            p.trail = [];
          }
        }

        // Draw particle trail if in gas
        if (p.state === 'gas' && p.trail.length > 1) {
          ctxWarm.strokeStyle = 'rgba(14, 165, 233, 0.35)';
          ctxWarm.lineWidth = 1.5;
          ctxWarm.beginPath();
          ctxWarm.moveTo(p.trail[0].x, p.trail[0].y);
          for (let t = 1; t < p.trail.length; t++) {
            ctxWarm.lineTo(p.trail[t].x, p.trail[t].y);
          }
          ctxWarm.stroke();
        }

        // Draw particle
        ctxWarm.fillStyle = p.state === 'gas' ? '#0ea5e9' : '#0284c7';
        ctxWarm.beginPath();
        ctxWarm.arc(p.x, p.y, PARTICLE_RADIUS, 0, Math.PI * 2);
        ctxWarm.fill();

        // Energetic vibration lines in liquid
        if (p.state === 'liquid') {
          ctxWarm.strokeStyle = 'rgba(234, 88, 12, 0.6)';
          ctxWarm.lineWidth = 1.5;
          ctxWarm.beginPath();
          ctxWarm.moveTo(p.x - p.vx * 2.5, p.y - p.vy * 2.5);
          ctxWarm.lineTo(p.x + p.vx * 2.5, p.y + p.vy * 2.5);
          ctxWarm.stroke();
        }
      }

      requestAnimationFrame(draw);
    }

    requestAnimationFrame(draw);
  </script>
</body>
</html>

How Evaporation Fuels the Water Cycle

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 10px;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 620px;
      flex-grow: 1;
    }

    @media (max-width: 480px) {
      .main-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Common Card Panels */
    .view-card {
      position: relative;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 250px;
    }

    .card-title {
      position: absolute;
      top: 8px;
      left: 10px;
      z-index: 10;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      background: rgba(255, 255, 255, 0.85);
      padding: 2px 8px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
    }

    /* Left: Macroscopic Sidewalk View */
    .sky {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 60%;
      background: linear-gradient(180deg, #bae6fd 0%, #e0f2fe 100%);
    }

    .sun {
      position: absolute;
      top: 14px;
      right: 16px;
      font-size: 32px;
      line-height: 1;
      filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
      transition: transform 0.6s ease;
    }

    .ground {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40%;
      background: #cbd5e1;
      border-top: 3px solid #94a3b8;
    }

    .puddle-container {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 140px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .puddle {
      background: #38bdf8;
      border: 2px solid #0284c7;
      border-radius: 50%;
      box-shadow: inset 0 2px 4px rgba(2, 132, 199, 0.4);
      transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
    }

    /* Right: Microscopic Lens View */
    .lens-wrap {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f1f5f9;
    }

    .lens {
      position: relative;
      width: 190px;
      height: 190px;
      border-radius: 50%;
      background: #ffffff;
      border: 4px solid #64748b;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      overflow: hidden;
    }

    .lens-label-top {
      position: absolute;
      top: 8px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 11px;
      font-weight: 700;
      color: #0284c7;
      z-index: 5;
    }

    .lens-label-bottom {
      position: absolute;
      bottom: 6px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 11px;
      font-weight: 700;
      color: #0369a1;
      z-index: 5;
    }

    .heat-layer {
      position: absolute;
      top: 30px;
      left: 0;
      right: 0;
      height: 60px;
      display: flex;
      justify-content: space-around;
      padding: 0 20px;
    }

    .heat-arrow {
      color: #f59e0b;
      font-size: 18px;
      font-weight: 900;
      animation: heatPulse 1.6s infinite ease-in-out;
    }
    .heat-arrow:nth-child(2) { animation-delay: 0.4s; }
    .heat-arrow:nth-child(3) { animation-delay: 0.8s; }

    @keyframes heatPulse {
      0%, 100% { transform: translateY(0); opacity: 0.3; }
      50% { transform: translateY(8px); opacity: 1; }
    }

    .gas-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .gas-particle {
      position: absolute;
      width: 14px;
      height: 14px;
      background: rgba(56, 189, 248, 0.45);
      border: 1.5px solid #0284c7;
      border-radius: 50%;
      animation: rise 2.4s infinite linear;
    }

    .gp-1 { left: 35%; bottom: 60px; animation-delay: 0s; }
    .gp-2 { left: 55%; bottom: 55px; animation-delay: 0.8s; }
    .gp-3 { left: 45%; bottom: 65px; animation-delay: 1.6s; }

    @keyframes rise {
      0% { transform: translate(0, 0) scale(0.8); opacity: 0; }
      20% { opacity: 0.9; }
      80% { opacity: 0.7; }
      100% { transform: translate(var(--dx, 6px), -80px) scale(1.1); opacity: 0; }
    }

    .water-base {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 52px;
      background: #e0f2fe;
      border-top: 2px dashed #38bdf8;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 6px 12px 18px;
    }

    .liquid-drop {
      width: 13px;
      height: 13px;
      background: #0284c7;
      border-radius: 50%;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 620px;
      justify-content: center;
      align-items: center;
    }

    .step-btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      border-radius: 8px;
      color: #475569;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: all 0.2s ease;
    }

    .step-btn span.time {
      font-size: 10px;
      color: #94a3b8;
      font-weight: 500;
    }

    .step-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    }

    .step-btn.active span.time {
      color: #e0f2fe;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="view-card">
      <div class="card-title">Sidewalk</div>
      <div class="sky">
        <div class="sun" id="sunIcon">☀️</div>
      </div>
      <div class="ground">
        <div class="puddle-container">
          <div class="puddle" id="puddleEl"></div>
        </div>
      </div>
    </div>

    
    <div class="view-card">
      <div class="card-title">Microscopic View</div>
      <div class="lens-wrap">
        <div class="lens">
          <div class="lens-label-top">Water Vapor (Gas) ☁️</div>
          
          <div class="heat-layer">
            <div class="heat-arrow">⤓</div>
            <div class="heat-arrow">⤓</div>
            <div class="heat-arrow">⤓</div>
          </div>

          <div class="gas-layer">
            <div class="gas-particle gp-1" style="--dx:-10px;"></div>
            <div class="gas-particle gp-2" style="--dx:12px;"></div>
            <div class="gas-particle gp-3" style="--dx:4px;"></div>
          </div>

          <div class="water-base">
            <div class="liquid-drop"></div>
            <div class="liquid-drop"></div>
            <div class="liquid-drop"></div>
            <div class="liquid-drop"></div>
            <div class="liquid-drop"></div>
            <div class="liquid-drop"></div>
            <div class="liquid-drop"></div>
          </div>
          
          <div class="lens-label-bottom">Liquid Water 💧</div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn active" onclick="setStep(0)">
      <span>Morning</span>
      <span class="time">Full Puddle</span>
    </button>
    <button class="step-btn" onclick="setStep(1)">
      <span>Noon</span>
      <span class="time">Shrinking</span>
    </button>
    <button class="step-btn" onclick="setStep(2)">
      <span>Afternoon</span>
      <span class="time">Dry</span>
    </button>
  </div>

  <script>
    const steps = [
      { w: '120px', h: '36px', opacity: 1, sunScale: 0.9 },
      { w: '60px', h: '20px', opacity: 0.85, sunScale: 1.15 },
      { w: '0px', h: '0px', opacity: 0, sunScale: 1.0 }
    ];

    let currentStep = 0;
    let timer = null;

    const puddle = document.getElementById('puddleEl');
    const sun = document.getElementById('sunIcon');
    const buttons = document.querySelectorAll('.step-btn');

    function applyState(idx) {
      const s = steps[idx];
      puddle.style.width = s.w;
      puddle.style.height = s.h;
      puddle.style.opacity = s.opacity;
      sun.style.transform = `scale(${s.sunScale})`;
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });
    }

    function setStep(idx) {
      currentStep = idx;
      applyState(currentStep);
      resetAutoPlay();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % steps.length;
      applyState(currentStep);
    }

    function resetAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
    }

    applyState(0);
    resetAutoPlay();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      min-height: 100vh;
      background: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow-x: hidden;
      padding: 8px;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 620px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 520px;
      display: block;
    }

    /* Smooth, non-flickering animations (all > 3s) */
    .ray-line {
      stroke: #f59e0b;
      stroke-dasharray: 8 6;
      animation: rayFlow 4s linear infinite;
    }
    @keyframes rayFlow {
      from { stroke-dashoffset: 28; }
      to { stroke-dashoffset: 0; }
    }

    .sun-pulse {
      animation: sunGlow 4s ease-in-out infinite alternate;
      transform-origin: 325px 65px;
    }
    @keyframes sunGlow {
      0% { opacity: 0.35; }
      100% { opacity: 0.65; }
    }

    .vapor-group {
      animation: smoothFloat 3.6s ease-in-out infinite alternate;
    }
    .vapor-delay-1 { animation-delay: -0.9s; }
    .vapor-delay-2 { animation-delay: -1.8s; }
    .vapor-delay-3 { animation-delay: -2.7s; }

    @keyframes smoothFloat {
      0% {
        transform: translateY(0px);
        opacity: 0.75;
      }
      100% {
        transform: translateY(-16px);
        opacity: 1;
      }
    }

    .badge-rect {
      fill: rgba(255, 255, 255, 0.95);
      stroke: #94a3b8;
      stroke-width: 1.5;
      rx: 6;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.08));
    }
    .badge-text {
      font-size: 13px;
      font-weight: 700;
      fill: #0f172a;
      letter-spacing: 0.2px;
    }

    .ocean-badge-rect {
      fill: #0284c7;
      stroke: #0369a1;
      stroke-width: 1.5;
      rx: 6;
      filter: drop-shadow(0 2px 4px rgba(2,132,199,0.25));
    }
    .ocean-badge-text {
      font-size: 13px;
      font-weight: 700;
      fill: #ffffff;
      letter-spacing: 0.2px;
    }

    .sub-note {
      font-size: 11px;
      font-weight: 600;
      fill: #0369a1;
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <svg viewBox="0 0 600 410" aria-label="Earth water cycle cross-section: solar evaporation from ocean, lakes, and rivers">
      <defs>
        
        <linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#93c5fd" />
          <stop offset="40%" stop-color="#bae6fd" />
          <stop offset="80%" stop-color="#e0f2fe" />
          <stop offset="100%" stop-color="#f0f9ff" />
        </linearGradient>

        
        <linearGradient id="oceanGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#38bdf8" />
          <stop offset="25%" stop-color="#0284c7" />
          <stop offset="100%" stop-color="#075985" />
        </linearGradient>

        
        <linearGradient id="waterGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#38bdf8" />
          <stop offset="100%" stop-color="#0284c7" />
        </linearGradient>

        
        <linearGradient id="landGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#86efac" />
          <stop offset="18%" stop-color="#4ade80" />
          <stop offset="40%" stop-color="#22c55e" />
          <stop offset="70%" stop-color="#a16207" />
          <stop offset="100%" stop-color="#713f12" />
        </linearGradient>

        
        <linearGradient id="mountainGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#e2e8f0" />
          <stop offset="35%" stop-color="#94a3b8" />
          <stop offset="100%" stop-color="#64748b" />
        </linearGradient>

        
        <radialGradient id="sunCore" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stop-color="#fffbeb" />
          <stop offset="40%" stop-color="#fde047" />
          <stop offset="100%" stop-color="#f59e0b" />
        </radialGradient>

        
        <linearGradient id="oceanVaporGrad" x1="0%" y1="100%" x2="0%" y2="0%">
          <stop offset="0%" stop-color="#0284c7" stop-opacity="0.9" />
          <stop offset="60%" stop-color="#38bdf8" stop-opacity="0.95" />
          <stop offset="100%" stop-color="#67e8f9" stop-opacity="1" />
        </linearGradient>

        <linearGradient id="lakeVaporGrad" x1="0%" y1="100%" x2="0%" y2="0%">
          <stop offset="0%" stop-color="#0284c7" stop-opacity="0.8" />
          <stop offset="100%" stop-color="#38bdf8" stop-opacity="0.95" />
        </linearGradient>

        
        <filter id="vaporGlow" x="-30%" y="-30%" width="160%" height="160%">
          <feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#38bdf8" flood-opacity="0.75" />
        </filter>
        <filter id="oceanVaporGlow" x="-40%" y="-40%" width="180%" height="180%">
          <feDropShadow dx="0" dy="0" stdDeviation="4.5" flood-color="#0284c7" flood-opacity="0.8" />
        </filter>

        
        <marker id="arrowHeadSmall" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto">
          <polygon points="1 7, 4 1, 7 7" fill="#0284c7" />
        </marker>
        <marker id="arrowHeadMedium" markerWidth="9" markerHeight="9" refX="4.5" refY="4.5" orient="auto">
          <polygon points="1 8, 4.5 1, 8 8" fill="#0284c7" />
        </marker>
      </defs>

      
      <rect x="0" y="0" width="600" height="410" fill="url(#skyGrad)" />

      
      <g fill="#ffffff" opacity="0.65">
        <path d="M 30,70 Q 40,55 60,55 Q 80,55 90,70 Q 105,70 110,82 Q 100,95 70,95 Q 40,95 30,85 Z" />
        <path d="M 180,45 Q 192,32 210,32 Q 225,32 235,45 Q 248,45 252,56 Q 242,67 215,67 Q 190,67 180,58 Z" />
        <path d="M 480,85 Q 495,68 520,68 Q 540,68 550,85 Q 568,85 572,98 Q 560,112 530,112 Q 490,112 480,98 Z" />
      </g>

      
      <polygon points="-20,350 75,130 185,350" fill="url(#mountainGrad)" />
      
      <polygon points="75,130 48,185 64,180 75,190 90,178 102,185" fill="#f8fafc" />

      
      <path d="M-10,350 Q 75,205 140,225 T 260,270 T 345,315 L 345,410 L -10,410 Z" fill="url(#landGrad)" />

      
      <ellipse cx="128" cy="227" rx="36" ry="11" fill="url(#waterGrad)" />

      
      <path d="M 142,233 Q 180,245 200,268 T 265,305 T 345,335 L 345,360 Q 260,330 200,290 T 132,239 Z" fill="url(#waterGrad)" />

      
      <path d="M 340,325 Q 400,320 480,322 T 610,325 L 610,410 L 340,410 Z" fill="url(#oceanGrad)" />
      
      <path d="M 345,328 Q 380,324 415,329 T 485,326 T 555,329 T 605,326" fill="none" stroke="#bae6fd" stroke-width="2.5" opacity="0.8" />
      <path d="M 360,342 Q 410,338 460,342 T 560,342" fill="none" stroke="#7dd3fc" stroke-width="1.8" opacity="0.6" />

      
      <g transform="translate(325, 65)">
        <circle cx="0" cy="0" r="46" fill="#fef08a" class="sun-pulse" />
        <circle cx="0" cy="0" r="34" fill="#fde047" opacity="0.5" />
        <circle cx="0" cy="0" r="23" fill="url(#sunCore)" stroke="#f59e0b" stroke-width="2" />
        
        <line x1="0" y1="-28" x2="0" y2="-36" stroke="#f59e0b" stroke-width="2.5" stroke-linecap="round" />
        <line x1="20" y1="-20" x2="26" y2="-26" stroke="#f59e0b" stroke-width="2.5" stroke-linecap="round" />
        <line x1="28" y1="0" x2="36" y2="0" stroke="#f59e0b" stroke-width="2.5" stroke-linecap="round" />
        <line x1="-20" y1="-20" x2="-26" y2="-26" stroke="#f59e0b" stroke-width="2.5" stroke-linecap="round" />
        <line x1="-28" y1="0" x2="-36" y2="0" stroke="#f59e0b" stroke-width="2.5" stroke-linecap="round" />
      </g>

      
      
      <line x1="302" y1="78" x2="138" y2="220" class="ray-line" stroke-width="2.5" />
      
      <line x1="318" y1="88" x2="225" y2="272" class="ray-line" stroke-width="2.5" />
      
      <line x1="348" y1="84" x2="410" y2="318" class="ray-line" stroke-width="3" />
      <line x1="358" y1="72" x2="520" y2="320" class="ray-line" stroke-width="3" />

      
      
      

      
      <g class="vapor-group" filter="url(#vaporGlow)">
        
        <path d="M 128,216 L 128,158 M 121,166 L 128,154 L 135,166" 
              fill="none" stroke="#0284c7" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
        
        <path d="M 118,212 Q 115,198 120,186 Q 125,174 120,162" 
              fill="none" stroke="#38bdf8" stroke-width="2" stroke-dasharray="3 3" opacity="0.85" />
      </g>

      
      <g class="vapor-group vapor-delay-1" filter="url(#vaporGlow)">
        <path d="M 225,268 L 225,195 M 217,205 L 225,190 L 233,205" 
              fill="none" stroke="#0284c7" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M 215,264 Q 210,246 217,230 Q 224,214 218,198" 
              fill="none" stroke="#38bdf8" stroke-width="2.5" stroke-dasharray="4 3" opacity="0.85" />
      </g>

      
      
      <g class="vapor-group" filter="url(#oceanVaporGlow)">
        
        <path d="M 388,312 L 388,215" stroke="url(#oceanVaporGrad)" stroke-width="9" stroke-linecap="round" />
        <polygon points="376,222 388,198 400,222" fill="#0284c7" stroke="#38bdf8" stroke-width="2" stroke-linejoin="round" />
        
        <line x1="388" y1="305" x2="388" y2="225" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" opacity="0.9" />
      </g>

      
      <g class="vapor-group vapor-delay-1" filter="url(#oceanVaporGlow)">
        <path d="M 452,310 L 452,198" stroke="url(#oceanVaporGrad)" stroke-width="12" stroke-linecap="round" />
        <polygon points="437,208 452,180 467,208" fill="#0284c7" stroke="#38bdf8" stroke-width="2.5" stroke-linejoin="round" />
        <line x1="452" y1="302" x2="452" y2="210" stroke="#ffffff" stroke-width="3.5" stroke-linecap="round" opacity="0.9" />
      </g>

      
      <g class="vapor-group vapor-delay-2" filter="url(#oceanVaporGlow)">
        <path d="M 515,310 L 515,205" stroke="url(#oceanVaporGrad)" stroke-width="11" stroke-linecap="round" />
        <polygon points="501,214 515,188 529,214" fill="#0284c7" stroke="#38bdf8" stroke-width="2" stroke-linejoin="round" />
        <line x1="515" y1="302" x2="515" y2="216" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.9" />
      </g>

      
      <g class="vapor-group vapor-delay-3" filter="url(#oceanVaporGlow)">
        <path d="M 570,314 L 570,222" stroke="url(#oceanVaporGrad)" stroke-width="8.5" stroke-linecap="round" />
        <polygon points="559,230 570,208 581,230" fill="#0284c7" stroke="#38bdf8" stroke-width="2" stroke-linejoin="round" />
        <line x1="570" y1="306" x2="570" y2="232" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.9" />
      </g>

      
      <g class="vapor-group vapor-delay-1" transform="translate(480, 160)">
        <text x="0" y="0" text-anchor="middle" class="sub-note" fill="#0369a1" font-weight="700">▲ Water Vapor Rising ▲</text>
      </g>


      
      
      

      
      <g transform="translate(20, 20)">
        <rect x="0" y="0" width="112" height="28" class="badge-rect" />
        <text x="56" y="19" text-anchor="middle" class="badge-text">Atmosphere</text>
      </g>

      
      <g transform="translate(378, 22)">
        <rect x="0" y="0" width="168" height="28" class="badge-rect" />
        <text x="84" y="19" text-anchor="middle" class="badge-text">Solar Energy (Heat)</text>
      </g>

      
      <g transform="translate(60, 365)">
        <rect x="0" y="0" width="128" height="28" class="badge-rect" />
        <text x="64" y="19" text-anchor="middle" class="badge-text">Lakes &amp; Rivers</text>
      </g>

      
      <g transform="translate(365, 365)">
        <rect x="0" y="0" width="210" height="30" class="ocean-badge-rect" />
        <text x="105" y="20" text-anchor="middle" class="ocean-badge-text">Ocean (Most Evaporation)</text>
      </g>
    </svg>
  </div>
</body>
</html>

science.ks2.y2.t3.s3

Aligned learning resources

Related diagrams