/* =========================================================
   MATAPPLY SHOWROOM — ANIMATION CONTROLS
   ========================================================= */

   #animationControls
   {
       position: absolute;
   
       right: 20%;
       bottom: 70px;
   
       /* transform: translateX(-50%); */
   
       width: 250px;
   
       padding: 12px 14px;
   
       background:
           rgba(4, 8, 15, 0.72);
   
       border:
           1px solid
           rgba(255, 255, 255, 0.09);
   
       border-radius: 6px;
   
       backdrop-filter: blur(12px);
   
       box-shadow:
           0 10px 30px
           rgba(0, 0, 0, 0.22);
   
       z-index: 15;
   
       pointer-events: auto;
   
       box-sizing: border-box;
   }
   
   
   /* =========================================================
      TITLE
      ========================================================= */
   
   .animationTitle
   {
       margin-bottom: 9px;
   
       color: #4baee8;
   
       font-size: 8px;
   
       font-weight: 700;
   
       letter-spacing: 1.7px;
   
       text-align: center;
   }
   
   
   /* =========================================================
      BUTTONS
      ========================================================= */
   
   .animationButtons
   {
       display: flex;
   
       justify-content: center;
   
       gap: 5px;
   
       margin-bottom: 10px;
   }
   
   
   .animationButtons button
   {
       width: 30px;
       height: 26px;
   
       padding: 0;
   
       border:
           1px solid
           rgba(255, 255, 255, 0.08);
   
       border-radius: 4px;
   
       background:
           rgba(255, 255, 255, 0.035);
   
       color: #8798aa;
   
       font-size: 11px;
   
       cursor: pointer;
   
       transition:
           color 0.2s,
           background 0.2s,
           border 0.2s;
   }
   
   
   .animationButtons button:hover:not(:disabled)
   {
       color: #ffffff;
   
       background:
           rgba(40, 130, 200, 0.14);
   
       border-color:
           rgba(70, 180, 255, 0.30);
   }
   
   
   .animationButtons button:disabled
   {
       opacity: 0.30;
   
       cursor: default;
   }
   
   
   /* =========================================================
      SPEED
      ========================================================= */
   
   .animationSpeed
   {
       display: flex;
   
       align-items: center;
   
       gap: 8px;
   
       width: 100%;
   }
   
   
   .animationSpeed > span:first-child
   {
       flex-shrink: 0;
   
       color: #59677b;
   
       font-size: 7px;
   
       letter-spacing: 1.2px;
   }
   
   
   .animationSpeed input
   {
       flex: 1;
   
       min-width: 0;
   
       height: 3px;
   
       margin: 0;
   
       cursor: pointer;
   }
   
   
   #animationSpeedValue
   {
       width: 28px;
   
       flex-shrink: 0;
   
       color: #8fa7bd;
   
       font-size: 8px;
   
       text-align: right;
   }
   
   
   /* =========================================================
      PROGRESS
      ========================================================= */
   
   .animationProgress
   {
       display: flex;
   
       justify-content: center;
   
       align-items: center;
   
       gap: 4px;
   
       margin-top: 9px;
   
       color: #566579;
   
       font-size: 8px;
   
       letter-spacing: 0.5px;
   }
   
   
   #animationTime,
   #animationDuration
   {
       color: #8fa7bd;
   
       font-variant-numeric: tabular-nums;
   }
   
   
   /* =========================================================
      RESPONSIVE
      ========================================================= */
   
   @media (max-width: 800px)
   {
       #animationControls
       {
           bottom: 115px;
   
           width: 230px;
   
           padding: 10px 12px;
       }
   }
   
   
   @media (max-width: 500px)
   {
       #animationControls
       {
           left: 50%;
   
           bottom: 85px;
   
           width: 205px;
   
           padding: 9px 10px;
       }
   
       .animationButtons button
       {
           width: 28px;
           height: 24px;
       }
   }