/* Risenoow brand mark and its loading animation.
 *
 * The symbol is five parts: a body square, a head, a tail, and two wings. The
 * loader is the mark assembling itself - the body lands with one wing centred on
 * it (the second is hidden exactly behind the first), holds a beat as a single
 * square, then opens: the head walks out to its corner carrying the big wing
 * with it while the small wing grows from the body.
 * When the mark is whole it holds, fades, and begins again.
 *
 * ON NAMING. Illustrator called the big outer wing "Lower_Wings" and the small
 * inner one "Upper_Wings", which is the opposite of how they read on screen.
 * They are called big and small here, after what you actually see.
 *
 * ON PIVOTS. This is the whole trick, and it is in the artwork rather than in
 * this file. The big wing's corner sits at exactly (413.35, 96.65), which is
 * the centre of the head; the small wing's corner sits at (255, 255), the
 * centre of the body. So each wing is scaled about the centre of the part it
 * belongs to, and the big wing carries the head's travel as well - which keeps
 * the two locked together for the whole move rather than merely ending up in
 * the right place.
 *
 * Everything animates transform and opacity only, so it stays on the compositor
 * and costs nothing while a page is waiting.
 */

/* ---------------------------------------------------------------- the mark */

.rn-logo,
.rn-symbol { display: block; }

.rn-logo { height: 28px; width: auto; }
.rn-symbol { height: 28px; width: 28px; }

/* -------------------------------------------------------------- the loader */

.rn-loader {
  display: inline-block;
  width: var(--rn-loader-size, 64px);
  height: var(--rn-loader-size, 64px);
  overflow: visible;
  /* The cycle ends by fading the finished mark rather than collapsing it. A
     collapse read as a stutter: the mark snapped back through its own build in
     a fraction of the time it took to make. */
  animation: rn-cycle var(--rn-loader-cycle, 2800ms) linear infinite;
}

.rn-loader [data-part] {
  transform-box: view-box;
  animation-duration: var(--rn-loader-cycle, 2800ms);
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.62, .02, .28, 1);
}

/* Body and small wing turn about the centre of the body. */
.rn-loader [data-part="body"],
.rn-loader [data-part="wing-small"] { transform-origin: 255px 255px; }

/* The big wing turns about the centre of the head, which is where its own
   corner is drawn - so it grows out of the head and travels with it. */
.rn-loader [data-part="wing-big"] { transform-origin: 413.35px 96.65px; }

/* Head and tail are each the same size as the body and exactly one body away,
   so sitting them on it hides them completely - same shape, same colour, same
   place. Nothing fades in; they walk out of the square that was holding them. */
.rn-loader [data-part="head"],
.rn-loader [data-part="tail"] { transform-origin: center; }

.rn-loader [data-part="body"]       { animation-name: rn-body; }
.rn-loader [data-part="head"]       { animation-name: rn-head; }
.rn-loader [data-part="tail"]       { animation-name: rn-tail; }
.rn-loader [data-part="wing-big"]   { animation-name: rn-wing-big; }
.rn-loader [data-part="wing-small"] { animation-name: rn-wing-small; }

/*   0%  nothing
     9%  the body has landed, the head and tail hidden inside it
    14%  a single wing has appeared, centred in the square - the small wing is
         there too, hidden exactly behind the big one
  14-26% it holds as one square
    26%  it opens: the head and the big wing move out together, the wing growing
         about the head's centre the whole way
    30%  the small wing starts growing from the body's centre
    62%  head, tail and big wing have arrived
    66%  the small wing finishes - the mark is whole
  66-84% it holds
  84-96% it fades
   100%  empty, ready to begin again                                          */

@keyframes rn-cycle {
  0%, 84%   { opacity: 1; }
  96%, 100% { opacity: 0; }
}

@keyframes rn-body {
  0%       { opacity: 0; transform: scale(.86); }
  9%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes rn-head {
  0%        { opacity: 0; transform: translate(-158.4px, 158.3px) scale(.86); }
  9%, 26%   { opacity: 1; transform: translate(-158.4px, 158.3px) scale(1); }
  62%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes rn-tail {
  0%        { opacity: 0; transform: translate(158.3px, -158.4px) scale(.86); }
  9%, 26%   { opacity: 1; transform: translate(158.3px, -158.4px) scale(1); }
  62%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* One wing at the start, centred in the square.
 *
 * Both wings begin at the SAME scale, which is what makes the small one vanish:
 * the two are the same shape with the same arm thickness and the small one's
 * arms are shorter, so at equal scale it sits entirely inside the big one. Same
 * colour too, so what you see is a single wing.
 *
 * Each wing grows from its own corner, which leaves its shape hanging off to one
 * side of that corner rather than sitting around it. The extra translate below
 * is exactly the offset that puts the shape's middle on the middle of the body -
 * (+41.17, -41.17) for the big wing, (+20.53, -20.63) for the small - and it
 * unwinds to zero as the wing grows, so both finish in their true positions.
 */

@keyframes rn-wing-big {
  /* Carries the head's travel as well as its own growth, so the two stay joined
     the whole way rather than merely ending up in the right place. */
  0%, 8%    { opacity: 0; transform: translate(-117.23px, 117.13px) scale(.26); }
  14%, 26%  { opacity: 1; transform: translate(-117.23px, 117.13px) scale(.26); }
  62%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes rn-wing-small {
  0%, 8%    { opacity: 0; transform: translate(20.53px, -20.63px) scale(.26); }
  14%, 30%  { opacity: 1; transform: translate(20.53px, -20.63px) scale(.26); }
  66%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* A loader is the one thing a person cannot navigate away from, so motion
   sensitivity matters more here than anywhere. The mark stays whole and
   breathes instead. */
@media (prefers-reduced-motion: reduce) {
  .rn-loader { animation: rn-breathe 2s ease-in-out infinite; }
  .rn-loader [data-part] { animation: none; opacity: 1; transform: none; }
  @keyframes rn-breathe {
    0%, 100% { opacity: .45; }
    50%      { opacity: 1; }
  }
}

/* ------------------------------------------------------- placing a loader */

/* Centred over whatever it is waiting on. */
.rn-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 160px;
  text-align: center;
}

.rn-loading__label {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--hn-text-soft, #8fa0b6);
}