/* Hero: film „otwierająca się skrzynka” odtwarzany automatycznie po wejściu na stronę (assets/hero.js). */
.hero-auto { position: relative; height: 100svh; min-height: 34rem; max-height: 60rem; overflow: hidden; background: var(--color-sand); }
.hero-auto::after { display: none; }
.hero-auto .hero-pin { position: absolute; inset: 0; }
.hero-auto .hero-stage { position: absolute; inset: 0; }
.hero-auto .hero-poster, .hero-auto .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% center; }
.hero-auto .hero-video { opacity: 0; transition: opacity .5s ease; }
.hero-auto.is-ready .hero-video { opacity: 1; }
.hero-auto .hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,20,.42) 0%, rgba(20,22,20,.04) 38%, rgba(20,22,20,.5) 100%); pointer-events: none; }
.hero-auto.is-ready .hero-overlay { animation: hero-rise 1s cubic-bezier(.22,.7,.2,1) .1s both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-auto.is-ready .hero-overlay { animation: none; } }
.hero-auto:not(.is-ready) .hero-overlay { opacity: 0; }
.no-hero-js .hero-auto .hero-overlay { opacity: 1; }