/* The lure's canvas fades in once the models have loaded. */
.hero-lure {
    z-index: var(--z-header-lure);
}

.hero-cta-layer {
    z-index: var(--z-header-link);
}

.hero .hero-lure > canvas {
    visibility: visible;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hero .hero-lure.is-ready > canvas {
    opacity: 1;
}

/* The lure's link; lure.js keeps it on the lure. These are its fallback place. */
.hero-cta {
    position: absolute;
    top: 91.5%;
    left: 50%;
    padding: 0.35em 0.9em 0.35em 0.7em;
    border-radius: 999px;
    font-size: clamp(9px, 1.35vw, 24px);
    transition:
        scale 0.35s cubic-bezier(0.3, 1.8, 0.5, 1),
        rotate 0.35s cubic-bezier(0.3, 1.8, 0.5, 1),
        opacity 0.3s ease,
        visibility 0.3s;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.hero-cta:hover,
.hero-cta:focus-visible {
    scale: 1.12;
    rotate: -3deg;
}

.hero-cta svg {
    transition: rotate 0.5s cubic-bezier(0.3, 1.8, 0.5, 1);
}

.hero-cta:hover svg,
.hero-cta:focus-visible svg {
    rotate: -25deg;
}

.hero-cta:active {
    scale: 0.96;
}

.hero-cta:focus-visible {
    outline: 3px solid #ffd54a;
    outline-offset: 3px;
}

/* Floater buttons (floaters.js places them). */
.hero-float-link {
    position: absolute;
    top: 86%;
    padding: 0.35em 0.7em;
    border: 0;
    border-radius: 999px;
    background: none;
    font-size: clamp(8px, 1.15vw, 20px);
    cursor: pointer;
    transition:
        scale 0.35s cubic-bezier(0.3, 1.8, 0.5, 1),
        rotate 0.35s cubic-bezier(0.3, 1.8, 0.5, 1),
        opacity 0.3s ease,
        visibility 0.3s;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

/* Keep the text anchored to its prop while giving touch users a full-sized target. */
@media (pointer: coarse) {
    .hero-cta,
    .hero-float-link {
        box-sizing: border-box;
        min-height: 44px;
        min-width: 44px;
    }
}

.hero-float-link[data-float="boat"] {
    left: 13%;
}

.hero-float-link[data-float="buoy"] {
    top: 80%;
    left: 85%;
}

.hero-float-link:hover,
.hero-float-link:focus-visible {
    scale: 1.12;
    rotate: 3deg;
}

.hero-float-link:active {
    scale: 0.96;
}

.hero-float-link:focus-visible {
    outline: 3px solid #ffd54a;
    outline-offset: 3px;
}

/* Under the surface the sinker takes over: these go. */
.hero-cta-layer.is-sunk .hero-float-link,
.hero-cta-layer.is-sunk .hero-cta {
    opacity: 0;
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .hero-cta,
    .hero-cta svg,
    .hero-float-link {
        transition: none;
    }
}

/* Upright phones: big enough to read and tap. */
@media (orientation: portrait) and (max-width: 820px) {
    .hero-cta {
        font-size: 17px;
    }

    .hero-float-link {
        font-size: 14px;
    }
}