/* Guided tour overlay, used by scripts/SnowtographyVisualizer2/snowtographyTour.js.
   The first block is copied from the sister app's Compare.cshtml (lines 20-64),
   where the same rules sit in the page's own <style> block, as they do in
   FutureClimate.cshtml. Here they are a separate file so any page can link them.
   Light colours only, matching the sister apps: the tooltip is deliberately not
   adapted to Metronic's dark theme. */

.tour-backdrop {
    position: fixed;
    z-index: 100000;
    border-radius: 6px;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.65);
    transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
    pointer-events: none;
}

.tour-backdrop-center {
    border-radius: 50%;
}

.tour-tooltip {
    position: fixed;
    z-index: 100001;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    padding: 1rem 1.25rem;
    box-sizing: border-box;
}

    .tour-tooltip::before {
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        background: #fff;
        transform: rotate(45deg);
    }

    .tour-tooltip.tour-arrow-bottom::before {
        top: -6px;
        left: 50%;
        margin-left: -6px;
    }

    .tour-tooltip.tour-arrow-top::before {
        bottom: -6px;
        left: 50%;
        margin-left: -6px;
    }

    .tour-tooltip.tour-arrow-left::before {
        right: -6px;
        top: 50%;
        margin-top: -6px;
    }

    .tour-tooltip.tour-arrow-right::before {
        left: -6px;
        top: 50%;
        margin-top: -6px;
    }

    .tour-tooltip .tour-step-count {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #9ca3af;
        font-weight: 600;
    }

    .tour-tooltip .tour-title {
        font-size: 1rem;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0.15rem 0 0.4rem;
    }

    .tour-tooltip .tour-body {
        font-size: 0.85rem;
        color: #4b5563;
        line-height: 1.4;
        margin-bottom: 0.85rem;
    }

    .tour-tooltip .tour-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
    }

    .tour-tooltip .tour-skip {
        font-size: 0.78rem;
        color: #9ca3af;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }

        .tour-tooltip .tour-skip:hover {
            color: #f1416c;
        }

@media (max-width: 575.98px) {
    .tour-tooltip {
        width: calc(100vw - 32px);
    }
}

/* --- Additions for the Snowtography Visualizer -------------------------- */

/* A step with dim: false outlines its target without darkening the rest of
   the page, because the user needs to watch something outside the outline:
   the video reacting while the pointer moves over the chart. */
.tour-backdrop.tour-backdrop-undimmed {
    box-shadow: 0 0 0 3px var(--bs-primary);
}

/* The "Take a Tour" button on the intro overlay. One slow pulse that starts a
   second after the page loads, so the button is noticed, and does not repeat.
   The arguments are: duration 2.4s, timing ease-out, delay 1s, played once.
   The ring is white because the button sits on a 60% black overlay. */
.tour-start-pulse {
    animation: tour-start-pulse 1.4s ease-out 1s 1;
}

@keyframes tour-start-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.75);
    }

    25% {
        transform: scale(1.08);
    }

    55% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 28px rgba(255, 255, 255, 0);
    }
}

/* Visitors whose operating system is set to reduce motion get no pulse. */
@media (prefers-reduced-motion: reduce) {
    .tour-start-pulse {
        animation: none;
    }
}