script.js

class PrismSimulator {
    constructor(canvasId) {
        this.canvas = document.getElementById(canvasId);
        this.ctx = this.canvas.getContext('2d');
        this.animationId = null;
        this.isAnimating = true;

        // 自動シミュレーションモード
        this.autoMode = false;
        this.autoTime = 0;

        // 表示モード ('beam' または 'particles')
        this.displayMode = 'beam';

        // 光の玉
        this.particles = [];
        this.maxParticles = 200; // 大幅に増やす
        this.particleSpawnRate = 0.8; // 生成率を上げる

        // スクリーン
        this.screen = {
            x: 700,
            y: 150,
            width: 80,
            height: 200,
            pixels: [], // 色の記憶用配列
            pixelSize: 2,
            fadeRate: 0.995 // 色のフェード率
        };

        // プリズムのプロパティ
        this.prism = {
            x: 400,
            y: 250,
            size: 120,
            rotation: 0,
            vertices: [] // 三角形の頂点
        };

        // 光のプロパティ
        this.light = {
            angle: 45,
            intensity: 0.8,
            colors: [
                { wavelength: 700, color: 'rgba(255, 0, 0, 0.8)', n: 1.514, name: '赤' },    // 赤
                { wavelength: 620, color: 'rgba(255, 127, 0, 0.8)', n: 1.517, name: '橙' },  // 橙
                { wavelength: 580, color: 'rgba(255, 255, 0, 0.8)', n: 1.519, name: '黄' },  // 黄
                { wavelength: 530, color: 'rgba(0, 255, 0, 0.8)', n: 1.522, name: '緑' },    // 緑
                { wavelength: 470, color: 'rgba(0, 127, 255, 0.8)', n: 1.524, name: '青' },  // 青
                { wavelength: 450, color: 'rgba(75, 0, 130, 0.8)', n: 1.526, name: '藍' },   // 藍
                { wavelength: 400, color: 'rgba(148, 0, 211, 0.8)', n: 1.530, name: '紫' }   // 紫
            ]
        };

        this.currentMaterial = 'glass';
        this.materials = {
            glass: { baseN: 1.52, name: 'ガラス' },
            diamond: { baseN: 2.42, name: 'ダイヤモンド' },
            water: { baseN: 1.33, name: '水' }
        };

        this.time = 0;
        this.updatePrismVertices();
        this.initScreen();
        this.init();
    }

    initScreen() {
        // スクリーンピクセル配列を初期化
        const cols = Math.ceil(this.screen.width / this.screen.pixelSize);
        const rows = Math.ceil(this.screen.height / this.screen.pixelSize);
        this.screen.pixels = Array(rows).fill().map(() => Array(cols).fill(null));
    }

    init() {
        this.setupEventListeners();
        this.animate();
    }

    updatePrismVertices() {
        // 三角形の頂点を計算
        const { x, y, size, rotation } = this.prism;
        this.prism.vertices = [
            { x: x, y: y - size }, // 上
            { x: x - size * 0.866, y: y + size * 0.5 }, // 左下
            { x: x + size * 0.866, y: y + size * 0.5 }  // 右下
        ];
    }

    // プリズムのエッジを取得
    getPrismEdges() {
        const v = this.prism.vertices;
        return [
            { start: v[0], end: v[1] }, // 左辺
            { start: v[1], end: v[2] }, // 底辺
            { start: v[2], end: v[0] }  // 右辺
        ];
    }

    // 線分と線分の交点を計算
    getLineIntersection(p1, p2, p3, p4) {
        const x1 = p1.x, y1 = p1.y;
        const x2 = p2.x, y2 = p2.y;
        const x3 = p3.x, y3 = p3.y;
        const x4 = p4.x, y4 = p4.y;

        const denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
        if (Math.abs(denom) < 0.0001) return null;

        const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom;
        const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / denom;

        if (t >= 0 && t <= 1 && u >= 0 && u <= 1) {
            return {
                x: x1 + t * (x2 - x1),
                y: y1 + t * (y2 - y1)
            };
        }
        return null;
    }

    // 光の玉クラス
    createParticle() {
        const colorIndex = Math.floor(Math.random() * this.light.colors.length);
        const colorData = this.light.colors[colorIndex];
        const angleRad = (this.light.angle * Math.PI) / 180;

        // 入射光線に沿って一直線に進むように設定
        const startX = 50;
        const startY = this.prism.y - Math.tan(angleRad) * (this.prism.x - startX);
        const speed = 3 + Math.random() * 2; // 速度に少し変化をつける

        return {
            x: startX,
            y: startY,
            vx: Math.cos(angleRad) * speed,
            vy: Math.sin(angleRad) * speed,
            color: colorData.color,
            colorData: colorData,
            size: 3 + Math.random() * 3,
            life: 1.0,
            insidePrism: false,
            refracted: false
        };
    }

    updateParticles() {
        // 新しい光の玉を生成
        if (Math.random() < this.particleSpawnRate && this.particles.length < this.maxParticles) {
            this.particles.push(this.createParticle());
        }

        // スクリーンの色をフェードさせる
        this.updateScreenPixels();

        // 光の玉の更新
        this.particles = this.particles.filter(particle => {
            // 位置の更新
            particle.x += particle.vx;
            particle.y += particle.vy;
            particle.life -= 0.003; // 少しゆっくり消えるように

            // プリズムとの衝突判定
            const insideBefore = particle.insidePrism;
            particle.insidePrism = this.isPointInPrism(particle.x, particle.y);

            // プリズムに入った瞬間に屈折
            if (!insideBefore && particle.insidePrism && !particle.refracted) {
                this.refractParticle(particle);
                particle.refracted = true;
            }

            // プリズムから出た瞬間に再度屈折
            if (insideBefore && !particle.insidePrism && particle.refracted) {
                this.refractParticleExit(particle);
            }

            // スクリーンとの衝突判定
            if (this.isPointOnScreen(particle.x, particle.y)) {
                this.addColorToScreen(particle.x, particle.y, particle.color, particle.life);
                // スクリーンに当たったら光の玉を消す
                return false;
            }

            return particle.life > 0 && particle.x < this.canvas.width + 50;
        });
    }

    updateScreenPixels() {
        // スクリーンの色をフェードさせる
        this.screen.pixels.forEach(row => {
            row.forEach((pixel, index) => {
                if (pixel) {
                    pixel.intensity *= this.screen.fadeRate;
                    if (pixel.intensity < 0.01) {
                        row[index] = null; // 完全に消えたらnullに
                    }
                }
            });
        });
    }

    isPointOnScreen(x, y) {
        return x >= this.screen.x &&
               x <= this.screen.x + this.screen.width &&
               y >= this.screen.y &&
               y <= this.screen.y + this.screen.height;
    }

    addColorToScreen(x, y, color, intensity) {
        // スクリーン上のピクセル位置を計算
        const localX = Math.floor((x - this.screen.x) / this.screen.pixelSize);
        const localY = Math.floor((y - this.screen.y) / this.screen.pixelSize);

        const cols = Math.ceil(this.screen.width / this.screen.pixelSize);
        const rows = Math.ceil(this.screen.height / this.screen.pixelSize);

        if (localX >= 0 && localX < cols && localY >= 0 && localY < rows) {
            const currentPixel = this.screen.pixels[localY][localX];

            if (currentPixel) {
                // 既に色がある場合は強度を上げる
                currentPixel.intensity = Math.min(1.0, currentPixel.intensity + intensity * 0.3);
            } else {
                // 新しい色を設定
                this.screen.pixels[localY][localX] = {
                    color: color,
                    intensity: intensity
                };
            }
        }
    }

    isPointInPrism(x, y) {
        const v = this.prism.vertices;
        let inside = false;
        for (let i = 0, j = v.length - 1; i < v.length; j = i++) {
            const xi = v[i].x, yi = v[i].y;
            const xj = v[j].x, yj = v[j].y;
            const intersect = ((yi > y) !== (yj > y))
                && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
            if (intersect) inside = !inside;
        }
        return inside;
    }

    refractParticle(particle) {
        const material = this.materials[this.currentMaterial];
        const angle = Math.atan2(particle.vy, particle.vx);
        const adjustedN = material.baseN + (particle.colorData.n - 1.52) * 0.1;
        const newAngle = this.calculateRefraction(angle, 1.0, adjustedN);

        if (newAngle !== null) {
            const speed = Math.sqrt(particle.vx * particle.vx + particle.vy * particle.vy);
            particle.vx = Math.cos(newAngle) * speed;
            particle.vy = Math.sin(newAngle) * speed;
        }
    }

    refractParticleExit(particle) {
        const material = this.materials[this.currentMaterial];
        const angle = Math.atan2(particle.vy, particle.vx);
        const adjustedN = material.baseN + (particle.colorData.n - 1.52) * 0.1;
        const newAngle = this.calculateRefraction(angle, adjustedN, 1.0);

        if (newAngle !== null) {
            const speed = Math.sqrt(particle.vx * particle.vx + particle.vy * particle.vy);

            // 各色で分光角度を調整
            const colorIndex = this.light.colors.findIndex(c => c.name === particle.colorData.name);
            const colorOffset = (colorIndex - 3) * 0.03;
            const adjustedExitAngle = newAngle + colorOffset;

            particle.vx = Math.cos(adjustedExitAngle) * speed;
            particle.vy = Math.sin(adjustedExitAngle) * speed;
        }
    }

    drawParticles() {
        this.particles.forEach(particle => {
            const opacity = particle.life * this.light.intensity;
            const adjustedColor = particle.color.replace(/[0-9.]+\)$/, `${opacity})`);

            // 光の玉本体
            this.ctx.beginPath();
            this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
            this.ctx.fillStyle = adjustedColor;
            this.ctx.fill();

            // 輝き効果
            const glowGradient = this.ctx.createRadialGradient(
                particle.x, particle.y, 0,
                particle.x, particle.y, particle.size * 3
            );
            glowGradient.addColorStop(0, particle.color.replace(/[0-9.]+\)$/, `${opacity * 0.5})`));
            glowGradient.addColorStop(1, particle.color.replace(/[0-9.]+\)$/, '0)'));
            this.ctx.fillStyle = glowGradient;
            this.ctx.beginPath();
            this.ctx.arc(particle.x, particle.y, particle.size * 3, 0, Math.PI * 2);
            this.ctx.fill();
        });
    }

    setupEventListeners() {
        // 角度スライダー
        const angleSlider = document.getElementById('angleSlider');
        const angleValue = document.getElementById('angleValue');
        angleSlider.addEventListener('input', (e) => {
            this.light.angle = parseInt(e.target.value);
            angleValue.textContent = e.target.value;
            this.autoMode = false; // 手動操作時は自動モードを解除
            document.getElementById('autoModeButton').textContent = '自動シミュレーション開始';
        });

        // 強さスライダー
        const intensitySlider = document.getElementById('intensitySlider');
        const intensityValue = document.getElementById('intensityValue');
        intensitySlider.addEventListener('input', (e) => {
            this.light.intensity = parseInt(e.target.value) / 100;
            intensityValue.textContent = e.target.value;
            this.autoMode = false; // 手動操作時は自動モードを解除
            document.getElementById('autoModeButton').textContent = '自動シミュレーション開始';
        });

        // プリズム種類
        const prismType = document.getElementById('prismType');
        prismType.addEventListener('change', (e) => {
            this.currentMaterial = e.target.value;
            this.autoMode = false; // 手動操作時は自動モードを解除
            document.getElementById('autoModeButton').textContent = '自動シミュレーション開始';
        });

        // アニメーショントグル
        const toggleButton = document.getElementById('toggleAnimation');
        toggleButton.addEventListener('click', () => {
            this.isAnimating = !this.isAnimating;
            toggleButton.textContent = this.isAnimating ? 'アニメーション停止' : 'アニメーション開始';
            if (this.isAnimating) {
                this.animate();
            } else {
                cancelAnimationFrame(this.animationId);
            }
        });

        // 自動シミュレーションモード
        const autoModeButton = document.getElementById('autoModeButton');
        autoModeButton.addEventListener('click', () => {
            this.autoMode = !this.autoMode;
            autoModeButton.textContent = this.autoMode ? '自動シミュレーション停止' : '自動シミュレーション開始';

            if (this.autoMode) {
                // 自動モード開始時に初期化
                this.autoTime = 0;
            }
        });

        // 表示モード切り替え
        const modeToggle = document.getElementById('modeToggle');
        modeToggle.addEventListener('click', () => {
            this.displayMode = this.displayMode === 'beam' ? 'particles' : 'beam';
            modeToggle.textContent = this.displayMode === 'beam' ? '光の玉モード' : '光線モード';

            // モード切り替え時に光の玉とスクリーンをリセット
            if (this.displayMode === 'particles') {
                this.particles = [];
                this.initScreen(); // スクリーンもリセット
            }
        });
    }

    drawBackground() {
        // グラデーション背景
        const gradient = this.ctx.createLinearGradient(0, 0, 0, this.canvas.height);
        gradient.addColorStop(0, '#87CEEB');
        gradient.addColorStop(0.5, '#E0F6FF');
        gradient.addColorStop(1, '#f0f0f0');
        this.ctx.fillStyle = gradient;
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    }

    drawPrism() {
        // 三角形の頂点を更新
        this.updatePrismVertices();

        // プリズムを描画
        this.ctx.beginPath();
        const v = this.prism.vertices;
        this.ctx.moveTo(v[0].x, v[0].y);
        this.ctx.lineTo(v[1].x, v[1].y);
        this.ctx.lineTo(v[2].x, v[2].y);
        this.ctx.closePath();

        // プリズムの塗りつぶし
        const prismGradient = this.ctx.createLinearGradient(
            v[0].x, v[0].y,
            (v[1].x + v[2].x) / 2, (v[1].y + v[2].y) / 2
        );
        prismGradient.addColorStop(0, 'rgba(200, 220, 255, 0.3)');
        prismGradient.addColorStop(0.5, 'rgba(180, 200, 255, 0.5)');
        prismGradient.addColorStop(1, 'rgba(160, 180, 255, 0.3)');
        this.ctx.fillStyle = prismGradient;
        this.ctx.fill();

        // プリズムの枠線
        this.ctx.strokeStyle = 'rgba(100, 150, 200, 0.8)';
        this.ctx.lineWidth = 3;
        this.ctx.stroke();
    }

    calculateRefraction(incidentAngle, n1, n2) {
        // スネルの法則: n1 * sin(θ1) = n2 * sin(θ2)
        const sinIncident = Math.sin(incidentAngle);
        const sinRefracted = (n1 / n2) * sinIncident;

        // 全反射チェック
        if (Math.abs(sinRefracted) > 1) {
            return null; // 全反射
        }

        return Math.asin(sinRefracted);
    }

    drawLightRay() {
        if (this.displayMode === 'particles') {
            // 光の玉モード
            this.updateParticles();
            this.drawParticles();
            this.drawScreen(); // スクリーンを描画
        } else {
            // 従来の光線モード
            this.drawBeamMode();
        }
    }

    drawScreen() {
        const { x, y, width, height, pixelSize, pixels } = this.screen;

        // スクリーンの背景
        this.ctx.fillStyle = 'rgba(20, 20, 20, 0.8)';
        this.ctx.fillRect(x, y, width, height);

        // スクリーンの枠線
        this.ctx.strokeStyle = 'rgba(100, 100, 100, 0.9)';
        this.ctx.lineWidth = 2;
        this.ctx.strokeRect(x, y, width, height);

        // 色のついたピクセルを描画
        pixels.forEach((row, rowIndex) => {
            row.forEach((pixel, colIndex) => {
                if (pixel) {
                    const pixelX = x + colIndex * pixelSize;
                    const pixelY = y + rowIndex * pixelSize;

                    // 色の透明度を強度で調整
                    const color = pixel.color.replace(/[0-9.]+\)$/, `${pixel.intensity})`);
                    this.ctx.fillStyle = color;
                    this.ctx.fillRect(pixelX, pixelY, pixelSize, pixelSize);

                    // 少し広げて輝き効果
                    if (pixel.intensity > 0.5) {
                        const glowColor = pixel.color.replace(/[0-9.]+\)$/, `${pixel.intensity * 0.3})`);
                        this.ctx.fillStyle = glowColor;
                        this.ctx.fillRect(pixelX - 1, pixelY - 1, pixelSize + 2, pixelSize + 2);
                    }
                }
            });
        });

        // スクリーンのラベル
        this.ctx.save();
        this.ctx.font = 'bold 12px Arial';
        this.ctx.fillStyle = '#ccc';
        this.ctx.fillText('スクリーン', x + width/2 - 25, y - 5);
        this.ctx.restore();
    }

    drawBeamMode() {
        const angleRad = (this.light.angle * Math.PI) / 180;
        const material = this.materials[this.currentMaterial];

        // 入射光の開始点
        const startX = 50;
        const startY = this.prism.y - Math.tan(angleRad) * (this.prism.x - startX);

        // 白色光（入射光）- 強さを反映
        const whiteIntensity = Math.max(0.3, this.light.intensity);
        this.drawBeam(startX, startY, this.prism.x, this.prism.y,
                     `rgba(255, 255, 255, ${whiteIntensity})`, 8 + this.light.intensity * 4);

        // 各色光の分散 - 7色を明確に分離
        const dispersionFactor = 0.15; // 分散の度合いを増加

        this.light.colors.forEach((colorData, index) => {
            // 屈折率の差を大きくして7色の分離を明確に
            const adjustedN = material.baseN + (colorData.n - 1.52) * dispersionFactor;
            const refractedAngle = this.calculateRefraction(angleRad, 1.0, adjustedN);

            if (refractedAngle !== null) {
                // プリズム内部の光線
                const internalEndX = this.prism.x + Math.cos(refractedAngle) * this.prism.size * 0.8;
                const internalEndY = this.prism.y + Math.sin(refractedAngle) * this.prism.size * 0.8;

                // 出射角度（再度屈折）
                const exitAngle = this.calculateRefraction(refractedAngle, adjustedN, 1.0);

                if (exitAngle !== null) {
                    // 各色の分散角度をより明確にするための調整
                    const colorOffset = (index - 3) * 0.02; // 色による角度のずれ
                    const adjustedExitAngle = exitAngle + colorOffset;

                    // プリズムから出た後の光線 - より長くして分離を明確に
                    const rayLength = 250 + index * 10; // 各色で長さを少し変える
                    const finalEndX = internalEndX + Math.cos(adjustedExitAngle) * rayLength;
                    const finalEndY = internalEndY + Math.sin(adjustedExitAngle) * rayLength;

                    // 分散した光線を描画 - 強さを適切に反映
                    const colorIntensity = Math.max(0.2, this.light.intensity * 0.8);
                    const internalIntensity = Math.max(0.1, this.light.intensity * 0.5);

                    // 色の透明度調整
                    const adjustedColor = this.adjustColorIntensity(colorData.color, colorIntensity);
                    const internalColor = this.adjustColorIntensity(colorData.color, internalIntensity);

                    // プリズム内部の光線
                    this.drawBeam(
                        this.prism.x, this.prism.y,
                        internalEndX, internalEndY,
                        internalColor,
                        4 + this.light.intensity * 2
                    );

                    // プリズム外部の光線
                    this.drawBeam(
                        internalEndX, internalEndY,
                        finalEndX, finalEndY,
                        adjustedColor,
                        5 + this.light.intensity * 3
                    );

                    // 光の輝き効果 - 強さに応じて大きさを変化
                    this.drawGlow(finalEndX, finalEndY, adjustedColor, 15 + this.light.intensity * 10);

                    // 色のラベルを表示
                    this.drawColorLabel(finalEndX, finalEndY, colorData.name, adjustedColor);
                }
            }
        });
    }

    adjustColorIntensity(colorString, intensity) {
        // カラーコードの透明度部分を調整
        const match = colorString.match(/rgba?\(([^)]+)\)/);
        if (match) {
            const parts = match[1].split(',');
            if (parts.length >= 4) {
                parts[3] = String(Math.max(0.1, parseFloat(parts[3]) * intensity));
                return `rgba(${parts.join(',')})`;
            }
        }
        return colorString;
    }

    drawColorLabel(x, y, colorName, color) {
        this.ctx.save();
        this.ctx.font = 'bold 12px Arial';
        this.ctx.fillStyle = color;
        this.ctx.fillText(colorName, x + 10, y);
        this.ctx.restore();
    }

    drawBeam(x1, y1, x2, y2, color, width) {
        this.ctx.beginPath();
        this.ctx.moveTo(x1, y1);
        this.ctx.lineTo(x2, y2);
        this.ctx.strokeStyle = color;
        this.ctx.lineWidth = width;
        this.ctx.lineCap = 'round';
        this.ctx.stroke();
    }

    drawGlow(x, y, color, size = 20) {
        const gradient = this.ctx.createRadialGradient(x, y, 0, x, y, size);
        gradient.addColorStop(0, color.replace(/[0-9.]+\)$/, '0.8)'));
        gradient.addColorStop(1, color.replace(/[0-9.]+\)$/, '0)'));
        this.ctx.fillStyle = gradient;
        this.ctx.beginPath();
        this.ctx.arc(x, y, size, 0, Math.PI * 2);
        this.ctx.fill();
    }

    drawLabels() {
        this.ctx.font = 'bold 14px Arial';
        this.ctx.fillStyle = '#333';

        // 「白色光」ラベル
        this.ctx.fillText('白色光', 60, this.prism.y - 50);

        // 「スペクトル」ラベル
        this.ctx.fillText('スペクトル', this.prism.x + 150, this.prism.y + 100);

        // 材料情報
        const material = this.materials[this.currentMaterial];
        this.ctx.font = '12px Arial';
        this.ctx.fillStyle = '#666';
        this.ctx.fillText(`${material.name} (屈折率: ${material.baseN})`,
                         this.prism.x - 50, this.prism.y + 180);
    }

    animate() {
        if (!this.isAnimating) return;

        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        // 自動モードの場合はパラメータを自動変更
        if (this.autoMode) {
            this.updateAutoMode();
        }

        this.drawBackground();
        this.drawPrism();
        this.drawLightRay();
        this.drawLabels();

        // プリズムのゆっくりとした回転
        this.prism.rotation = Math.sin(this.time * 0.01) * 0.1;
        this.time++;

        this.animationId = requestAnimationFrame(() => this.animate());
    }

    updateAutoMode() {
        this.autoTime++;

        // 角度の自動変化 (15-75度の範囲を周期的に変化)
        const angleCycle = 400; // 1周期のフレーム数
        const angleRange = 30; // 変化範囲
        const centerAngle = 45; // 中心角度
        this.light.angle = centerAngle + Math.sin((this.autoTime % angleCycle) / angleCycle * Math.PI * 2) * angleRange;

        // 強さの自動変化 (30-90%の範囲)
        const intensityCycle = 300; // 1周期のフレーム数
        const intensityRange = 0.3; // 変化範囲
        const centerIntensity = 0.6; // 中心強さ
        this.light.intensity = centerIntensity + Math.sin((this.autoTime % intensityCycle) / intensityCycle * Math.PI * 2) * intensityRange;

        // プリズム材料の自動変更
        const materialCycle = 600; // 材料変更の周期
        const materialIndex = Math.floor(this.autoTime / materialCycle) % 3;
        const materials = ['glass', 'diamond', 'water'];
        this.currentMaterial = materials[materialIndex];

        // UIの更新
        document.getElementById('angleSlider').value = this.light.angle;
        document.getElementById('angleValue').textContent = Math.round(this.light.angle);
        document.getElementById('intensitySlider').value = Math.round(this.light.intensity * 100);
        document.getElementById('intensityValue').textContent = Math.round(this.light.intensity * 100);
        document.getElementById('prismType').value = this.currentMaterial;
    }
}

// ページ読み込み完了時にシミュレーターを初期化
document.addEventListener('DOMContentLoaded', () => {
    const simulator = new PrismSimulator('prismCanvas');

    // 説明パネルのインタラクティブ機能
    const colorInfos = document.querySelectorAll('.color-info');
    colorInfos.forEach(info => {
        info.addEventListener('mouseenter', function() {
            this.style.transform = 'translateX(5px)';
            this.style.transition = 'transform 0.3s ease';
        });

        info.addEventListener('mouseleave', function() {
            this.style.transform = 'translateX(0)';
        });
    });

    // 事実のリストにアニメーション効果
    const facts = document.querySelectorAll('.facts li');
    facts.forEach((fact, index) => {
        fact.style.opacity = '0';
        fact.style.transform = 'translateY(20px)';
        fact.style.transition = `opacity 0.5s ease ${index * 0.1}s, transform 0.5s ease ${index * 0.1}s`;

        setTimeout(() => {
            fact.style.opacity = '1';
            fact.style.transform = 'translateY(0)';
        }, 1000 + index * 100);
    });
});