/* ==========================================================
   Sniper scope (background decoration on index.html)
   Markup:  <div class="scope-clip"><div class="scope"><svg>...</svg></div></div>
   Script:  js/scope.js moves the part with id="scopeTracker"

   Quick edits:
   - Position:  .scope  ->  right / top
   - Size:      .scope  ->  width
   - Phones:    @media block at the bottom
   ========================================================== */

/* Full-screen box that clips the scope so it can never cause a scrollbar */
.scope-clip {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* The scope itself */
.scope {
    position: absolute;
    /* z-index: 1; */
    right: max(-55px, calc(50% - 760px));
    top: min(54%, 560px);
    width: min(760px, 120vw);
    aspect-ratio: 1;
    margin-top: calc(min(760px, 120vw) / -2);
    pointer-events: none;
    animation: scope-in 1.1s cubic-bezier(.2, .8, .2, 1) both;
}

.scope svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Red glow behind the scope */
.scope::before {
    content: "";
    position: absolute;
    inset: -30%;                 /* how far the glow spreads past the scope */
    z-index: -1;                 /* keeps it behind the rings */
    background: radial-gradient(circle, rgba(255, 0, 0, 0.16), transparent 60%);
    pointer-events: none;
}

/* The part that follows the mouse (values set by js/scope.js) */
.scope .tracker {
    transform: translate(var(--tx, 0px), var(--ty, 0px));
    transition: transform .25s ease-out;
}

/* Zoom-in when the page loads */
@keyframes scope-in {
    from { opacity: 0; transform: scale(1.18); }
    to   { opacity: 1; transform: scale(1); }
}

/* Phones and small screens */
@media (max-width: 860px) {
    .scope {
        opacity: .55;
        right: -30%;
    }
}

/* Respect "reduce motion" settings */
@media (prefers-reduced-motion: reduce) {
    .scope { animation: none; }
    .scope .tracker { transition: none; }
}