/* Sentinel WOW layer — sitewide micro-interactions.
   Pure CSS where possible; wow.js only sets classes + CSS vars.
   Everything degrades to nothing: no JS -> no glow/feed, reduced motion -> static. */

/* ---- 1. Cursor-tracking card glow (class added by wow.js on pointer:fine) ---- */
.fx-glow { position: relative; }
.fx-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(240px circle at var(--fx-x, 50%) var(--fx-y, 50%),
        rgba(204, 255, 0, 0.09), transparent 65%);
}
.fx-glow:hover::after { opacity: 1; }

/* ---- 2. Button shine sweep ---- */
.fx-btn { position: relative; overflow: hidden; }
.fx-btn::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -140%;
    width: 55%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}
.fx-btn:hover::before { animation: fxShine 0.7s ease; }
@keyframes fxShine { to { left: 170%; } }

/* ---- 3. Rotating accent ring (scanner widget, offer card) ----
   Border-only conic arc rendered via mask-composite; @property lets the
   angle animate. Browsers without @property show a static arc — fine. */
@property --fx-a {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.fx-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    z-index: 4;
    background: conic-gradient(from var(--fx-a, 0deg),
        transparent 0deg, transparent 264deg,
        rgba(204, 255, 0, 0.55) 310deg,
        rgba(204, 255, 0, 0.9) 330deg,
        rgba(204, 255, 0, 0.55) 350deg,
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: fxSpin 7s linear infinite;
}
@keyframes fxSpin { to { --fx-a: 360deg; } }

/* ---- 4. Live detection feed ticker ---- */
.fx-feedbar {
    display: none;
    align-items: center;
    gap: 0;
    background: #050505;
    /* border-bottom omitted — the section below brings its own divider */
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    height: 46px;
    overflow: hidden;
}
.fx-feedbar.ready { display: flex; }
.fx-feed-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    height: 100%;
    padding: 0 18px 0 32px;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #CCFF00;
    background: #070707;
    white-space: nowrap;
}
.fx-feed-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #CCFF00;
    box-shadow: 0 0 8px rgba(204, 255, 0, 0.8);
    animation: fxPulse 1.6s ease-in-out infinite;
}
@keyframes fxPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.fx-feed-mask {
    flex: 1;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
    mask: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
}
.fx-feed-track {
    display: flex;
    align-items: center;
    gap: 44px;
    padding-left: 24px;
    white-space: nowrap;
    will-change: transform;
    animation: fxTicker 70s linear infinite;
}
.fx-feedbar:hover .fx-feed-track { animation-play-state: paused; }
@keyframes fxTicker { to { transform: translateX(-50%); } }
.fx-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    color: #7d7d85;
    letter-spacing: 0.02em;
}
.fx-item b {
    font-weight: 700;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    padding: 2px 7px;
    border-radius: 3px;
}
.fx-item b.v-block { color: #f87171; background: rgba(248, 113, 113, 0.09); border: 1px solid rgba(248, 113, 113, 0.25); }
.fx-item b.v-review { color: #fbbf24; background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.22); }
.fx-item b.v-allow { color: #CCFF00; background: rgba(204, 255, 0, 0.07); border: 1px solid rgba(204, 255, 0, 0.22); }
.fx-item .fx-meta { color: #4a4a50; }

/* ---- 5. Scramble target keeps layout stable while animating ---- */
[data-scramble] { display: inline-block; min-width: 0; }

/* ---- Reduced motion: kill all decorative animation ---- */
@media (prefers-reduced-motion: reduce) {
    .fx-btn:hover::before { animation: none; }
    .fx-ring::before { animation: none; }
    .fx-feed-track { animation: none; }
    .fx-feed-dot { animation: none; }
    .fx-glow::after { display: none; }
}
@media (max-width: 700px) {
    .fx-feed-label { padding: 0 14px 0 20px; }
}