/* Return-to-top small overlay control (fixed) moved from styles.css */
.return-top {
    position: fixed;
    right: 1rem;
    bottom: 160px; /* moved up an extra 40px (now 160px above bottom) */
    width: 40px;
    height: 40px;
    background: rgba(32,32,32,0.65);
    color: var(--brand-gold);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 8px 10px 28px rgba(0,0,0,0.66), inset -2px -2px 6px rgba(255,255,255,0.03);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease, opacity 200ms ease;
    z-index: 9999;
    opacity: 0; /* hidden until scrolled */
    pointer-events: none;
    transform: translateY(6px);
}
.return-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.return-top:focus { outline: 3px solid rgba(192,163,117,0.18); }
.return-top:hover, .return-top:focus {
    color: var(--brand-red);
    background: rgba(32,32,32,0.85);
    box-shadow: 14px 16px 36px rgba(0,0,0,0.80), inset -2px -2px 6px rgba(255,255,255,0.03);
    transform: translateY(-2px);
}
.return-top:active { transform: translateY(0); }
.return-top .rt-arrow { font-size: 1.05rem; line-height: 1; font-weight: 800; }

@media (max-width: 520px) {
    .return-top { right: 0.6rem; bottom: 0.6rem; width: 36px; height: 36px; }
    .return-top .rt-arrow { font-size: 0.95rem; }
}

/* Animated guide arrow (dart) — runs once every 20s from the button upward 80px then fades */
.pulse-arrow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--brand-red);
    opacity: 0;
    pointer-events: none;
    font-weight: 900;
    display: inline-block;
    animation: arrow-dart 20s linear infinite;
}

@keyframes arrow-dart {
    0%, 84% { opacity: 0; transform: translate(-50%, -50%); }
    85% { opacity: 1; transform: translate(-50%, -50%); }
    90% { opacity: 1; transform: translate(-50%, calc(-50% - 180px)); }
    98% { opacity: 1; transform: translate(-50%, calc(-50% - 180px)); }
    100% { opacity: 0; transform: translate(-50%, calc(-50% - 180px)); }
}

/* Ghost tail for the darting arrow: 20px long, fades out from arrow base */
.pulse-arrow::after{
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
    top: calc(50% + 6px);
    width: 12px;
    height: 36px;
    border-radius: 50% 50% 40% 40%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,140,60,0.98) 0%, rgba(255,100,50,0.95) 40%, rgba(191,51,52,0.6) 70%, rgba(255,200,120,0) 100%);
    filter: blur(0.6px);
    opacity: 0;
    transform-origin: 50% 0%;
    animation: arrow-tail 20s linear infinite;
}

@keyframes arrow-tail {
    0%, 84% { opacity: 0; transform: translateX(-50%) scaleY(0.6) rotate(-8deg); }
    85% { opacity: 0.6; transform: translateX(-50%) scaleY(0.85) rotate(-6deg); }
    90% { opacity: 1; transform: translateX(-50%) scaleY(1) rotate(-4deg); }
    96% { opacity: 0.8; transform: translateX(-50%) scaleY(1) rotate(-2deg); }
    100% { opacity: 0; transform: translateX(-50%) scaleY(1) rotate(-2deg); }
}