/* Join page (join.html): the "Now recruiting" call to action that leads to the Recruitment page (recruit.html).
   A banner with a running border of light, a pulsing badge, a bright squared button with a sweeping sheen and corner
   brackets, two recruitment plates fanned on the right, and twinkling stars. Still for reduced motion. */
@property --rcta-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes rcta-spin { to { --rcta-a: 360deg; } }
@keyframes rcta-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 120, 200, .75); } 70% { box-shadow: 0 0 0 12px rgba(255, 120, 200, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 120, 200, 0); } }
@keyframes rcta-sheen { 0% { background-position: -140% 0, 0 0; } 45%, 100% { background-position: 240% 0, 0 0; } }
@keyframes rcta-glow { 0%, 100% { box-shadow: inset 0 1px 0 #fff, inset 0 -8px 14px rgba(46, 6, 110, .45), 0 0 18px rgba(190, 140, 255, .9), 0 0 40px rgba(150, 80, 255, .55); }
  50% { box-shadow: inset 0 1px 0 #fff, inset 0 -8px 14px rgba(46, 6, 110, .45), 0 0 26px rgba(220, 180, 255, 1), 0 0 70px rgba(150, 80, 255, .8); } }
@keyframes rcta-twinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
@keyframes rcta-float { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-8px) rotate(var(--r)); } }
@keyframes rcta-word { 0%, 100% { text-shadow: 0 0 18px rgba(255, 140, 210, .7), 0 0 40px rgba(166, 107, 255, .6); } 50% { text-shadow: 0 0 28px rgba(255, 170, 225, 1), 0 0 70px rgba(166, 107, 255, .9); } }

.rcta { position: relative; margin: 6px 0 46px; border-radius: 6px; padding: 2px; isolation: isolate; }
/* the running border of light */
.rcta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--rcta-a), #4b2386, #a66bff, #fff, #ff8ed0, #a66bff, #4b2386 40%, #2a1450 60%, #a66bff 85%, #4b2386);
  animation: rcta-spin 6s linear infinite; }
.rcta::after { content: ""; position: absolute; inset: -18px; z-index: -2; border-radius: 20px; pointer-events: none;
  background: radial-gradient(60% 80% at 30% 50%, rgba(166, 107, 255, .35), transparent 70%), radial-gradient(40% 60% at 85% 40%, rgba(255, 120, 200, .2), transparent 70%);
  filter: blur(10px); }

.rcta-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 24px;
  min-height: 330px; padding: 34px 38px; border-radius: 5px; overflow: hidden;
  background:
    linear-gradient(90deg, rgba(10, 5, 20, .96) 0%, rgba(14, 7, 28, .88) 48%, rgba(14, 7, 28, .55) 100%),
    url("../img/art/chronicle-world-wrapped.webp") center / cover no-repeat, #0b0616; }
.rcta-body { position: relative; z-index: 2; }
.rcta-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 6px 12px 6px 10px; border-radius: 2px;
  border: 1px solid rgba(255, 160, 215, .6); background: rgba(80, 10, 50, .45);
  font: 900 .72rem/1 var(--serif-display); letter-spacing: .26em; text-transform: uppercase; color: #ffd3ec; }
.rcta-pulse { width: 9px; height: 9px; border-radius: 50%; background: #ff7ac6; box-shadow: 0 0 10px #ff7ac6; animation: rcta-pulse 1.8s ease-out infinite; }
.rcta h2 { margin: 0 0 12px; font-size: clamp(2.1rem, 1.2rem + 3vw, 3.4rem); line-height: 1.02; color: #fff; }
.rcta h2 em { font-style: normal; color: #ffd6f0; animation: rcta-word 2.6s ease-in-out infinite; }
.rcta-body > p { margin: 0 0 16px; max-width: 34em; font-size: 1.12rem; color: var(--bone); }
.rcta-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.rcta-tags li { padding: 6px 11px; border-radius: 2px; border: 1px solid rgba(214, 180, 106, .5); background: rgba(17, 8, 30, .7);
  font: 900 .68rem/1.3 var(--serif-display); letter-spacing: .16em; text-transform: uppercase; color: #f4e6c4; }
.rcta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* the bright squared button: sheen, breathing glow, corner brackets */
.rcta-btn { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, .9); color: #fff; text-decoration: none;
  font: 900 1rem/1 var(--serif-display); letter-spacing: .18em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(40, 4, 90, .85);
  background:
    linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .6) 48%, rgba(255, 255, 255, .15) 54%, transparent 64%) -140% 0 / 55% 100% no-repeat,
    linear-gradient(180deg, #f3e8ff 0%, #cfa6ff 14%, #a466ff 46%, #7b34f0 78%, #5a1cc8 100%);
  animation: rcta-sheen 3s cubic-bezier(.45, 0, .3, 1) infinite, rcta-glow 2.6s ease-in-out infinite;
  transition: transform .25s cubic-bezier(.2, 1.3, .4, 1); }
.rcta-btn::before, .rcta-btn::after { content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid #fff; pointer-events: none;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #c9a2ff); transition: transform .3s cubic-bezier(.2, 1.3, .4, 1); }
.rcta-btn::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.rcta-btn::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
.rcta-btn:hover, .rcta-btn:focus-visible { transform: translateY(-2px) scale(1.03); color: #fff; outline: none; }
.rcta-btn:hover::before, .rcta-btn:focus-visible::before { transform: translate(-4px, -4px); }
.rcta-btn:hover::after, .rcta-btn:focus-visible::after { transform: translate(4px, 4px); }
.rcta-btn span { font-family: var(--serif-body); letter-spacing: 0; transition: transform .25s; }
.rcta-btn:hover span { transform: translateX(4px); }
.rcta-link { color: var(--venom); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(201, 162, 255, .45); text-underline-offset: 4px; }
.rcta-link:hover { color: #fff; }

/* two plates fanned on the right */
.rcta-plates { position: relative; z-index: 1; height: 270px; }
.rcta-plates img { position: absolute; top: 10px; width: 46%; max-width: 180px; aspect-ratio: 330 / 466; object-fit: cover; border-radius: 4px;
  border: 1px solid rgba(214, 180, 106, .6); box-shadow: 0 0 0 3px rgba(17, 8, 30, .9), 0 18px 40px -10px rgba(0, 0, 0, .85), 0 0 34px rgba(166, 107, 255, .45);
  animation: rcta-float 6s ease-in-out infinite; }
.rcta-plates img:first-child { --r: -7deg; left: 14%; }
.rcta-plates img:last-child { --r: 6deg; left: 46%; top: 26px; animation-delay: -3s; }

/* twinkling stars */
.rcta-stars { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rcta-stars i { position: absolute; width: 14px; height: 14px; background: #fff; opacity: 0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 4px #fff); animation: rcta-twinkle 2.8s ease-in-out infinite; }
.rcta-stars i:nth-child(1) { left: 58%; top: 12%; animation-delay: 0s; }
.rcta-stars i:nth-child(2) { left: 92%; top: 22%; animation-delay: .7s; width: 10px; height: 10px; background: #ffd6f0; }
.rcta-stars i:nth-child(3) { left: 70%; top: 84%; animation-delay: 1.3s; }
.rcta-stars i:nth-child(4) { left: 96%; top: 70%; animation-delay: 2s; width: 9px; height: 9px; background: #e0c4ff; }
.rcta-stars i:nth-child(5) { left: 40%; top: 8%; animation-delay: 1.7s; width: 8px; height: 8px; }
.rcta-stars i:nth-child(6) { left: 84%; top: 50%; animation-delay: .4s; width: 11px; height: 11px; background: #ffe9b0; }
.rcta-stars i:nth-child(7) { left: 3%; top: 88%; animation-delay: 2.3s; width: 9px; height: 9px; background: #e0c4ff; }

@media (max-width: 760px) {
  .rcta-card { grid-template-columns: 1fr; padding: 26px 20px 28px; min-height: 0;
    background: linear-gradient(180deg, rgba(14, 7, 28, .7) 0%, rgba(10, 5, 20, .95) 45%), url("../img/art/chronicle-world-wrapped.webp") center top / auto 200px no-repeat, #0b0616; }
  .rcta-plates { display: none; }
  .rcta-btn { width: 100%; justify-content: center; padding: 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .rcta::before, .rcta-pulse, .rcta h2 em, .rcta-btn, .rcta-plates img, .rcta-stars i { animation: none; }
  .rcta-plates img { transform: rotate(var(--r)); }
  .rcta-stars { display: none; }
}