.hero h1,
.iwa-highlight h1,
.column-card {
    opacity: 0;
    transform: translateY(-56px); 
    transition: transform 1s ease-out, opacity 1s ease-out;
}
.hero h1.visible,
.iwa-highlight h1.visible,
.column-card.visible {
    opacity: 1;
    transform: translateX(0);
}

.iwa-highlight .cover {
    opacity: 0;
    transform: translateX(-56px); 
    transition: transform 1s ease-out, opacity 1s ease-out;
}
.iwa-highlight .cover.visible {
    opacity: 1;
    transform: translateX(0);
}

.btn--1 {
    opacity: 0;
    transform: translateX(56px); 
    transition: transform 1s ease-out, opacity 1s ease-out;
}
.btn--1.visible {
    opacity: 1;
    transform: translateX(0);
}

.btn-read-more {
    opacity: 0;
    transform: translateX(-72px); 
    transition: transform 1s ease-out, opacity 1s ease-out;
}
.btn-read-more.visible {
    opacity: 1;
    transform: translateX(0);
}


/* PORTFOLIO PAGE, IWA MAGAZINE PAGE */
.portfolio h1 {
    opacity: 0;
    transform: translateY(-32px); 
    transition: transform 1s ease-out, opacity 1s ease-out;
}
.portfolio h1.visible {
    opacity: 1;
    transform: translateY(0);
}

.portfolio img,
.iwa-magazine h1 {
    opacity: 0;
    transform: translateY(-72px); 
    transition: transform 1s ease-out, opacity 1s ease-out;
}
.portfolio img.visible,
.iwa-magazine h1.visible {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-hero .tagline,
.iwa-magazine p {
    opacity: 0;
    transform: translateX(-44px); 
    transition: transform 1s ease-out, opacity 1s ease-out;
}
.portfolio-hero .tagline.visible,
.iwa-magazine p.visible {
    opacity: 1;
    transform: translateX(0);
}

.iwa-magazine .magazine-cover {
    opacity: 0;
    transform: translateX(72px); 
    transition: transform 1s ease-out, opacity 1s ease-out;
}
.iwa-magazine .magazine-cover.visible {
    opacity: 1;
    transform: translateX(0);
}