function clearAllTimeouts() {
animationTimeouts.forEach(timeout => clearTimeout(timeout));
animationTimeouts = [];
}
function updateProgress(percent) {
const progressBar = document.getElementById('sd-progress-bar');
if (progressBar) {
progressBar.style.width = percent + '%';
}
}
function resetAnimation() {
clearAllTimeouts();
// Reset elements
const elements = [
'sd-title-uxui',
'sd-title-webexp',
'sd-title-graphic',
'sd-final-composition'
];
elements.forEach(id => {
const el = document.getElementById(id);
if (el) {
el.style.opacity = '0';
el.style.animation = '';
}
});
const separatorLine = document.getElementById('sd-separator-line');
if (separatorLine) {
separatorLine.style.width = '0';
separatorLine.style.animation = '';
}
updateProgress(0);
startAnimationSequence();
}
// ============================================
// MAIN ANIMATION SEQUENCE
// ============================================
function startAnimationSequence() {
if (!isAnimating) return;
const speedFactor = 1;
let cumulativeDelay = 0;
function createTimeout(callback, delay) {
const timeout = setTimeout(() => {
callback();
}, delay);
animationTimeouts.push(timeout);
cumulativeDelay += delay;
updateProgress((cumulativeDelay / totalDuration) * 100);
return timeout;
}
// 1. UX/UI appears
createTimeout(() => {
const title = document.getElementById('sd-title-uxui');
if (title) {
title.style.opacity = '1';
title.style.animation = 'sdTitleFadeIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards';
}
}, 500);
// 2. Web Experience appears
createTimeout(() => {
const prevTitle = document.getElementById('sd-title-uxui');
const newTitle = document.getElementById('sd-title-webexp');
if (prevTitle) {
prevTitle.style.animation = 'sdTitleFadeOut 0.5s ease forwards';
}
setTimeout(() => {
if (newTitle) {
newTitle.style.opacity = '1';
newTitle.style.animation = 'sdTitleFadeIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards';
}
}, 500);
}, 4000);
// 3. Graphic Designer appears
createTimeout(() => {
const prevTitle = document.getElementById('sd-title-webexp');
const newTitle = document.getElementById('sd-title-graphic');
if (prevTitle) {
prevTitle.style.animation = 'sdTitleFadeOut 0.5s ease forwards';
}
setTimeout(() => {
if (newTitle) {
newTitle.style.opacity = '1';
newTitle.style.animation = 'sdTitleFadeIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards';
}
}, 500);
}, 8000);
// 4. Final composition appears
createTimeout(() => {
const prevTitle = document.getElementById('sd-title-graphic');
const finalComp = document.getElementById('sd-final-composition');
const separatorLine = document.getElementById('sd-separator-line');
if (prevTitle) {
prevTitle.style.animation = 'sdTitleFadeOut 0.5s ease forwards';
}
setTimeout(() => {
if (finalComp) {
finalComp.style.opacity = '1';
finalComp.style.animation = 'sdTitleFadeIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards';
}
if (separatorLine) {
setTimeout(() => {
separatorLine.style.animation = 'sdLineExpand 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards';
separatorLine.style.width = '400px';
}, 300);
}
}, 500);
}, 12000);
// 5. Everything slides up
createTimeout(() => {
const mainContent = document.getElementById('sd-main-content');
const bubbleCanvas = document.getElementById('sd-bubble-canvas');
if (mainContent) {
mainContent.style.animation = 'sdSlideUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards';
}
if (bubbleCanvas) {
bubbleCanvas.style.animation = 'sdTitleFadeOut 1s ease forwards';
}
// Stop bubbles
if (bubbleInterval) {
clearInterval(bubbleInterval);
}
// Restart
createTimeout(resetAnimation, 1200);
}, 16000);
}
// ============================================
// EVENT LISTENERS
// ============================================
// Replay button
const replayBtn = document.getElementById('sd-replay-btn');
if (replayBtn) {
replayBtn.addEventListener('click', resetAnimation);
}
// Bubble intensity button
const bubbleBtn = document.getElementById('sd-bubble-btn');
if (bubbleBtn) {
bubbleBtn.addEventListener('click', function() {
bubbleIntensity = bubbleIntensity === 3 ? 1 : bubbleIntensity + 1;
const intensityText = ['🫧 Normal', '🫧🫧 More', '🫧🫧🫧 Lots'][bubbleIntensity - 1];
bubbleBtn.innerHTML = `🫧 ${intensityText}`;
if (isAnimating) {
const cleanup = startBubbles();
setTimeout(cleanup, 100);
}
});
}
// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (e.key === 'r' || e.key === 'R') {
e.preventDefault();
resetAnimation();
}
if (e.key === 'b' || e.key === 'B') {
e.preventDefault();
bubbleBtn?.click();
}
});
// ============================================
// START EVERYTHING
// ============================================
// Start bubbles
startBubbles();
// Start animation sequence
resetAnimation();
}
});
document.addEventListener("DOMContentLoaded", function () {
const images = document.querySelectorAll('.lightbox-trigger');
images.forEach(img => {
img.addEventListener('click', function (e) {
e.preventDefault();
const overlay = document.createElement('div');
overlay.id = 'lightbox-overlay';
overlay.innerHTML = `
`;
document.body.appendChild(overlay);
overlay.addEventListener('click', () => overlay.remove());
});
});
});