@property --login-main-angle { syntax:'<angle>'; initial-value:40deg; inherits:false; }

.home-cta-link {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:13px;
  min-height:80px;
  padding:15px;
  margin-top:24px;
  border:1px solid #a87c32;
  border-radius:17px;
  background:
    radial-gradient(ellipse at 5% 0%,#e0a83c24,transparent 65%),
    repeating-linear-gradient(115deg,#ffe9b704 0 1px,transparent 1px 5px),
    linear-gradient(115deg,#251d10,#10141a 58%,#201a10);
  box-shadow:inset 0 1px #ffe9b52b,inset 0 -1px #0009,0 3px 0 #080a0e,0 10px 24px #0005,0 0 22px #c4902010;
  color:#fff0cd;
  text-decoration:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;
  animation:home-cta-arrive .6s cubic-bezier(.2,.8,.2,1) backwards;
}

.home-cta-rim {
  position:absolute;
  inset:-1px;
  z-index:0;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--login-main-angle),#8e591845, #dca63870 28%,#ffdc88 43%,#fff9dc 47%,#e7b3419c 52%,#8e591845 65%);
  -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,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
  animation:home-cta-orbit 8s linear infinite;
}
.home-cta-sheen {
  position:absolute;
  z-index:0;
  top:-100%;
  left:-90%;
  width:70%;
  height:300%;
  background:linear-gradient(110deg,transparent 34%,#ffe9b509 44%,#fff1c521 50%,#ffe9b509 56%,transparent 66%);
  pointer-events:none;
  transform:translateX(-30%) skewX(-18deg);
  animation:home-cta-sweep 8s ease-in-out infinite;
}

.home-cta-mark {
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:none;
  margin-bottom:3px;
  border:1px solid #ffeebc8c;
  border-radius:13px;
  background:linear-gradient(145deg,#fff0c1,#e5b650 38%,#bb7c21 76%,#dfaa43);
  box-shadow:inset 1px 1px #fff8dcaf,inset -1px -2px #69401078,0 4px 0 #51330f,0 8px 12px #0007;
  color:#30200a;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .2s;
}
.home-cta-mark>svg { filter:drop-shadow(0 1px #fff4cb88); }
.home-cta-glint { position:absolute; top:1px; right:5px; width:12px; height:2px; border-radius:50%; background:linear-gradient(90deg,transparent,#fffce8,transparent); box-shadow:0 0 6px #fff0bc; opacity:.5; transform:rotate(-35deg); animation:home-cta-glint 8s ease-in-out infinite; }

.home-cta-copy { position:relative; z-index:1; min-width:0; flex:1; }
.home-cta-copy strong { display:block; color:#fff0ca; font-size:15px; font-weight:750; line-height:1.5; letter-spacing:-.01em; text-shadow:0 1px 5px #0008; }
.home-cta-copy>span { display:block; margin-top:3px; color:#c6b795; font-size:11px; line-height:1.6; }
.home-cta-launch { position:relative; z-index:1; display:grid; place-items:center; overflow:hidden; flex:none; width:34px; height:34px; border:1px solid #c99e5159; border-radius:50%; background:linear-gradient(145deg,#f5cd7317,#94601310); box-shadow:inset 0 1px #ffedb81c; transition:border-color .3s,background .3s; }
.home-cta-arrow,.home-cta-nextArrow { position:absolute; color:#f4dca5; transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .25s; }
.home-cta-nextArrow { opacity:0; transform:translate(-28px,28px); }

.home-cta-link:is(:hover,:focus-visible) { border-color:#f0ca78; box-shadow:inset 0 1px #fff0c346,inset 0 -1px #0009,0 4px 0 #080a0e,0 15px 28px #0006,0 0 30px #dfa72c26; transform:translateY(-2px); }
.home-cta-link:is(:hover,:focus-visible) .home-cta-mark { transform:translateY(-1px) rotate(-4deg); }
.home-cta-link:is(:hover,:focus-visible) .home-cta-launch { border-color:#f4d48e; background:#d9a6351f; }
.home-cta-link:is(:hover,:focus-visible) .home-cta-arrow { transform:translate(28px,-28px); opacity:0; }
.home-cta-link:is(:hover,:focus-visible) .home-cta-nextArrow { transform:translate(0,0); opacity:1; }
.home-cta-link:active { transform:translateY(1px) scale(.992); box-shadow:inset 0 1px #ffe7ad20,inset 0 2px 8px #0003,0 1px 0 #080a0e,0 5px 12px #0005; }
.home-cta-link:active .home-cta-mark { transform:translateY(2px); box-shadow:inset 1px 1px #fff8dc88,inset -1px -2px #69401078,0 1px 0 #51330f,0 3px 7px #0005; }
.home-cta-link:focus-visible { outline:2px solid #ffdf91; outline-offset:4px; }

@keyframes home-cta-arrive { from { opacity:0; transform:translateY(7px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes home-cta-orbit { to { --login-main-angle:400deg; } }
@keyframes home-cta-sweep { 0%,48% { transform:translateX(-30%) skewX(-18deg); } 80%,100% { transform:translateX(330%) skewX(-18deg); } }
@keyframes home-cta-glint { 0%,45%,100% { opacity:.35; } 63% { opacity:1; } }

@media(max-width:380px) { .home-cta-link { padding:13px; gap:10px; } .home-cta-mark { width:40px; height:40px; border-radius:12px; } .home-cta-launch { width:30px; height:30px; } .home-cta-copy strong { font-size:14px; } }
@media(prefers-reduced-motion:reduce) {
  .home-cta-link,.home-cta-link * { animation:none!important; transition:none!important; }
  .home-cta-link:is(:hover,:focus-visible),.home-cta-link:active,.home-cta-link:is(:hover,:focus-visible) .home-cta-mark,.home-cta-link:active .home-cta-mark { transform:none; }
  .home-cta-link:is(:hover,:focus-visible) .home-cta-arrow { transform:none; opacity:1; }
  .home-cta-link:is(:hover,:focus-visible) .home-cta-nextArrow { opacity:0; }
}
