/*
 * Return Ready — homepage hero animation (v2)
 * Clean replacement for the previous home-animation.css.
 * Everything is scoped to .rr-anim except the one hero-grid rule below,
 * which is carried over unchanged from the previous file so the homepage
 * layout between 801px and 1100px stays exactly as it is today.
 *
 * Without JavaScript (or before it runs) the panel shows the final,
 * fully readable composition.
 */

/* Preserved from the previous home-animation.css — homepage layout, not the graphic. */
@media (max-width:1100px) and (min-width:801px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 25px; }
}

.rr-anim {
  --rr-pad: 24px;
  --rr-navy: #172544;
  --rr-navy-deep: #101c36;
  --rr-lavender: #dedcf0;
  --rr-mint: #cde8dc;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  max-width: 550px;
  height: 450px;
  justify-self: center;
  overflow: hidden;
  border-radius: 70px 26px 70px 26px;
  color: #fff;
  font-family: "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(120% 85% at 78% 4%, #3d5277 0%, rgba(40, 58, 90, 0) 58%),
    radial-gradient(90% 70% at 10% 100%, #0d1830 0%, rgba(13, 24, 48, 0) 70%),
    linear-gradient(160deg, #22365a 0%, #172a4a 48%, #111f3c 100%);
  box-shadow: 0 34px 60px -26px rgba(16, 28, 54, .55), 0 10px 22px -12px rgba(16, 28, 54, .25);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.rr-anim *, .rr-anim *::before, .rr-anim *::after { box-sizing: border-box; }

/* Fine dot field for depth, fading towards the edges. */
.rr-anim::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .085) 1px, transparent 1.3px);
  background-size: 18px 18px;
  background-position: 9px 9px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 52%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 52%, #000 25%, transparent 78%);
  pointer-events: none;
}
/* Hairline inner edge. */
.rr-anim::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .06);
  pointer-events: none;
}

.rr-anim p { margin: 0; }

/* Ambient light */
.rr-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(178, 168, 236, .30) 0%, rgba(140, 138, 214, .12) 38%, rgba(120, 120, 200, 0) 70%);
  opacity: .55;
  transform: translate3d(110px, 80px, 0) scale(.75);
  pointer-events: none;
  will-change: transform, opacity;
}

/* Line layer (rings, connections, spine) */
.rr-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.rr-l-broken { stroke: #d6cff2; stroke-width: 1; stroke-dasharray: 2 5; stroke-linecap: round; }
.rr-l-spoke  { stroke: #dedcf0; stroke-width: 1; stroke-linecap: round; }
.rr-l-ring1  { fill: none; stroke: rgba(222, 220, 240, .62); stroke-width: 1.2; }
.rr-l-ring2  { fill: none; stroke: rgba(222, 220, 240, .26); stroke-width: 1; stroke-dasharray: 1 7; stroke-linecap: round; }
.rr-l-core   { fill: #dedcf0; }
.rr-l-spine  { stroke: rgba(222, 220, 240, .26); stroke-width: 1; }

/* Heading */
.rr-heading {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #d9c8e1;
}

/* Return Ready lockup (final position; the script moves it in from the centre) */
.rr-lockup {
  position: absolute;
  left: var(--rr-pad);
  right: var(--rr-pad);
  top: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 3;
  pointer-events: none;
}
.rr-mark-slot {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
}
/* Static mark for the no-script state; drawn in SVG when animated. */
.rr-anim:not(.is-js) .rr-mark-slot::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1.2px solid rgba(222, 220, 240, .62);
  background: radial-gradient(circle, #dedcf0 0 3.6px, transparent 4px);
}
.rr-wordmark { will-change: transform; }
.rr-title {
  font-size: 23px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: #fff;
  white-space: nowrap;
  display: inline-block;
}
.rr-tagline {
  margin-top: 5px !important;
  font-size: 10px;
  letter-spacing: .04em;
  color: #cfc6de;
  white-space: nowrap;
}

/* Final ordered list (real content for all users) */
.rr-rows {
  position: absolute;
  left: var(--rr-pad);
  right: var(--rr-pad);
  top: 128px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  z-index: 1;
}
.rr-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 5px 12px 5px 0;
  margin: 0;
}
.rr-row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 22px;
  right: 0;
  z-index: -1;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  opacity: var(--rr-bg, 1);
}
.rr-slot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 44px;
  height: 44px;
}
.rr-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rr-clip { display: block; overflow: hidden; line-height: 1.25; }
.rr-clip strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .005em;
  color: #fff;
  will-change: transform;
}
.rr-benefit {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: #d3dbe9;
}
.rr-tick {
  flex: none;
  width: 20px;
  height: 20px;
  display: block;
}
.rr-tick svg { display: block; width: 20px; height: 20px; }
.rr-tick circle { fill: var(--rr-mint); }
.rr-tick path {
  fill: none;
  stroke: #1f4a37;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* Participant tiles */
.rr-tile {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 58%, rgba(255, 255, 255, .03) 100%),
    #2a3c5c;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .17),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 16px 28px -14px rgba(4, 9, 24, .75),
    0 3px 8px -4px rgba(4, 9, 24, .5);
}
.rr-tile svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #f3ebf5;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rr-tile--logo img { display: block; width: 40px; height: auto; }
.rr-tile--static { width: 44px; height: 44px; border-radius: 14px; }
.rr-tile--static svg { width: 21px; height: 21px; }
.rr-tile--static.rr-tile--logo img { width: 34px; }
.rr-anim.is-js .rr-tile--static { visibility: hidden; }

/* Moving stage (animation only) */
.rr-stage {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.rr-anim.is-js .rr-stage { display: block; }
.rr-node {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  opacity: 0;
  will-change: transform, opacity;
}
.rr-ping {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(222, 220, 240, .7), 0 0 18px rgba(200, 192, 240, .25);
  opacity: 0;
}
.rr-chip {
  position: absolute;
  left: 50%;
  top: 62px;
  padding: 5px 11px 6px;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  color: #fff;
  transform: translateX(-50%);
  transform-origin: 50% 0;
}
.rr-chip-bg {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(15, 26, 51, .78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 10px 20px -10px rgba(0, 0, 0, .6);
  opacity: 0;
}
.rr-chip-text { position: relative; opacity: 0; }

/* Footer and controls */
.rr-footer {
  position: absolute;
  left: var(--rr-pad);
  right: var(--rr-pad);
  bottom: 20px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
}
.rr-closing { font-size: 10.5px; color: #ccd4e3; }
.rr-controls { display: flex; gap: 6px; margin-left: auto; }
.rr-anim:not(.is-js) .rr-controls { display: none; }
.rr-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  color: #eee6f0;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.rr-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
.rr-btn:focus-visible { outline: 2px solid var(--rr-lavender); outline-offset: 2px; }
.rr-btn[hidden] { display: none; }

/* Small screens */
@media (max-width: 380px) {
  .rr-anim { --rr-pad: 16px; }
  .rr-row { gap: 12px; padding-right: 10px; }
  .rr-clip strong { font-size: 12px; }
  .rr-benefit { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .rr-anim *, .rr-anim *::before, .rr-anim *::after { transition: none !important; animation: none !important; }
}