/* Featured plugin cards (home): dark cards, per-plugin accent, cursor spotlight, scroll reveal.
   Loaded after apple.css / refinement.css; product-tiles.js adds .fx / .in and the pointer vars. */
body .featured-tiles{--fe:cubic-bezier(.2,.8,.2,1);padding-top:112px;padding-bottom:120px;overflow:hidden;
 background:radial-gradient(900px 460px at 12% 0,rgba(0,113,227,.11),transparent 62%),radial-gradient(820px 480px at 92% 38%,rgba(139,92,246,.09),transparent 62%),radial-gradient(700px 420px at 30% 100%,rgba(16,185,129,.07),transparent 62%),#f5f5f7}
body .featured-tiles .ft-head{margin-bottom:64px;max-width:760px}
body .featured-tiles .ft-head .eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;padding:7px 16px 7px 14px;border-radius:99px;background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.07);box-shadow:0 8px 24px -14px rgba(0,0,0,.25);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#1d1d1f;backdrop-filter:blur(10px)}
body .featured-tiles .ft-head .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#0071e3;box-shadow:0 0 0 0 rgba(0,113,227,.5);animation:ftPulse 2.4s ease-out infinite}
body .featured-tiles .ft-head h2{background:linear-gradient(180deg,#1d1d1f 30%,#5b5b63);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.08em}
body .featured-tiles .ft-sub{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:#6e6e73;margin:18px auto 0;max-width:560px}
body .featured-tiles .ft-grid{gap:22px}
@keyframes ftPulse{0%{box-shadow:0 0 0 0 rgba(0,113,227,.5)}70%,100%{box-shadow:0 0 0 9px rgba(0,113,227,0)}}

/* card */
body .featured-tiles .ftile:is(.dark,.light){--ac:56,150,255;--mx:50%;--my:0%;position:relative;isolation:isolate;min-height:660px;padding:56px 32px 0;border-radius:32px;color:#f5f5f7;border:1px solid rgba(255,255,255,.07);
 background:radial-gradient(70% 38% at 50% 0,rgba(var(--ac),.20),transparent 70%),linear-gradient(180deg,#17171b 0%,#0b0b0d 62%,#08080a 100%);
 box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 60px -34px rgba(0,0,0,.55);animation:none;
 transition:transform .55s var(--fe),box-shadow .55s var(--fe),translate .95s var(--fe) var(--d,0ms),opacity .95s var(--fe) var(--d,0ms)}
body .featured-tiles .ft-grid .ftile:nth-child(1){--ac:56,150,255}
body .featured-tiles .ft-grid .ftile:nth-child(2){--ac:52,211,153}
body .featured-tiles .ft-grid .ftile:nth-child(3){--ac:251,191,36}
body .featured-tiles .ft-grid .ftile:nth-child(4){--ac:167,139,250}
body .featured-tiles .ftile:is(.dark,.light):hover{transform:translateY(-8px);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 50px 80px -36px rgba(var(--ac),.55),0 30px 60px -30px rgba(0,0,0,.7)}
/* cursor spotlight + glowing edge */
body .featured-tiles .ftile::before,body .featured-tiles .ftile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s}
body .featured-tiles .ftile::before{z-index:-1;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(var(--ac),.20),transparent 62%)}
body .featured-tiles .ftile::after{z-index:2;padding:1px;background:radial-gradient(340px circle at var(--mx) var(--my),rgba(var(--ac),.95),transparent 70%);-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)}
body .featured-tiles .ftile:hover::before,body .featured-tiles .ftile:hover::after{opacity:1}

/* text */
body .featured-tiles .ftile h2{color:#fff;font-size:clamp(32px,3.6vw,48px);letter-spacing:-.035em}
body .featured-tiles .ftile .ftag{margin:10px 0 0;font-size:clamp(17px,1.7vw,21px);font-weight:500;background:linear-gradient(100deg,#f5f5f7 0%,#f5f5f7 25%,rgb(var(--ac)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
body .featured-tiles .ftile .fprice{display:inline-flex;align-items:baseline;gap:6px;margin:18px 0 0;padding:7px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);font-size:15px;opacity:1;color:rgba(245,245,247,.7)}
body .featured-tiles .ftile .fprice b{color:#fff;font-weight:600}
body .featured-tiles .ftile .fprice span:empty{display:none}
body .featured-tiles .ftile .fcompat{margin:14px 0 0;font-size:13px;opacity:.5;letter-spacing:.01em}
body .featured-tiles .ftile .factions{margin:24px 0 36px;gap:12px}

/* buttons */
body .featured-tiles .ftile:is(.dark,.light) .fbtn{position:relative;overflow:hidden;min-height:44px;padding:10px 24px;font-size:16px;font-weight:500;transition:transform .3s var(--fe),background-color .25s,border-color .25s,color .25s,box-shadow .3s}
body .featured-tiles .ftile:is(.dark,.light) .fbtn.fill{background:linear-gradient(180deg,#2b9bff,#0071e3);border:1px solid #1a86f0;color:#fff;box-shadow:0 10px 26px -10px rgba(0,113,227,.9),0 1px 0 rgba(255,255,255,.3) inset}
body .featured-tiles .ftile:is(.dark,.light) .fbtn.fill::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s var(--fe)}
body .featured-tiles .ftile:is(.dark,.light) .fbtn.fill:hover::after{transform:translateX(120%)}
body .featured-tiles .ftile:is(.dark,.light) .fbtn.line{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(8px)}
body .featured-tiles .ftile:is(.dark,.light) .fbtn.line:hover{background:#fff;border-color:#fff;color:#0b0b0d}
body .featured-tiles .ftile:is(.dark,.light) .fbtn:hover{transform:translateY(-2px)}
body .featured-tiles .ftile .fbtn:focus-visible,body .featured-tiles .ftile .fimg:focus-visible{outline:2px solid rgb(var(--ac));outline-offset:3px}

/* screenshot window */
body .featured-tiles .ftile .fimg{position:relative;isolation:isolate;perspective:1100px;max-width:100%;margin-top:auto}
body .featured-tiles .ftile .fimg::before{content:"";position:absolute;z-index:-1;left:10%;right:10%;top:-8%;height:70%;background:radial-gradient(closest-side,rgba(var(--ac),.5),transparent);filter:blur(34px);opacity:.55;transition:opacity .6s,transform .8s var(--fe)}
body .featured-tiles .ftile:hover .fimg::before{opacity:.95;transform:scale(1.12)}
body .featured-tiles .ftile .fimg :is(img,svg){display:block;width:100%;border-radius:20px 20px 0 0;border:1px solid rgba(255,255,255,.14);border-bottom:0;aspect-ratio:auto;height:auto;object-fit:contain;background:#0b0b0c;box-shadow:0 -10px 60px -24px rgba(var(--ac),.5),0 40px 80px -20px rgba(0,0,0,.85);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0) scale(1);transform-origin:50% 100%;transition:transform .7s var(--fe)}
body .featured-tiles .ftile:hover .fimg :is(img,svg){transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-10px) scale(1.025)}
body .featured-tiles .ftile.is-tilting .fimg :is(img,svg){transition:transform .12s linear}

/* illustrations */
body .featured-tiles .ftile .fimg svg{background:radial-gradient(75% 90% at 50% 0,rgba(var(--ac),.16),transparent 70%),linear-gradient(180deg,#14161b,#0b0c0f);aspect-ratio:16/9;height:auto}
.art .acs{stroke:rgb(var(--ac))}
.art .acf{fill:rgb(var(--ac))}
.art .ring{stroke:rgb(var(--ac))}
.art .hot{fill:#ff9f0a}.art .hotl{stroke:#ff9f0a}
.art .guide{stroke:rgb(var(--ac));stroke-width:1.5;stroke-dasharray:3 4}
.art .ray{fill:none;stroke:rgb(var(--ac));stroke-width:1.5;stroke-dasharray:4 6;opacity:.75;animation:artFlow 1.6s linear infinite}
.art .frame{transform-box:fill-box;transform-origin:center;animation:artFrame 4.8s var(--fe,ease) infinite both}
.art .loop{stroke-dasharray:1;stroke-dashoffset:1;animation:artDraw 6s ease-in-out infinite}
.art .smooth{animation:artShow 6s ease-in-out infinite}
.art .arrow{animation:artShow 6s ease-in-out infinite}
.art .gaps{stroke:rgba(255,255,255,.55)}
@keyframes artFlow{to{stroke-dashoffset:-20}}
@keyframes artFrame{0%{opacity:.35;transform:scale(.9)}14%,72%{opacity:1;transform:scale(1)}100%{opacity:.35;transform:scale(.9)}}
@keyframes artDraw{0%,8%{stroke-dashoffset:1}38%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes artShow{0%,40%{opacity:.12}60%,90%{opacity:1}100%{opacity:.12}}

/* reveal: only when JS marked the section (.fx); without it everything is simply visible */
body .featured-tiles.fx .ft-head>*{opacity:0;translate:0 26px;transition:opacity .9s var(--fe),translate .9s var(--fe)}
body .featured-tiles.fx .ft-head .eyebrow{transition-delay:0ms}
body .featured-tiles.fx .ft-head h2{transition-delay:90ms}
body .featured-tiles.fx .ft-head .ft-sub{transition-delay:180ms}
body .featured-tiles.fx.in .ft-head>*{opacity:1;translate:0 0}
body .featured-tiles.fx .ftile:is(.dark,.light){opacity:0;translate:0 70px}
body .featured-tiles.fx .ftile.in:is(.dark,.light){opacity:1;translate:0 0}
body .featured-tiles.fx .ftile>:is(h2,.ftag,.fprice,.fcompat,.factions){opacity:0;translate:0 22px;transition:opacity .8s var(--fe),translate .8s var(--fe)}
body .featured-tiles.fx .ftile.in>:is(h2,.ftag,.fprice,.fcompat,.factions){opacity:1;translate:0 0}
body .featured-tiles.fx .ftile>h2{transition-delay:calc(var(--d,0ms) + 140ms)}
body .featured-tiles.fx .ftile>.ftag{transition-delay:calc(var(--d,0ms) + 220ms)}
body .featured-tiles.fx .ftile>.fprice{transition-delay:calc(var(--d,0ms) + 300ms)}
body .featured-tiles.fx .ftile>.fcompat{transition-delay:calc(var(--d,0ms) + 340ms)}
body .featured-tiles.fx .ftile>.factions{transition-delay:calc(var(--d,0ms) + 400ms)}
body .featured-tiles.fx .ftile .fimg{opacity:0;translate:0 90px;transition:opacity 1.1s var(--fe) calc(var(--d,0ms) + 320ms),translate 1.2s var(--fe) calc(var(--d,0ms) + 320ms)}
body .featured-tiles.fx .ftile.in .fimg{opacity:1;translate:0 0}

@media(max-width:900px){
 body .featured-tiles{padding-top:84px;padding-bottom:84px}
 body .featured-tiles .ft-head{margin-bottom:44px}
 body .featured-tiles .ftile:is(.dark,.light){min-height:0;padding:44px 20px 0;border-radius:26px}
 body .featured-tiles .ftile:is(.dark,.light):hover{transform:none}
}
@media(hover:none){body .featured-tiles .ftile::before,body .featured-tiles .ftile::after{display:none}}
@media(prefers-reduced-motion:reduce){
 body .featured-tiles.fx :is(.ft-head>*,.ftile,.ftile>*,.ftile .fimg){opacity:1!important;translate:none!important}
 body .featured-tiles .ft-head .eyebrow::before{animation:none}
 body .featured-tiles .ftile:hover,body .featured-tiles .ftile:hover .fimg img{transform:none!important}
}
@media(forced-colors:active){
 body .featured-tiles .ft-head h2,body .featured-tiles .ftile .ftag{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
}