/* Local Membership art previews use native copy and controls. */
.home-member-demo-nav { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:24px; color:var(--muted); font-size:14px; scroll-margin-top:130px; }
.home-member-demo-nav .button { --button-height:42px; --button-size:14px; --button-padding:10px 18px; }
.home-member-demo-nav a[aria-current="page"] { --action-bg:var(--button-bg); --action-ink:var(--button-ink); --action-line:transparent; }
.home-main .home-member-demo-nav + .home-member-preview { margin-top:24px; }
.home-member--animated { min-height:480px; }
.home-member-animation { position:relative; width:100%; height:380px; max-width:470px; justify-self:center; color:#e4ca94; font-family:var(--body-font); }
.member-medal { display:block; width:100%; height:auto; overflow:visible; font-family:var(--body-font); filter:drop-shadow(0 10px 12px #00000025); }
.home-member-animation--medals { overflow:hidden; mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent); }
.member-medal-stream { width:min(100%,400px); margin:auto; animation:member-medals-flow 14s linear infinite; }
.member-medal-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 22px; padding-bottom:18px; }
.member-medal-swing { transform-origin:50% 0; animation:member-medal-sway 4s ease-in-out infinite; animation-delay:var(--member-delay,0s); }
.member-medal-swing .member-medal { max-width:104px; margin:auto; }
.member-pendant { position:absolute; width:238px; top:16px; left:calc(50% - 119px); transform-origin:50% 0; animation:member-pendant-sway 6s ease-in-out infinite; }
.member-ribbon-clasp { display:block; width:104px; margin:0 auto -1px; padding:7px 0; border:1px solid #efe0b866; border-radius:8px; background:#232234; color:#f6e8c7; text-align:center; font-size:12px; letter-spacing:.15em; }
.member-pendant-halo { position:absolute; width:280px; height:280px; border:1px solid #ead8b633; border-radius:50%; top:82px; left:calc(50% - 140px); }
.member-pendant-halo::before,.member-pendant-halo::after { content:''; position:absolute; inset:18px; border:1px solid #ead8b618; border-radius:50%; }
.member-pendant-halo::after { inset:-18px; }
.member-demo .member-art:has(>.home-member-animation) { --home-member-ink:var(--member-feature-ink); width:100%; margin:0; }
body[data-gradients="off"] .member-demo .member-art { --home-member-ink:var(--gradient-flat-ink); }
.member-refined-art { display:block; width:100%; height:100%; overflow:visible; color:color-mix(in srgb,var(--home-member-ink) 70%,#e4ca94); font-family:var(--body-font); }
.member-refined-swing { transform-origin:150px 37px; animation:member-refined-sway 8s ease-in-out infinite; filter:drop-shadow(0 9px 8px #08121e33); }
.member-refined-glint { animation:member-refined-light 8s ease-in-out infinite; }
.member-art-note { position:absolute; bottom:0; left:0; width:100%; text-align:center; color:color-mix(in srgb,var(--home-member-ink) 72%,transparent); font-size:10px; letter-spacing:.15em; }
.member-pass-stack { position:absolute; width:min(100%,370px); height:240px; top:70px; left:50%; transform:translateX(-50%); perspective:900px; }
.member-pass { position:absolute; inset:0; border-radius:24px; border:1px solid #e8d5ac99; background:#a79ac6; box-shadow:0 18px 48px #00000024; }
.member-pass--back { transform:translate(-14px,-26px) rotate(-10deg); opacity:.48; animation:member-pass-back 8s ease-in-out infinite; }
.member-pass--middle { transform:translate(14px,-12px) rotate(6deg); background:#cfbc91; opacity:.68; animation:member-pass-middle 8s ease-in-out infinite; }
.member-pass--front { display:flex; flex-direction:column; padding:25px 28px; overflow:hidden; color:#f6e7c3; background:linear-gradient(130deg,#343249,#1f2030 68%,#434052); transform:rotate(-3deg); animation:member-pass-front 8s ease-in-out infinite; }
.member-pass-top,.member-pass-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:1; }
.member-pass-top { font-size:10px; letter-spacing:.12em; }
.member-pass-top .dfvn-icon { width:24px; height:24px; }
.member-pass--front strong { position:relative; z-index:1; margin-top:18px; font-size:68px; font-weight:var(--font-semibold,600); line-height:1; letter-spacing:-.05em; }
.member-pass-caption { position:relative; z-index:1; font-size:13px; margin-top:8px; color:#eee0c1b3; }
.member-pass-bottom { margin-top:auto; padding-top:20px; font-size:9px; letter-spacing:.14em; }
.member-pass-bottom i { width:28px; height:18px; border:1px solid #e8d5ac66; border-radius:4px; background:repeating-linear-gradient(90deg,transparent 0 5px,#e8d5ac33 5px 6px); }
.member-pass-seal { position:absolute; right:-10px; bottom:-24px; z-index:3; display:grid; place-items:center; width:72px; height:72px; border-radius:50%; border:5px double #fff0c8; background:#cfb178; color:#272535; box-shadow:0 12px 30px #00000033; animation:member-seal-settle 8s ease-in-out infinite; }
.member-pass-seal .dfvn-icon { width:32px; height:32px; }
.member-pass-shine { position:absolute; inset:-60%; background:linear-gradient(110deg,transparent 40%,#ffffff12 49%,#ffffff21 50%,transparent 60%); transform:translateX(-70%); animation:member-pass-light 8s ease-in-out infinite; pointer-events:none; }
.home-member-animation :is(.member-medal-stream,.member-medal-swing,.member-pendant,.member-refined-swing,.member-refined-glint,.member-pass,.member-pass-seal,.member-pass-shine) { animation-play-state:paused; }
.home-member-animation.is-member-playing :is(.member-medal-stream,.member-medal-swing,.member-pendant,.member-refined-swing,.member-refined-glint,.member-pass,.member-pass-seal,.member-pass-shine) { animation-play-state:running; }
@keyframes member-medals-flow { from { transform:translateY(-50%); } to { transform:translateY(0); } }
@keyframes member-medal-sway { 0%,100% { transform:rotate(-7deg); } 50% { transform:rotate(7deg); } }
@keyframes member-pendant-sway { 0%,100% { transform:rotate(-9deg); } 50% { transform:rotate(9deg); } }
@keyframes member-refined-sway { 0%,100% { transform:rotate(-3.5deg); } 50% { transform:rotate(3.5deg); } }
@keyframes member-refined-light { 0%,22% { transform:translateX(-170px); opacity:0; } 28% { opacity:1; } 58% { transform:translateX(200px); opacity:1; } 64%,100% { transform:translateX(200px); opacity:0; } }
@keyframes member-pass-front { 0%,100% { transform:rotate(-3deg) rotateY(-5deg) translateY(0); } 50% { transform:rotate(2deg) rotateY(5deg) translateY(-10px); } }
@keyframes member-pass-back { 0%,100% { transform:translate(-14px,-26px) rotate(-10deg); } 50% { transform:translate(-22px,-33px) rotate(-14deg); } }
@keyframes member-pass-middle { 0%,100% { transform:translate(14px,-12px) rotate(6deg); } 50% { transform:translate(23px,-17px) rotate(10deg); } }
@keyframes member-seal-settle { 0%,100% { transform:translateY(0) rotate(-8deg); } 50% { transform:translateY(-8px) rotate(8deg); } }
@keyframes member-pass-light { 0%,25% { transform:translateX(-70%); } 70%,100% { transform:translateX(70%); } }
@media(max-width:760px) { .home-member--animated { gap:32px; } .home-member-animation { height:300px; max-width:360px; } .member-medal-grid { gap:14px; padding-bottom:14px; } .member-medal-swing .member-medal { max-width:88px; } .member-pendant { width:190px; left:calc(50% - 95px); top:0; } .member-pendant-halo { width:218px; height:218px; top:56px; left:calc(50% - 109px); } .member-pass-stack { width:calc(100% - 40px); height:190px; top:56px; } .member-pass--front { padding:20px; border-radius:20px; } .member-pass--front strong { font-size:54px; margin-top:12px; } .member-pass-top { font-size:8px; } .member-pass-caption { font-size:11px; } .member-pass-bottom { font-size:8px; padding-top:12px; } .member-pass-seal { width:58px; height:58px; right:-9px; bottom:-20px; } .member-pass-seal .dfvn-icon { width:26px; height:26px; } }
@media(prefers-reduced-motion:reduce) { .home-member-animation :is(.member-medal-stream,.member-medal-swing,.member-pendant,.member-refined-swing,.member-refined-glint,.member-pass,.member-pass-seal,.member-pass-shine) { animation:none; } .member-refined-glint { opacity:0; } }