* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Playfair Display', sans-serif;
}

body {
cursor: none; /* Hide the default cursor */
overflow: hidden;
}

.container {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
background: #222;
}

.slide {
position: relative;
width: 100%;
height: 100%;
background: var(--img);
background-size: cover;
filter: grayscale(100%); /* Set slides to black and white by default */
overflow: hidden;
}

.cursor {
position: fixed;
width: 10px; /* Dot size */
height: 10px;
background: #fff; /* Dot color */
border-radius: 50%;
pointer-events: none; /* Prevent interaction */
transform: translate(-50%, -50%); /* Center the dot */
}

.cursor-circle {
position: fixed;
width: 150px; /* Circle size */
height: 150px;
background: rgba(255, 255, 255, 0.2); /* Transparent circle */
border-radius: 50%;
pointer-events: none; /* Prevent interaction */
transform: translate(-50%, -50%); /* Center the circle */
mix-blend-mode: lighten;
transition: width 0.5s, height 0.5s, background 0.5s; /* Smooth transition for size and background change */
}

.cursor-circle.active {
width: 100vw; /* Fullscreen when active */
height: 100vh;
background: rgba(255, 255, 255, 0); /* Make background fully transparent */
}

.slide {
display: block;
align-content: end;
padding-bottom: 30px;
}

.slide-content {
display: flex;
align-items: center;
justify-content: start;
gap: 10;
}

.hr-1 {
width: 5%;
z-index: 99999;
}

.hr-2 {
width: 75%;
margin-left: 8px;
z-index: 99999;
}

.slide-content h1 {
width: 15%;
color: #fff;
font-weight: 500;
font-size: 30px;
z-index: 99999;
}

.slide-content img {
border-radius: 50%;
border: 1px solid #fff;
padding: 15px 22px;
width: 60px;
margin-right: 15px;
cursor: pointer;
z-index: 100000000;
transition: border 1s ease;
rotate: 50deg;
}

.slide .counter {
display: flex;
align-items: end;
justify-content: end;
color: #fff;
padding-right: 20px;
}

.counter h1 {
z-index: 99999;
font-family: 'Playfair Display Sc';
font-weight: 500;
}

.black-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #1D1D1D;
z-index: 99999999;
transition: height 0.5s ease; /* Smooth transition for height change */
}

@media screen and (max-width: 578px) {
.container {
width: 100vw;
height: 100vh;
}

.slide-content h1 {
width: 40%;
font-size: 25px;
}

.hr-2 {
width: 35%;
}

.slide {
background-position: center right;
}
}

const cursorDot = document.createElement('div'); const cursorCircle = document.createElement('div');

cursorDot.classList.add('cursor'); cursorCircle.classList.add('cursor-circle');

document.body.appendChild(cursorDot); // Append dot cursor to body document.body.appendChild(cursorCircle); // Append transparent circle to body

let isColorful = false; // Track color state

// Mouse movement event to move the dot cursor and circle document.addEventListener('mousemove', (event) => { cursorDot.style.left = `${event.clientX}px`; cursorDot.style.top = `${event.clientY}px`; cursorCircle.style.left = `${event.clientX}px`; cursorCircle.style.top = `${event.clientY}px`;

const slide = document.querySelector('.slide'); slide.style.setProperty('--cursor-x', `${event.clientX}px`); slide.style.setProperty('--cursor-y', `${event.clientY}px`); });

// Touch movement event for mobile devices document.addEventListener('touchmove', (event) => { // Get the touch position const touch = event.touches[0]; cursorDot.style.left = `${touch.clientX}px`; cursorDot.style.top = `${touch.clientY}px`; cursorCircle.style.left = `${touch.clientX}px`; cursorCircle.style.top = `${touch.clientY}px`;

const slide = document.querySelector('.slide'); slide.style.setProperty('--cursor-x', `${touch.clientX}px`); slide.style.setProperty('--cursor-y', `${touch.clientY}px`); }, { passive: true }); // Use passive event listener for better performance

// Click event to toggle the color of the slide and the size of the circle document.addEventListener('click', () => { const slide = document.querySelector('.slide'); isColorful = !isColorful; // Toggle state cursorCircle.classList.toggle('active'); // Toggle active class setTimeout(() => { slide.style.filter = isColorful ? 'none' : 'grayscale(100%)'; // Change filter }, 500); // Delay color change to match the transition });

// Add click event to arrow-icon images to rotate and show black overlay document.querySelectorAll('.arrow-icon').forEach(arrow => { arrow.addEventListener('click', (event) => { const slide = event.target.closest('.slide'); const overlay = slide.querySelector('.black-overlay');

// Rotate the arrow-icon image arrow.style.transform = arrow.style.transform === 'rotate(-50deg)' ? 'rotate(1deg)' : 'rotate(-50deg)'; arrow.style.border = overlay.style.height === '250px' ? '1px solid #fff' : '0px';

// Toggle black overlay height overlay.style.height = overlay.style.height === '250px' ? '0' : '250px';

// Move slider image up slide.style.transition = 'background-position 0.8s ease'; slide.style.backgroundPosition = overlay.style.height === '250px' ? 'center' : 'center top'; slide.style.transition = '1s'; slide.style.transitionDelay = 'clip-path 1s'; slide.style.clipPath = 'circle(0% at 0% 50%);'; }); });