/* Blackmint v1.59 "lfx": "daylight fintech" animated detail for the Light theme (data-theme-id=light) ONLY (JS in app/lightfx.js).
   Same pattern as v1.57 arcfx / v1.58 pinkfx: every visible rule is scoped to html[data-theme-id=light]; decor nodes (.lfx-*) are display:none
   in every other theme. Motion needs html[data-lfx] (set by lightfx.js only when prefers-reduced-motion is off) AND the no-preference query.
   Transform + opacity only (plus background-position on title underlines). Decor is aria-hidden, pointer-events:none, absolutely/fixed
   positioned: no layout shift, cards are never transformed (Minty's hop lines stay put). Contrast: card sheen uses mix-blend-mode:multiply,
   so text under it can only get darker, never lighter (v1.56 lightc.css values hold). Paused while hidden (lfx-hid / bmz-hid). Lighter on phones. */
.lfx-sky,.lfx-fx,.lfx-d,.lfx-hs,.lfx-bl,.lfx-ul{display:none;pointer-events:none!important}
html[data-theme-id=light] .lfx-rel{position:relative}
/* ---------- background: aurora wash, soft mint light orbs, faint dot grid that breathes (behind everything) ---------- */
html:not(#_l1):not(#_l2):not(#_l3):not(#_l4):not(#_l5)[data-theme-id=light].lfx-on body{background:transparent!important}
html[data-theme-id=light].lfx-on{background-color:#f4f7f6}
html[data-theme-id=light] .lfx-sky{display:block;position:fixed;inset:0;z-index:-1;overflow:hidden;contain:strict}
.lfx-sky i,.lfx-sky u,.lfx-sky s{position:absolute;display:block;will-change:transform,opacity}
.lfx-sky i{border-radius:50%;opacity:0}
/* aurora: two very wide, very soft bands */
.lfx-sky u{left:-25%;width:150%;height:46%;opacity:.9;border-radius:50%}
.lfx-sky u:nth-of-type(1){top:-14%;background:radial-gradient(ellipse at 30% 50%,rgba(61,220,151,.16),rgba(61,220,151,0) 60%),radial-gradient(ellipse at 72% 40%,rgba(80,190,230,.10),rgba(80,190,230,0) 58%)}
.lfx-sky u:nth-of-type(2){top:62%;height:52%;background:radial-gradient(ellipse at 65% 50%,rgba(31,181,122,.11),rgba(31,181,122,0) 60%),radial-gradient(ellipse at 25% 60%,rgba(159,227,196,.16),rgba(159,227,196,0) 55%)}
/* dot grid: fine mint dots, faded at the edges */
.lfx-sky s{inset:0;opacity:.5;background:radial-gradient(circle,rgba(21,128,88,.16) 1px,transparent 1.4px) 0 0/26px 26px;
 -webkit-mask:radial-gradient(ellipse at 50% 40%,#000 0,rgba(0,0,0,.35) 55%,transparent 80%);mask:radial-gradient(ellipse at 50% 40%,#000 0,rgba(0,0,0,.35) 55%,transparent 80%)}
.lfx-sky i:nth-of-type(1){left:8%;top:22%;width:220px;height:220px;margin:-110px 0 0 -110px;background:radial-gradient(circle,rgba(61,220,151,.20),rgba(61,220,151,0) 68%);--ld:48s;--ll:-6s}
.lfx-sky i:nth-of-type(2){left:30%;top:74%;width:160px;height:160px;margin:-80px 0 0 -80px;background:radial-gradient(circle,rgba(110,200,235,.16),rgba(110,200,235,0) 68%);--ld:56s;--ll:-20s}
.lfx-sky i:nth-of-type(3){left:52%;top:30%;width:260px;height:260px;margin:-130px 0 0 -130px;background:radial-gradient(circle,rgba(159,227,196,.22),rgba(159,227,196,0) 68%);--ld:64s;--ll:-34s}
.lfx-sky i:nth-of-type(4){left:76%;top:68%;width:200px;height:200px;margin:-100px 0 0 -100px;background:radial-gradient(circle,rgba(31,181,122,.14),rgba(31,181,122,0) 68%);--ld:52s;--ll:-12s}
.lfx-sky i:nth-of-type(5){left:90%;top:18%;width:140px;height:140px;margin:-70px 0 0 -70px;background:radial-gradient(circle,rgba(61,220,151,.18),rgba(61,220,151,0) 68%);--ld:44s;--ll:-27s}
.lfx-sky i:nth-of-type(6){left:16%;top:94%;width:120px;height:120px;margin:-60px 0 0 -60px;background:radial-gradient(circle,rgba(110,200,235,.14),rgba(110,200,235,0) 68%);--ld:40s;--ll:-3s}
.lfx-sky i:nth-of-type(7){left:64%;top:6%;width:110px;height:110px;margin:-55px 0 0 -55px;background:radial-gradient(circle,rgba(159,227,196,.2),rgba(159,227,196,0) 68%);--ld:38s;--ll:-15s}

/* ---------- tap ripple (fixed layer, never intercepts clicks) ---------- */
html[data-theme-id=light] .lfx-fx{display:block;position:fixed;inset:0;z-index:2147482980;overflow:hidden;contain:strict}
.lfx-fx i{pointer-events:none !important;position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;opacity:0;transform:scale(.1);
 box-shadow:0 0 0 1.5px rgba(11,107,73,.55);background:radial-gradient(circle,rgba(61,220,151,.18),rgba(61,220,151,0) 70%)}

/* ---------- cards: thin mint border trace (top + bottom), soft glass sheen, live pulse dot on stats, hover ring ---------- */
html[data-theme-id=light] .lfx-d{display:block;position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit}
.lfx-d b{position:absolute;display:block;opacity:0;height:1.5px;width:30%;border-radius:2px;will-change:transform}
.lfx-d b:nth-of-type(1){left:0;top:0;transform:translate3d(-110%,0,0);background:linear-gradient(90deg,transparent,#9fe3c4 30%,#1fb57a 65%,#0b6b49 85%,transparent)}
.lfx-d b:nth-of-type(2){right:0;bottom:0;transform:translate3d(110%,0,0);background:linear-gradient(270deg,transparent,#9fe3c4 30%,#1fb57a 65%,#0b6b49 85%,transparent)}
/* sheen: multiply blend = can only darken, so text contrast never drops */
.lfx-d s{position:absolute;top:-20%;bottom:-20%;left:0;width:34%;display:block;opacity:0;transform:translate3d(-130%,0,0) skewX(-16deg);will-change:transform;
 background:linear-gradient(90deg,transparent,rgba(214,244,230,.55) 35%,rgba(196,236,240,.6) 50%,rgba(214,244,230,.55) 65%,transparent);mix-blend-mode:multiply}
/* pulse dot (stat cards only, top-right margin) */
.lfx-d em{position:absolute;top:11px;right:12px;width:6px;height:6px;border-radius:50%;display:block;background:#1fb57a;opacity:.9}
.lfx-d em::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(31,181,122,.55);opacity:0}
.lfx-d::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .25s ease;
 box-shadow:inset 0 0 0 1px rgba(11,107,73,.55),inset 0 -14px 24px -18px rgba(31,181,122,.45)}
html[data-theme-id=light] .lfx-rel:hover>.lfx-d::after{opacity:1}

/* ---------- section-title underline (mint gradient, JS sizes it under the title text) ---------- */
html[data-theme-id=light] .lfx-ul{display:block;position:absolute;height:2px;border-radius:2px;opacity:.9;transform-origin:0 50%;
 background:linear-gradient(90deg,#0b6b49,#1fb57a,#9fe3c4,#1fb57a,#0b6b49) 0 0/200% 100%}
html[data-theme-id=light] #glD .lfx-ul{background-image:linear-gradient(90deg,#b42318,#e5484d,#f4a3a5,#e5484d,#b42318)}

/* ---------- header: soft daylight sweep ---------- */
html[data-theme-id=light] .lfx-hs{display:block;position:absolute;inset:0;overflow:hidden;z-index:0}
.lfx-hs i{position:absolute;top:-20%;bottom:-20%;left:0;width:180px;display:block;opacity:0;transform:translate3d(-220px,0,0) skewX(-18deg);mix-blend-mode:multiply;
 background:linear-gradient(90deg,transparent,rgba(210,242,228,.7) 40%,rgba(196,236,240,.7) 55%,transparent)}

/* ---------- soft rise-in for sections arriving on scroll (overlay fades with a mint line; content never moves) ---------- */
html[data-theme-id=light] .lfx-bl{display:block;position:absolute;inset:0;z-index:4;opacity:0;border-radius:inherit;
 background:linear-gradient(180deg,rgba(244,247,246,.97),rgba(244,247,246,.97)) no-repeat,linear-gradient(90deg,transparent,#1fb57a,#9fe3c4,transparent) no-repeat;
 background-size:100% 100%,100% 2px;background-position:0 0,0 0}

/* ---------- buttons: hover lift with a soft shadow, press ---------- */
html:not(#_l1):not(#_l2):not(#_l3):not(#_l4):not(#_l5)[data-theme-id=light] :is(nav.tabs button,.vh button,.glass button,header button):hover{box-shadow:0 4px 10px -4px rgba(11,107,73,.35)}

/* ---------- counting stat digits ---------- */
html[data-theme-id=light] .lfx-cnt{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:no-preference){
 html[data-theme-id=light][data-lfx] .lfx-sky i{animation:lfxOrb var(--ld,50s) ease-in-out infinite var(--ll,0s)}
 html[data-theme-id=light][data-lfx] .lfx-sky u:nth-of-type(1){animation:lfxAur 34s ease-in-out infinite alternate}
 html[data-theme-id=light][data-lfx] .lfx-sky u:nth-of-type(2){animation:lfxAur2 41s ease-in-out infinite alternate}
 html[data-theme-id=light][data-lfx] .lfx-sky s{animation:lfxGrid 12s ease-in-out infinite}
 html[data-theme-id=light][data-lfx] .lfx-fx i.go{animation:lfxRip .55s cubic-bezier(.2,.7,.3,1) both}
 html[data-theme-id=light][data-lfx] .lfx-rel.lfx-in>.lfx-d b:nth-of-type(1){animation:lfxTrace 9s cubic-bezier(.45,.05,.55,.95) infinite;animation-delay:var(--lq,0s)}
 html[data-theme-id=light][data-lfx] .lfx-rel.lfx-in>.lfx-d b:nth-of-type(2){animation:lfxTraceR 9s cubic-bezier(.45,.05,.55,.95) infinite;animation-delay:calc(var(--lq,0s) - 4.5s)}
 html[data-theme-id=light][data-lfx] .lfx-rel.lfx-in>.lfx-d s{animation:lfxSheen 12s ease-in-out infinite;animation-delay:var(--lh,0s)}
 html[data-theme-id=light][data-lfx] .lfx-rel.lfx-in>.lfx-d em::after{animation:lfxPulse 2.4s ease-out infinite;animation-delay:var(--lq,0s)}
 html[data-theme-id=light][data-lfx] .lfx-ul{animation:lfxUl 7s linear infinite,lfxUlB 5s ease-in-out infinite}
 html[data-theme-id=light][data-lfx] .lfx-hs i{animation:lfxShine 11s ease-in-out infinite 2s}
 html[data-theme-id=light][data-lfx] .lfx-bl.go{animation:lfxRev .8s ease-out both}
 html:not(#_l1):not(#_l2):not(#_l3):not(#_l4):not(#_l5)[data-theme-id=light][data-lfx] :is(nav.tabs button,.vh button,.glass button,header button){transition:transform .15s ease,box-shadow .15s ease}
 html:not(#_l1):not(#_l2):not(#_l3):not(#_l4):not(#_l5)[data-theme-id=light][data-lfx] :is(nav.tabs button,.vh button,.glass button,header button):hover{transform:translateY(-1px)}
 html:not(#_l1):not(#_l2):not(#_l3):not(#_l4):not(#_l5)[data-theme-id=light][data-lfx] :is(nav.tabs button,.vh button,.glass button,header button):active{transform:translateY(0) scale(.97);box-shadow:none;transition-duration:.06s}
}
html.lfx-hid [class^=lfx-],html.lfx-hid [class^=lfx-] *,html.lfx-hid [class*=" lfx-"],html.lfx-hid [class*=" lfx-"] *,
html.bmz-hid [class^=lfx-],html.bmz-hid [class^=lfx-] *,html.bmz-hid [class*=" lfx-"],html.bmz-hid [class*=" lfx-"] *,
html.lfx-hid .lfx-d em::after,html.bmz-hid .lfx-d em::after{animation-play-state:paused!important}

/* phones: lighter (4 orbs, one aurora band, no grid, no sheen on small cards, no hover lift) */
@media (max-width:600px),(pointer:coarse){
 .lfx-sky i:nth-of-type(n+5),.lfx-sky u:nth-of-type(2),.lfx-sky s,.lfx-d.s s{display:none!important}
 html[data-theme-id=light] .lfx-d b{width:44%}
 html:not(#_l1):not(#_l2):not(#_l3):not(#_l4):not(#_l5)[data-theme-id=light][data-lfx] :is(nav.tabs button,.vh button,.glass button,header button):hover{transform:none;box-shadow:none}
}

@keyframes lfxOrb{0%{opacity:0;transform:translate3d(0,30px,0) scale(.9)}25%{opacity:1}50%{opacity:.8;transform:translate3d(34px,-40px,0) scale(1.06)}75%{opacity:1}100%{opacity:0;transform:translate3d(-20px,-110px,0) scale(.92)}}
@keyframes lfxAur{from{transform:translate3d(-6%,0,0) scaleY(1)}to{transform:translate3d(6%,4%,0) scaleY(1.15)}}
@keyframes lfxAur2{from{transform:translate3d(5%,0,0) scaleY(1.1)}to{transform:translate3d(-5%,-4%,0) scaleY(.95)}}
@keyframes lfxGrid{0%,100%{opacity:.35}50%{opacity:.65}}
@keyframes lfxRip{0%{opacity:.9;transform:scale(.1)}100%{opacity:0;transform:scale(1.3)}}
@keyframes lfxTrace{0%{opacity:0;transform:translate3d(-110%,0,0)}3%{opacity:1}30%{opacity:1}34%{opacity:0;transform:translate3d(340%,0,0)}100%{opacity:0;transform:translate3d(340%,0,0)}}
@keyframes lfxTraceR{0%{opacity:0;transform:translate3d(110%,0,0)}3%{opacity:1}30%{opacity:1}34%{opacity:0;transform:translate3d(-340%,0,0)}100%{opacity:0;transform:translate3d(-340%,0,0)}}
@keyframes lfxSheen{0%{opacity:0;transform:translate3d(-130%,0,0) skewX(-16deg)}4%{opacity:1}24%{opacity:1}28%{opacity:0;transform:translate3d(330%,0,0) skewX(-16deg)}100%{opacity:0;transform:translate3d(330%,0,0) skewX(-16deg)}}
@keyframes lfxPulse{0%{opacity:.8;transform:scale(.4)}80%,100%{opacity:0;transform:scale(1.5)}}
@keyframes lfxUl{from{background-position:0 0}to{background-position:200% 0}}
@keyframes lfxUlB{0%,100%{opacity:.6;transform:scaleX(.6)}45%,70%{opacity:1;transform:scaleX(1)}}
@keyframes lfxShine{0%{opacity:0;transform:translate3d(-220px,0,0) skewX(-18deg)}3%{opacity:1}24%{opacity:1}27%{opacity:0;transform:translate3d(calc(100vw + 60px),0,0) skewX(-18deg)}100%{opacity:0;transform:translate3d(calc(100vw + 60px),0,0) skewX(-18deg)}}
@keyframes lfxRev{0%{opacity:1;background-position:0 0,0 0}70%{opacity:.3;background-position:0 0,0 100%}100%{opacity:0;background-position:0 0,0 100%}}
