/* =====================================================================
   EAGLE GPS — Experimental WOW slider (standalone)
   Self-contained, no dependencies on tiny-slider, Slider.css, jQuery or
   any other module. All selectors use the "wow-slider-" prefix so it
   cannot collide with any other styling on the site.

   Animation strategy:
     - Each slide's image, title, and details default to an "offscreen"
       state (translated right, scaled up, blurred, opacity 0).
     - When a slide gains .is-active, CSS transitions carry each element
       back to its natural state, staggered by transition-delay so the
       image leads, title follows, details trail.
     - The outgoing slide's .is-active is removed, so its inner elements
       transition back to the initial state for next time.

   This runs entirely in CSS. The JS only toggles .is-active per cycle.
   ===================================================================== */

/* ---------- CONTAINER ---------- */
.wow-slider {
    position: relative;
    width: 100%;
    height: 13em;
    overflow: hidden;
    background: #ffffff;
    border-radius: 0.5em;
    box-shadow: 0 6px 22px rgba(0, 65, 112, 0.18);
    margin: 0;
    /* Subtle idle breathing glow so the frame has presence even between slides */
    isolation: isolate;
    /* Swipe support:
       - pan-y lets the browser keep vertical page scrolling while we claim
         horizontal gestures for prev/next navigation.
       - user-select prevents accidental text selection during mouse drag.
       - grab cursor signals draggability on desktop. */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.wow-slider.is-dragging {
    cursor: grabbing;
}

/* Suppress the browser's native image-drag ghost while the user is
   click-dragging across the slide image. */
.wow-slider-img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
}

.wow-slider::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse at 20% 30%,
        rgba(0, 153, 221, 0.08) 0%,
        rgba(0, 153, 221, 0) 60%
    );
    z-index: 1;
}

.wow-slider-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ---------- SLIDE ---------- */
.wow-slider-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    background: #ffffff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 650ms cubic-bezier(0.22, 0.9, 0.28, 1),
                visibility 650ms;
    z-index: 1;
}

.wow-slider-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 3;
}

/* ---------- MEDIA (IMAGE COLUMN) ---------- */
.wow-slider-media {
    flex: 0 0 auto;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #ffffff;
}

.wow-slider-img {
    display: block;
    height: 100%;
    width: auto;
    /* Default state — element is invisible and shrunk. The @keyframes animation
       below replays every time .is-active is toggled on. No blur, so the scale
       is the dominant visible effect. */
    opacity: 0;
    transform: scale(0.35);
    transform-origin: 50% 50%;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.wow-slider-slide.is-active .wow-slider-img {
    animation: wow-zoom-in-image 1800ms cubic-bezier(0.18, 0.85, 0.22, 1) 0ms both;
}

@keyframes wow-zoom-in-image {
    0%   { opacity: 0; transform: scale(0.35); }
    40%  { opacity: 1;                          }
    100% { opacity: 1; transform: scale(1.00); }
}

/* ---------- COPY (TEXT COLUMN) ---------- */
.wow-slider-copy {
    flex: 1 1 auto;
    padding: 0.6em 0.8em 0.6em 1.6em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.wow-slider-title {
    font-size: 1.5em;
    font-weight: 700;
    color: #004170;
    margin: 0 0 0.25em 0;
    line-height: 1.15em;
    /* Default state — invisible and shrunk, anchored at left-middle so it
       grows rightward into place (rather than centering). */
    opacity: 0;
    transform: scale(0.4);
    transform-origin: 0% 50%;
    will-change: opacity, transform;
}

.wow-slider-slide.is-active .wow-slider-title {
    animation: wow-zoom-in-title 1500ms cubic-bezier(0.18, 0.85, 0.22, 1) 300ms both;
}

@keyframes wow-zoom-in-title {
    0%   { opacity: 0; transform: scale(0.40); }
    40%  { opacity: 1;                          }
    100% { opacity: 1; transform: scale(1.00); }
}

.wow-slider-details {
    font-size: 1.15em;
    font-weight: 500;
    line-height: 1.5em;
    color: #222222;
    margin: 0;
    /* Default state — invisible and shrunk, anchored at left-middle. */
    opacity: 0;
    transform: scale(0.5);
    transform-origin: 0% 50%;
    will-change: opacity, transform;
}

.wow-slider-slide.is-active .wow-slider-details {
    animation: wow-zoom-in-details 1400ms cubic-bezier(0.18, 0.85, 0.22, 1) 600ms both;
}

@keyframes wow-zoom-in-details {
    0%   { opacity: 0; transform: scale(0.50); }
    40%  { opacity: 1;                          }
    100% { opacity: 1; transform: scale(1.00); }
}

/* ---------- BOTTOM PROGRESS BAR ---------- */
.wow-slider-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #0099dd 0%, #00c4ff 50%, #004170 100%);
    z-index: 10;
    transition: width 0ms linear;
    border-radius: 0 3px 3px 0;
}

.wow-slider-progress.is-running {
    width: 100%;
    transition: width 6500ms linear;
}

/* ---------- DOT NAV (clickable indicators) ---------- */
.wow-slider-dots {
    position: absolute;
    right: 1em;
    bottom: 0.9em;
    display: flex;
    gap: 0.45em;
    z-index: 11;
    /* Clickable — individual dots receive the pointer events. */
}

.wow-slider-dot {
    /* 10% larger than the original 7px base → 7.7px. */
    width: 7.7px;
    height: 7.7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 65, 112, 0.28);
    cursor: pointer;
    transition: background 300ms ease, transform 300ms ease;
    /* Make the actual click target a bit larger than the visible dot
       without changing its painted size — improves usability on touch. */
    box-sizing: content-box;
    outline: none;
}

.wow-slider-dot:hover,
.wow-slider-dot:focus-visible {
    background: #004170;
    /* Match the active dot's visual size on hover. */
    transform: scale(1.45);
}

.wow-slider-dot.is-active {
    background: #0099dd;
    transform: scale(1.45);
    /* Turn-signal style blink: hold fully ON, then fully OFF (invisible),
       with near-instant edges between — same rhythm as a car indicator. */
    animation: wow-dot-flash 700ms linear infinite;
}

.wow-slider-dot.is-active:hover,
.wow-slider-dot.is-active:focus-visible {
    background: #004170;
}

@keyframes wow-dot-flash {
    0%,  49% { opacity: 1; }
    50%, 99% { opacity: 0; }
    100%     { opacity: 1; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .wow-slider { height: 12em; }
    .wow-slider-title { font-size: 1.5em; }
    .wow-slider-details { font-size: 1em; line-height: 1.35em; }
    .wow-slider-copy { padding: 0.4em 0.6em 0.4em 1em; }
}

@media (max-width: 600px) {
    .wow-slider { height: 10em; }
    .wow-slider-title { font-size: 1.2em; }
    .wow-slider-details { font-size: 0.85em; line-height: 1.3em; }
}

/* ---------- ACCESSIBILITY: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .wow-slider-img,
    .wow-slider-title,
    .wow-slider-details {
        transform: none !important;
        opacity: 1 !important;
        animation: none !important;
    }
    .wow-slider-slide.is-active .wow-slider-img,
    .wow-slider-slide.is-active .wow-slider-title,
    .wow-slider-slide.is-active .wow-slider-details {
        transform: none !important;
        animation: none !important;
    }
    .wow-slider-progress { display: none; }
    /* Also disable the turn-signal blink on the active dot under
       reduced-motion — the dot will simply sit at full opacity. */
    .wow-slider-dot.is-active {
        animation: none !important;
        opacity: 1 !important;
    }
}