/* Beauty Booking — rose mark, assembling animation.
   Transparent background, plays once and holds the finished logo.
   Total 4s. No JS. Scale it by setting a width on .bb-rose. */

.bb-rose {
  position: relative;
  width: 320px;
  aspect-ratio: 1 / 1;
  /* nothing paints a background here on purpose — the mark is transparent */
}
.bb-rose__frame { position: absolute; inset: 0; }
.bb-rose__pw { position: absolute; inset: 0; will-change: transform; }
.bb-rose__p { position: absolute; display: block; will-change: transform, opacity; }
.bb-rose__glint {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  mix-blend-mode: screen;
  background-image: linear-gradient(100deg,
    rgba(255,240,200,0) 34%, rgba(255,246,214,.55) 44%,
    rgba(255,255,252,1) 50%, rgba(255,246,214,.55) 56%, rgba(255,240,200,0) 66%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: url("img/rose.png"); mask-image: url("img/rose.png");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: bb-glint 4s linear both;
}
@keyframes bb-glint {
  0%, 57.500% { opacity: 0; background-position: -80% 0; }
  59.000% { opacity: 1; }
  77.500% { opacity: 1; }
  80.000%, 100% { opacity: 0; background-position: 180% 0; }
}

.bb-rose__pw--1 { animation: bb-pw-1 4s cubic-bezier(.165,.84,.44,1) both; }
.bb-rose__p--1 {
  left: 2.734%; top: 7.227%; width: 44.336%; height: 38.086%;
  animation: bb-pi-1 4s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes bb-pw-1 {
  0%, 1.250% { transform: translate(-17.00%, -60.14%); }
  22.500%, 100% { transform: translate(0, 0); }
}
@keyframes bb-pi-1 {
  0%, 1.250% { opacity: 0; transform: rotate(-26deg) scale(.74); }
  11.750% { opacity: 1; }
  25.000%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

.bb-rose__pw--9 { animation: bb-pw-9 4s cubic-bezier(.165,.84,.44,1) both; }
.bb-rose__p--9 {
  left: 79.199%; top: 32.422%; width: 17.969%; height: 44.531%;
  animation: bb-pi-9 4s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes bb-pw-9 {
  0%, 2.700% { transform: translate(45.52%, 42.83%); }
  23.950%, 100% { transform: translate(0, 0); }
}
@keyframes bb-pi-9 {
  0%, 2.700% { opacity: 0; transform: rotate(30deg) scale(.74); }
  13.200% { opacity: 1; }
  26.450%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

.bb-rose__pw--10 { animation: bb-pw-10 4s cubic-bezier(.165,.84,.44,1) both; }
.bb-rose__p--10 {
  left: 3.418%; top: 37.109%; width: 26.563%; height: 44.141%;
  animation: bb-pi-10 4s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes bb-pw-10 {
  0%, 4.150% { transform: translate(-59.26%, -19.87%); }
  25.400%, 100% { transform: translate(0, 0); }
}
@keyframes bb-pi-10 {
  0%, 4.150% { opacity: 0; transform: rotate(-26deg) scale(.74); }
  14.650% { opacity: 1; }
  27.900%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

.bb-rose__pw--11 { animation: bb-pw-11 4s cubic-bezier(.165,.84,.44,1) both; }
.bb-rose__p--11 {
  left: 33.789%; top: 71.973%; width: 43.262%; height: 21.387%;
  animation: bb-pi-11 4s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes bb-pw-11 {
  0%, 5.600% { transform: translate(-24.00%, 57.71%); }
  26.850%, 100% { transform: translate(0, 0); }
}
@keyframes bb-pi-11 {
  0%, 5.600% { opacity: 0; transform: rotate(30deg) scale(.74); }
  16.100% { opacity: 1; }
  29.350%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

.bb-rose__pw--0 { animation: bb-pw-0 4s cubic-bezier(.165,.84,.44,1) both; }
.bb-rose__p--0 {
  left: 30.078%; top: 6.641%; width: 41.309%; height: 40.527%;
  animation: bb-pi-0 4s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes bb-pw-0 {
  0%, 7.050% { transform: translate(20.52%, -59.04%); }
  28.300%, 100% { transform: translate(0, 0); }
}
@keyframes bb-pi-0 {
  0%, 7.050% { opacity: 0; transform: rotate(-26deg) scale(.74); }
  17.550% { opacity: 1; }
  30.800%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

.bb-rose__pw--2 { animation: bb-pw-2 4s cubic-bezier(.165,.84,.44,1) both; }
.bb-rose__p--2 {
  left: 53.32%; top: 18.457%; width: 19.141%; height: 13.379%;
  animation: bb-pi-2 4s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes bb-pw-2 {
  0%, 8.500% { transform: translate(48.74%, -39.13%); }
  29.750%, 100% { transform: translate(0, 0); }
}
@keyframes bb-pi-2 {
  0%, 8.500% { opacity: 0; transform: rotate(30deg) scale(.74); }
  19.000% { opacity: 1; }
  32.250%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

.bb-rose__pw--7 { animation: bb-pw-7 4s cubic-bezier(.165,.84,.44,1) both; }
.bb-rose__p--7 {
  left: 67.871%; top: 26.172%; width: 9.863%; height: 12.109%;
  animation: bb-pi-7 4s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes bb-pw-7 {
  0%, 9.950% { transform: translate(62.09%, -7.16%); }
  31.200%, 100% { transform: translate(0, 0); }
}
@keyframes bb-pi-7 {
  0%, 9.950% { opacity: 0; transform: rotate(-26deg) scale(.74); }
  20.450% { opacity: 1; }
  33.700%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

.bb-rose__pw--5 { animation: bb-pw-5 4s cubic-bezier(.165,.84,.44,1) both; }
.bb-rose__p--5 {
  left: 61.523%; top: 24.414%; width: 11.426%; height: 11.719%;
  animation: bb-pi-5 4s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes bb-pw-5 {
  0%, 11.400% { transform: translate(57.24%, -25.09%); }
  32.650%, 100% { transform: translate(0, 0); }
}
@keyframes bb-pi-5 {
  0%, 11.400% { opacity: 0; transform: rotate(30deg) scale(.74); }
  21.900% { opacity: 1; }
  35.150%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

.bb-rose__pw--4 { animation: bb-pw-4 4s cubic-bezier(.165,.84,.44,1) both; }
.bb-rose__p--4 {
  left: 58.301%; top: 22.656%; width: 28.809%; height: 33.984%;
  animation: bb-pi-4 4s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes bb-pw-4 {
  0%, 12.850% { transform: translate(59.73%, 18.41%); }
  34.100%, 100% { transform: translate(0, 0); }
}
@keyframes bb-pi-4 {
  0%, 12.850% { opacity: 0; transform: rotate(-26deg) scale(.74); }
  23.350% { opacity: 1; }
  36.600%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

.bb-rose__pw--8 { animation: bb-pw-8 4s cubic-bezier(.165,.84,.44,1) both; }
.bb-rose__p--8 {
  left: 54.785%; top: 28.613%; width: 19.336%; height: 15.723%;
  animation: bb-pi-8 4s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes bb-pw-8 {
  0%, 14.300% { transform: translate(59.95%, -17.68%); }
  35.550%, 100% { transform: translate(0, 0); }
}
@keyframes bb-pi-8 {
  0%, 14.300% { opacity: 0; transform: rotate(30deg) scale(.74); }
  24.800% { opacity: 1; }
  38.050%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

.bb-rose__pw--3 { animation: bb-pw-3 4s cubic-bezier(.165,.84,.44,1) both; }
.bb-rose__p--3 {
  left: 40.234%; top: 19.531%; width: 17.09%; height: 35.547%;
  animation: bb-pi-3 4s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes bb-pw-3 {
  0%, 15.750% { transform: translate(25.37%, -57.12%); }
  37.000%, 100% { transform: translate(0, 0); }
}
@keyframes bb-pi-3 {
  0%, 15.750% { opacity: 0; transform: rotate(-26deg) scale(.74); }
  26.250% { opacity: 1; }
  39.500%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

.bb-rose__pw--6 { animation: bb-pw-6 4s cubic-bezier(.165,.84,.44,1) both; }
.bb-rose__p--6 {
  left: 23.438%; top: 25.684%; width: 60.84%; height: 46.094%;
  animation: bb-pi-6 4s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes bb-pw-6 {
  0%, 17.200% { transform: translate(-50.45%, 36.89%); }
  38.450%, 100% { transform: translate(0, 0); }
}
@keyframes bb-pi-6 {
  0%, 17.200% { opacity: 0; transform: rotate(30deg) scale(.74); }
  27.700% { opacity: 1; }
  40.950%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bb-rose__pw, .bb-rose__p, .bb-rose__glint { animation: none !important; }
  .bb-rose__pw { transform: none; }
  .bb-rose__p { opacity: 1; transform: none; }
  .bb-rose__glint { opacity: 0; }
}