/* V2.3 · Glass and moving reflected light, limited to the portal CTA and profile banner. */
@property --portal-orbit {
  syntax: '<angle>';
  inherits: false;
  initial-value: 18deg;
}
@property --profile-orbit {
  syntax: '<angle>';
  inherits: false;
  initial-value: 210deg;
}
.portal-entry-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 56px;
  border: 1px solid #e5faffd9;
  border-radius: 20px;
  color: #194f76;
  background:
    radial-gradient(ellipse at 16% 0, #ffffffea 0, #fff0 49%),
    linear-gradient(115deg, #c4ecfa 0%, #a1dafa 44%, #b8e6fb 76%, #d6effa 100%);
  box-shadow:
    inset 0 1px 1px #fff,
    inset 0 -3px 6px #6eafcc38,
    inset 0 0 16px #effdffb8,
    0 7px 17px #5aa6ca30,
    0 1px 2px #7fa9c829;
  text-shadow: 0 1px 0 #ffffffb3;
  letter-spacing: .6px;
  transition: transform .30s cubic-bezier(.2,.95,.3,1.5), box-shadow .32s, filter .32s;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.portal-entry-button::before,
.portal-entry-button::after,
:is(.fp-profile-banner, .fp-profile-top)::before,
:is(.fp-profile-banner, .fp-profile-top)::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.portal-entry-button::before {
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--portal-orbit),
    #eafaff18 0deg, #d8f7ff35 34deg, #fff 64deg, #f2fcff 72deg,
    #a0cce659 103deg, #e7edff22 145deg, #d6d2eb7d 181deg,
    #fff 207deg, #fff5dba8 220deg, #e4f8ff16 275deg, #d6f3ffb3 335deg, #eafaff18 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: portal-border-orbit 10.7s linear infinite;
  opacity: .98;
}
.portal-entry-button::after {
  inset: -90% -70%;
  background:
    radial-gradient(ellipse at 48% 50%, #fff9 0, #ffffff55 5%, #fff0 19%),
    linear-gradient(105deg, #fff0 43%, #ffffff45 49%, #fff0 55%);
  transform: translateX(-30%) rotate(-12deg);
  opacity: .38;
  animation: portal-glass-reflection 8.9s cubic-bezier(.35,0,.16,1) -2.4s infinite;
  mix-blend-mode: screen;
}
.portal-entry-button > * { position: relative; z-index: 1; }
.portal-entry-button:hover {
  filter: brightness(1.035);
  box-shadow: inset 0 1px 2px #fff, inset 0 -2px 5px #7fb6d130, inset 0 0 20px #f3ffffdb, 0 9px 23px #71b4d746, 0 0 14px #efffff9c;
}
.portal-entry-button:active {
  transform: translateY(1px) scale(.974);
  filter: brightness(1.05);
  box-shadow: inset 0 2px 6px #77adcb40, inset 0 0 12px #fff9, 0 2px 7px #71a9c526;
}
.portal-entry-button:focus-visible { outline: 3px solid #76b1d4; outline-offset: 4px; }
.portal-entry-button:disabled { animation: none; }
.portal-entry-button:disabled::before,
.portal-entry-button:disabled::after { animation-play-state: paused; }

:is(.fp-profile-banner, .fp-profile-top) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #fffffff0;
  background:
    radial-gradient(ellipse at 7% 3%, #fff 0, #fff0 60%),
    radial-gradient(ellipse at 103% 115%, #d4e5f3a6 0, #edf2ff00 56%),
    linear-gradient(120deg, #e2f6ffed, #f3fcffed 47%, #d8f0f9de);
  box-shadow: inset 0 1px 1px #fff, inset 0 -2px 6px #9ccce522, 0 6px 20px #8abbd12e, 0 1px 3px #ffffffad;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
:is(.fp-profile-banner, .fp-profile-top) > * { position: relative; z-index: 1; }
:is(.fp-profile-banner, .fp-profile-top)::before {
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--profile-orbit), #fff1 0deg, #a3c8df92 37deg, #fff 66deg, #fff2 108deg, #ddd5e885 180deg, #fff 220deg, #d7eef929 267deg, #a8d5e5b0 319deg, #fff1 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: profile-border-orbit 16.3s linear -5s infinite;
}
:is(.fp-profile-banner, .fp-profile-top)::after {
  inset: -60% -30%;
  z-index: 0;
  background: linear-gradient(117deg, #fff0 33%, #ffffff96 46%, #fff0 59%);
  transform: translateX(-38%);
  animation: profile-glass-reflection 13.7s cubic-bezier(.33,0,.2,1) -4s infinite;
  opacity: .43;
}
@keyframes portal-border-orbit {
  0% { --portal-orbit: 18deg; }
  17% { --portal-orbit: 42deg; }
  37% { --portal-orbit: 149deg; }
  59% { --portal-orbit: 190deg; }
  76% { --portal-orbit: 296deg; }
  100% { --portal-orbit: 378deg; }
}
@keyframes portal-glass-reflection {
  0%, 9% { transform: translateX(-29%) rotate(-12deg); opacity: .12; }
  38% { opacity: .39; }
  61%, 100% { transform: translateX(34%) rotate(-12deg); opacity: .10; }
}
@keyframes profile-border-orbit {
  0% { --profile-orbit: 210deg; }
  22% { --profile-orbit: 264deg; }
  43% { --profile-orbit: 387deg; }
  78% { --profile-orbit: 448deg; }
  100% { --profile-orbit: 570deg; }
}
@keyframes profile-glass-reflection {
  0%, 17% { transform: translateX(-38%); }
  70%, 100% { transform: translateX(39%); }
}
@media (prefers-reduced-motion: reduce) {
  .portal-entry-button,
  .portal-entry-button::before,
  .portal-entry-button::after,
  :is(.fp-profile-banner, .fp-profile-top)::before,
  :is(.fp-profile-banner, .fp-profile-top)::after { animation: none !important; transition: none !important; }
  .portal-entry-button::after { transform: translateX(8%) rotate(-12deg); opacity: .18; }
  :is(.fp-profile-banner, .fp-profile-top)::after { transform: translateX(4%); opacity: .25; }
  .portal-entry-button:active { transform: none; }
}