/* The opening screen leaves immediately on native scroll.
   Keep its artwork fixed within the composition; later sections retain motion. */
#intro {height:auto;min-height:0}
#intro .hero-stage {--hero-progress:0!important;position:relative}

@media(max-width:767px) {
 .hero-art .float-one {width:max(58px,min(30%,calc(var(--hero-art-height)*.43)))}
 .hero-art .float-two {width:max(58px,min(28%,calc(var(--hero-art-height)*.4)))}
 .hero-art .floating-post>span {font-size:8px;line-height:1.25;padding:5px 2px 2px}
}
/* On shorter screens retain the artwork slot and keep the lower card inside it. */
@media(max-width:767px) and (max-height:660px) {
 .hero-art .float-two {top:auto;bottom:0}
}
@media(max-width:767px) and (max-height:600px) {
 .hero-art .float-two {left:18%}
}
@media(min-width:640px) and (max-width:767px) and (max-height:940px) {
 .hero-art .float-one {width:max(58px,min(30%,calc(var(--hero-art-height)*.4)))}
 .hero-art .float-two {top:auto;bottom:0;width:max(58px,min(28%,calc(var(--hero-art-height)*.37)))}
}