/* Hero image — fills the full screen height, image covers the space edge to edge */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: #000;
    background-image: url('images/DJI_20251214115812_0401_D.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

/* ---- Annotation (dot + leader lines + label) ----
   To add one: <div class="annotation" data-fx="0.5" data-fy="0.5">
   data-fx = horizontal position on the image (0=left, 1=right)
   data-fy = vertical position on the image (0=top, 1=bottom) */

/* Outer container — positioned by annotations.js based on data-fx/data-fy */
.annotation {
    position: absolute;
    pointer-events: none;
}

/* The dot */
.annotation-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Diagonal then horizontal line going up and to the right from the dot */
.annotation-leader {
    position: absolute;
    top: -50px;
    left: 0;
    width: 110px;
    height: 50px;
    overflow: visible;
}

/* Rounded text box at the end of the line */
.annotation-label {
    position: absolute;
    top: -50px;
    left: 110px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 0.3em 0.8em;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #2c3e50;
    white-space: nowrap;
}