/* The Rakuel Is Back ad (components/isback-ad.js): three cards fanned out next to a "play the
   tutorial" pitch. Also needs /components/fx.css (.fx-panel, .fx-glow). The host page sets its
   margins. */
rk-isback-ad {
  --fx-base: rgba(22,27,34,0.72);
  position: relative;
  display: grid;
  /* The cards + text group sits in the middle of the panel; the text lines start at one left edge. */
  /* The fan column holds the whole hover spread: the outer cards' top corners swing out ~179px
     either side of its centre, so 334px lets them reach ~12px into the panel's padding on the left
     (~17px to the box edge) and the text (334px + gap) starts ~32px clear on the right. */
  grid-template-columns: 334px minmax(0, max-content);
  justify-content: center;
  text-align: left;
  gap: 1.6rem 2.75rem;
  align-items: center;
  padding: 1.8rem 1.8rem 1.9rem;
  border-radius: 20px;
  border: 1px solid rgba(0,255,204,0.35);
  box-shadow: 0 0 0 1px rgba(0,255,204,0.08), 0 20px 60px rgba(0,0,0,0.45), 0 0 60px rgba(0,255,204,0.12);
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
}
.rk-ad-fan { position: relative; height: 250px; }
.rk-ad-card, .rk-ad-emoji {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 128px;
  aspect-ratio: 563 / 776;
  margin: -88px 0 0 -64px;
  border-radius: 9px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.6);
  transform-origin: 50% 120%;
  transition: transform 0.35s cubic-bezier(.2,1.3,.4,1);
}
.rk-ad-emoji { display: grid; place-items: center; font-size: 3.4rem; background: #161b22; border: 1px solid #30363d; }
.rk-ad-fan-0 { transform: rotate(-16deg) translateX(-22px); }
.rk-ad-fan-1 { transform: translateY(-10px); z-index: 1; }
.rk-ad-fan-2 { transform: rotate(16deg) translateX(22px); }
rk-isback-ad:hover .rk-ad-fan-0 { transform: rotate(-24deg) translateX(-38px); }
rk-isback-ad:hover .rk-ad-fan-1 { transform: translateY(-22px) scale(1.04); }
rk-isback-ad:hover .rk-ad-fan-2 { transform: rotate(24deg) translateX(38px); }

.rk-ad-kicker {
  display: inline-block;
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00ffcc;
}
.rk-ad-title { font-size: clamp(1.35rem, 3.6vw, 1.75rem); font-weight: 700; line-height: 1.2; margin: 0.25rem 0 0.6rem; color: #fff; }
.rk-ad-time { color: #e6edf3; font-size: 1rem; margin: 0 0 1.1rem; }
.rk-ad-time strong { color: #f0c040; }
.rk-ad-btn {
  display: flex;
  width: fit-content; /* left-aligned with the text; centred on phones (below) */
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.7rem;
  border-radius: 12px;
  font-size: 1.08rem;
  font-weight: 800;
  color: #0d1117;
  text-decoration: none;
  background: linear-gradient(135deg, #00ffcc, #3fb9ff);
  box-shadow: 0 8px 26px rgba(0,255,204,0.35);
  animation: rk-ad-pulse 2.4s ease-in-out infinite;
  transition: transform 0.15s, box-shadow 0.15s;
}
.rk-ad-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 34px rgba(0,255,204,0.5); }
@keyframes rk-ad-pulse { 0%, 100% { box-shadow: 0 8px 26px rgba(0,255,204,0.35), 0 0 0 0 rgba(0,255,204,0.45); } 50% { box-shadow: 0 8px 26px rgba(0,255,204,0.35), 0 0 0 12px rgba(0,255,204,0); } }

@media (max-width: 640px) {
  rk-isback-ad { grid-template-columns: 1fr; text-align: center; padding: 1.4rem 1.1rem 1.6rem; }
  .rk-ad-btn { margin: 0 auto; }
  .rk-ad-fan { height: 210px; }
  .rk-ad-card, .rk-ad-emoji { width: 108px; margin: -74px 0 0 -54px; }
}

@media (prefers-reduced-motion: reduce) {
  .rk-ad-btn { animation: none; }
}