/* Animated رفاق القرآن logo — landing page only. */

.rq-logo {
  --rq-width: 360px;
  --rq-speed: 0.7;
  --rq-sprite: url("../images/rq-sprite.ba9fb54bba6b.webp");
  position: relative;
  width: var(--rq-width);
  max-width: 100%;
  aspect-ratio: 1055 / 1600;
  perspective: 1400px;
  user-select: none;
  -webkit-user-select: none;
  contain: layout paint;
}

/* The book: two pages opening around the spine. */
.rq-book {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  opacity: 0;
  transform: rotateX(52deg) translateY(4%) scale(0.86);
}
.rq-page { position: absolute; backface-visibility: hidden; }
.rq-pl {
  left: 16.872%; top: 51.375%; width: 33.934%; height: 19.5%;
  transform-origin: 99.441% 50%;
  transform: rotateY(-84deg);
}
.rq-pr {
  left: 50.427%; top: 51.375%; width: 33.27%; height: 19.312%;
  transform-origin: 0.57% 50%;
  transform: rotateY(84deg);
}

/* The branches: one image revealed by a growing mask. */
.rq-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rq-svg .gp path { stroke-dasharray: 1; stroke-dashoffset: 1; visibility: hidden; }

/* Leaves, sparks and lettering are cut out of one sprite sheet — only
   transform and opacity move, so the GPU carries the animation. */
.rq-p {
  position: absolute;
  display: block;
  background-image: var(--rq-sprite);
  background-repeat: no-repeat;
  opacity: 0;
  will-change: transform, opacity;
}
.rq-lf { transform: scale(0.06); }
.rq-lg { transform: none; }
.rq-sp { transform: scale(0.55); }
.rq-tw1, .rq-tw2 { transform: translateY(1.2%); }

.rq-logo.is-playing .rq-book {
  animation: rq-lay calc(0.72s * var(--rq-speed)) cubic-bezier(.24, .9, .3, 1) .04s both;
}
.rq-logo.is-playing .rq-pl {
  animation: rq-open-l calc(0.72s * var(--rq-speed)) cubic-bezier(.3, .85, .28, 1) .1s both;
}
.rq-logo.is-playing .rq-pr {
  animation: rq-open-r calc(0.72s * var(--rq-speed)) cubic-bezier(.3, .85, .28, 1) .1s both;
}
.rq-logo.is-playing .gp path {
  animation: rq-draw calc(var(--u) * var(--rq-speed)) linear
             calc(var(--d) * var(--rq-speed)) forwards;
}
.rq-logo.is-playing .rq-lf {
  animation: rq-unfurl calc(.44s * var(--rq-speed)) cubic-bezier(.24, .86, .3, 1)
             calc(var(--d) * var(--rq-speed)) both;
}
.rq-logo.is-playing .rq-lg {
  animation: rq-emerge calc(.6s * var(--rq-speed)) cubic-bezier(.3, .7, .35, 1)
             calc(var(--d) * var(--rq-speed)) both;
}
.rq-logo.is-playing .rq-sp {
  animation: rq-spark calc(.5s * var(--rq-speed)) ease-out
             calc(var(--d) * var(--rq-speed)) both;
}
.rq-logo.is-playing .rq-tw1, .rq-logo.is-playing .rq-tw2 {
  animation: rq-word calc(.46s * var(--rq-speed)) cubic-bezier(.22, .9, .3, 1)
             calc(var(--d) * var(--rq-speed)) both;
}

@keyframes rq-lay {
  from { opacity: 0; transform: rotateX(52deg) translateY(4%) scale(.86); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: rotateX(0deg) translateY(0) scale(1); }
}
@keyframes rq-open-l { from { transform: rotateY(-84deg); } to { transform: rotateY(0deg); } }
@keyframes rq-open-r { from { transform: rotateY(84deg); }  to { transform: rotateY(0deg); } }
@keyframes rq-draw {
  from { visibility: visible; stroke-dashoffset: 1; }
  to   { visibility: visible; stroke-dashoffset: 0; }
}
@keyframes rq-unfurl {
  from { opacity: 0; transform: scale(.06) rotate(-14deg); }
  50%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes rq-emerge {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rq-spark {
  0%   { opacity: 0; transform: scale(.55) rotate(-18deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes rq-word {
  from { opacity: 0; transform: translateY(1.2%); }
  to   { opacity: 1; transform: translateY(0); }
}

.rq-logo.is-done .rq-p { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .rq-logo .rq-book { opacity: 1; transform: none; }
  .rq-logo .rq-pl, .rq-logo .rq-pr { transform: none; }
  .rq-logo .gp path { visibility: visible; stroke-dashoffset: 0; }
  .rq-logo .rq-p { opacity: 1; transform: none; }
  .rq-logo.is-playing * { animation: none !important; }
}