@charset "utf-8";
/* CSS Document */

@-webkit-keyframes zoom-in {
  	from {-webkit-transform:scale(0.4); transform:scale(0.4)}
  	to {-webkit-transform:scale(1); transform:scale(1)}
}

.zoomin-image {
    view-timeline-name: --zoomin-image;
    view-timeline-axis: block;
    animation: linear zoom-in both;
    animation-timeline: --zoomin-image;
    animation-range: entry 1% contain 45%;
}

	.zoomout-image {
    	view-timeline-name: --zoomout-image;
    	view-timeline-axis: block;
    	animation: linear zoom-out both;
    	animation-timeline: --zoomout-image;
    	animation-range: entry 100% cover 100%;
    }
.zoom {overflow: hidden;}

@keyframes reveal {
    from {clip-path: inset(35% 35% 35% 35%);}
    to {clip-path: inset(0% 0% 0% 0%);}
}

.revealing-image {
    view-timeline-name: --revealing-image;
    view-timeline-axis: block;
    animation: linear reveal both;
    animation-timeline: --revealing-image;
    animation-range: entry 100% cover 50%;
}

/* styles for js-scroll-zoom */
.sticky-container {
    position: relative;
    height: 300vh; /* Adjust this height to control sticky duration */
    background-color: black;
    color: white;
}

.sticky-element {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.zoom-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 43% 47%;
    transform-origin: center;
    transform: scale(4); /* Default full size */
    transition: transform 0.1s ease-out; /* Smooth scaling */
 }