
.close__ways{ position:relative; isolation:isolate; background:transparent; gap:0; padding:1.5px; border-radius:24px; overflow:hidden; }
.close__ways::before{ content:""; position:absolute; inset:-60%; z-index:-2;
  background:conic-gradient(from 0deg, transparent 0 62%, rgba(var(--accent-lt-rgb),.0) 64%, rgba(var(--accent-lt-rgb),.95) 72%, #fff 74%, rgba(var(--accent-lt-rgb),.0) 80%, transparent 82%);
  animation:cwspin 7s linear infinite; }
.close__ways::after{ content:""; position:absolute; inset:1.5px; z-index:-1; border-radius:22.5px; background:rgba(var(--deep-rgb),.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
@keyframes cwspin{ to{ transform:rotate(360deg) } }
.close__ways a{ position:relative; overflow:hidden; background:transparent; padding:1.6rem 1.1rem 1.35rem;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), background .35s; }
.close__ways a + a{ box-shadow:inset 1px 0 0 rgba(255,255,255,.14); }
.close__ways a::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(var(--accent-lt-rgb),.28), transparent 70%); }
.close__ways a:hover::before, .close__ways a:focus-visible::before{ opacity:1; }
.close__ways a:hover{ background:rgba(255,255,255,.04); }
.close__ways a:focus-visible{ outline:2px solid var(--accent-lt); outline-offset:-4px; }
.close__ways svg{ width:46px; height:46px; padding:12px; border-radius:16px; box-sizing:border-box;
  background:rgba(var(--accent-lt-rgb),.14); box-shadow:0 0 0 1px rgba(var(--accent-lt-rgb),.25); transition:transform .5s cubic-bezier(.3,1.6,.5,1), background .3s; }
.close__ways a:hover svg{ transform:translateY(-4px) scale(1.08); background:rgba(var(--accent-lt-rgb),.26); }
.close__ways b{ font-size:1.02rem; margin-top:.1rem; overflow-wrap:anywhere; }
.cw__go{ display:inline-flex !important; align-items:center; gap:.4rem; margin-top:.75rem; font-size:.7rem !important; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-lt) !important; opacity:.0; transform:translateY(8px); transition:opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1), gap .3s; }
.cw__go::after{ content:"\2192"; font-size:.95rem; letter-spacing:0; }
.close__ways a:hover .cw__go, .close__ways a:focus-visible .cw__go{ opacity:1; transform:none; gap:.65rem; }
@media (hover:none){ .cw__go{ opacity:.9; transform:none; } }
.cw__live{ display:inline-flex !important; align-items:center; gap:.45rem; margin:.55rem auto 0; padding:.28rem .7rem; border-radius:999px; width:max-content; max-width:100%;
  font-size:.7rem !important; font-weight:800; color:#fff !important; background:rgba(95,169,134,.22); box-shadow:0 0 0 1px rgba(95,169,134,.45); }
.cw__live i{ width:7px; height:7px; border-radius:50%; background:#6FCF97; animation:cwping 2s infinite; }
.cw__live.shut{ background:rgba(227,160,106,.18); box-shadow:0 0 0 1px rgba(227,160,106,.4); }
.cw__live.shut i{ background:var(--warm); animation:none; }
@keyframes cwping{ 0%{ box-shadow:0 0 0 0 rgba(111,207,151,.7) } 70%{ box-shadow:0 0 0 8px rgba(111,207,151,0) } 100%{ box-shadow:0 0 0 0 rgba(111,207,151,0) } }
/* each icon does its own thing */
.close__ways.in a:nth-child(1) svg{ animation:cwdrop 1s .25s cubic-bezier(.3,1.5,.5,1) both; }
.close__ways a:nth-child(1):hover svg path{ animation:cwbob 1s ease-in-out infinite; transform-origin:12px 22px; }
@keyframes cwdrop{ 0%{ transform:translateY(-26px); opacity:0 } 60%{ opacity:1 } 100%{ transform:none; opacity:1 } }
@keyframes cwbob{ 50%{ transform:translateY(-2px) } }
.close__ways.in a:nth-child(2) svg{ animation:cwring 4.5s 1.2s ease-in-out infinite; }
.close__ways a:nth-child(2):hover svg{ animation:cwring 1.1s ease-in-out infinite; }
@keyframes cwring{ 0%,14%,100%{ rotate:0deg } 2%,6%,10%{ rotate:-14deg } 4%,8%,12%{ rotate:14deg } }
.close__ways a:nth-child(3) svg path{ transform-origin:12px 7px; transition:transform .45s cubic-bezier(.3,1.5,.5,1); }
.close__ways a:nth-child(3):hover svg path{ transform:scaleY(-1); }
/* rise in, one after another */
.js .close__ways a{ opacity:0; transform:translateY(22px); }
.close__ways.in a{ opacity:1; transform:none; transition:opacity .7s, transform .8s cubic-bezier(.2,.8,.2,1), background .35s; }
.close__ways.in a:nth-child(2){ transition-delay:.12s; }
.close__ways.in a:nth-child(3){ transition-delay:.24s; }
@media (max-width:860px){ .close__ways a + a{ box-shadow:inset 0 1px 0 rgba(255,255,255,.14); } }
@media (prefers-reduced-motion:reduce){
  .close__ways::before{ animation:none; }
  .close__ways svg, .close__ways svg path, .cw__live i{ animation:none !important; }
  .js .close__ways a{ opacity:1; transform:none; }
}
