/* /hero-wow-preview/ only: the four "need" cards as real glass panes (fork of ross-art.css).
   Frosted, tinted glass with a lit top edge, a pointer-following glint and a soft light field behind it;
   the living art inside is drawn on a transparent canvas so the glass shows through (wow-art.js). */
.tx-preview .ms-need-grid{position:relative;isolation:isolate}
.wow-glass-lights{position:absolute;inset:-6% -4%;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.wow-glass-lights i{position:absolute;border-radius:50%;filter:blur(36px);opacity:.9}
.wow-glass-lights i:nth-child(1){width:46%;height:70%;left:-6%;top:6%;background:radial-gradient(circle,#d5ff83 0%,#d5ff8300 68%);animation:wowLight 19s ease-in-out infinite alternate}
.wow-glass-lights i:nth-child(2){width:52%;height:78%;left:30%;top:-18%;background:radial-gradient(circle,#ffffff 0%,#ffffff00 66%);opacity:.55;animation:wowLight 23s ease-in-out -6s infinite alternate-reverse}
.wow-glass-lights i:nth-child(3){width:48%;height:72%;right:-8%;bottom:-16%;background:radial-gradient(circle,#62f0ff 0%,#62f0ff00 66%);opacity:.6;animation:wowLight 21s ease-in-out -11s infinite alternate}
.wow-glass-lights i:nth-child(4){width:40%;height:62%;left:18%;bottom:-24%;background:radial-gradient(circle,#9cc0ff 0%,#9cc0ff00 68%);animation:wowLight 25s ease-in-out -3s infinite alternate-reverse}
@keyframes wowLight{0%{translate:0 0;scale:1}50%{translate:6% -5%;scale:1.12}100%{translate:-5% 6%;scale:.94}}

.tx-preview .mf-hero .ms-need-grid .ms-need-card.tx-art-card{position:relative;overflow:hidden;isolation:isolate;justify-content:flex-end;border:0;color:var(--art-ink);
 background:linear-gradient(150deg,rgba(var(--tint),var(--a1)) 0%,rgba(var(--tint),var(--a2)) 48%,rgba(var(--tint),var(--a3)) 100%);
 -webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
 box-shadow:inset 0 1.5px 0 #fffffff2,inset 1.5px 0 0 #ffffff80,inset -1px 0 0 #ffffff33,inset 0 -1px 0 #ffffff40,0 26px 54px -28px #041046d9,0 3px 8px -3px #04104666;
 transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
 transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}
.tx-preview .mf-hero .ms-need-grid .ms-need-card.tx-art-card.ms-paper-plan{--tint:255,255,255;--a1:.8;--a2:.5;--a3:.66;--art-ink:#151815;--art-sub:#151815c9;--art-arrow:#174cf2}
.tx-preview .mf-hero .ms-need-grid .ms-need-card.tx-art-card.ms-paper-books{--tint:213,255,131;--a1:.86;--a2:.56;--a3:.74;--art-ink:#151815;--art-sub:#151815cc;--art-arrow:#151815}
.tx-preview .mf-hero .ms-need-grid .ms-need-card.tx-art-card.ms-paper-file{--tint:52,108,255;--a1:.8;--a2:.5;--a3:.68;--art-ink:#ffffff;--art-sub:#ffffffe0;--art-arrow:#d5ff83}
.tx-preview .mf-hero .ms-need-grid .ms-need-card.tx-art-card.ms-paper-start{--tint:236,243,255;--a1:.84;--a2:.52;--a3:.7;--art-ink:#151815;--art-sub:#151815c9;--art-arrow:#174cf2}
/* surface: diagonal sheen + a glint that follows the pointer + fine frost */
.tx-preview .mf-hero .ms-need-grid .ms-need-card.tx-art-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
 background:radial-gradient(360px circle at var(--gx,18%) var(--gy,-10%),#ffffff8c,#ffffff00 46%),linear-gradient(118deg,#ffffff66 0%,#ffffff00 30%,#ffffff00 70%,#ffffff26 100%),
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 opacity:.9;transition:opacity .4s ease}
/* edge: a thin refraction ring, brighter where the light hits */
.tx-preview .mf-hero .ms-need-grid .ms-need-card.tx-art-card::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;padding:1.5px;
 background:linear-gradient(140deg,#ffffff 0%,#ffffff33 30%,#ffffff00 55%,#d5ff8399 85%,#ffffffb3 100%);
 -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 exclude,linear-gradient(#000 0 0)}
.tx-preview .mf-hero .ms-need-grid .ms-need-card.tx-art-card strong{position:relative;z-index:2;color:var(--art-ink)}
.tx-preview .mf-hero .ms-need-grid .ms-need-card.tx-art-card .ms-need-description{position:relative;z-index:2;color:var(--art-sub)}
.tx-preview .mf-hero .ms-need-grid .ms-need-card.tx-art-card>svg{position:relative;z-index:2;color:var(--art-arrow);margin-top:0}
.tx-preview .mf-hero .ms-need-grid .ms-need-card.tx-art-card:hover{--lift:-6px}
.tx-preview .mf-hero .ms-need-grid .ms-need-card.tx-art-card:hover::before{opacity:1}
.tx-preview .mf-hero .ms-need-grid .ms-need-card.tx-art-card:focus-visible{outline:3px solid #d5ff83;outline-offset:3px}

.tx-art{position:absolute;inset:0;z-index:0;display:block;overflow:hidden;background:none}
.tx-art canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
/* frosted band behind the words, in the card's own tint */
.tx-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(var(--tint),0) 44%,rgba(var(--tint),.5) 66%,rgba(var(--tint),.86) 100%)}
.tx-art-card:hover .tx-art canvas,.tx-art-card:focus-visible .tx-art canvas{transform:scale(1.04)}

/* Tax prep: frosted documents floating in the light, the front one being prepared */
.tx-glass{position:absolute;top:12%;width:30%;aspect-ratio:3/4;border-radius:10px;overflow:hidden;
 background:linear-gradient(140deg,#ffffffd9,#ffffff5c 60%,#ffffff99);border:1px solid #ffffffcc;
 -webkit-backdrop-filter:blur(10px) saturate(1.6);backdrop-filter:blur(10px) saturate(1.6);
 box-shadow:0 22px 40px -22px #174cf2aa,inset 0 1px 0 #ffffff,inset 0 0 0 1px #174cf21f;will-change:transform}
.tx-glass-1{left:13%;top:17%}
.tx-glass-2{left:35%;top:8%;z-index:1}
.tx-glass-3{left:57%;top:15%}
.tx-glass::before{content:"";position:absolute;left:14%;right:14%;top:16%;height:46%;
 background:repeating-linear-gradient(180deg,#174cf2 0 3px,transparent 3px 11px);opacity:.28;border-radius:2px}
.tx-glass-2::before{opacity:.72;clip-path:inset(0 0 calc((1 - var(--fill,1))*100%) 0)}
.tx-glass::after{content:"";position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 38%,#ffffff8c 48%,transparent 58%);transform:translateX(var(--sheen,0%));mix-blend-mode:screen}
.tx-scan{position:absolute;left:8%;right:8%;top:calc(12% + var(--scan,0)*62%);height:2px;border-radius:2px;background:#d5ff83;box-shadow:0 0 12px 3px #d5ff83b3;opacity:var(--scanOn,0)}
.tx-check{position:absolute;right:10%;bottom:9%;width:30%;aspect-ratio:1;border-radius:50%;background:#d5ff83;display:grid;place-items:center;
 box-shadow:0 6px 16px -6px #174cf2,inset 0 1px 0 #fff;transform:scale(var(--check,0));transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.tx-check::before{content:"";width:34%;height:18%;border-left:3px solid #151815;border-bottom:3px solid #151815;transform:translateY(-12%) rotate(-45deg)}
.tx-art-fallback{background:radial-gradient(120% 90% at 30% 20%,#d5ff83,#9cc0ff 40%,#ffffff 100%)}

@media(max-width:899px){
 .tx-preview .mf-hero>.ms-need-grid.ms-hero-papers.ms-hero-papers{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-template-rows:none;grid-auto-columns:80%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px;scroll-padding-inline:20px;scrollbar-width:none;overscroll-behavior-x:contain}
 .tx-preview .mf-hero>.ms-need-grid.ms-hero-papers.ms-hero-papers::-webkit-scrollbar{display:none}
 .tx-preview .mf-hero .ms-need-grid .ms-need-card.tx-art-card{scroll-snap-align:start;min-height:280px;padding:20px}
 .tx-glass{top:10%;width:28%}
 .wow-glass-lights{inset:0}
 .wow-glass-lights i{animation:none}
}
@media(prefers-reduced-motion:reduce){
 .tx-art canvas{transition:none}
 .wow-glass-lights i{animation:none}
 .tx-preview .mf-hero .ms-need-grid .ms-need-card.tx-art-card{transition:none}
 .tx-preview .mf-hero .ms-need-grid .ms-need-card.tx-art-card:hover{--lift:0px}
}
