.hero-bg { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; background-size: cover; background-position: center; }
.hero-bg.active { opacity: 1; }

#hero-track { display: grid; }
#hero-track .hero-slide { grid-area: 1/1; opacity: 0; transition: opacity 0.8s ease; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#hero-track .hero-slide.active { opacity: 1; pointer-events: auto; }

.hero-dot { transition: background-color .3s, transform .3s; }
.hero-dot.dot-active { background-color: #C9A844; transform: scale(1.3); }