/* The logo, in frame percentages like the video layers, but free to lag the scroll more
   (it sinks behind the water). Clear of the near rocks at about 0.26 and 0.9 across. */
.hero-logo {
    z-index: var(--z-header-logo);
}

.hero-logo > img,
.hero.is-live .hero-logo > img {
    top: 28%;
    right: auto;
    bottom: auto;
    left: 28%;
    visibility: visible;
    width: 43%;
    height: auto;
}

/* Once the fish's canvas draws the logo (logo-plane.js), this stays for layout and screen readers. */
.hero.has-3d-logo .hero-logo > img {
    opacity: 0;
}

/* Upright phones: higher and bigger in the zoomed header. */
@media (orientation: portrait) and (max-width: 820px) {
    .hero-logo > img,
    .hero.is-live .hero-logo > img {
        top: 16%;
        left: 24%;
        width: 52%;
    }
}