/* =====================================================================
   EAGLE GPS - Slider (About.aspx)
   Cross-fade cinematic slider with Ken Burns zoom, text choreography,
   twinkling sparkles, diagonal shine sweep, bottom progress bar and
   cinematic vignette. Effects target BOTH legacy (table) markup
   (.SLIDERITEMTBL / .TDIMG / .TDTEXT / .SLIDERTITLE / .SLIDERDETAILS)
   AND the new flex markup (.egps-slide-inner / .egps-slide-media /
   .egps-slide-copy / .egps-slide-title / .egps-slide-details) so the
   slider animates regardless of which markup the server is emitting.
   All motion respects prefers-reduced-motion: reduce.
   ===================================================================== */

/* ---------- BASE SLIDE CONTAINER ---------- */
.SLIDERITEM,
.MATCHSLIDERHEIGHT {
    height: 13em;
}

.SLIDERITEM {
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
}

/* Legacy table layout (still styled for back-compat) */
.SLIDERITEM .SLIDERITEMTBL {
    width: 100%;
    height: 100%;
    background-color: white;
    position: relative;
    z-index: 2;
}

.SLIDERITEMTBL td.TDTEXT {
    padding: 0.5em 0.2em 0.5em 1.5em;
    vertical-align: middle;
    position: relative;
}

.SLIDERITEMTBL td.TDIMG {
    width: 1%;
    vertical-align: top;
    position: relative;
    overflow: hidden;
}

/* New flex layout */
.egps-slide-inner {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    align-items: stretch;
    z-index: 2;
}
.egps-slide-media {
    position: relative;
    flex: 0 0 auto;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
}
.egps-slide-copy {
    flex: 1 1 auto;
    padding: 0.5em 0.5em 0.5em 1.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.OVERFLOWHIDDEN {
    overflow: hidden;
}

/* ---------- TITLE / DETAIL TEXT ---------- */
.SLIDERTITLE,
.egps-slide-title {
    font-size: 2em;
    margin-bottom: 0.2em;
    color: #004170;
    will-change: opacity, transform, filter;
}

.SLIDERDETAILS,
.egps-slide-details {
    font-size: 1.2em;
    font-weight: 500;
    line-height: 1.5em;
    color: #222;
    will-change: opacity, transform, filter;
}

/* ---------- IMAGE BASE ---------- */
.SLIDERITEM img,
.egps-slide-img {
    display: block;
    height: 100%;
    width: auto;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
}

/* =====================================================================
   ACTIVE-SLIDE CHOREOGRAPHY
   tiny-slider puts .tns-slide-active on the visible slide. The slider
   is in GALLERY mode (set by egpsSlider.js) so slides cross-fade on top
   of each other — we layer our own per-slide motion on top of that.
   ===================================================================== */

/* --- Image / Title / Details entrance animations are now driven from
       egpsSlider.js via the Web Animations API on every 'indexChanged'
       event. That bypasses tiny-slider's class-toggling behavior in
       gallery mode, which was preventing the CSS keyframes from re-firing
       on subsequent slides. No CSS animation rules here — all motion
       happens from JS. --- */

/* =====================================================================
   DIAGONAL SHINE SWEEP
   A bright soft band sweeps across the active slide once per dwell.
   Implemented on the active slide itself via ::after overlay.
   ===================================================================== */
.SLIDERITEM::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0)   0%,
        rgba(255, 255, 255, 0.55) 45%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(255, 255, 255, 0.55) 55%,
        rgba(255, 255, 255, 0)   100%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    opacity: 0;
    z-index: 5;
}

.tns-fadeIn.SLIDERITEM::after,
.tns-slide-active.SLIDERITEM::after {
    animation: egps-shine 2800ms ease-in-out 1200ms 1 forwards;
}

@keyframes egps-shine {
    0%   { opacity: 0; left: -60%; }
    10%  { opacity: 0.9; }
    50%  { opacity: 0.9; }
    90%  { opacity: 0.4; }
    100% { opacity: 0;  left: 160%; }
}

/* =====================================================================
   TWINKLING SPARKLES (4 per slide, pure CSS via pseudo-elements on
   existing children — no JS or markup changes needed)
   ===================================================================== */
.SLIDERITEM .TDIMG,
.SLIDERITEM .TDTEXT,
.SLIDERITEM .egps-slide-media,
.SLIDERITEM .egps-slide-copy {
    position: relative;
}

.tns-fadeIn .TDIMG::before,
.tns-fadeIn .TDIMG::after,
.tns-fadeIn .TDTEXT::before,
.tns-fadeIn .TDTEXT::after,
.tns-fadeIn .egps-slide-media::before,
.tns-fadeIn .egps-slide-media::after,
.tns-fadeIn .egps-slide-copy::before,
.tns-fadeIn .egps-slide-copy::after,
.tns-slide-active .TDIMG::before,
.tns-slide-active .TDIMG::after,
.tns-slide-active .TDTEXT::before,
.tns-slide-active .TDTEXT::after,
.tns-slide-active .egps-slide-media::before,
.tns-slide-active .egps-slide-media::after,
.tns-slide-active .egps-slide-copy::before,
.tns-slide-active .egps-slide-copy::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    z-index: 6;
    background-repeat: no-repeat;
    background-size: contain;
    /* 4-point white sparkle with brand-blue stroke */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1 L13.6 10.4 L23 12 L13.6 13.6 L12 23 L10.4 13.6 L1 12 L10.4 10.4 Z' fill='white' stroke='%230099dd' stroke-width='0.7'/></svg>");
    filter: drop-shadow(0 0 3px rgba(0, 153, 221, 0.85));
    opacity: 0;
}

.tns-fadeIn .TDIMG::before,
.tns-fadeIn .egps-slide-media::before,
.tns-slide-active .TDIMG::before,
.tns-slide-active .egps-slide-media::before {
    top: 12%; left: 10%;
    animation: egps-sparkle 2.6s ease-in-out 900ms infinite;
}
.tns-fadeIn .TDIMG::after,
.tns-fadeIn .egps-slide-media::after,
.tns-slide-active .TDIMG::after,
.tns-slide-active .egps-slide-media::after {
    top: 68%; left: 78%;
    width: 11px; height: 11px;
    animation: egps-sparkle 3.1s ease-in-out 1650ms infinite;
}
.tns-fadeIn .TDTEXT::before,
.tns-fadeIn .egps-slide-copy::before,
.tns-slide-active .TDTEXT::before,
.tns-slide-active .egps-slide-copy::before {
    top: 18%; right: 12%; left: auto;
    width: 12px; height: 12px;
    animation: egps-sparkle 2.9s ease-in-out 600ms infinite;
}
.tns-fadeIn .TDTEXT::after,
.tns-fadeIn .egps-slide-copy::after,
.tns-slide-active .TDTEXT::after,
.tns-slide-active .egps-slide-copy::after {
    bottom: 14%; right: 24%; left: auto; top: auto;
    width: 9px; height: 9px;
    animation: egps-sparkle 3.4s ease-in-out 2200ms infinite;
}

@keyframes egps-sparkle {
    0%, 100% { opacity: 0;   transform: scale(0.4) rotate(0deg); }
    30%      { opacity: 1;   transform: scale(1.0) rotate(20deg); }
    55%      { opacity: 0.9; transform: scale(1.25) rotate(30deg); }
    80%      { opacity: 0;   transform: scale(0.55) rotate(40deg); }
}

/* =====================================================================
   CINEMATIC VIGNETTE — soft darkening at the edges, only on the active
   slide. Gives the slider a "framed photo" feel without stealing focus.
   ===================================================================== */
.SLIDERITEM::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background:
        radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0)   55%,
            rgba(0, 0, 0, 0.10) 85%,
            rgba(0, 0, 0, 0.22) 100%);
    opacity: 0;
    transition: opacity 900ms ease;
}
.tns-fadeIn.SLIDERITEM::before,
.tns-slide-active.SLIDERITEM::before {
    opacity: 1;
}

/* =====================================================================
   BOTTOM PROGRESS BAR — pure CSS. Loops every 6500ms to match the
   slider's autoplayTimeout.
   ===================================================================== */
.tns-ovh {
    margin-bottom: 1.3em;
    border-radius: 0.5em;
    position: relative;
}

.tns-ovh::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #0099dd 0%, #004170 100%);
    box-shadow: 0 0 8px rgba(0, 153, 221, 0.65);
    z-index: 10;
    border-bottom-left-radius: 0.45em;
    border-bottom-right-radius: 0.45em;
    animation: egps-progress 6500ms linear infinite;
    pointer-events: none;
}

@keyframes egps-progress {
    0%   { width: 0%;   opacity: 0.95; }
    95%  { width: 100%; opacity: 0.95; }
    100% { width: 100%; opacity: 0; }
}

/* =====================================================================
   TNS GALLERY MODE — slides stack on top of each other. tiny-slider
   applies .tns-fadeIn / .tns-fadeOut; we override those classes so our
   own keyframes drive the cross-fade.
   ===================================================================== */
.tns-gallery > .SLIDERITEM,
.tns-gallery > .tns-item {
    transition: transform 0ms;
}

/* Parent cross-fade is pure opacity and intentionally QUICK so the slide
   becomes visible fast — the child slide-in-from-right + zoom-down + focus
   motion (image/title/details) continues for ~1200ms on top of it, making
   the motion clearly visible rather than hidden behind a long fade. */
.tns-fadeIn {
    opacity: 1;
    z-index: 2;
    animation: egps-fadeIn 450ms cubic-bezier(0.22, 0.9, 0.28, 1) both;
}

.tns-fadeOut {
    opacity: 0;
    z-index: 1;
    animation: egps-fadeOut 600ms cubic-bezier(0.22, 0.9, 0.28, 1) both;
}

@keyframes egps-fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes egps-fadeOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* Hide the native nav/controls */
.tns-nav,
[data-action] {
    display: none;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media only screen and (max-width: 900px) {
    .SLIDERITEM, .MATCHSLIDERHEIGHT { height: 12em; }
    .SLIDERTITLE, .egps-slide-title { font-size: 1.6em; margin-bottom: 0; }
    .SLIDERDETAILS, .egps-slide-details { font-size: 1.2em; line-height: 1em; }
    .SLIDERITEMTBL td.TDTEXT, .egps-slide-copy { padding: 0.2em 0.1em 0.2em 0.8em; }
}

@media only screen and (max-width: 800px) {
    .SLIDERITEM, .MATCHSLIDERHEIGHT { height: 11em; }
    .SLIDERTITLE, .egps-slide-title { font-size: 1.3em; margin-bottom: 0; }
    .SLIDERDETAILS, .egps-slide-details { font-size: 1.1em; line-height: 1em; }
    .SLIDERITEMTBL td.TDTEXT, .egps-slide-copy { padding: 0.2em 0.1em 0.2em 0.8em; }
}

@media only screen and (max-width: 620px) {
    .SLIDERITEM, .MATCHSLIDERHEIGHT { height: 10em; }
    .SLIDERTITLE, .egps-slide-title { font-size: 1.2em; margin-bottom: 0; }
    .SLIDERDETAILS, .egps-slide-details { font-size: 0.9em; line-height: 1em; }
    .SLIDERITEMTBL td.TDTEXT, .egps-slide-copy { padding: 0.2em 0.1em 0.2em 0.8em; }
    /* Quieter on small screens */
    .tns-slide-active .TDIMG::after,
    .tns-slide-active .TDTEXT::after,
    .tns-slide-active .egps-slide-media::after,
    .tns-slide-active .egps-slide-copy::after { display: none; }
}

@media only screen and (max-width: 300px) {
    .SLIDERITEM, .MATCHSLIDERHEIGHT { height: 8em; }
    .SLIDERTITLE, .egps-slide-title { font-size: 1.1em; margin-bottom: 0; }
    .SLIDERDETAILS, .egps-slide-details { font-size: 0.85em; line-height: 1em; }
    .SLIDERITEMTBL td.TDTEXT, .egps-slide-copy { padding: 0.2em 0.1em 0.2em 0.8em; }
}

/* =====================================================================
   ACCESSIBILITY: REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .tns-slide-active img,
    .tns-slide-active .egps-slide-img,
    .tns-slide-active .SLIDERTITLE,
    .tns-slide-active .egps-slide-title,
    .tns-slide-active .SLIDERDETAILS,
    .tns-slide-active .egps-slide-details {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .SLIDERITEM::before,
    .SLIDERITEM::after,
    .tns-slide-active .TDIMG::before,
    .tns-slide-active .TDIMG::after,
    .tns-slide-active .TDTEXT::before,
    .tns-slide-active .TDTEXT::after,
    .tns-slide-active .egps-slide-media::before,
    .tns-slide-active .egps-slide-media::after,
    .tns-slide-active .egps-slide-copy::before,
    .tns-slide-active .egps-slide-copy::after {
        animation: none !important;
        opacity: 0 !important;
        display: none !important;
    }
    .tns-ovh::after { animation: none !important; width: 100% !important; opacity: 0 !important; }
    .tns-fadeIn, .tns-fadeOut { animation: none !important; }
}