/* VELTENA UX ENHANCEMENTS v3.0 — Phase 1+2+Stories */

/* ── SCROLL REVEAL ───────────────────────────────────── */
.ux-reveal{opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.ux-reveal.ux-visible{opacity:1;transform:translateY(0)}
.ux-reveal[data-ux-delay="1"]{transition-delay:.06s}.ux-reveal[data-ux-delay="2"]{transition-delay:.12s}.ux-reveal[data-ux-delay="3"]{transition-delay:.18s}.ux-reveal[data-ux-delay="4"]{transition-delay:.24s}.ux-reveal[data-ux-delay="5"]{transition-delay:.3s}.ux-reveal[data-ux-delay="6"]{transition-delay:.36s}.ux-reveal[data-ux-delay="7"]{transition-delay:.42s}

/* ── CARD GLOW + SHIMMER ─────────────────────────────── */
.c-card:hover,.video-card:hover,.content-card:hover,.upsell-card:hover{box-shadow:0 4px 24px rgba(206,174,98,.08),0 0 0 1px rgba(206,174,98,.12)!important}
.c-card::before,.video-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#CEAE62,transparent);opacity:0;transition:opacity .35s;z-index:2;pointer-events:none}
.c-card{position:relative}.video-card{position:relative}
.c-card:hover::before,.video-card:hover::before{opacity:1}

/* ── LIKE PARTICLES ──────────────────────────────────── */
.ux-particle{position:fixed;width:5px;height:5px;background:#CEAE62;border-radius:50%;pointer-events:none;z-index:9999;animation:uxPF .55s cubic-bezier(.22,1,.36,1) forwards}
@keyframes uxPF{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--ux-px),var(--ux-py)) scale(0);opacity:0}}
.like-btn{transition:color .2s,transform .15s cubic-bezier(.34,1.56,.64,1)!important}.like-btn.ux-pop{transform:scale(1.35)!important}

/* ── BADGES ──────────────────────────────────────────── */
.badge-new{animation:uxBP .4s cubic-bezier(.34,1.56,.64,1)!important}
@keyframes uxBP{0%{transform:scale(0) rotate(-12deg);opacity:0}60%{transform:scale(1.15) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.badge-featured{animation:uxFP 3s ease-in-out infinite!important}
@keyframes uxFP{0%,100%{box-shadow:0 0 0 0 rgba(206,174,98,.4)}50%{box-shadow:0 0 8px 2px rgba(206,174,98,.15)}}

/* ── LOCK BREATHING ──────────────────────────────────── */
.lock-overlay svg,.video-card__lock svg{animation:uxLB 2.5s ease-in-out infinite!important}
@keyframes uxLB{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.1);opacity:1}}

/* ── THUMBNAIL HOVER ─────────────────────────────────── */
.c-card__thumb img,.video-card__thumb img{transition:transform .5s cubic-bezier(.22,1,.36,1),filter .5s ease!important}
.c-card:hover .c-card__thumb img,.video-card:hover .video-card__thumb img{transform:scale(1.06)!important;filter:brightness(1.08)}

/* ── SECTION LINE ────────────────────────────────────── */
.section-header{position:relative}
.section-header::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:linear-gradient(90deg,rgba(206,174,98,.4),transparent);transition:width .8s cubic-bezier(.22,1,.36,1)}
.section-header.ux-visible::after{width:100%}

/* ── TAB BAR ─────────────────────────────────────────── */
.tab-item.active::after{content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:16px;height:2px;background:#CEAE62;border-radius:1px}

/* ── MISC PHASE 1 ────────────────────────────────────── */
.video-card__play-icon{transition:opacity .25s,transform .25s cubic-bezier(.34,1.56,.64,1)!important}
.video-card:hover .video-card__play-icon{transform:scale(1.1)!important}
.upsell-card__thumb img{animation:uxBS 4s ease-in-out infinite!important}
@keyframes uxBS{0%,100%{filter:blur(10px) brightness(.3)}50%{filter:blur(10px) brightness(.42)}}
.upsell-card{transition:transform .3s,border-color .3s,box-shadow .3s!important}
.upsell-card:hover{transform:translateY(-3px)!important;border-color:rgba(206,174,98,.3)!important;box-shadow:0 6px 24px rgba(206,174,98,.1)!important}
.feed-title,.dashboard__title,.page-title{animation:uxTS .6s cubic-bezier(.22,1,.36,1) both!important}
@keyframes uxTS{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
.btn--ghost[href*="pricing"],a[href="/pricing.php"].btn{animation:uxUP 3s ease-in-out infinite}
@keyframes uxUP{0%,100%{box-shadow:0 0 0 0 rgba(206,174,98,.3)}50%{box-shadow:0 0 0 6px rgba(206,174,98,0)}}
.sidebar__link{transition:background .15s,color .15s,border-left-color .2s,padding-left .2s!important}
.sidebar__link:hover{border-left-color:rgba(206,174,98,.4)!important;padding-left:10px!important}
.stat-card__value.ux-counted{animation:uxVF .6s ease}
@keyframes uxVF{0%{color:var(--color-text);transform:scale(.9)}40%{color:#CEAE62;transform:scale(1.05)}100%{color:#CEAE62;transform:scale(1)}}
.ux-eye-blink{display:inline-block;animation:uxEB 4s infinite}
@keyframes uxEB{0%,92%,100%{opacity:1;transform:scaleY(1)}95%{opacity:.3;transform:scaleY(.1)}}
img[loading="lazy"]{background:linear-gradient(90deg,#16161f 25%,rgba(255,255,255,.04) 50%,#16161f 75%);background-size:600px 100%;animation:uxIS 1.8s ease-in-out infinite}
img[loading="lazy"].ux-loaded{animation:none;background:none}
@keyframes uxIS{0%{background-position:-300px 0}100%{background-position:300px 0}}
.site-header.ux-scrolled-deep{background:rgba(5,5,8,.96)!important;border-bottom-color:rgba(206,174,98,.08)!important}

/* ═══ PHASE 2 — Injected components ══════════════════ */
.ux-filter-bar{display:flex;gap:6px;padding:0 0 16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ux-filter-bar::-webkit-scrollbar{display:none}
.ux-chip{flex-shrink:0;padding:6px 14px;border-radius:3px;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;border:1px solid rgba(255,255,255,.1);color:var(--color-text-muted);cursor:pointer;transition:all .25s;background:transparent;font-family:inherit;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.ux-chip.active{background:rgba(206,174,98,.12);border-color:rgba(206,174,98,.35);color:#CEAE62}
.ux-chip:hover{border-color:rgba(206,174,98,.25);color:#ddd}.ux-chip:active{transform:scale(.96)}

.ux-progress{margin:0 0 20px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);border-radius:3px;padding:12px 14px;animation:uxFI .5s ease .3s both}
.ux-progress__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ux-progress__label{font-size:.6rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.ux-progress__count{font-size:.65rem;color:#CEAE62;font-weight:700}
.ux-progress__track{height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.ux-progress__fill{height:100%;background:linear-gradient(90deg,#8B7642,#CEAE62);border-radius:2px;width:0%;transition:width 1.2s cubic-bezier(.22,1,.36,1)}

.ux-social{padding:6px 0 14px;font-size:.65rem;color:rgba(255,255,255,.35);display:flex;align-items:center;gap:5px;animation:uxFI .4s ease .6s both}
.ux-social__hot{color:#CEAE62;font-weight:600}
.ux-social__fire{display:inline-block;animation:uxFW 2s ease-in-out infinite}
@keyframes uxFW{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}

.ux-streak{margin:0 0 16px;padding:10px 14px;background:rgba(206,174,98,.03);border:1px solid rgba(206,174,98,.08);border-radius:3px;display:flex;align-items:center;gap:10px;font-size:.7rem;color:var(--color-text-muted);animation:uxFI .5s ease .4s both}
.ux-streak__fire{font-size:1.15rem;animation:uxSG 1.2s ease-in-out infinite alternate}
@keyframes uxSG{from{transform:scale(1)}to{transform:scale(1.2)}}
.ux-streak__count{color:#CEAE62;font-weight:700}

.ux-countdown{margin:0 0 20px;padding:16px;background:linear-gradient(135deg,rgba(206,174,98,.03),transparent);border:1px dashed rgba(206,174,98,.15);border-radius:3px;text-align:center;animation:uxFI .5s ease .7s both}
.ux-countdown__label{font-size:.58rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px;font-weight:600}
.ux-countdown__timer{font-family:'Inter',sans-serif;font-size:1.5rem;font-weight:200;color:#CEAE62;letter-spacing:.06em;margin-bottom:4px}
.ux-countdown__title{font-size:.7rem;color:rgba(255,255,255,.5);font-weight:500}

.ux-popular-badge{position:absolute;top:8px;left:8px;background:rgba(206,174,98,.9);color:#000;font-size:.5rem;font-weight:800;padding:2px 6px;border-radius:3px;z-index:3;pointer-events:none;animation:uxBP .4s cubic-bezier(.34,1.56,.64,1)}
.ux-heart-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none}
.ux-heart-overlay svg{animation:uxHB .8s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes uxHB{0%{transform:scale(0);opacity:0}40%{transform:scale(1.2);opacity:1}100%{transform:scale(1.4);opacity:0}}
@keyframes uxFI{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}


/* ═══ PHASE 3 — STORIES BAR ═════════════════════════ */

.ux-stories{display:flex;gap:14px;padding:14px 0 10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;animation:uxFI .5s ease .1s both}
.ux-stories::-webkit-scrollbar{display:none}

.ux-story{flex-shrink:0;width:68px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;-webkit-tap-highlight-color:transparent}

.ux-story__ring{width:60px;height:60px;border-radius:50%;padding:3px;background:conic-gradient(from 0deg,#CEAE62 0%,#E5D4A1 25%,#CEAE62 50%,#8B7642 75%,#CEAE62 100%);transition:transform .2s;position:relative}
.ux-story:not(.seen) .ux-story__ring{animation:uxSRG 3s ease-in-out infinite}
@keyframes uxSRG{0%,100%{box-shadow:0 0 0 0 rgba(206,174,98,.3)}50%{box-shadow:0 0 10px 2px rgba(206,174,98,.12)}}
.ux-story.seen .ux-story__ring{background:rgba(255,255,255,.12);animation:none}
.ux-story:active .ux-story__ring{transform:scale(.92)}

.ux-story__inner{width:100%;height:100%;border-radius:50%;background:var(--color-bg,#050508);overflow:hidden;display:flex;align-items:center;justify-content:center}
.ux-story__inner img{width:100%;height:100%;object-fit:cover}
.ux-story__icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(135deg,#16161f,#1a1a28)}

.ux-story__label{font-size:.52rem;color:var(--color-text-muted,#888);text-align:center;max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.ux-story.seen .ux-story__label{color:rgba(255,255,255,.3)}

.ux-story__type{position:absolute;bottom:-1px;right:-1px;width:18px;height:18px;border-radius:50%;background:var(--color-bg,#050508);display:flex;align-items:center;justify-content:center;border:2px solid var(--color-bg,#050508)}
.ux-story__type svg{width:10px;height:10px}

/* ── STORY VIEWER — Fullscreen ───────────────────────── */
.ux-viewer{position:fixed;inset:0;z-index:10000;background:#000;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.ux-viewer.active{opacity:1;visibility:visible}

.ux-viewer__progress{display:flex;gap:3px;padding:12px 10px 8px;padding-top:calc(12px + env(safe-area-inset-top,0px));z-index:2;position:relative}
.ux-viewer__bar{flex:1;height:2px;background:rgba(255,255,255,.2);border-radius:1px;overflow:hidden}
.ux-viewer__bar-fill{height:100%;width:0%;background:#CEAE62;border-radius:1px}
.ux-viewer__bar.done .ux-viewer__bar-fill{width:100%}

.ux-viewer__close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:1.1rem;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}

.ux-viewer__header{display:flex;align-items:center;gap:10px;padding:4px 14px 10px;z-index:2}
.ux-viewer__avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#CEAE62,#8B7642);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#000;flex-shrink:0}
.ux-viewer__name{font-size:.8rem;font-weight:600;color:#fff}
.ux-viewer__time{font-size:.65rem;color:rgba(255,255,255,.5)}

.ux-viewer__content{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ux-viewer__content img{max-width:100%;max-height:100%;object-fit:contain}
.ux-viewer__content .ux-viewer__placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.4);font-size:.8rem}
.ux-viewer__content .ux-viewer__placeholder svg{width:48px;height:48px;stroke:rgba(206,174,98,.4);fill:none;stroke-width:1.5}

/* Tap zones */
.ux-viewer__tap-left,.ux-viewer__tap-right{position:absolute;top:0;bottom:0;width:40%;z-index:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ux-viewer__tap-left{left:0}
.ux-viewer__tap-right{right:0}

.ux-viewer__cta{padding:12px 14px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));text-align:center;z-index:2}
.ux-viewer__cta a{display:inline-flex;align-items:center;gap:6px;padding:10px 24px;background:rgba(206,174,98,.9);color:#000;border-radius:3px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;transition:transform .2s}
.ux-viewer__cta a:active{transform:scale(.96)}

/* ═══ PHASE 7 — CONTENT VIEWER PREMIUM ═══════════════ */

/* Photo viewer — cinematic entrance */
.photo-viewer {
    animation: uxViewerIn 0.4s cubic-bezier(0.22,1,0.36,1) both !important;
}
@keyframes uxViewerIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.photo-viewer img {
    animation: uxPhotoZoom 0.5s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
@keyframes uxPhotoZoom {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* Photo viewer bottom bar — slide up */
.photo-viewer__bottom {
    animation: uxSlideUp 0.4s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}
@keyframes uxSlideUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Photo viewer close button — fade in */
.photo-viewer__close {
    transition: background 0.2s, border-color 0.2s, transform 0.15s !important;
}
.photo-viewer__close:hover {
    border-color: rgba(206,174,98,0.3) !important;
    background: rgba(206,174,98,0.15) !important;
}
.photo-viewer__close:active {
    transform: scale(0.94);
}

/* Like button in photo viewer — gold pulse */
.photo-viewer__like:hover {
    border-color: rgba(206,174,98,0.3) !important;
    background: rgba(206,174,98,0.12) !important;
}
.photo-viewer__like.liked {
    animation: uxLikePop 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
}
@keyframes uxLikePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Lightbox — premium entrance */
#lightbox {
    animation: uxLightboxIn 0.3s ease both;
}
@keyframes uxLightboxIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
#lightbox img {
    animation: uxPhotoZoom 0.4s cubic-bezier(0.22,1,0.36,1) both;
}

/* Lightbox nav buttons — premium */
#lb-prev, #lb-next {
    background: rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(206,174,98,0.15) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s, border-color 0.2s, transform 0.15s !important;
    border-radius: 50% !important;
}
#lb-prev:hover, #lb-next:hover {
    background: rgba(206,174,98,0.15) !important;
    border-color: rgba(206,174,98,0.35) !important;
}
#lb-prev:active, #lb-next:active {
    transform: scale(0.92);
}

/* Lightbox counter — gold accent */
#lb-counter {
    color: rgba(206,174,98,0.5) !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
}

/* Content page — Related sidebar cards hover */
.content-detail aside a {
    transition: border-color 0.2s, background 0.2s !important;
}
.content-detail aside a:hover {
    background: rgba(206,174,98,0.03) !important;
    border-color: rgba(206,174,98,0.15) !important;
}

/* Content title entrance */
.content-detail h1 {
    animation: uxTS 0.6s cubic-bezier(0.22,1,0.36,1) both;
}

/* PPV buy card — attention pulse */
div[style*="border:1px solid var(--color-gold)"][style*="text-align:center"] {
    animation: uxPPVPulse 3s ease-in-out infinite;
}
@keyframes uxPPVPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(206,174,98,0.2); }
    50% { box-shadow: 0 0 16px 4px rgba(206,174,98,0.08); }
}

/* ═══ PHASE 6 — ADMIN DASHBOARD PREMIUM ══════════════ */

/* ── KPI Cards — Enhanced entrance + glow ────────────── */
.kpi-card {
    animation: uxKpiIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.kpi-card:nth-child(1){animation-delay:.1s}
.kpi-card:nth-child(2){animation-delay:.16s}
.kpi-card:nth-child(3){animation-delay:.22s}
.kpi-card:nth-child(4){animation-delay:.28s}
.kpi-card:nth-child(5){animation-delay:.34s}
.kpi-card:nth-child(6){animation-delay:.4s}
@keyframes uxKpiIn{0%{opacity:0;transform:translateY(20px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}

.kpi-card:hover {
    box-shadow: 0 6px 28px rgba(0,0,0,0.25), 0 0 0 1px rgba(206,174,98,0.12) !important;
}

/* KPI value — larger, bolder presence */
.kpi-value {
    font-size: 2rem !important;
    font-weight: 300 !important;
    letter-spacing: -0.02em !important;
    transition: color 0.3s, transform 0.3s !important;
}
.kpi-card:hover .kpi-value {
    transform: scale(1.03);
}

/* KPI top color bar shimmer on hover */
.kpi-card::before {
    transition: opacity 0.3s !important;
}
.kpi-card:hover::before {
    opacity: 1 !important;
}

/* KPI delta badge enhanced */
.kpi-delta {
    animation: uxKpiDelta 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.6s both !important;
}
@keyframes uxKpiDelta{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}

/* ── Chart Panels — Premium glass effect ─────────────── */
.chart-panel {
    animation: uxKpiIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.45s both;
    transition: border-color 0.3s, box-shadow 0.3s !important;
}
.chart-panel:hover {
    border-color: rgba(206,174,98,0.15) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2) !important;
}

.chart-toggle button {
    transition: all 0.25s cubic-bezier(0.22,1,0.36,1) !important;
}
.chart-toggle button.active {
    box-shadow: 0 2px 8px rgba(206,174,98,0.2) !important;
}

/* ── Data Panels — Staggered entrance ────────────────── */
.data-panel {
    animation: uxKpiIn 0.6s cubic-bezier(0.22,1,0.36,1) both;
    transition: border-color 0.3s, box-shadow 0.3s !important;
}
.data-row .data-panel:nth-child(1){animation-delay:.55s}
.data-row .data-panel:nth-child(2){animation-delay:.65s}
.data-panel:hover {
    border-color: rgba(206,174,98,0.12) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

/* Table rows hover glow */
.data-table-inner tr:hover td {
    background: rgba(206,174,98,0.03) !important;
}

/* Content bar fill animation */
.content-bar-fill {
    animation: uxBarGrow 0.8s cubic-bezier(0.22,1,0.36,1) 0.8s both !important;
}
@keyframes uxBarGrow{0%{width:0!important}100%{}}

/* ── Tier legend — Hover highlight ───────────────────── */
.tier-legend-item {
    padding: 6px 8px !important;
    border-radius: 6px;
    transition: background 0.2s !important;
}
.tier-legend-item:hover {
    background: rgba(255,255,255,0.03);
}

/* ── Webhook event badges — Pop animation ────────────── */
.ev-badge {
    animation: uxBP 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ── Admin header — Premium text ─────────────────────── */
.d4-header__title {
    animation: uxTS 0.7s cubic-bezier(0.22,1,0.36,1) both !important;
}
.d4-header__sub {
    animation: uxFI 0.5s ease 0.2s both;
}

/* ── At Risk button — Pulse ──────────────────────────── */
.d4-header a[href*="risk"] {
    animation: uxRiskPulse 2.5s ease-in-out infinite;
}
@keyframes uxRiskPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,71,87,.25)}50%{box-shadow:0 0 0 6px rgba(255,71,87,0)}}

/* ── Payment method cards — Stagger ──────────────────── */
.d4-main > div[style*="grid-template-columns:repeat(auto-fit"] > div {
    animation: uxKpiIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
    transition: border-color 0.2s, transform 0.2s !important;
}
.d4-main > div[style*="grid-template-columns:repeat(auto-fit"] > div:nth-child(1){animation-delay:.5s}
.d4-main > div[style*="grid-template-columns:repeat(auto-fit"] > div:nth-child(2){animation-delay:.56s}
.d4-main > div[style*="grid-template-columns:repeat(auto-fit"] > div:nth-child(3){animation-delay:.62s}
.d4-main > div[style*="grid-template-columns:repeat(auto-fit"] > div:hover {
    border-color: rgba(206,174,98,0.2) !important;
    transform: translateY(-2px);
}

/* ── Admin sidebar — Enhanced active state ───────────── */
.admin-dashboard .sidebar__link.active {
    background: rgba(206,174,98,0.1) !important;
    border-left: 2px solid #CEAE62 !important;
    color: #CEAE62 !important;
}

/* Sidebar unread badge pulse */
.admin-dashboard .sidebar__link span[style*="background:#FF4757"],
.admin-dashboard .sidebar__link span[style*="background:#FFA502"] {
    animation: uxAdminBadgePulse 2s ease-in-out infinite;
}
@keyframes uxAdminBadgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* ── Smooth number transitions ───────────────────────── */
.d4-main .kpi-value,
.tier-legend-count {
    font-variant-numeric: tabular-nums;
}

/* ═══ PHASE 4 — PAGE TRANSITIONS ═════════════════════ */
#uxPageTransition { will-change: opacity; }

/* ═══ PHASE 5 — CHAT UX ═════════════════════════════ */
.ux-online { animation: uxOnlinePulse 2s ease-in-out infinite; }
@keyframes uxOnlinePulse { 0%,100%{box-shadow:0 0 0 0 rgba(0,208,132,.4)} 50%{box-shadow:0 0 0 4px rgba(0,208,132,0)} }
@keyframes uxMsgIn { 0%{opacity:0;transform:translateY(10px)} 100%{opacity:1;transform:translateY(0)} }

/* ── REDUCED MOTION ──────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
.ux-reveal{opacity:1!important;transform:none!important;transition:none!important}
.ux-particle{display:none!important}
.ux-story__ring,.ux-streak__fire,.ux-social__fire,.badge-new,.badge-featured,.lock-overlay svg,.video-card__lock svg,.upsell-card__thumb img,.stat-card__value.ux-counted,.ux-eye-blink,.btn--ghost[href*="pricing"],a[href="/pricing.php"].btn,.save-pill{animation:none!important}
.ux-progress__fill{transition:none!important}
#uxPageTransition{display:none!important}
.ux-online{animation:none!important}
}