/* Supplied ShinyButton: local Apple font, BilimX purple, shared by HTML and React. */
@property --shiny-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --shiny-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --shiny-percent { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --shiny-shine { syntax: "<color>"; initial-value: #ffffff; inherits: false; }

.shiny-cta { display: inline-flex; }
.shiny-cta:is(a, button) {
  --shiny-bg: #070711;
  --shiny-edge: #292437;
  --shiny-highlight: #bf5af2;
  --shiny-highlight-soft: #dfbdff;
  --shiny-duration: 3s;
  --shiny-transition: 800ms cubic-bezier(.25, 1, .5, 1);
  isolation: isolate;
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 57px;
  padding: 18px 26px;
  border: 1px solid transparent;
  border-radius: 360px;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
  outline-offset: 4px;
  background: linear-gradient(var(--shiny-bg), var(--shiny-bg)) padding-box,
    conic-gradient(from calc(var(--shiny-angle) - var(--shiny-offset)),
      transparent, var(--shiny-highlight) var(--shiny-percent),
      var(--shiny-shine) calc(var(--shiny-percent) * 2),
      var(--shiny-highlight) calc(var(--shiny-percent) * 3),
      transparent calc(var(--shiny-percent) * 4)) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-edge);
  transform: none;
  transition: --shiny-offset var(--shiny-transition), --shiny-percent var(--shiny-transition),
    --shiny-shine var(--shiny-transition);
  animation: shiny-angle var(--shiny-duration) linear infinite;
}
.shiny-cta:is(a, button):hover { transform: none; text-decoration: none; }
.shiny-cta:is(a, button):active { transform: none; translate: 0 1px; }
.shiny-cta:focus-visible { outline: 2px solid #dfbdff; }
.shiny-cta:disabled { opacity: .5; cursor: not-allowed; }
.shiny-cta.shiny-cta--secondary { --shiny-highlight: #9c83d8; --shiny-highlight-soft: #d5c5ff; }
.shiny-cta:is(a, button).shiny-cta--small { min-height: 44px; padding: 12px 19px; font-size: 11px; }

.shiny-cta::before, .shiny-cta::after, .shiny-label::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  pointer-events: none;
  z-index: -1;
}
/* A travelling band reveals the fine dotted texture. */
.shiny-cta::before {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: inherit;
  background: radial-gradient(circle at 2px 2px, white .5px, transparent 0) padding-box;
  background-size: 4px 4px;
  background-repeat: space;
  mask-image: conic-gradient(from calc(var(--shiny-angle) + 45deg), black, transparent 10% 90%, black);
  opacity: .4;
  animation: shiny-angle var(--shiny-duration) linear infinite;
}
/* Reflection stays inside the pill, behind the label. */
.shiny-cta::after {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--shiny-highlight), transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: .6;
  animation: shiny-shimmer var(--shiny-duration) linear infinite;
}
.shiny-cta > .shiny-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  z-index: 1;
  font: inherit;
  line-height: inherit;
}
.shiny-label::before {
  width: calc(100% + 1rem);
  height: calc(100% + 1rem);
  border-radius: inherit;
  box-shadow: inset 0 -1ex 2rem 4px var(--shiny-highlight);
  opacity: 0;
  transition: opacity var(--shiny-transition);
  animation: shiny-breathe calc(var(--shiny-duration) * 1.5) linear infinite;
}
.shiny-label > [aria-hidden="true"] { font-size: 19px; line-height: 1; flex: none; }
.shiny-cta--small .shiny-label { gap: 11px; }
.shiny-cta:is(:hover, :focus-visible):not(:disabled) {
  --shiny-percent: 20%;
  --shiny-offset: 95deg;
  --shiny-shine: var(--shiny-highlight-soft);
}
.shiny-cta:is(:hover, :focus-visible):not(:disabled) > .shiny-label::before { opacity: 1; }

/* JS marks visible controls; the site's existing motion switch governs the effect. */
body[data-shiny-motion="managed"] .shiny-cta,
body[data-shiny-motion="managed"] .shiny-cta::before,
body[data-shiny-motion="managed"] .shiny-cta::after,
body[data-shiny-motion="managed"] .shiny-label::before { animation-play-state: paused; }
body.motion-on .shiny-cta.shiny-in-view,
body.motion-on .shiny-cta.shiny-in-view::before,
body.motion-on .shiny-cta.shiny-in-view::after,
body.motion-on .shiny-cta.shiny-in-view > .shiny-label::before { animation-play-state: running; }
body.viewer-open .shiny-cta, body.viewer-open .shiny-cta::before,
body.viewer-open .shiny-cta::after, body.viewer-open .shiny-label::before,
html[data-shiny-hidden="true"] .shiny-cta,
html[data-shiny-hidden="true"] .shiny-cta::before,
html[data-shiny-hidden="true"] .shiny-cta::after,
html[data-shiny-hidden="true"] .shiny-label::before { animation-play-state: paused !important; }

.start-action { gap: 18px; }
.portal-actions { gap: 14px; }
@media (max-width: 640px) {
  .hero-actions .shiny-cta { font-size: 11px; min-height: 49px; padding: 14px 17px; }
  .hero-actions .shiny-label { gap: 9px; }
  .start-action { gap: 12px; }
  .start-action .shiny-cta { width: 100%; font-size: 11px; min-height: 51px; padding-inline: 15px; }
  .portal-actions { gap: 12px; }
  .portal-actions .shiny-cta { font-size: 12px; min-height: 51px; }
  .main-nav .mobile-portal-entry.shiny-cta { justify-content: center; margin-top: 12px; padding: 15px 20px; }
}
@media (max-width: 360px) {
  .hero-actions .shiny-cta { font-size: 10px; padding-inline: 13px; }
  .hero-actions .shiny-label { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .shiny-cta, .shiny-cta::before, .shiny-cta::after, .shiny-label::before { animation: none !important; transition: none !important; }
  .shiny-cta:is(a, button):active { translate: none; }
}
@keyframes shiny-angle { to { --shiny-angle: 360deg; } }
@keyframes shiny-shimmer { to { rotate: 360deg; } }
@keyframes shiny-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.2; } }