/* A shared quiet motion language: nature in Discovery, a little sky in Community.
   Decoration never sits over a member's photograph or changes its appearance. */
#app-shell{--club-motion-ease:cubic-bezier(.22,1,.36,1)}
#app-shell :is(.primary,.secondary,.avatar-button,.gallery-more),#sheet :is(.primary,.secondary){position:relative;isolation:isolate;overflow:hidden;transition:background .25s,border-color .25s,box-shadow .35s,transform .35s var(--club-motion-ease,cubic-bezier(.22,1,.36,1))}
#app-shell :is(.primary,.secondary,.avatar-button,.gallery-more)::before,#sheet :is(.primary,.secondary)::before{content:"";position:absolute;inset:-40% -70%;background:linear-gradient(115deg,transparent 40%,#fff3 49%,transparent 58%);transform:translateX(-65%);pointer-events:none;opacity:0}
#app-shell :is(.primary,.secondary,.avatar-button,.gallery-more):active:not(:disabled),#sheet :is(.primary,.secondary):active:not(:disabled){transform:scale(.975)}
.club-tap-light{position:absolute;pointer-events:none;z-index:2;width:70px;height:70px;border-radius:50%;margin:-35px 0 0 -35px;background:radial-gradient(circle,#fff6 0,#fff2 40%,transparent 72%);animation:club-tap-light .55s ease-out both}
@keyframes club-tap-light{from{opacity:.75;transform:scale(.2)}to{opacity:0;transform:scale(2.6)}}

/* Localised light, rather than an animated background behind every screen. */
#app-shell :is(.quiet-invite,.community-invite){position:relative;isolation:isolate;overflow:hidden}
#app-shell .quiet-invite{background:#edf2e7;border-color:#e0e8d8;box-shadow:inset 0 1px 0 #ffffffe0}
#app-shell .quiet-invite::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 10% 20%,#fff8 0,transparent 44%),radial-gradient(ellipse at 90% 95%,#cfdcc660 0,transparent 60%)}
#app-shell .invite-star{position:relative}
#app-shell .invite-star::before,#app-shell .invite-star::after{content:"";position:absolute;border:1px solid #8da88138;border-radius:50%;pointer-events:none;inset:-24px;transform:rotate(-22deg) scaleY(.58)}
#app-shell .invite-star::after{inset:-39px;border-color:#8da88120;transform:rotate(28deg) scaleY(.65)}
#app-shell .community-invite{background:linear-gradient(118deg,#eef4f6 0,#eef0f9 58%,#f3f0f6 100%);border-color:#e2e7ef;box-shadow:inset 0 1px 0 #fff}
#app-shell .community-invite::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:70%;height:230%;right:-15%;top:-75%;border-radius:50%;background:radial-gradient(ellipse,#d9e7f29c,transparent 66%);transform:rotate(-22deg)}
#app-shell .community-invite::after{content:"";position:absolute;z-index:-1;pointer-events:none;inset:1px;border:1px solid #ffffff70;border-radius:inherit}

#community-page>.page-title{position:relative;isolation:isolate}
#community-page>.page-title::before{content:"";z-index:-1;pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at 66% 52%,#e0e9f38c 0,transparent 56%),radial-gradient(ellipse at 32% 35%,#eee6f770 0,transparent 45%)}
#community-page .community-intro{background:linear-gradient(115deg,#eff4f4,#f2f0f7);border:1px solid #e5eaf0;box-shadow:inset 0 1px 0 #fff;border-radius:7px}
#community-page .community-tabs .active{box-shadow:0 2px 10px #3f556309;transition:background .3s,box-shadow .3s}
#community-page .discussion-card{border-color:#e2e7e7;background:#ffffffde;box-shadow:0 5px 24px #314c4c03;transition:border-color .3s,box-shadow .4s}
#community-page .discussion-meta .member-monogram{background:linear-gradient(140deg,#e7efea,#e8eaf3);border:1px solid #fff}
#community-page .discussion-meta time{font-variant-numeric:tabular-nums}
#profile-page .member-card{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(150deg,#fcfdf9,#eef2e8);border:1px solid #e0e6d9;box-shadow:inset 0 1px 0 white}
#profile-page .member-card::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:180px;height:180px;right:-80px;top:-90px;border:1px solid #bccbb84d;border-radius:50%;box-shadow:0 0 0 24px #bccbb815,0 0 0 49px #bccbb80b}

#app-shell :is(.podium-card,.social-card){transition:border-color .35s,box-shadow .4s,transform .5s var(--club-motion-ease)}
#app-shell .podium-card:hover .card-image img{transform:none}
#app-shell :is(.segmented button,.period-tabs button,.gallery-filters button,.community-tabs button){transition:color .25s,background .25s,border-color .25s,box-shadow .3s}
#app-shell .text-button .arrow-icon,#app-shell .secondary .arrow-icon{transition:transform .4s var(--club-motion-ease)}
#app-shell .desktop-nav a{position:relative}
#app-shell .desktop-nav a::after{content:"";position:absolute;height:1px;left:0;right:0;bottom:-6px;background:#8aa58b;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--club-motion-ease)}
#app-shell .like-button{transition:color .2s,background .2s,transform .25s}
#app-shell .like-button.club-like-pop{animation:club-like-pop .45s var(--club-motion-ease)}
@keyframes club-like-pop{0%,100%{transform:scale(1)}35%{transform:scale(1.13)}}

@media(hover:hover) and (pointer:fine){
 #app-shell :is(.primary,.secondary,.avatar-button,.gallery-more):hover:not(:disabled),#sheet :is(.primary,.secondary):hover:not(:disabled){box-shadow:0 5px 18px #304b3810;transform:translateY(-1px)}
 #app-shell :is(.primary,.secondary,.avatar-button,.gallery-more):hover::before,#sheet :is(.primary,.secondary):hover::before{animation:club-sheen .85s ease-out}
 @keyframes club-sheen{0%{opacity:0;transform:translateX(-65%)}25%{opacity:.8}100%{opacity:0;transform:translateX(65%)}}
 #app-shell .podium-card:hover{border-color:#adbea5;box-shadow:inset 0 0 0 1px #b1c4a74d}
 #app-shell .social-card:hover{border-color:#b8c6af;box-shadow:0 12px 26px #354c3810;transform:translateY(-3px)}
 #community-page .discussion-card:hover{border-color:#c1cfda;box-shadow:0 7px 26px #415f740a}
 #app-shell .text-button:hover .arrow-icon,#app-shell .secondary:hover .arrow-icon{transform:translate(2px,-2px)}
 #app-shell .desktop-nav a:hover::after,#app-shell .desktop-nav a:focus-visible::after{transform:scaleX(1)}
}
@media(min-width:701px) and (prefers-reduced-motion:no-preference){
 #app-shell .community-invite.club-in-view::before{animation:club-drift 18s ease-in-out infinite alternate}
 @keyframes club-drift{from{transform:translateX(-4%) rotate(-22deg)}to{transform:translateX(6%) rotate(9deg)}}
}
@media(max-width:700px){
 #app-shell .invite-star::before{inset:-11px}
 #app-shell .invite-star::after{inset:-19px}
 #community-page>.page-title::before{inset:10% 0 0 0}
}
@media(prefers-reduced-motion:reduce){
 #app-shell *,#app-shell *::before,#app-shell *::after,#sheet *,#sheet *::before{animation:none!important;transition:none!important}
 .club-tap-light{display:none}
}

/* Angel Shield's chromatic edge refraction, confined to decorative surfaces.
   Mythic VPN's three-layer perimeter light keeps the original seven-second path. */
.club-liquid-panel{position:relative;isolation:isolate}
.club-liquid-edge{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden;padding:6px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:.27}
.club-liquid-reflection{position:absolute;inset:-14px;border-radius:inherit;background-color:#f2f4ea;background-image:var(--club-reflection-image);background-size:cover;background-position:60% 45%;filter:url(#club-edge-refraction);transform:scale(1.06)}
.club-liquid-panel>.club-border-orbit{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;overflow:hidden}
.club-border-orbit>svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.club-border-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.club-border-glow.tail{padding:2px;opacity:.15;filter:blur(4px);background:radial-gradient(circle 110px at var(--glow-x,15%) var(--glow-y,0%),#6887ab,transparent 85%)}
.club-border-glow.medium{padding:1.2px;opacity:.28;filter:blur(2px);background:radial-gradient(circle 75px at var(--glow-x,15%) var(--glow-y,0%),#94a5bf,transparent 85%)}
.club-border-glow.core{padding:.9px;opacity:.78;filter:drop-shadow(0 0 2px #d6edbe);background:radial-gradient(circle 35px at var(--glow-x,15%) var(--glow-y,0%),#789f7e 0,#b1bfd6 40%,transparent 88%)}
#sheet .feedback-card{border-radius:19px;border:2px solid transparent;background:linear-gradient(135deg,#fff,#fafbf7) padding-box,linear-gradient(135deg,#c1c8e4,#dae5d1 48%,#bfdde6) border-box;box-shadow:inset 0 1px 2px #fff}
#sheet .feedback-card>.feedback-heading{padding-bottom:20px}
#sheet .feedback-private{border-radius:99px;background:linear-gradient(135deg,#fff,#edf2e7);border:1px solid #dce6d4;border-top-color:#fff;box-shadow:inset 0 1px #fff;color:#426856}
#sheet .feedback-track>span{background:linear-gradient(90deg,#99b991,#c2cda3);transform-origin:left}
#sheet.club-auth-surface{background:linear-gradient(145deg,#fffffff5,#f7f9f2f5 66%,#f0f5f5f5);border:1px solid #ffffffd9;box-shadow:inset 0 1.5px 2px #fff,0 24px 100px #18352c2b;backdrop-filter:blur(32px)}
#sheet .auth-tabs{position:relative;isolation:isolate;display:flex;gap:4px;width:fit-content;max-width:100%;padding:5px;margin-bottom:25px;border:1px solid #596c5528;border-top-color:#ffffff;border-bottom-color:#596c5517;border-radius:9999px;background:linear-gradient(to top right,#ffffff08,#ffffffb3,#ffffff0a);backdrop-filter:blur(32px);box-shadow:inset 0 1px 0 #fff,0 3px 12px #384a2d04}
#sheet .auth-tabs>button{position:relative;z-index:1;border:0;border-radius:9999px;padding:10px 21px;background:transparent;font-size:12px;line-height:1.5;margin:0;transition:color .25s}
#sheet .auth-tabs>.club-liquid-edge{padding:3px;opacity:.18}
#sheet .club-auth-pill{position:absolute;pointer-events:none;left:0;top:5px;bottom:5px;border:1px solid #91a4821c;border-top-color:#fff;border-radius:9999px;background:linear-gradient(135deg,#e8eee1cf,#edf2eab0);box-shadow:inset 0 1px 1px #fff;z-index:0;transition:transform .45s cubic-bezier(.16,1.1,.3,1),width .45s cubic-bezier(.16,1.1,.3,1)}
#sheet .photo-input.club-liquid-panel:not(:has(>img)){border-radius:16px;border:1px solid #cdd9c4;border-top-color:#fff;background:linear-gradient(145deg,#f4f8ef,#ecf2e9 65%,#edf4f3);box-shadow:inset 0 1.5px 2px #fff,inset 0 -1px 2px #40512c0c}
#sheet .photo-input.club-liquid-panel:has(>img)>.club-liquid-edge,#sheet .photo-input.club-liquid-panel:has(>img)>.club-border-orbit{display:none}
#sheet .photo-input .plus{width:48px;height:48px;display:grid;place-items:center;border:1px solid #b3c5a647;border-top-color:#fff;border-radius:50%;background:linear-gradient(to top right,#fff8,#ffffffdf);box-shadow:inset 0 1px #fff,0 4px 13px #4c603309;color:#849d70}
#sheet .visibility-options label{background:linear-gradient(to top right,#fff,#f7f9f4);border-top-color:#ebefe6;transition:background .3s,border-color .3s,box-shadow .3s}
#sheet .visibility-options label:has(input:checked){background:linear-gradient(to top right,#eef4e6,#f9fbf5);border-color:#98b089;box-shadow:inset 0 1px #fff,0 3px 12px #3f573207}
#sheet .secondary{background:linear-gradient(to top right,#fff,#f2f5ee);border-color:#7d92734d;border-top-color:#fff;box-shadow:inset 0 1px 0 #fff}
@supports not (mask-composite:exclude){.club-liquid-edge,.club-border-orbit{display:none}}
@media(max-width:700px){
 .club-liquid-edge{padding:4px;opacity:.19}
 #sheet .feedback-card{border-radius:15px}
 #sheet .auth-tabs>button{padding:9px 17px;font-size:11px}
 .club-border-glow.tail{filter:none}
 .club-border-glow.medium{filter:none}
}
@media(prefers-reduced-motion:reduce){.club-border-glow{filter:none}.club-auth-pill{transition:none!important}}

/* The fourth reference's diagonal frame draw, used once in the personal space. */
#profile-page .member-card::after{content:"";position:absolute;inset:8px;border:1px solid #9fb39242;border-radius:3px;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
 #profile-page .member-card.club-in-view::after{animation:club-record-border-draw .9s cubic-bezier(.16,1,.3,1) both}
 @keyframes club-record-border-draw{from{opacity:0;clip-path:inset(0 100% 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
}

/* Keep touch scrolling on inexpensive, opaque surfaces; colour stays on the edge. */
@media(max-width:820px),(hover:none),(pointer:coarse){
 #sheet.club-auth-surface,#sheet .auth-tabs{backdrop-filter:none;-webkit-backdrop-filter:none}
 .club-liquid-reflection{filter:none;transform:none;background-image:linear-gradient(125deg,#bfc9e1,#e4ead8 48%,#c5dce4)}
 .club-border-orbit{display:none}
}